Whip Pan
A fast pan between scenes with directional motion blur along the travel axis.
PrimitiveTransitions
$ npx remotion-ui@latest add transition-whip-panBoth scenes travel locked edge to edge — travel below 1 leaves a strip of
background between them — and the blur is directional. filter: blur() is
isotropic and smears the frame across the axis it is not moving on, which
reads as out-of-focus rather than as speed, so this uses an SVG
feGaussianBlur with a single-axis deviation instead.
A blurred layer has soft, part-transparent edges and the seam between the two scenes sits inside the frame for the whole cut, so each layer is grown past its own edges by roughly 3σ. That overscan is sized against the short axis: a uniform scale driven by the width under-covers the short side of a 16:9 frame and bites a transparent corner mid-cut.
punch front-loads the move into the middle of the window — 1 is the house
ease and reads as a push. The shaping curve is exact at both ends by
construction, so a settled scene carries neither offset nor filter.
Exports transitionWhipPan() and getTransitionWhipPanDuration() for use with
TransitionSeries.Transition.
Requires @remotion/transitions. Run npx remotion add @remotion/transitions if not already installed.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/transition-whip-pan- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, direction, blur, travel, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { transitionWhipPan } from "@/remotion/primitives/transition-whip-pan";
<TransitionSeries.Transition {...transitionWhipPan({ direction: "from-left", blur: 26 })} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 14 | Transition overlap length. A whip is short by definition. |
| direction | "from-left" | "from-right" | "from-top" | "from-bottom" | "from-left" | Side the next scene arrives from. |
| blur | number | 26 | Peak blur in px along the travel axis, at the fastest point. |
| travel | number | 1 | Share of the frame each scene travels. Below 1 shows background between them. |
| punch | number | 2.2 | How hard the move is front-loaded into the middle. 1 is the house ease and reads as a push. |
| variant | "linear" | "spring" | "editorial" | "editorial" | Timing curve. |