canvas-confetti

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.