Typewriter

Character-by-character text reveal with a deterministic blinking cursor

Installation

$ pnpm dlx shadcn@latest add @remocn/typewriter

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { Typewriter } from "@/components/remocn/typewriter";
 
const TypewriterScene = () => (
  <Typewriter text="Hello, world" charsPerSecond={22} fontSize={72} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="Typewriter"
    component={TypewriterScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Props8

Prop	Type	Default
textrequired	string— The text to type out
cursor	booleantrue Whether to render the blinking cursor at the end
charsPerSecond	number22 Typing speed in characters per second
fontSize	number48 Font size in pixels
fontWeight	number600 CSS font-weight
color	string"#171717" Text color (any valid CSS color)
cursorColor	string"#171717" Color of the blinking cursor block
className	string— Optional className passed to the underlying span

textrequiredstring
The text to type out
cursorboolean
Whether to render the blinking cursor at the end
Defaulttrue
charsPerSecondnumber
Typing speed in characters per second
Default22
fontSizenumber
Font size in pixels
Default48
fontWeightnumber
CSS font-weight
Default600
colorstring
Text color (any valid CSS color)
Default"#171717"
cursorColorstring
Color of the blinking cursor block
Default"#171717"
classNamestring
Optional className passed to the underlying span