Typewriter
ProAnimated typewriter effect that cycles through a list of words with configurable typing, deleting, and pause speeds.
Text · primitive · basic · css · zero dependencies
Prompts for
Stop rewriting
typingSpeed 90 / 70 · pause 1.6s / 2.2s · loops
Animated typewriter effect that cycles through a list of words with configurable typing, deleting, and pause speeds.
- hero headline cycling through value props
- job board rotating role text
- product tagline animation
- search placeholder cycling suggestions
| Prop | Type | Default | Description |
|---|---|---|---|
words | string[] | — | List of words or phrases to cycle through. |
className | string | — | Additional classes for the text wrapper. |
typingSpeed | number | 80 | Milliseconds between each typed character. |
deletingSpeed | number | 40 | Milliseconds between each deleted character. |
pauseDuration | number | 1800 | Milliseconds to pause after a word finishes typing before it starts deleting. |
cursorClassName | string | — | Additional classes for the blinking cursor. |
loop | boolean | true | Cycles back to the first word after the last one; set false to stop after one pass. |
Does Typewriter work with Next.js App Router?
Yes. It's a "use client" React component that uses useState and useEffect, and works as a client component in the App Router.
Are there any dependencies to install?
None. It's built with React state and native browser timers — no external packages required.
Is it responsive?
Yes. It renders inline text sized entirely by your own typography classes via className, with no fixed widths.
Does it respect prefers-reduced-motion?
Not automatically. Typing, deleting, and cursor blinking all run on fixed timers regardless of the OS motion setting. To respect it, check window.matchMedia('(prefers-reduced-motion: reduce)') and render the final word statically instead of mounting the animation.