Typewriter

Looping typewriter with glitch ticks and a blinking cursor.

Installation

npx shadcn@latest add @iconiq/typewriter

Props

TextTypewriter

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

Default 3

Scales the scheduled typing and glitch delays. Lower values make each pass faster; higher values slow the sequence down.

The rendered text is announced with aria-live=polite so updates can be surfaced without replacing surrounding content.

Typing and glitch behavior

The animation schedules a small sequence of per-character timeouts, occasionally inserts a wrong character, removes it, then types the intended character before continuing.

After the full string is typed, the cursor briefly returns and the sequence starts again from an empty string.

Spaces are typed directly without the wrong-character substitution, which keeps word breaks stable during the effect.

Unmount cleanup clears every pending timeout, so remounting the preview or leaving the page does not leave animation work behind.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.