Typewriter
Character-by-character text reveal with natural rhythm, punctuation pauses, inline pause markers, looping, and a configurable cursor.
PrimitivePrimitives
typewriter30fps · 960×540
Install
$ npx remotion-ui@latest add typewriterCharacter-by-character text reveal with natural rhythm, punctuation pauses, inline pause markers, looping, and a configurable cursor.
Use [pause:0.5] inside text to add dramatic pauses at any point. Enable humanize for subtle speed variation and respectPunctuation for automatic pauses after sentence punctuation.
Inline pause markers like [pause:0.5] 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). |
| 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 a blinking cursor while typing. |
| cursorBlinkFrames | number | 30 | Cursor blink cycle length in frames. |
| cursorColor | string | - | Cursor color. Defaults to the text color. |
| cursorWidth | number | - | Cursor width in pixels (bar/underscore only). |
| cursorStyle | "bar" | "block" | "underscore" | "bar" | Cursor shape. |
| humanize | boolean | false | Add subtle per-character timing variation. |
| 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. |