# Typewriter
URL: https://remocn.dev/docs/typography/typewriter

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

- Install: `npx shadcn@latest add @remocn/typewriter`
- Vibe: clean
- Natural length: 120f @ 30fps

## Installation

```bash
npx 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}
  />
);
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to type out |
| `cursor` | `boolean` | `true` | Whether to render the blinking cursor at the end |
| `charsPerSecond` | `number` | `22` | Typing speed in characters per second |
| `fontSize` | `number` | `48` | Font size in pixels |
| `fontWeight` | `number` | `600` | 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 |

## Use when
- Simulating a command being typed into a terminal or input — pairs with `terminal-simulator`.
- A title should feel "authored live" rather than appearing all at once.
- You need the reveal duration to track text length predictably (`charsPerSecond` makes it deterministic).

## Don't use when
- The text is long — typing a paragraph at a readable speed eats far more frames than a viewer will wait; use `staggered-fade-up` or `blur-out-up` instead.
- You want a designed, weighted entrance (springy, blurred, kinetic) — typing reads as plain/utilitarian; reach for `tracking-in` or `kinetic-center-build`.
- Multiple lines should reveal together — typing is inherently sequential and single-stream.
- The text is a transcript of someone speaking — use `caption-typewriter`, which types each word at the pace it was said.