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, blurPeak the blur at full
displacement, and 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 | 18 | Blur radius in px at full displacement. |
| direction | "in" | "out" | "in" | Push the camera through the frame, or pull back from it. |
| variant | "linear" | "spring" | "editorial" | "spring" | Timing curve. |