# Highlight

Word-by-word captions with an accent-colored highlight background that sweeps in behind each spoken word.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## Installation

<TabsTrigger value="cli">Command</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @framecn/caption-highlight
```

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { CaptionHighlight } from "@/components/framecn/caption-highlight";
import type { CaptionWord } from "@/components/framecn/caption-highlight";
```

```tsx
const words: CaptionWord[] = [
  { text: "Every", start: 0.0, end: 0.35 },
  { text: "great", start: 0.35, end: 0.65 },
  { text: "video", start: 0.65, end: 1.0 },
  // ...
];

<CaptionHighlight words={words} />;
```

## API Reference

### CaptionHighlight

| Prop               | Type            | Default      |
| ------------------ | --------------- | ------------ |
| `words`            | `CaptionWord[]` | (demo words) |
| `wordsPerGroup`    | `number`        | `3`          |
| `color`            | `string`        | `"#ffffff"`  |
| `highlightColor`   | `string`        | `"#ff1745"`  |
| `fontSize`         | `number`        | `72`         |
| `fontWeight`       | `number`        | `800`        |
| `background`       | `string`        | `"#0a0a0a"`  |
| `speed`            | `number`        | `1`          |
| `fps`              | `number`        | `30`         |
| `durationInFrames` | `number`        | `180`        |
| `width`            | `number`        | `1280`       |
| `height`           | `number`        | `720`        |
| `className`        | `string`        | `-`          |

### CaptionWord

| Field   | Type     | Description           |
| ------- | -------- | --------------------- |
| `text`  | `string` | The word text         |
| `start` | `number` | Start time in seconds |
| `end`   | `number` | End time in seconds   |

## Notes

  The `wordsPerGroup` prop controls how many words appear on screen at once.
  Groups fade in together and out together, with each word's highlight timed to
  its `start`/`end` window.

  The `start` and `end` fields on each `CaptionWord` are in seconds, not
  milliseconds or frames. Pass the raw transcript timing from your
  speech-to-text provider directly.