Confetti Party

Interactive Confetti Explosions

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.

Interactive Confetti Explosions