# Highlight Box
URL: https://remocn.dev/docs/captions/components/caption-highlight-box

A solid box travels behind the word being spoken, sliding from word to word as the voice moves on

- Install: `npx shadcn@latest add @remocn/caption-highlight-box`
- Vibe: social
- Natural length: transcript-driven

## Installation

```bash
npx shadcn@latest add @remocn/caption-highlight-box
```

## Usage

`CaptionHighlightBox` shows the whole page and moves a rounded box behind the
word being spoken. When the voice reaches the next word the box slides and
resizes onto it instead of popping, so the eye follows one shape across the
line. The text sitting on the box switches to `activeColor` as the box arrives.

It renders only the text block, so place it inside your own `AbsoluteFill`. See
[Positioning](/docs/captions/getting-started/positioning) for safe placements
and [Get a transcript](/docs/captions/getting-started/get-a-transcript) for
producing `captions.json`.

```tsx
import { AbsoluteFill } from "remotion";
import { CaptionHighlightBox } from "@/components/remocn/caption-highlight-box";
import captions from "./captions.json";

export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 192,
    }}
  >
    <CaptionHighlightBox captions={captions} boxColor="#facc15" />
  </AbsoluteFill>
);
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `captions` | `Caption[]` | `—` | The timed transcript, in the `Caption` shape from `@remotion/captions`. Times are relative to the start of the surrounding `Sequence`. |
| `combineTokensWithinMilliseconds` | `number` | `1200` | How much speech one page may span before the next word starts a new page. Pages also break at the end of a sentence and on any pause of at least `holdMs` (300 ms minimum). |
| `holdMs` | `number` | `600` | How long a page stays after its last word when the next page is not already due. It fades out at the end of the hold instead of hanging through the pause. |
| `fontSize` | `number` | `64` | Font size in pixels. |
| `fontWeight` | `number` | `800` | Font weight. The font itself is inherited. |
| `color` | `string` | `"#ffffff"` | Colour of the words off the box. |
| `activeColor` | `string` | `"#0a0a0a"` | Colour of the word sitting on the box. Pick something that contrasts with `boxColor`. |
| `boxColor` | `string` | `"#facc15"` | Fill of the travelling box. |
| `boxRadius` | `number` | `0.16` | Corner radius of the box, in em of the font size. |
| `boxPadding` | `number` | `0.14` | How far the box extends past the word on each side, in em of the font size. |
| `shadow` | `boolean` | `true` | A tight text shadow on the words off the box, so they stay legible over bright footage. |
| `className` | `string` | `—` | Classes for the text block — width, font family, `uppercase`. |

## Use when
- Short-form video where the caption has to be read at a glance — a solid block behind the spoken word is the loudest way to say where the voice is.
- The footage is busy or bright and the active word needs its own background to stay readable.

## Don't use when
- You want the voice's progress inside each word rather than a jump from word to word — use `caption-karaoke`.
- A solid block would fight the picture and colour alone is enough — use `caption-active-pop`.
- There is no voiceover and the text is scripted — use `word-stream`.