Scenes
Zoom Pan Frame
Deterministic zoom and pan media frame.
Sceneblocks
Install
npx remotion-ui@latest add zoom-pan-frameUse frame-driven zooms for screenshots and product walkthrough clips.
Live preview
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add zoom-pan-frameImport after install
@/remotion/scenes/zoom-pan-frame- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: src, toScale, durationInFrames, 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 { ZoomPanFrame } from "@/remotion/scenes/zoom-pan-frame";
<ZoomPanFrame src={staticFile("screenshot.png")} toScale={1.25} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src* | string | — | Image source. |
| toScale | number | 1.24 | Final zoom scale. |
| durationInFrames | number | 90 | Zoom duration. |