# ๐ 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
```bash
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:
```html
```
## ๐ฎ Usage and Configuration
### Function Arguments:
The `spawnConfetti()` function has the following arguments:
- **`amount`***`(number)`* โ Number of confetti particles to spawn.
*Default:* 30
- **`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
- **`velXRange, velYRange`***`(array)`* โ Initial velocity range.
*Default:* [-5, 5], [-8, 0]
- **`angVelXRange, angVelZRange`***`(array)`* โ Constant rotational velocity range.
*Default:* [0, 0], [6, 12]
- **`lifetime`***`(number)`* โ Lifetime of particles in milliseconds.
*Default:* 2000
Example:
```js
// 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*:
```html
,
,
,
```
> โ **Note:** When adding new custom SVG shapes, ensure that any `` elements include `fill="none"` to render correctly.
**License:** MIT
**Contributing:** Contributions welcome! Please feel free to submit a Pull Request.