Canvas Confetti is a lightweight, high-performance confetti animation library for the browser. It is designed for client-side use, so you need a bundler or a script tag to run it in a web page.

When Canvas Confetti Makes Sense

Use it when you want celebratory feedback without pulling in a full animation stack.

Typical triggers:

• successful payments or upgrades
• onboarding milestones
• achievements and streaks
• product tours finishing with a positive outcome

Quick Start

Install the package and call confetti() when you want to celebrate.

npm install --save canvas-confetti

import confetti from "canvas-confetti"

confetti()

You can also pass options to control the look and feel. The most common ones are particleCount, spread, and startVelocity.

confetti({
  particleCount: 120,
  spread: 140,
  startVelocity: 45
})

Custom Canvas (When You Need Control)

If you want confetti in a specific area, create your own canvas and wire it up with confetti.create. This keeps the effect inside a defined region and lets you tune rendering options like resizing and workers.

const canvas = document.createElement("canvas")
document.body.appendChild(canvas)

const myConfetti = confetti.create(canvas, {
  resize: true,
  useWorker: true,
  disableForReducedMotion: true
})

myConfetti({ particleCount: 80, spread: 100 })

Note: when useWorker is enabled, the library takes ownership of the canvas for rendering. Do not try to manipulate the same canvas elsewhere.

Accessibility Tip

Use disableForReducedMotion so the effect respects users who prefer reduced motion. This keeps your celebration accessible and prevents motion-triggered discomfort.

Final Take

Canvas Confetti is the fastest way to add a small burst of delight. Keep it intentional, keep it lightweight, and your UI will feel more alive without being noisy.

References: https://github.com/catdad/canvas-confetti