Teleprompter

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

Usage

CaptionTeleprompter turns the transcript into lines — the same paging every caption style uses, with combineTokensWithinMilliseconds setting how much speech one line holds — and stacks all of them in a window visibleLines tall. As each line starts, the stack glides so that line sits in the middle of the window. Inside the current line, words the voice has not reached yet are dimmed to upcomingOpacity; the lines above and below rest at pastOpacity and futureOpacity, and the window fades out at its top and bottom edges.

Nothing ever leaves the screen: the teleprompter stays for the whole transcript, so holdMs only decides how long a silence must be to start a new line. The window takes the width you give it and wraps long lines, so place it inside a container with the width you want — see Positioning and Get a transcript.

import { AbsoluteFill } from "remotion";
import { CaptionTeleprompter } from "@/components/remocn/caption-teleprompter";
import captions from "./captions.json";
 
export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "center",
      alignItems: "stretch",
      paddingInline: 192,
    }}
  >
    <CaptionTeleprompter captions={captions} />
  </AbsoluteFill>
);