crucıble

Cinderfall

A cursor spark trail: stardust sheds off the pointer white, falls under gravity while dimming through silver to a transparent fade, and fast strokes throw proportionally more — with the occasional heavy spark that bounces once on an invisible floor. Scoped to its container by default, auto-disabled on coarse pointers and under reduced motion.

canvaspro

Installation

CLI

npx shadcn@latest add @crucible/cinderfall

Props

PropTypeDefaultDescription
classNamestring
spawnThresholdnumber12Minimum px the pointer must travel before a new spark sheds — the spawn-distance gate that keeps slow, tiny movements from spamming the trail. Faster strokes cross the gate more often and shed proportionally more sparks.
lifetimenumber1.1Mean spark lifetime in seconds (per-spark jittered ±35%).
ratenumber1Sparks shed each time the pointer crosses the spawn gate.
gravitynumber950Downward acceleration in px/s².
colors[string, string, string, string]a white → silver stardust ramp; pass warm stops for an ember-style trailFade ramp [fresh, bright, dim, faded] — sparks spawn at the first stop and dim through the ramp as they fall while their alpha fades out.
heavyChancenumber0.09Chance a spark is a "heavy" ember that bounces once on an invisible floor.
heatnumber10–1 master energy: spark size, glow, shed rate.
globalbooleanAttach to the whole viewport instead of the nearest containing element. Off by default — Cinderfall is scoped to its parent (place it inside a relative container) so it never sheds sparks page-wide unless you explicitly opt in.
pausedbooleanStop shedding and freeze sparks mid-air.
maxParticlesnumber160Hard cap on live sparks; oldest are recycled beyond it.

Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.