Device Mockup Zoom

A transition that starts zoomed into a UI screen and animates transform: scale() from 2 down to 1, revealing an inline SVG laptop or phone frame around it. No external assets — the device chrome is rendered with plain divs.

Installation

$ pnpm dlx shadcn@latest add @remocn/device-mockup-zoom

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { DeviceMockupZoom } from "@/components/remocn/device-mockup-zoom";

const DeviceMockupZoomScene = () => (
  <YourAppScreen />
);

export const RemotionRoot = () => (
  <Composition
    id="DeviceMockupZoom"
    component={DeviceMockupZoomScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content rendered inside the device screen. Falls back to a sample gradient screen.
`device`	`"laptop" \| "phone"`	`"laptop"`	Which inline mockup to render.
`frameColor`	`string`	`"#1f1f1f"`	Color of the device chrome.
`screenColor`	`string`	`"#0a0a0a"`	Background color shown behind the screen content.
`background`	`string`	`"#fafafa"`	Outer background color.
`className`	`string`	—	Optional className for the outer container.

Notes

Replace with real mockups

The inline SVG/div frame is intentional so the component has zero asset dependencies. If you want a photoreal mockup, swap the frame for an image loaded via staticFile() and place your UI underneath it.