iconiq

Typewriter

Looping typewriter text effect that reveals a string with brief glitch substitutions, a blinking cursor, and reduced-motion fallback.

Installation

npx shadcn@latest add @iconiq/typewriter

Props

TextTypewriter

3 props

Looping typewriter text effect that types a string character by character, briefly swaps in glitch characters, and finishes each pass with a blinking cursor.
childrenstring
Required
The text content to type. The component expects a single string because the animation advances through each character in order.
classNamestring
Merged onto the root wrapper for local typography, color, spacing, or alignment classes.
durationnumber
Default3
Scales the scheduled typing and glitch delays. Lower values make each pass faster; higher values slow the sequence down.

Notes

The rendered text is announced with aria-live=polite so updates can be surfaced without replacing surrounding content.
When reduced motion is requested, the component renders the final text immediately and hides the cursor.