Device Mockup Zoom

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