Teleprompter

The whole transcript scrolls smoothly through a short window with the current line centred, past lines fading above and the next line waiting below

Installation

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

tsx

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

Props12

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`.
visibleLines	number3 Height of the window, in lines. The current line always sits in the middle.
pastOpacity	number0.35 Opacity of lines that have already been spoken.
futureOpacity	number0.35 Opacity of lines still to come.
upcomingOpacity	number0.55 Opacity of words in the current line that the voice has not reached yet.
combineTokensWithinMilliseconds	number1500 How much speech one line may span before the next word starts a new line. Lines also break at the end of a sentence and on any pause of at least `holdMs` (300 ms minimum).
holdMs	number600 The pause length that starts a new line. Lines never fade out — the teleprompter stays on screen for the whole transcript.
fontSize	number64 Font size in pixels.
fontWeight	number800 Font weight. The font itself is inherited.
color	string"#ffffff" Text colour.
shadow	booleantrue A tight text shadow that keeps the caption legible over bright footage.
className	string— Classes for the window — 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—
visibleLinesnumber
Height of the window, in lines. The current line always sits in the middle.
Default3
pastOpacitynumber
Opacity of lines that have already been spoken.
Default0.35
futureOpacitynumber
Opacity of lines still to come.
Default0.35
upcomingOpacitynumber
Opacity of words in the current line that the voice has not reached yet.
Default0.55
combineTokensWithinMillisecondsnumber
How much speech one line may span before the next word starts a new line. Lines also break at the end of a sentence and on any pause of at least `holdMs` (300 ms minimum).
Default1500
holdMsnumber
The pause length that starts a new line. Lines never fade out — the teleprompter stays on screen for the whole transcript.
Default600
fontSizenumber
Font size in pixels.
Default64
fontWeightnumber
Font weight. The font itself is inherited.
Default800
colorstring
Text colour.
Default"#ffffff"
shadowboolean
A tight text shadow that keeps the caption legible over bright footage.
Defaulttrue
classNamestring
Classes for the window — width, font family, `uppercase`.
Default—