🎉 Confetti Effect

A lightweight and highly configurable JavaScript library that spawns confetti on demand—perfect for adding celebration effects to buttons, clicks, or custom triggers on your website.

🚀 Installation:

Option 1: via npm

npm  install  spawn-confetti

Option 2: Vanilla JS

1. Download confetti.js and add it to your project folder
2. Include it in your HTML as a module:

   <script  src="path/to/confetti.js"  type="module"></script>

   🎮 Usage and Configuration

   Function Arguments:

   The spawnConfetti() function has the following arguments:

3. amount*(number) – Number of confetti particles to spawn. Default:* 30

4. x, y*(number | string) – Spawn coordinates.
   Default: mouse coordinates
   Accepted string values*:

   • mouse – spawn at mouse coordinate
   • center – spawn at center coordinate of page
   • max – spawn at max coordinate of page
5. velXRange, velYRange*(array) – Initial velocity range.
   Default:* [-5, 5], [-8, 0]
6. angVelXRange, angVelZRange*(array) – Constant rotational velocity range.
   Default:* [0, 0], [6, 12]
7. lifetime*(number) – Lifetime of particles in milliseconds.
   Default:* 2000

Example:

// Spawn 30 confetti particles at the current mouse position
    spawnConfetti();

// Custom configuration
    spawnConfetti({
        amount: 75,
        x: 'center',
        y: 'max',
        velXRange: [-20, 20],
        velYRange: [-10, -3],
        angVelXRange: [1, 0],
        angVelZRange: [5, 15],
        lifetime: 500
    });

Global Configuration:

There are a few global configurations that you can modify:

• acceleration*(vector) – Controls gravity direction.
  Default: (0, 0.25) ➜ To edit values, assign like*: acceleration.x = ..., acceleration.y = ...
• maxVel*(vector) – Sets maximum velocity.
  Default: (1.5, 10) ➜ To edit values, assign like*: maxVel.x = ..., maxVel.y = ...
• drag*(vector) – Affects air resistance. Lower values = more drag.
  Default: (0.98, 1), must be ≤ 1 ➜ To edit values, assign like*: drag.x = ..., drag.y = ...
• colors*(array) – List of colors to randomly assign to particles.
  Default*: #f44a4a, #fb8f23, #fee440, #7aff60, #00f5d4, #00bbf9, #9b5de5, #f15bb5
• shapes*(array of svg strings) – Shapes for particles to randomly select from.
  Default*:

     <rect x="5" y="0" width="6" height="16"/>,
    <path width="16" height="16" d="M0,12 Q4,4 8,12 Q12,20 16,12" stroke-width="5" fill="none"/>,
    <circle cx="9" cy="9" r="5.5"/>,
    <polygon points="9,2.072 17,15.928 1,15.928"/>

  ❗ Note: When adding new custom SVG shapes, ensure that any <path> elements include fill="none" to render correctly.

License: MIT
Contributing: Contributions welcome! Please feel free to submit a Pull Request.