Types words like a person: typos, a selection and a blinking caret.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/type-writerPlayground
Type Writertyping
Typewriter, Multiple Words, Auto Loop
Once
Type Writertyping
Typewriter, Auto Loop
Style
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/type-writer
Accessibility
- The full text is in the DOM for screen readers. The typing is hidden from them.
Motion
- About 70 ms a letter, with a held word, a typo and a selection.
- The caret blinks at idle and pauses off screen.
- With reduced motion, the last word shows settled.
Responsive behavior
- Fills its column.
Performance
- Each letter sets state, about every 70 ms while typing. Use it for one short line.
- The caret is CSS and pauses off screen, and the typing timers wait there until it scrolls back.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import TypeWriter. Props: steps, styleKind, loop, animated.
- A step is a string or { text, typoAt, leave }, where leave is erase or select.
- When motion is off it shows the last step's text.
Related
Glitch TextComponentRed and cyan slices tear a word on hover, or when a status changes.Split Flap TextComponentAn airport board: each cell flips through the alphabet until it lands.Marker TextComponentMarks drawn by hand over copy: highlight, underline, circle, box and strike.Swoosh TextComponentExtruded letters lit by the pointer.