# catdad/canvas-confetti

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/catdad-canvas-confetti).**

12,602 stars · 462 forks · JavaScript · ISC

## Links

- GitHub: https://github.com/catdad/canvas-confetti
- Homepage: https://catdad.github.io/canvas-confetti/
- awesome-repositories: https://awesome-repositories.com/repository/catdad-canvas-confetti.md

## Topics

`animation` `burst` `canvas` `canvas-confetti` `confetti` `fireworks` `hacktoberfest` `jsdelivr` `particles` `snow`

## Description

canvas-confetti is an HTML5 canvas animation library and browser particle effect engine designed to render celebratory confetti bursts. It functions as a visual effects tool that transforms SVG paths, emojis, and text into animated particles.

The library offloads heavy particle calculations to a web worker to maintain main thread responsiveness and prevent the user interface from lagging. It includes built-in support for operating system reduced motion settings, automatically disabling animations for users with motion sensitivities to ensure accessibility compliance.

The system supports configurable particle streams with adjustable directions and timing, as well as the ability to bind animations to specific canvas elements rather than the full browser window. Sequence completion is handled via promises that resolve once particles exit the screen or the timer expires.

## Tags

### User Interface & Experience

- [Particle](https://awesome-repositories.com/f/user-interface-experience/animation-libraries/particle.md) — Provides a specialized particle system for rendering high-performance celebratory bursts in the browser.
- [Animation Loops](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration/frame-execution-synchronization/animation-loops.md) — Employs a requestAnimationFrame loop to update particle positions and redraw the canvas for smooth motion.
- [Motion Accessibility Utilities](https://awesome-repositories.com/f/user-interface-experience/accessibility-standards/motion-accessibility-utilities.md) — Provides capabilities to adapt animations based on the user's system-level reduced motion preferences. ([source](https://github.com/catdad/canvas-confetti#readme))
- [Animation Performance Optimizers](https://awesome-repositories.com/f/user-interface-experience/animation-optimization-tools/animation-performance-optimizers.md) — Optimizes browser animation performance by utilizing web workers for complex particle calculations.
- [Web Accessibility Compliance](https://awesome-repositories.com/f/user-interface-experience/graphical-user-interfaces/accessibility/web-accessibility-compliance.md) — Ensures accessibility compliance by respecting OS-level reduced motion settings.
- [Motion Preference Handlers](https://awesome-repositories.com/f/user-interface-experience/motion-preference-handlers.md) — Detects and responds to system-level motion preferences to disable animations for sensitive users.
- [Promise-Based Completion](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/transition-effects/animation-sequencing/promise-based-completion.md) — Returns a promise that resolves only after the final particle has exited the screen or the timer has elapsed. ([source](https://github.com/catdad/canvas-confetti/))

### Part of an Awesome List

- [Canvas Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/canvas-libraries.md) — Implements a high-performance animation library utilizing the HTML5 Canvas API.
- [SVG Animation Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/svg-animation-libraries.md) — Transforms SVG paths and emojis into animated particles for customized visual celebrations.

### Graphics & Multimedia

- [Canvas Visual Effects Engines](https://awesome-repositories.com/f/graphics-multimedia/canvas-visual-effects-engines.md) — Functions as a visual effects engine that uses coordinate-based simulations to render dynamic confetti bursts.
- [Celebration Effects](https://awesome-repositories.com/f/graphics-multimedia/celebration-effects.md) — Provides high-performance confetti bursts to celebrate user achievements or milestones on websites.
- [Particle Systems](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/particle-systems.md) — Implements a flexible particle system with configurable directions, counts, and timing for celebratory effects. ([source](https://catdad.github.io/canvas-confetti/))
- [Canvas Rendering Engines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/canvas-rendering-engines.md) — Uses a canvas rendering engine to efficiently draw numerous particle shapes as pixel-based images.
- [Custom Particle Visuals](https://awesome-repositories.com/f/graphics-multimedia/custom-particle-visuals.md) — Canvas-confetti enables the replacement of standard rectangles with specific icons or thematic imagery using SVG paths or emojis. ([source](https://catdad.github.io/canvas-confetti/))
- [Custom Shape Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/custom-shape-rendering.md) — Allows the creation of confetti shapes from SVG paths, text, or emojis. ([source](https://github.com/catdad/canvas-confetti#readme))
- [SVG and Canvas Converters](https://awesome-repositories.com/f/graphics-multimedia/svg-and-canvas-converters.md) — Converts SVG paths and emojis into canvas-compatible imagery for custom particle shapes.

### Web Development

- [Main Thread Offloading](https://awesome-repositories.com/f/web-development/main-thread-offloading.md) — Offloads heavy physics and rendering calculations to a web worker to prevent UI lag.