# Typewriter

Types text out character by character, with pause markers and a caret that blinks once typing stops.

```bash
npx shadcn add https://www.reelcn.dev/r/typewriter.json
```

Usage:

```tsx
<Center>
  <Typewriter text="Make a launch video^ for vertical" cps={20} />
</Center>
```

Use for:

- Prompts, search queries and chat-style reveals
- Quotes and statements that should read at speaking pace

Avoid:

- Code listings. Use `code-block`
- Shell commands with output. Use `terminal`

Dependencies:

- `remotion`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| delay? | `number` | — | Frames to wait before entering. |
| duration? | `number` | — | Enter duration in frames. Defaults to 0.6s. Some items reuse `duration` for an unrelated local timing. See that item's own prop docs. |
| exit? | `number \| boolean` | — | Exit at the end of the parent `<Sequence>`. `false` keeps it on screen, a number sets the exit length in frames. |
| motion? | `MotionPersonality` | — | Override the theme's motion personality. |
| poster? | `boolean` | — | Renders fully entered, with no exit: for a still frame or thumbnail. Defaults to `false`. |
| holdFrames? | `number` | — | Delays the start of the exit window by this many frames, for a minimum on-screen hold. Defaults to `0`. |
| text | `string` | — | Text to type. `^` pauses for `pause` frames, `^20` pauses for 20 frames, `\n` starts a new line. |
| cps? | `number` | `18` | Characters per second. A `duration` wins over it and becomes the total typing time in frames. |
| typingFrames? | `number` | — | Total typing time in frames. Wins over `duration` and `cps` when set. |
| pause? | `number` | — | Frames a bare `^` waits. Defaults to 0.5s. |
| then? | `string[]` | `[]` | Phrases typed after `text`: each one holds, backspaces, then the next types in its place. |
| holdPhrase? | `number` | — | Frames each phrase holds before it is backspaced. Defaults to 1s. |
| humanize? | `number` | `0` | 0-1. Seeded speed changes per key and a short rest after punctuation, like a person typing. 0 types evenly. |
| blink? | `"smooth" \| "hard"` | `"hard"` | How the caret blinks once typing stops. |
| caret? | `"none" \| "bar" \| "block"` | `"bar"` |  |
| size? | `number` | `72` | Font size in design units. |
| weight? | `number` | — |  |
| font? | `"mono" \| "heading" \| "body"` | `"heading"` |  |
| color? | `string` | — |  |
| caretColor? | `string` | — | Caret color. Defaults to the theme accent. |
| align? | `"left" \| "right" \| "center"` | `"center"` |  |
| follow? | `CaretFollow` | — | Zooms the camera to trail the caret as it types. Omitted (default): today's behavior, unchanged. |
| style? | `CSSProperties` | — |  |
| className? | `string` | — |  |