Stack

Kinetic captions stacked a couple of words per line, with the keyword of each page set large on its own line

Installation

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

Usage

CaptionStack takes a timed transcript and renders only the text block, so place it inside your own AbsoluteFill. Each page is laid out once as centered lines of about two words, and every word rises into its slot at the moment it is spoken. A word listed in keywords breaks out onto its own line at emphasisScale times the font size. Without keywords, the longest word on each page takes that role. See Positioning for safe placements and Get a transcript for producing captions.json.

tsx

import { AbsoluteFill } from "remotion";
import { CaptionStack } from "@/components/remocn/caption-stack";
import captions from "./captions.json";
 
export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 192,
    }}
  >
    <CaptionStack
      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.

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`.
keywords	string[]— Words that get their own enlarged line. Matched per word, ignoring case and punctuation. When omitted, the longest word on each page is emphasised instead.
emphasisScale	number1.7 Font size of an emphasised line relative to `fontSize`. It is a real font size, so the stack is laid out once and never reflows.
emphasisColor	string"#facc15" Colour of the emphasised word.
combineTokensWithinMilliseconds	number1600 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 instead of hanging through the pause.
fontSize	number64 Font size of the regular lines in pixels.
fontWeight	number800 Font weight. The font itself is inherited.
color	string"#ffffff" Colour of the regular words.
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—
keywordsstring[]
Words that get their own enlarged line. Matched per word, ignoring case and punctuation. When omitted, the longest word on each page is emphasised instead.
Default—
emphasisScalenumber
Font size of an emphasised line relative to `fontSize`. It is a real font size, so the stack is laid out once and never reflows.
Default1.7
emphasisColorstring
Colour of the emphasised word.
Default"#facc15"
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).
Default1600
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 instead of hanging through the pause.
Default600
fontSizenumber
Font size of the regular lines in pixels.
Default64
fontWeightnumber
Font weight. The font itself is inherited.
Default800
colorstring
Colour of the regular words.
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—