Primitives
Typewriter
Character-by-character text reveal.
Primitiveatoms
Install
npx remotion-ui@latest add typewriterCharacter-by-character text reveal.
Live preview
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add typewriterImport after install
@/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
import { Typewriter } from "@/remotion/primitives/typewriter";
<Typewriter
text="Build videos with React."
charFrames={2}
pauseAfter="React."
pauseSeconds={0.5}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | — | Full string to reveal character by character. |
| charFrames | number | — | Frames per character (preferred over durationInFrames). |
| durationInFrames | number | — | Legacy total duration when charFrames is omitted. |
| delayInFrames | number | 0 | Frames before typing begins. |
| pauseAfter | string | — | Pause after this substring is typed. |
| pauseSeconds | number | — | Length of the pause in seconds. |
| showCursor | boolean | true | Show a blinking cursor while typing. |