Canvas Confetti is a JavaScript library that renders performant confetti animations in the browser using canvas.
The library solves the problem of adding celebratory confetti effects to web pages without sacrificing performance. It uses HTML5 canvas to render particle animations efficiently, allowing developers to trigger confetti bursts with a simple function call. The animation can be customized through an options object, and the library returns a Promise that resolves when the animation completes. Multiple calls to the confetti function before the animation finishes will reuse the same canvas element and return the same promise, allowing animations to be layered.
The tool suits any web project that wants to celebrate user actions with visual feedback, from e-commerce checkout pages to game completion screens. It can be installed via NPM for use in build systems like webpack, or included directly in HTML pages via CDN. The library includes built-in support for the prefers-reduced-motion media query through a disableForReducedMotion option, allowing developers to respect user accessibility preferences and disable animations for users who have indicated they prefer reduced motion.
The project maintains active engagement with its community through issue discussions and considers user feedback on design decisions. Development includes ongoing refinement of accessibility features and responsiveness to user concerns about motion preferences on the web.
