Timeline

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

Usage

CaptionTimeline places every word of the transcript on a horizontal strip at a position proportional to when it is spoken, pxPerSecond apart, and scrolls the strip so the current moment sits under a fixed playhead. A pause in the speech becomes empty space on the strip; when words come faster than the strip can fit them, they are pushed apart so they never overlap. Words ahead of the playhead are dimmed to upcomingOpacity and light up as the playhead reaches them, and both ends of the strip fade out.

The strip is not paged, so combineTokensWithinMilliseconds and holdMs have no effect, and it stays on screen for the whole transcript. Give it a fixed width in composition pixels and place it yourself — see Positioning and Get a transcript.

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