Spall
Pixel shatter bursts: an invisible mosaic of chunky cells where a click (or seeded auto-strike) detonates a radial shockwave — struck cells flash ultraviolet, physically eject along the radius with per-cell jitter in crisp integer-snapped steps, then cool and settle home; overlapping bursts interfere additively and hover leaves a faint warm-up trail. Canvas 2D, idle-silent between bursts, seeded, offscreen-paused, reduced-motion-safe.
canvaspro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/spallProps
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string] | ["#a78bfa", "#4c1d95"] | Two tones [flash, cool]. flash is the hue a cell burns with the instant a shockwave hits it; cool is the deep tone it decays through on the way back to dark. Defaults to ultraviolet — a pale violet flash cooling through deep indigo. Pass warm tones for sparks off steel, or two whites for a mono static-burst look. |
| speed | number | 1 | Shockwave expansion + cooling speed multiplier. 1 = default. |
| intensity | number | 1 | Overall flash brightness, 0–2. |
| pixelSize | number | 10 | Size of one mosaic cell in CSS px. Clamped 4–24. |
| burstRadius | number | 170 | Shockwave reach of one burst in CSS px. Clamped 40–480. |
| ejection | number | 1 | How far struck cells eject along the burst radius, as a multiple of pixelSize (offsets are always snapped to whole pixels — crisp, quantized motion). 0 disables displacement (cells only flash). Clamped 0–3. |
| decay | number | 1 | Cooling / settle-home rate multiplier — higher fades bursts faster. Clamped 0.25–4. |
| autoStrike | number | 2.6 | Seconds between seeded automatic strikes while no burst is live. Strikes land at deterministic seeded positions so the surface periodically detonates on its own. 0 disables auto-strikes (interaction only). |
| interactive | boolean | true | Detonate a burst on click/tap and leave a faint warm-up trail on hover. |
| dpr | number | 2 | devicePixelRatio ceiling. Clamped 1–2. |
| paused | boolean | false | Freeze at a static frame — one burst frozen at peak radius. |
Also accepts all props of React.ComponentPropsWithoutRef<"div"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.