Red and cyan slices tear a word on hover, or when a status changes.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/glitch-textPlayground
Glitch Textrest
Signal Text
Burst
Glitch Textburst
Signal Text
Burst strong
Glitch Textburst strong
Signal Text
Status, click to change
Style
Strength
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/glitch-text
Accessibility
- Real text. A status change is announced politely.
Motion
- A 420 ms burst on hover or a new value.
- With reduced motion, the settled word shows.
Responsive behavior
- Fills its column.
Performance
- A burst lasts 420 ms and is CSS. The one timer clears on change and on unmount.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import GlitchText. Props: text, styleKind, size, label, strength, burst, animated.
- Display bursts on hover. size="status" bursts when text changes and pairs with label.
- burst holds the effect and is for specimens.
Related
Type WriterComponentTypes words like a person: typos, a selection and a blinking caret.Split Flap TextComponentAn airport board: each cell flips through the alphabet until it lands.Swoosh TextComponentExtruded letters lit by the pointer.BadgeComponentA short label that names a status or a category. The pill stays ink and the mark carries the tone.