Subtitle

Classic broadcast subtitles, a whole phrase on a translucent plate, with no word-level animation at all

Installation

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

Usage

CaptionSubtitle is the subtitle you know from broadcast and streaming: a whole phrase at a time, balanced across its lines, sitting on a tight translucent plate that follows each line rather than one big box. Nothing animates inside a phrase. A new phrase replaces the previous one on a hard cut, and only fades in or out around silences.

Keep subtitles to two lines. The component wraps and balances its lines but does not limit them, so give the block a width that fits two lines of your longest phrase, or lower combineTokensWithinMilliseconds for shorter phrases.

The component renders only the text block. See Positioning for safe placements and Get a transcript for producing captions.json.

tsx

import { AbsoluteFill } from "remotion";
import { CaptionSubtitle } from "@/components/remocn/caption-subtitle";
import captions from "./captions.json";
 
export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 384,
    }}
  >
    <CaptionSubtitle captions={captions} />
  </AbsoluteFill>
);

Props10

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	number2500 How much speech one subtitle may span. Sized for a full phrase. Subtitles also break at the end of a sentence and on any pause of at least `holdMs` (300 ms minimum).
holdMs	number600 How long a subtitle stays after its last word when the next one is not already due. It fades out at the end of the hold.
fontSize	number44 Font size in pixels.
fontWeight	number600 Font weight. The font itself is inherited.
color	string"#ffffff" Text colour.
box	booleantrue Draw a translucent plate behind each line. When off, a text shadow keeps the subtitle legible instead.
boxColor	string"#000000" Colour of the plate.
boxOpacity	number0.72 Opacity of the plate, from 0 to 1.
className	string— Classes for the text block — width, font family.

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 subtitle may span. Sized for a full phrase. Subtitles also break at the end of a sentence and on any pause of at least `holdMs` (300 ms minimum).
Default2500
holdMsnumber
How long a subtitle stays after its last word when the next one is not already due. It fades out at the end of the hold.
Default600
fontSizenumber
Font size in pixels.
Default44
fontWeightnumber
Font weight. The font itself is inherited.
Default600
colorstring
Text colour.
Default"#ffffff"
boxboolean
Draw a translucent plate behind each line. When off, a text shadow keeps the subtitle legible instead.
Defaulttrue
boxColorstring
Colour of the plate.
Default"#000000"
boxOpacitynumber
Opacity of the plate, from 0 to 1.
Default0.72
classNamestring
Classes for the text block — width, font family.
Default—