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}
  />
);

With Backdrop

Renders its scene transparent — supply the background via Backdrop:

import { Backdrop } from "@/components/remocn/backdrop";
import { HeroDeviceAssemble } from "@/components/remocn/hero-device-assemble";

<Backdrop fill={{ type: "gradient", value: "radial-gradient(ellipse at center, #1a1a22 0%, #050507 70%)" }}>
  <HeroDeviceAssemble device="laptop" accentColor="#22c55e" assembleStart={0} />
</Backdrop>

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