Typewriter
Animated text typing effect that cycles through a list of words. Characters are typed one at a time, paused, then deleted before the next word begins.
Supports a static prefix and configurable speed.
Summary
The Typewriter component is a compound component with three parts: the main Typewriter wrapper, a Typewriter.Prefix for static text, and Typewriter.Word for each animated word. The animation cycles through typing, pausing, deleting, and advancing to the next word.
Why Use This Component?
- Engaging hero text — add dynamic text cycling to landing page headings.
- Configurable timing — control type speed, delete speed, pause duration, and loop behavior.
- Compound API — static prefix and animated words are declared as JSX children for clean composition.
Usage
Options
Typewriter (main)
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Prefix and Word sub-components. Required. |
typeSpeed | number | undefined | 80 | Milliseconds between each typed character. |
deleteSpeed | number | undefined | 50 | Milliseconds between each deleted character. |
pauseDuration | number | undefined | 3000 | Milliseconds to pause after typing a word. |
loop | boolean | undefined | true | Whether to loop back to the first word after the last. |
Typewriter.Prefix
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Static text before the cursor. |
Typewriter.Word
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | — | Word to animate. |
Troubleshooting
- Animation not visible — Ensure at least one
Typewriter.Wordis passed as a child. Without words, nothing animates. - Loop stops — Set
loop={false}to stop on the last word. The final word stays visible after typing completes. - Width jumps — The component measures each word to set a stable width. If words are very different lengths, you may see the container resize between words.