Device Mockup 3D
Laptop product shot in real 3D. The lid opens, then the camera turns and pushes in over a lit floor.
Scene3DAdvanced
$ npx remotion-ui@latest add device-mockup-3dA modelled laptop (hinged lid, black glass bezel with a camera dot, keyboard and trackpad) lit by a studio environment built on the spot. It settles onto a lit floor as the lid opens, then turns and pushes in. A slow drift runs under the whole shot, so the last frame is still moving rather than parked.
The glass over the screen only adds reflection, so your screenshot is never dimmed: the streaks come from fixed studio lights and slide across as the laptop turns. The shadow falls on a lit pool rather than straight onto the backdrop, where a dark shadow would disappear.
Pass src with a bright screenshot: a dark UI still reads, but a mostly black
image turns the screen into a slab. The screen takes the image's own ratio unless
you set screenAspect. The shot paces itself to the composition length; 4–6
seconds suits it.
Render with --gl=angle. Motion comes from the frame only and the screen image
loads behind delayRender, so the same frame renders to identical pixels every
time.
For a CSS mockup with a staged UI and no WebGL, use device-mockup-zoom.
A lit WebGL scene on @remotion/three; render with --gl=angle. The shot paces itself to the composition length: the laptop settles as the lid opens, then turns and pushes in, with a slow drift under both so the last frame never parks. Deterministic by construction: motion comes only from useCurrentFrame(), the screen image loads behind delayRender, and the environment is built from Lightformers instead of a CDN HDRI. For a CSS mockup with staged UI and no WebGL, use device-mockup-zoom.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/device-mockup-3d- Use when: 3D product shots and WebGL scenes rendered frame by frame.
- Customize: src, screenAspect, backgroundColor, glowColor, 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 { staticFile } from "remotion";
import { DeviceMockup3D } from "@/remotion/scenes/device-mockup-3d";
// Render with --gl=angle
<DeviceMockup3D src={staticFile("app.png")} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | hosted demo screenshot | Screenshot on the screen. A bright UI reads best; a mostly black image reads as a slab. |
| screenAspect | number | - | Screen width / height. Omit to use the image's own ratio. |
| backgroundColor | string | "#0a0c11" | Outer backdrop. |
| glowColor | string | "#1c212c" | Soft glow behind the device. |
| floorColor | string | "#434a57" | Lit floor pool the contact shadow falls on. Keep it lighter than the backdrop. |
| bodyColor | string | "#9ba1ab" | Aluminium body. |
| rimColor | string | "#7aa2ff" | Cool rim light from the left. |
| accentColor | string | "#ffb27a" | Warm accent light from the right. |
| glare | number | 1 | Strength of the glass reflection over the screen, 0–1. |