Marker

Plain captions where the words that matter get a highlighter swipe the moment they are spoken

Installation

$ pnpm dlx shadcn@latest add @remocn/caption-marker

Usage

CaptionMarker takes a timed transcript and renders only the text block, so place it inside your own AbsoluteFill. Words read as a plain caption line until a word from keywords is spoken. Then a slightly tilted highlighter band draws behind it from left to right, taking as long as the word itself, and the covered letters switch to markerTextColor so they stay readable on the band. The band stays until the page leaves. Without keywords, nothing is marked. See Positioning for safe placements and Get a transcript for producing captions.json.

import { AbsoluteFill } from "remotion";
import { CaptionMarker } from "@/components/remocn/caption-marker";
import captions from "./captions.json";
 
export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 192,
    }}
  >
    <CaptionMarker
      captions={captions}
      keywords={["thing", "lose", "three", "captions", "sound"]}
    />
  </AbsoluteFill>
);

Keywords match whole words, ignoring case and punctuation, so "sound" also catches Sound, and sound. in the transcript.

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`.
`keywords`	`string[]`	`—`	Words that get the highlighter. Matched per word, ignoring case and punctuation. When omitted, no word is marked.
`markerColor`	`string`	`"#facc15"`	Colour of the highlighter band.
`markerTextColor`	`string`	`"#0a0a0a"`	Colour of the letters the band has covered, so a marked word stays readable.
`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 unmarked words.
`shadow`	`boolean`	`true`	A tight text shadow that keeps unmarked words legible over bright footage. It fades out under a word as the band covers it.
`className`	`string`	`—`	Classes for the text block — width, font family, `uppercase`.

Timeline

The whole transcript laid out on a scrolling time strip that slides under a fixed playhead, so every pause shows up as space between words

Stamp

Plain captions where the words that matter slam down as a rubber stamp the moment they are spoken