Remotion device mockups
iPhone and MacBook frames for Remotion — put a screenshot or a screen recording inside a device that moves, without leaving React.
A product shot needs the product in something. These put your screenshot, your
<Video> or a live component inside a phone or a laptop and then move the
camera, so the device is part of the shot rather than a PNG sitting on top of it.
Reach for a frame (Phone Frame, Laptop Frame) when the device is the container and you are composing the rest of the scene around it. Reach for a shot (Phone Pitch, Laptop Open) when the device arriving is the beat — they carry their own camera move and their own timing.
Every one takes its screen content as a child, so what goes inside can be an image, a recording cropped with Screen Recording, or another snapcn component.
The components
2 free Remotion device mockups, plus 5 in Pro. Each card plays its own scene — open one for its props, the source shadcn add writes, and a player you can scrub frame by frame.
Install
Each one is copied into your own Remotion project by the shadcn CLI, and the file it writes is yours to edit — there is no snapcn package to depend on. Set the registry up once, then add components by name:
$ pnpm dlx shadcn@latest add @snapcn/phone-frameNeeds an existing Remotion project and a components.json. Two-minute setup if this is your first snapcn component.
Swap the name for any other component on this page. Every prop has a working default, so it renders the moment it is mounted.
Frequently asked questions
How do I add a Remotion device mockup to a Remotion project?
Every Remotion device mockup here installs with the shadcn CLI — npx shadcn@latest add @snapcn/phone-frame copies Phone Frame into your project as a file you own, written against the plain Remotion API. There is no runtime package to keep installed.
Are snapcn's Remotion device mockups free?
2 of them are MIT-licensed and free to use commercially; the other 5 are part of snapcn Pro — $179 a year for the whole catalogue, or $279 once to own it outright.
Do I need Remotion to use a Remotion device mockup?
Yes. snapcn is a component registry, not a video framework — each component is a React component built on Remotion's useCurrentFrame() and interpolate(), so it renders inside an existing Remotion project.