THEME
MOTION
HAPTIC
SOUND
TYPEWRITERTEXT
Character-by-character reveal animation. Respects `prefers-reduced-motion` by rendering the full text immediately.
Live demo
Import
import { TypewriterText } from '@cathode-ui/react';Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
text | string | — | yes | |
speed | number | 40 | — | ms per character. |
cursorAfter | boolean | true | — | |
delay | number | 0 | — | |
color | string | — | — | CSS color for the typed text. Default inherits. |
cursorColor | string | — | — | CSS color for the blinking cursor. Default info token. |
onDone | () => void | — | — |
Examples
boot
<TypewriterText text="SYSTEM INITIALIZED." speed={30} />Accessibility
Role: text
- aria-label carries the full text so SR reads it once
Feedback
| Haptic | none |
| Sound | none |
Motion states
typing · cursor-blink