catdad/canvas-confetti

★ 12,564JavaScriptAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((repo))
    What It Does
      Animated confetti
      Browser-only rendering
      Zero dependencies
    API
      Single function call
      Particle options object
      Custom shapes and emoji
    Built-in Effects
      Cannon burst
      Fireworks loop
      Fixed-origin fire
    Accessibility
      Reduced motion option
      Promise on complete

mindmap root((repo)) What It Does Animated confetti Browser-only rendering Zero dependencies API Single function call Particle options object Custom shapes and emoji Built-in Effects Cannon burst Fireworks loop Fixed-origin fire Accessibility Reduced motion option Promise on complete

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a confetti celebration animation to a web app when a user completes a purchase, finishes a game, or hits a milestone.

USE CASE 2

Create a custom confetti effect with specific colors, shapes, speeds, and emoji using the options object.

USE CASE 3

Fire a fireworks-style continuous confetti loop for a countdown or celebration page.

USE CASE 4

Respect users' reduced-motion system preferences by disabling confetti for accessibility.

Tech stack

JavaScriptCanvas API

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

Canvas Confetti is a JavaScript library that adds animated confetti bursts to a web page. You call a single function and confetti particles fly across the browser window, drawn using the browser's built-in Canvas element. It works entirely in the browser and does not require any server-side code. You can install it via npm for use in a JavaScript build system, or load it directly from a CDN with a single script tag. The main function accepts an options object that controls almost every aspect of the animation: how many particles appear, what angle and speed they launch at, how quickly they slow down and fall, how far they drift sideways, what colors and shapes they use, and where on the screen they originate. Built-in shapes include squares, circles, and stars. You can also define custom shapes from SVG path strings or from text characters like emoji. The library also includes helper functions for more elaborate effects. A "fire" function lets you trigger a confetti burst from a specific position with specific parameters, while a "reset" function clears any active animation. There is a "cannon" style mode for firing bursts from fixed points and a "fireworks" style for continuous celebrations. The API returns a Promise that resolves when the animation finishes, so you can chain actions after the confetti is done. The README includes a dedicated section about reduced motion accessibility. Some users have system settings that request less animation on screen, and the library provides a disableForReducedMotion option to respect that preference. The author encourages developers to use this responsibly. Canvas Confetti is a self-contained, zero-dependency library suited for adding celebration moments to web apps, such as completing a form, winning a game, or finishing a purchase.

Copy-paste prompts

Prompt 1

Add a confetti burst to my checkout success page using catdad/canvas-confetti so it fires as soon as the order confirmation renders.

Prompt 2

Create a fireworks-style confetti loop for a New Year countdown page using canvas-confetti that runs for exactly 5 seconds.

Prompt 3

Make a confetti cannon that fires from both bottom corners of the screen simultaneously when a button is clicked, using canvas-confetti.

Prompt 4

Set up canvas-confetti so it only fires if the user has not enabled the reduced-motion accessibility setting in their OS.

Open on GitHub → Explain another repo

← catdad on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.