Zoom Pan Frame
A camera move on a still, driven by focal points rather than pixel offsets.
SceneScenes
zoom-pan-frame30fps · 960×540
Install
$ npx remotion-ui@latest add zoom-pan-framefrom and to are focal points — { x, y, scale } with x/y in 0–1 across
the frame — so the framing lands on the subject at whatever size the composition
is, instead of guessing pixel offsets per aspect.
The move spans the composition minus a short settle by default, which is what
keeps it reading as camera work rather than a jump cut. label adds a chip that
rises once the move lands.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/zoom-pan-frame- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: src, from, to, moveInFrames, 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
Example
import { ZoomPanFrame } from "@/remotion/scenes/zoom-pan-frame";
<ZoomPanFrame src={staticFile("screenshot.png")} to={{ x: 0.38, y: 0.4, scale: 1.2 }} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src* | string | - | Image or video source. |
| from | FocalPoint | - | Where the move starts: { x, y, scale } with x/y in 0–1. |
| to | FocalPoint | - | Where the move lands. Defaults to a centred 1.24 push. |
| moveInFrames | number | - | Length of the move. Defaults to the composition minus a short settle. |
| label | string | - | Chip that rises once the move lands. |
| vignette | number | 0.34 | Corner darkening; 0 turns it off. |
| fit | "cover" | "contain" | "cover" | Media object-fit behaviour. |
| theme | "dark" | "light" | "dark" | Surface palette. |