Hero Device Assemble

A cinematic hero composition: a laptop (or phone) materializes from floating layers — back lid, chassis, bezel, and display — drifting in from different Z depths and tilted in 3D space. A single spring collapses everything into place, then the screen fades from black to a mock dashboard with a soft shimmer, mimicking a real display waking up.

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.

Notes

The screen stays dark until the layers settle

The display panel is rendered as a black layer until the assembly spring resolves, then the mock UI fades in with a diagonal shimmer sweep. That delayed wake-up is what sells the illusion of a physical device powering on rather than a flat image flying into place.