🎉 confetti.js

A lightweight confetti browser animation library.

Install

You can install this library from NPM:

npm install --save @hiseb/confetti

Alternatively, you can include this library in your HTML page directly from a CDN:

<script src="https://cdn.jsdelivr.net/npm/@hiseb/[email protected]/dist/confetti.min.js"></script>

Usage

import confetti from "@hiseb/confetti";
confetti();

<script src="https://cdn.jsdelivr.net/npm/@hiseb/[email protected]/dist/confetti.min.js"></script>
<script>
    confetti();
</script>

API

The confetti function takes in a config object, all parameters are optional:

confetti({
    position: { x: 0, y: 0 },   // Origin position
    count: 100,                 // Number of particles
    size: 1,                    // Size of the particles
    velocity: 200,              // Initial particle velocity
    fade: false,                // Particles fall off the screen, or fade out
});

Examples

window.addEventListener("click", (event) => {
    confetti({ position: { x: event.clientX, y: event.clientY } });
});