Typewriter

Each word types out character by character at the pace it is spoken, with a caret that blinks while the speaker pauses

Installation

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

Usage

CaptionTypewriter types each word out while it is being said: the characters of a word are spread across that word's duration, so a drawn-out word types slowly and a quick one snaps in. Characters that have not been typed yet still hold their space, so the line never shifts as it builds. The caret sits after the last typed character, steady while a word is being typed and blinking through pauses and holds.

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 { CaptionTypewriter } from "@/components/remocn/caption-typewriter";
import captions from "./captions.json";
 
export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 192,
    }}
  >
    <CaptionTypewriter captions={captions} className="font-mono" />
  </AbsoluteFill>
);

Props9

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	number1200 How much speech one page may span before the next word starts a new page. Pages also break at the end of a sentence and on any pause of at least `holdMs` (300 ms minimum).
holdMs	number600 How long a page stays after its last word when the next page is not already due. The caret keeps blinking through the hold, then the page fades out.
fontSize	number64 Font size in pixels.
fontWeight	number800 Font weight. The font itself is inherited.
color	string"#ffffff" Colour of the typed text and the caret.
caret	booleantrue Show a caret after the last typed character — steady while typing, blinking while the speaker pauses.
shadow	booleantrue A tight text shadow that keeps the caption legible over bright footage.
className	string— Classes for the text block — 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—
combineTokensWithinMillisecondsnumber
How much speech one page may span before the next word starts a new page. Pages also break at the end of a sentence and on any pause of at least `holdMs` (300 ms minimum).
Default1200
holdMsnumber
How long a page stays after its last word when the next page is not already due. The caret keeps blinking through the hold, then the page fades out.
Default600
fontSizenumber
Font size in pixels.
Default64
fontWeightnumber
Font weight. The font itself is inherited.
Default800
colorstring
Colour of the typed text and the caret.
Default"#ffffff"
caretboolean
Show a caret after the last typed character — steady while typing, blinking while the speaker pauses.
Defaulttrue
shadowboolean
A tight text shadow that keeps the caption legible over bright footage.
Defaulttrue
classNamestring
Classes for the text block — width, font family, `uppercase`.
Default—