Push Through

Dolly through the outgoing scene while the next one approaches from the depth

Installation

$ pnpm dlx shadcn@latest add @remocn/push-through

Usage

pushThrough() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. The camera pushes forward: the outgoing scene accelerates past the lens, blurring as it grows to zoom, while the incoming scene scales up from the depth with a small overshoot settle. Around 40 frames keeps the dolly readable.

tsx

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { pushThrough } from "@/components/remocn/push-through";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={76}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 40 })}
      presentation={pushThrough()}
    />
    <TransitionSeries.Sequence durationInFrames={76}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Props

pushThrough(props) accepts:

Prop	Type	Default
zoom	number2.4 How far the outgoing scene grows past the camera.
blur	number14 Peak blur in pixels as scenes pass the focal plane.

zoomnumber
How far the outgoing scene grows past the camera.
Default2.4
blurnumber
Peak blur in pixels as scenes pass the focal plane.
Default14