Spark Trail
No library Intermediate
On check, 8 short white spark-streaks shoot outward in all directions and fade quickly, like an electric discharge. More energy-focused and rapid than confetti — pure white, no color variation.
On check, 8 short white spark-streaks shoot outward in all directions and fade quickly, like an electric discharge. More energy-focused and rapid than confetti — pure white, no color variation.
Goal: Create a "Spark Trail" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: emerald (#059669) fill, green (#10b981) border. When checked, 8 white spark-streak elements (short thin rectangles, 6×2px) shoot outward in all directions (0/45/90/135/180/225/270/315 degrees) from the center, scaleX-shrinking and fading over 300ms. Rapid, electric, energetic. No color variation — pure white sparks. Does not trigger on uncheck.
Technique: Conditional render of 8 positioned spans using --angle CSS variable and a single cb-spark keyframe. showSparks state removes them after 350ms.
Accessibility: Hidden native <input type="checkbox">. Animations removed under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.