Hero Device Assemble

Installation

$ pnpm dlx shadcn@latest add @remocn/hero-device-assemble

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { HeroDeviceAssemble } from "@/components/remocn/hero-device-assemble";

const HeroDeviceAssembleScene = () => (
  <HeroDeviceAssemble
    device="laptop"
    accentColor="#22c55e"
    assembleStart={0}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="HeroDeviceAssemble"
    component={HeroDeviceAssembleScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`device`	`"laptop" \| "phone"`	`"laptop"`	Mockup form factor. Phone uses a vertical bezel and skips the chassis base.
`accentColor`	`string`	`"#22c55e"`	Brand accent applied to the in-screen UI highlights
`assembleStart`	`number`	`0`	Frame at which the assembly spring kicks off
`className`	`string`	—	Optional className for the outer container