Installation
Examples
Basic
Random Direction
Fireworks
Side Cannons
Stars
Custom Shapes
Emoji
Usage
showLineNumbers
showLineNumbers
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
- Inspired by canvas-confetti