Device Mockup Zoom
Cinematic laptop, phone, or browser mockup with staged UI and slow camera pullback.
SceneMaps & deviceAdvanced
device-mockup-zoom30fps · 960×540
Install
$ npx remotion-ui@latest add device-mockup-zoomDevice mockup scene with a physical laptop shell by default, plus phone and browser variants. Pass src or children to replace the default staged app screen; add title and subtitle only when the shot needs a caption.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/device-mockup-zoom- Use when: map scenes, routes, markers, and spatial storytelling.
- Customize: src, title, subtitle, eyebrow, 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 { DeviceMockupZoom } from "@/remotion/scenes/device-mockup-zoom";
<DeviceMockupZoom src={staticFile("app.png")} device="laptop" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | - | Optional screen content image. When omitted, the scene renders a polished product dashboard mockup. |
| title | string | - | Optional headline. When omitted, the device remains the sole focal point. |
| subtitle | string | - | Optional supporting line under the headline. |
| eyebrow | string | - | Optional accent label above the headline. |
| device | "phone" | "browser" | "laptop" | "laptop" | Mockup shell. Laptop includes a physical base, browser renders chrome only, phone renders a handheld frame. |
| children | React.ReactNode | - | Custom screen content rendered inside the device. |