Every letter splits into four shards that burst apart from the point you touch and spring back into a clean glyph. Works on hover and focus, as a click toggle, or on its own loop.
npx shadcn@latest add https://hyperblur.dev/r/text-shatter.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-shatter.tsx.
import { TextShatter } from "@/components/hyperblur/text-shatter"
<TextShatter text="Break the mold" className="text-5xl font-bold" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. Screen readers get the plain string. |
| trigger | "hover" | "click" | "hover" | Shatter while hovered and focused, or toggle on click and Enter as a button. |
| force | number | 1 | Multiplier for shard distance and spin. |
| accent | string | "#7fb3ff" | Tint the shards take while apart, and the focus ring color. |
| autoPlay | boolean | false | Shatter and reassemble on a loop while not hovered. |
| interval | number | 2.6 | Seconds the text stays whole between autoplay bursts. |
| onShatterChange | (shattered: boolean) => void | Called when the text breaks apart or comes back together. |