Lights Out

Five lights go out one by one and a heavy italic headline slams in with an accent period.

Installation

$ pnpm dlx shadcn@latest add @remocn/lights-out

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LightsOut } from "@/components/remocn/lights-out";
 
const LightsOutScene = () => (
  <LightsOut title="SHIP IT." beat={10} hold={24} accent="#3B5BFD" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LightsOut"
    component={LightsOutScene}
    durationInFrames={112}
    fps={30}
    width={1280}
    height={720}
  />
);

Five lights light up on the beat, hold, then go out and the headline slams in with a camera push and an accent period. Pass title (set in capitals), beat for the light interval and hold for the pause before they go out; it ships light and dark through theme.

Props6

Prop	Type	Default
title	string"SHIP IT." Headline slammed in after the lights go out
beat	number10 Frames between each light turning on
hold	number24 Frames all lights stay on before going out
accent	string"#3B5BFD" Accent color (any valid CSS color)
theme	"dark" \| "light""dark" Ships light and dark palettes
speed	number1 Playback speed multiplier

titlestring
Headline slammed in after the lights go out
Default"SHIP IT."
beatnumber
Frames between each light turning on
Default10
holdnumber
Frames all lights stay on before going out
Default24
accentstring
Accent color (any valid CSS color)
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark palettes
Default"dark"
speednumber
Playback speed multiplier
Default1