Subtitle

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

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