Shatter Text for Svelte

Shatter Text breaks like glass. Click it and every character cracks into five sharp pieces that fly apart, turning and fading, and hang there in the air; click again and they spring back together into the text, overshooting a hair before they settle.

Use it for a 404 page, an easter egg, a "do not press" moment or a word that should feel fragile. For letters that fall and pile up instead, use Gravity Text; for a digital glitch, Glitch Text. At rest each character is itself, whole; shattered, it's five copies, each clipped to a wedge, and CSS transitions the install adds to your stylesheet carry them out to places worked out from the character's place in the text, then back on a spring: no animation library and no frame loop. With reduced motion the pieces don't fly: the text just cracks, and mends.

Installation

Usage

<script lang="ts">
import { ShatterText } from "@/components/ui/shatter-text";
</script>

<h1>
  <ShatterText text="Shatter" />
</h1>

Demos

Intensity

intensity is how far the pieces fly: subtle keeps them close around the word, strong scatters them wide. Click each to see. duration is the flight apart, 700 ms by default; coming back together takes a fifth longer.

Controlled

shattered holds the state yourself: here a button beside the text breaks it and mends it. trigger="manual" leaves the text itself unclickable, for text inside your own button or link, and onShatteredChange reports each change a click makes.

Accessibility

Screen readers always hear the text whole: the pieces are hidden from them, and the text is read once, as the name of a real button laid over it, with aria-pressed saying whether it's shattered. Tab reaches it, and Enter or Space shatters it or mends it, like a click. With trigger="manual" there's no button, just the text, read once. With reduced motion nothing flies: the pieces sit a hair apart, a cracked word, and mend at once.

FAQ

API Reference