# Underline
URL: https://remocn.dev/docs/captions/components/caption-underline

A bar slides under the word being spoken, travelling from word to word while the text itself stays untouched

- Install: `npx shadcn@latest add @remocn/caption-underline`
- Vibe: clean
- Natural length: transcript-driven

## Installation

```bash
npx shadcn@latest add @remocn/caption-underline
```

## Usage

`CaptionUnderline` shows the whole page and keeps a single bar under the word
being spoken. When the voice moves on, the bar slides across to the next word
and stretches or shrinks to its width, so the eye follows one continuous mark
rather than a flicker of separate ones. On the first word of a page the bar
grows in from the left. The component renders only the text block, so place it
inside your own `AbsoluteFill` — see [Positioning](/docs/captions/getting-started/positioning).

```tsx
import { AbsoluteFill } from "remotion";
import { CaptionUnderline } from "@/components/remocn/caption-underline";
import captions from "./captions.json";

export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 192,
    }}
  >
    <CaptionUnderline captions={captions} underlineColor="#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. |
| `underlineColor` | `string` | `"#facc15"` | Colour of the bar under the active word. |
| `thickness` | `number` | `0.08` | Bar thickness in em, so it scales with the font size. |
| `underlineOffset` | `number` | `0.02` | Gap in em between the bottom of the word's line box and the bar. Negative values pull it up toward the baseline. |
| `fontSize` | `number` | `64` | Font size in pixels. |
| `fontWeight` | `number` | `800` | Font weight. The font itself is inherited. |
| `color` | `string` | `"#ffffff"` | Text colour. It does not change as words are spoken. |
| `shadow` | `boolean` | `true` | A tight text shadow that keeps the caption legible over bright footage. |
| `className` | `string` | `—` | Classes for the text block — width, font family, `uppercase`. |

## Use when
- You want to show where the voice is with the lightest possible mark — the words keep their colour and only a thin bar moves beneath them.
- The brand colour should carry the captions without flooding the text, such as a single accent line under otherwise neutral type.

## Don't use when
- You want the active word itself to be loud, on a solid plate that travels with the voice — use `caption-highlight-box`.
- You want no moving mark at all, just upcoming words dimmed until they are spoken — use `caption-dim-progress`.
- Only chosen keywords should get a mark, drawn on as they are said — use `caption-marker`.