Sparkle Trail Cursor

Create a sparkle-trail cursor. The native cursor stays. As the mouse moves, small four-point stars (the ✦ glyph, so no image assets are needed) appear just behind the path, each with a slightly different size, color, and rotation, shrinking and spinning away within ~0.6s. It reads playful and a little retro, closer to a sticker aesthetic than to elegant minimalism, so match it to a brand that can carry it. Implementation: on mousemove, spawn a star only after the cursor has traveled at least 22px from the last spawn point. Each star is a span with textContent '✦', position: fixed at the cursor plus a deterministic jitter of up to 8px on each axis, font-size varied between 8 and 14px, and a color cycled from a small warm palette (accent orange, a lighter orange, ink: tones that read on your page background). Center it with translate(-50%, -50%). Two frames after insertion, transition over 600ms ease-out to opacity 0 and transform: translate(-50%, -50%) rotate(±45deg) scale(0.3), then remove it after ~640ms. Vary size, jitter, and spin from an incrementing counter (e.g. (i*7 % 16) - 8) rather than Math.random() so the trail feels organic but renders identically on every run. Details: stars are aria-hidden and pointer-events: none; the spawn threshold caps the element count naturally; gate behind (hover: hover) and (pointer: fine); skip entirely under prefers-reduced-motion. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.