emocn

Whip Pan

Whip the camera sideways with motion blur so both scenes fly through the frame in one move

Installation

$ pnpm dlx shadcn@latest add @remocn/whip-pan

Usage

whipPan() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. Both scenes travel in the same direction as one continuous camera whip — blur and a subtle smear stretch peak at maximum velocity mid-transition and hide the seam. It lives on speed: keep it around 26 frames.

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { whipPan } from "@/components/remocn/whip-pan";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 26 })}
      presentation={whipPan()}
    />
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Props

whipPan(props) accepts:

PropTypeDefaultDescription
direction
string"left"Direction the camera whips. One of left, right, up, down.
blur
number24Peak motion blur in pixels at maximum velocity.

Smoke Dissolve

Expand a smoke ring outward across the frame to reveal the next scene

Push Through

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