hcg-confetti-cannons

Lightweight canvas confetti cannons for vanilla JavaScript. Zero dependencies.

• GitHub: github.com/html-code-generator/hcg-confetti-cannons
• Documentation & demo: html-code-generator.com/javascript/confetti-cannons-library

Install

npm install hcg-confetti-cannons

Quick start

Bundler (webpack, Vite, etc.):

import confetti from "hcg-confetti-cannons";

confetti({ particleCount: 120, spread: 70, origin: { x: 0.5, y: 0.9 } });

CommonJS:

const confetti = require("hcg-confetti-cannons");

Script tag (CDN):

<script src="https://cdn.jsdelivr.net/npm/hcg-confetti-cannons@1/hcg-confetti-cannons.min.js"></script>

Basic usage

confetti({
  particleCount: 120,
  spread: 70,
  origin: { x: 0.5, y: 0.9 },
});

Presets

confetti.celebrate();
confetti.fireworks({ duration: 3000, interval: 250 });
confetti.schoolPride({ colors: ["#0057b7", "#ffd700"] });

Emoji and text

confetti.emoji({ particleCount: 80, spread: 70 });

confetti.text({
  texts: ["YAY", "WOW", "GO"],
  colors: ["#ff6b6b", "#ffd93d", "#6c9eff"],
  particleCount: 100,
  spread: 80,
});

Scoped canvas

const canvas = document.getElementById("party-canvas");
const party = confetti.create(canvas, { resize: true });

party({ particleCount: 80, spread: 80, origin: { x: 0.5, y: 0.8 } });
party.destroy();

Chain with Promises

confetti({ particleCount: 80 })
  .then(() => confetti.fire({ particleCount: 50 }));

License

MIT - see LICENSE.