# Confetti

Confetti animations are best used to delight your users when something special happens

## Installation

CLIManual

## Examples

### Basic

Confetti 🎉

### Random Direction

Random Confetti 🎉

### Fireworks

Trigger Fireworks

### Side Cannons

Trigger Side Cannons

### Stars

Trigger Stars

### Custom Shapes

Trigger Shapes

### Emoji

Trigger Emoji

## Props

### Confetti
| Prop                            | Type                             | Default            | Description                                                            |
|---------------------------------|----------------------------------|--------------------|------------------------------------------------------------------------|
| `particleCount`                | `Integer`                        | `50`               | The number of confetti particles to launch                              |
| `angle`                         | `Number`                         | `90`               | The angle in degrees at which to launch confetti                       |
| `spread`                        | `Number`                         | `45`               | The spread in degrees of the confetti                                   |
| `startVelocity`                 | `Number`                         | `45`               | The initial velocity of the confetti                                    |
| `decay`                         | `Number`                         | `0.9`               | The rate at which confetti slows down                                   |
| `gravity`                       | `Number`                         | `1`                | The gravity applied to confetti particles                               |
| `drift`                         | `Number`                         | `0`                | The horizontal drift applied to particles                               |
| `flat`                          | `Boolean`                        | `false`           | Whether confetti particles are flat                                     |
| `ticks`                         | `Number`                         | `200`              | The number of frames confetti lasts                                     |
| `origin`                        | `Object`                         | `{ x: 0.5, y: 0.5 }` | The origin point of the confetti                                       |
| `colors`                        | `Array of Strings`              | `['#26ccff', '#a25afd', '#ff5e7e', '#88ff5a', '#fcff42', '#ffa62d', '#ff36ff']` | Array of color strings in HEX format                                   |
| `shapes`                        | `Array of Strings`              | `['square', 'circle', 'star']`   | Array of shapes for the confetti                                       |
| `zIndex`                        | `Integer`                        | `100`              | The z-index of the confetti                                            |
| `disableForReducedMotion`       | `Boolean`                        | `false`           | Disables confetti for users who prefer no motion                       |
| `useWorker`                    | `Boolean`                        | `true`             | Use Web Worker for better performance                                   |
| `resize`                        | `Boolean`                        | `true`              | Whether to resize the canvas                                            |
| `canvas`                        | `HTMLCanvasElement or null`     | `null`             | Custom canvas element to draw confetti                                  |
| `scalar`                        | `Number`                        | `1`                | Scaling factor for confetti size                                        |

### ConfettiButton
| Prop                            | Type                             | Default              | Description                                                            |
|---------------------------------|----------------------------------|----------------------|------------------------------------------------------------------------|
| `options`                       | `Object`                        | `{}`                | Options for the confetti                                               |
| `children`                      | `React.ReactNode`              | `null`               | Children to render inside the button                                    |

## Credits

- Credit to [Bankk](https://www.x.com/bankkroll_eth)
- Inspired by [canvas-confetti](https://www.npmjs.com/package/canvas-confetti)