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 = () => (
  <DeviceMockupZoom>
    <YourAppScreen />
  </DeviceMockupZoom>
);

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

With Backdrop

The component renders transparent by default — supply the background via Backdrop:

import { Composition } from "remotion";
import { DeviceMockupZoom } from "@/components/remocn/device-mockup-zoom";
import { Backdrop } from "@/components/remocn/backdrop";

const DeviceMockupZoomScene = () => (
  <Backdrop fill={{ type: "color", value: "#f5f5f5" }}>
    <DeviceMockupZoom>
      <YourAppScreen />
    </DeviceMockupZoom>
  </Backdrop>
);

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
`className`	`string`	—	Optional className for the outer container