Confetti Party

Add interactive confetti explosions to any Framer element on hover or click. Powered by the open-source canvas-confetti library by Kiril Vatev, this component gives you full control over physics, colors, and shapes directly from the Framer property panel.

⚠ Side effect warning: Clients might actually love this, and you'll never hear the end of it.

FEATURES

• Multiple Trigger Modes: Fire confetti on hover, click, or both.

• Customizable Physics: Tweak particle count, velocity, angle, gravity, drift (wind), and spread in real time.

• Shapes & Palette: Choose between squares, circles, stars, or mixed presets, and define your own custom color scheme.

• Performance Ready: Includes customizable hover throttling to keep animations smooth and respects user reduced-motion preferences.

UPDATE: What's New

⚡ Performance update.

Added IntersectionObserver support — event listeners now automatically attach and detach based on viewport visibility, drastically improving page performance when using multiple instances.

🎉 Auto Trigger (On Appear).

Perfect for success screens, section reveals, and celebratory milestones!

• Custom Delay & Duration: Fine-tune exactly when the confetti starts and how long the celebration lasts.

• Source Options: Choose whether the confetti bursts dynamically from the Edges of your component or erupts directly from the Center.

NOTE: Don't forget to add pointer-events: none to the component.