🎉 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
    color: ["#FF06B5"]          // Palette the particles are picked from
});

Examples

Trigger confetti based on a click event:

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

Trigger a sequence of confetti when the page loads:

window.addEventListener("load", () => {
    let positionList = [
        { x: window.innerWidth * 0.50, y: window.innerHeight * 0.60 },
        { x: window.innerWidth * 0.25, y: window.innerHeight * 0.40 },
        { x: window.innerWidth * 0.75, y: window.innerHeight * 0.30 },
    ];
    for(let i = 0; i < positionList.length; i++) {
        setTimeout(() => confetti({ position: positionList[i] }), i * 250);
    }
});

Match the confetti to your brand colors:

window.addEventListener("click", (event) => {
    confetti({
        position: { x: event.clientX, y: event.clientY },
        color: ["#F43F5E", "#8B5CF6", "#06B6D4"],
    });
});