Direct answer
Install the phone mockup component into a Remotion project, pass your own screen recording or screenshot as its picture, and pass your colours through its theme prop. Render a few stills to check the frame, then render the film. The phone, the shadow and the caption all take your tokens, so the shot matches the app.
Three steps from screen to video
Three steps from screen to video
Install the component, give it your own screen, then check frames before the full render.
- Install the component: One command puts the source in your project.
- Pass your recording: A screen recording or a still from the public folder.
- Check frames, then render: Look at the landing frame and the last frame first.
Install the component into your Remotion project
The component lands in your project as source, so you own it and can change it. It installs the small video kit it paints from as well.
npx shadcn@latest add https://better-design.com/registry/video/phone-mockup.jsonPass your own screen and your colours
Put a recording (.mp4, .webm or .mov) or a still in the project's public folder and pass its path. Without one, the phone shows a placeholder screen drawn from your theme.
Record the app in portrait at the phone's own size, so the screen fills the frame without bars.
import { PhoneMockup } from "@/components/bd-video/phone-mockup";
<PhoneMockup src="recordings/onboarding.mp4" caption="Your product, in their pocket" theme={theme} />Check a few frames before the full render
- Render the frame where the phone lands and the last frame with `npx remotion still`.
- Check that the caption is whole, the screen is sharp and the colours are your tokens, not the demo palette.
- With the Better Design MCP, the agent can call render-video-frames and look at the frames itself.
Steal this workflow
Run this guide in your own assistant. The prompt carries the guide link and the workflow summary, so the assistant can adapt it to your project.
Read the guide "Phone mockup video: show your app on an iPhone, in code" at https://better-design.com/blog/phone-mockup-video and help me apply it to my project.
Install the phone mockup component into a Remotion project, pass your own screen recording or screenshot as its picture, and pass your colours through its theme prop. Render a few stills to check the frame, then render the film. The phone, the shadow and the caption all take your tokens, so the shot matches the app.
Start by asking what I am building and which tools I use. Then walk me through the workflow step by step, adapted to my answers.Claude and ChatGPT open with the prompt filled in. Gemini copies the prompt to your clipboard first, so paste it when the app opens.
Questions
Can I use a screenshot instead of a recording?
Yes. Pass a .png or .jpg path and the phone shows the still. The device still moves, so the shot reads as video.
Do I need a Remotion licence?
Remotion is free for individuals and companies of up to three people. Larger companies need a company licence from Remotion.