Underline

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

Installation

$ pnpm dlx 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.

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>
);

Props11

Prop	Type	Default
captions	Caption[]— The timed transcript, in the `Caption` shape from `@remotion/captions`. Times are relative to the start of the surrounding `Sequence`.
combineTokensWithinMilliseconds	number1200 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	number600 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	number0.08 Bar thickness in em, so it scales with the font size.
underlineOffset	number0.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	number64 Font size in pixels.
fontWeight	number800 Font weight. The font itself is inherited.
color	string"#ffffff" Text colour. It does not change as words are spoken.
shadow	booleantrue A tight text shadow that keeps the caption legible over bright footage.
className	string— Classes for the text block — width, font family, `uppercase`.

captionsCaption[]
The timed transcript, in the `Caption` shape from `@remotion/captions`. Times are relative to the start of the surrounding `Sequence`.
Default—
combineTokensWithinMillisecondsnumber
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).
Default1200
holdMsnumber
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.
Default600
underlineColorstring
Colour of the bar under the active word.
Default"#facc15"
thicknessnumber
Bar thickness in em, so it scales with the font size.
Default0.08
underlineOffsetnumber
Gap in em between the bottom of the word's line box and the bar. Negative values pull it up toward the baseline.
Default0.02
fontSizenumber
Font size in pixels.
Default64
fontWeightnumber
Font weight. The font itself is inherited.
Default800
colorstring
Text colour. It does not change as words are spoken.
Default"#ffffff"
shadowboolean
A tight text shadow that keeps the caption legible over bright footage.
Defaulttrue
classNamestring
Classes for the text block — width, font family, `uppercase`.
Default—