Typewriter
Typewriter reveal with rhythm, pauses, looping, and a caret that only blinks at rest.
PrimitivePrimitives
typewriter30fps · 960×540
Install
$ npx remotion-ui@latest add typewriterTypes a string out under a live caret.
The caret holds solid while keys are landing and only blinks once it rests — a caret that blinks mid-word looks like a loading state, not typing. The full block is measured up front, so a wrapping line does not shunt everything under it down a row mid-sentence.
Use [pause:0.5] inside text to hold at any point. humanize varies the key rhythm, respectPunctuation rests on sentence punctuation, and loop types, holds, deletes and repeats.
The caret holds solid while keys land and only blinks once it rests. Inline [pause:0.5] markers are stripped from the rendered text.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/typewriter- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: text, charFrames, durationInFrames, delayInFrames, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { Typewriter } from "@/remotion/primitives/typewriter";
<Typewriter
text="Build videos with React.[pause:0.5] One frame at a time."
charFrames={2}
humanize
respectPunctuation
cursorStyle="block"
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | - | Full string to reveal character by character. Use [pause:0.5] for inline pauses. |
| charFrames | number | - | Frames per character (preferred over durationInFrames). Values below 1 type more than one character a frame. |
| durationInFrames | number | 60 | Total duration when charFrames is omitted. |
| delayInFrames | number | 0 | Frames before typing begins. |
| pauseAfter | string | - | Pause after this substring is typed. |
| pauseSeconds | number | 0.6 | Length of the pauseAfter pause in seconds. |
| showCursor | boolean | true | Show the caret. |
| cursorBlinkFrames | number | 30 | Caret blink cycle length in frames, used while it rests. |
| cursorColor | string | - | Caret colour. Defaults to the text colour. |
| cursorWidth | number | - | Caret width in pixels (bar/underscore only). |
| cursorStyle | "bar" | "block" | "underscore" | "bar" | Caret shape. |
| humanize | boolean | false | Uneven key rhythm — the difference between typing and a progress bar. |
| respectPunctuation | boolean | false | Pause automatically after . ! ? ; : , |
| punctuationPauseSeconds | number | 0.25 | Length of automatic punctuation pauses. |
| loop | boolean | false | Type, pause, backspace, and repeat. |
| loopPauseSeconds | number | 1 | Pause at full text before backspacing. |
| backspaceCharFrames | number | 1 | Frames per character when backspacing. |
| reserveSpace | boolean | true | Measure the full block up front so a wrapping line never reflows mid-sentence. |
| fontSize | number | scaled 84px | Text size in pixels. |
| fontWeight | number | 600 | Text weight. |
| color | string | "#ececec" | Text colour. |
| fontFamily | string | - | Font family for the typed text. |
| style | CSSProperties | - | Styles merged onto the text span. |