Multi Device Lineup
Phone, tablet and laptop showing one responsive design, arriving in order.
PrimitiveMaps & deviceAdvanced
$ npx remotion-ui@latest add multi-device-lineupThree devices land in order, smallest first. The laptop is the widest object and the thing a viewer ends up reading, so it arrives onto a lineup that already exists rather than being the thing everything else lands beside.
Each screen is a real element at that device's own pixel size — not one
screenshot scaled three ways. Pass the same children and whatever you render
lays itself out per width, which is the only reason to show three devices at
all. Give a device its own content when you want to show a different view on
one of them.
Hardware ratios are the real ones, and each device carries the detail that identifies it: the phone's speaker cutout, the tablet's camera dot, the laptop's base and hinge drawn as their own strip. A laptop rendered as a slab with rounded corners is the giveaway that a mockup was never looked at.
scale sizes the whole lineup. It is the prop to reach for first when the
lineup is wider than your frame — the devices divide a fixed width between them,
so scaling the group is what keeps the phone from walking off the left edge.
For a single device with a camera move into the screen, use
device-mockup-zoom.
Each screen is a real element at that device's own pixel size, not one screenshot scaled three ways — pass the same children and a responsive layout lays itself out per width, which is the only reason to show three devices. Devices land smallest first so the laptop arrives onto a lineup that already exists. Hardware ratios are the real ones, and the laptop's base and hinge are drawn as their own strip. For one device with a camera move into the screen, use device-mockup-zoom.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/multi-device-lineup- Use when: map scenes, routes, markers, and spatial storytelling.
- Customize: phone, tablet, laptop, scale, 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 { MultiDeviceLineup } from "@/remotion/primitives/multi-device-lineup";
<MultiDeviceLineup
scale={0.72}
phone={{ label: "Phone" }}
tablet={{ label: "Tablet" }}
laptop={{ label: "Laptop" }}
>
<YourResponsiveScreen />
</MultiDeviceLineup>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Rendered inside every device that has no content of its own — one responsive design at three widths. |
| phone | LineupScreen | - | Optional content and caption for the phone. |
| tablet | LineupScreen | - | Optional content and caption for the tablet. |
| laptop | LineupScreen | - | Optional content and caption for the laptop. |
| scale | number | 1 | Overall size of the lineup. The first prop to reach for when it is wider than the frame. |
| delayInFrames | number | 4 | Frame the first device arrives. |
| staggerInFrames | number | 9 | Frames between devices. |
| exitAtInFrames | number | - | Frame the lineup starts leaving. Omit to leave it on screen. |
| exitInFrames | number | 16 | Frames the exit takes. |
| bezelColor | string | "#15171D" | Device body. |
| screenColor | string | "#0B0C11" | Screen behind your content. |
| labelColor | string | "#7A828F" | Captions under the devices. |