# Lights Out
URL: https://remocn.dev/docs/typography/lights-out

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

- Install: `npx shadcn@latest add @remocn/lights-out`
- Vibe: playful
- Natural length: 104f @ 30fps

## Installation

```bash
npx 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`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"SHIP IT."` | Headline slammed in after the lights go out |
| `beat` | `number` | `10` | Frames between each light turning on |
| `hold` | `number` | `24` | 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` | `number` | `1` | Playback speed multiplier |

## Use when
- A launch countdown moment where the lights go out and the product name hits.
- A high-energy title for a racing or gaming flavored beat.

## Don't use when
- You want a calm reveal - use `soft-blur-in`.
- You want a speedy ride-in with a subtitle - use `italic-speed`.
- The title is a long sentence - use `line-by-line-slide`.