Burst
Confetti that sprays from any button on click.
Burst wraps any clickable element and throws a small spray of confetti from the click point. Pieces arc, spin and fall in a GSAP timeline, then clean themselves up. Save it for real milestones: finished onboarding, a first deploy, a like.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/burst.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/burst.
Builds on: motion
Usage
import { Burst } from "@/components/ui/burst";
<Burst><Button>Celebrate</Button></Burst>Motion
Each particle runs a two-stage GSAP timeline: launch, then gravity and fade.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Burst
Takes one child element and keeps its own onClick.
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 18 | Particles per click. |
| colors | string[] | signal, ink, muted | Particle colors. |
| disabled | boolean | false | Turn it off. |
Accessibility
- Particles are decorative and removed after 1.5s.
- With reduced motion or --cl-motion: 0 the effect stays still and the content remains fully usable.
FAQ
Also searched as: confetti react · confetti button · celebration animation · click confetti effect · canvas confetti alternative