canvas-confetti

~8kb gzipped

One-shot confetti bursts for celebrations and success states.

01

See It in Action

Each demo fires confetti on a user action. No ambient background -- the particles start, fall, and clean themselves up.

Click the button to fire a confetti burst from the cursor. The simplest canvas-confetti pattern: call confetti() with an origin.

Preview
02

What is canvas-confetti?

canvas-confetti is a tiny (~8kb gzipped) library that throws confetti on the screen. Call confetti() and 50 paper pieces burst from the middle of the page, fall with real physics, and clean themselves up -- no canvas setup, no config required.

The full API lets you aim bursts from any coordinate, change the angle, spread, particle count, velocity, gravity, drift, colors, and shapes. At ~16.8M weekly npm downloads it is the default "something happy just happened" library for the web. Pair it with a success button, an onboarding milestone, or an Easter egg on your logo.

🎉
One Function, Instant Fun
Call confetti() and particles burst from the middle of the page. No canvas setup, no config required -- the simplest celebration API on the web.
🎯
Aimed Bursts
Point cannons from the edges, angle bursts at specific coordinates, fire fireworks at intervals. The origin, angle, spread, and velocity are all options.
🪶
Tiny + Dependency-Free
About 8kb gzipped, zero dependencies. Works in every modern browser including older tablets and kiosks.
03

When to Use canvas-confetti

Use when
✓ Success feedback after form submission or checkout
✓ Celebration screens (onboarding complete, achievement unlocked)
✓ Easter-egg click responses on logos or buttons
✓ Game-style win/level-up moments
✓ New Year's / holiday landing-page flourishes
Avoid when
✕ Continuous ambient particles on a hero section -- use tsParticles
✕ Interactive physics (repulse, attract, collisions) -- tsParticles covers this
✕ Particles inside a 3D WebGL scene -- use Three.js
04

How canvas-confetti Compares

canvas-confetti vs tsParticles

These solve different problems. tsParticles is for ambient, always-running background scenes (snow, constellations, ambient dust). canvas-confetti is for one-shot celebrations on specific user actions. Use both on the same site if you want -- they do not conflict.

canvas-confetti wins at
Tiny (~8kb vs ~42kb), zero config for the 90% case, call and forget, designed specifically for bursts and celebrations
tsParticles wins at
Continuous ambient animations, 100+ config options, presets (stars, snow, fireflies), mouse interactivity, framework wrappers
canvas-confetti vs CSS + sprite animation

You could fake confetti with a handful of @keyframes-animated DOM elements. It works but falls apart with 50+ pieces, varied shapes, and natural physics. canvas-confetti simulates gravity + drag + rotation per particle -- CSS cannot.

canvas-confetti wins at
Real particle physics (gravity, drag, rotation), hundreds of pieces at 60fps, varied colors/shapes, aimed bursts from any point
CSS + sprite animation wins at
Zero JS dependency, works in email templates, simpler debugging for static designs
05

Get Started with canvas-confetti

Terminal 
npm install canvas-confetti
Terminal 
yarn add canvas-confetti
HTML 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
Quick Start 
<button id="celebrate">Celebrate</button>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<script>
  // Simplest use -- just call confetti(). Bursts from the center of the page.
  document.getElementById("celebrate").addEventListener("click", function () {
    confetti();
  });

  // Aim the burst. Origin is 0-1 on each axis (0.5, 0.5 = center).
  // particleCount, spread, angle, startVelocity, colors, shapes are all options.
  // confetti({
  //   particleCount: 120,
  //   spread: 70,
  //   origin: { y: 0.6 },
  //   colors: ["#4ecdc4", "#f39c12", "#e74c3c"]
  // });
</script>
06

Related Libraries

tsParticles
Animated particle backgrounds and effects for the web.