Typewriter
Reveals text character by character, like a terminal being typed in real time. Screen readers receive the full string immediately; reduced motion renders it statically.
Installation
npx dafink-ui add typewriterDemo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | - | Required. The full text to type out. |
| speed | number | 50 | Milliseconds between each character. |
| delay | number | 0 | Milliseconds to wait before typing begins. |
| cursor | boolean | true | Show a blinking | cursor while typing. |
| cursorPersist | boolean | false | Keep the cursor visible after typing completes. |
| onComplete | () => void | - | Called when all characters have been revealed. |
| onReveal | (charsRevealed: number) => void | - | Called with the running character count every time a new character is revealed. Lets a parent track (and later freeze) the current reveal position, e.g. for a "stop generating" control. |
| className | string | "" | Additional Tailwind classes merged onto the root span. |
Accessibility
Typewriter explicitly checks window.matchMedia('(prefers-reduced-motion: reduce)') on mount and, when it matches, immediately reveals the full text with no interval-driven animation; the cursor's blink keyframe is separately disabled via its own @media (prefers-reduced-motion: reduce) rule. The animated character-by-character span is aria-hidden, with the complete string exposed via aria-label on the outer span for assistive tech, and Typewriter adds no keyboard or focus behavior of its own.