Effects
Effect - Confetti burst
Clicking the button fires a canvas physics particle burst - velocity, gravity, spin, fade.
- Canvas particles
- Physics burst
- Click trigger
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
Clicking the button spawns a burst of particles on a canvas, each given a random velocity, and then a small physics loop applies gravity, spin, and a fade so the pieces arc outward, tumble, and dissipate. Because it is canvas-based and triggered on click, it stays idle and cheap until the visitor sets it off.
When to use it
- A success moment such as a completed signup, purchase, or form submission
- A celebratory CTA where clicking should feel rewarding and fun
- Any interaction where a small burst of delight reinforces a positive action
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 30-220
amountPiece count - 3-18
spreadBurst spread
Related components
Using this block
Buy it, then copy components/blocks/confetti-burst/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.