Confetti
No library Advanced
On check, 8 colored confetti pieces (alternating rectangles and circles) burst radially outward from the center in all directions, rotating and fading as they travel. Playful and celebratory.
On check, 8 colored confetti pieces (alternating rectangles and circles) burst radially outward from the center in all directions, rotating and fading as they travel. Playful and celebratory.
Goal: Create a "Confetti" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: indigo (#6366f1) fill and border. When checked, 8 confetti pieces burst outward from the center — 4 small rectangles and 4 circles in alternating colors (rose, amber, cyan, violet, orange, green). Each piece uses a --angle CSS custom property and animates: rotate(var(--angle)) translateX(0) → rotate(var(--angle)) translateX(20px) + fade + spin. Pieces are rendered only while animating (showBurst state, removed after 600ms). Unchecking does not trigger confetti.
Technique: Conditional render of 8 positioned spans with CSS animation using --angle. Key-bumped on each check.
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.