---
title: "Confetti Party — Free Framer component · Best of Framer"
description: "Free Framer component · by Igor Reif · Effects. Interactive Confetti Explosions"
canonical: "https://framer.elliotli.dev/component/confetti-party"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Confetti Party

# Confetti Party

Interactive Confetti Explosions

[View on Framer](https://framer.com/marketplace/components/confetti-party/?via=elliot-li)

![Confetti Party preview image 1](https://framer.elliotli.dev/og/component/confetti-party/915910b464960f62/1600x1200.jpg)

## Summary

Interactive Confetti Explosions

## Description

## Add interactive confetti explosions to any Framer element on hover or click. Powered by the open-source [canvas-confetti](https://github.com/catdad/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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #2373

## Details

- **Author**: Igor Reif
- **Published**: 2026-08-01
- **Updated**: 2026-08-16
- **Added**: 2026-08-01
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows