Shadcn.io is not affiliated with official shadcn/ui
Shatter Text
Click-to-shatter text where each character breaks into angular shards that spring back together on the next click, built with React, Next.js, motion, TypeScript and Tailwind CSS.
Shatter Text preview
Click and the text explodes. Each character is rendered as five overlapping shards — angular CSS clip-path slices stacked at the same position so at rest they form the original glyph. On click, every shard flies outward in its own randomized direction with rotation, scattering the word into the void. Click again and spring physics yanks every piece back to its origin, reassembling the text mid-air. The randomness is seeded once per character index via useMemo, so the shatter pattern is stable across renders and never causes hydration mismatches. Distinct from a pop-on or scramble: this is a real two-state interaction — assembled and shattered — driven entirely by the user. Configure the maximum scatter distance through the intensity prop, and pass any Tailwind class for typography. Drop it into a 404 page, a "click me" hero, or a destructive-action confirmation for type that physically reacts to the cursor.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the shatter-text text effect into my projectRelated Components
Stamp Text
Heavy stamped impression with ink-bleed edges
Pop Text
Springy pop-in with bounce on viewport entry
Splitting Text
Character, word, or line splitting with timing
Falling Text
Physics-based letters that drop and pile
Paper Fold Text
Origami-style folding text reveal
Scrambled Text
Cycling characters that resolve to the final string
FAQ
Was this page helpful?
Sign in to leave feedback.