Zoom Through
The camera pushes through one scene and lands in the next.
PrimitiveTransitionsAdvanced
$ npx remotion-ui@latest add zoom-throughBoth scenes travel the same way through the lens: the outgoing one keeps pushing past it, blurring as it goes, while the incoming one arrives out of the same move and settles at exactly 1×, no residual scale is left on the scene once the cut is over.
maxScale is how far the camera travels and blurPeak the blur at the fastest
point of the move. It rides a velocity envelope, so it is exactly 0 at both
ends of the overlap and reaches blurPeak at the midpoint, and the blurred
layer is overscanned so its soft edge never exposes the background.
direction: "out" inverts the move so the camera pulls back from the frame
instead of driving through it.
Exports transitionZoomThrough() and getTransitionZoomThroughDuration() 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/zoom-through- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, maxScale, blurPeak, direction, 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 { transitionZoomThrough } from "@/remotion/primitives/zoom-through";
<TransitionSeries.Transition {...transitionZoomThrough({ maxScale: 2.4 })} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 20 | Transition overlap length. |
| maxScale | number | 2.4 | Scale the camera travels through. |
| blurPeak | number | 8 | Blur radius in px at the fastest point of the move. |
| direction | "in" | "out" | "in" | Push the camera through the frame, or pull back from it. |
| variant | "linear" | "spring" | "editorial" | "editorial" | Timing curve. |