# Captions

Word-synced captions that page like TikTok, highlight the spoken word and pop the words you choose.

```bash
npx shadcn add https://www.reelcn.dev/r/captions.json
```

Usage:

```tsx
import captions from "../../public/captions/talk.json";

<Captions captions={captions} emphasize={["free", "today"]} variant="bold-pop" />
```

Use for:

- Shorts, reels and talking-head videos that need burned-in captions
- Podcast and tutorial clips watched without sound

Avoid:

- A single static line of text. Use `text-reveal`

Dependencies:

- `@remotion/captions`
- `remotion`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| captions | `Caption[]` | — | Word-level captions, as `@remotion/captions` defines them. `pnpm reelcn-transcribe` writes this shape. |
| pageMs? | `number` | `1200` | How much speech goes on one page, in milliseconds. Lower means fewer words at a time. |
| maxWords? | `number` | `6` | Hard cap on words per page; long pages are split. |
| emphasize? | `string[]` | `[]` | Words painted in the emphasis color. Case and punctuation are ignored. |
| variant? | `CaptionsVariant` | `"bold-pop"` |  |
| position? | `"auto" \| "top" \| "bottom" \| "middle"` | `"auto"` | `auto` sits above the platform UI in portrait and in the lower third elsewhere. |
| size? | `number` | `64` | Font size in design units; long pages shrink from here. |
| color? | `string` | — |  |
| activeColor? | `string` | — |  |
| emphasisColor? | `string` | — |  |
| background? | `string` | — |  |
| style? | `CSSProperties` | — |  |
| className? | `string` | — |  |