PUConfetti Component
A hand-drawn style confetti animation component with customizable particles and physics
Usage
Basic Usage
Custom Colors
Long Duration
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| active | boolean | No | false | Trigger confetti animation |
| colors | string[] | No | Default color palette | Array of colors for particles |
| particleCount | number | No | 50 | Number of confetti particles |
| duration | number | No | 3000 | Animation duration in milliseconds |
| width | number | No | 400 | Canvas width |
| height | number | No | 300 | Canvas height |
| customClass | string | No | '' | Custom CSS classes |
Events
| Event | Payload | Description |
|---|---|---|
| start | - | Emitted when animation starts |
| end | - | Emitted when animation ends |
Features
- Canvas-based particle system with smooth animations
- Multiple particle types: circles, squares, triangles
- Physics simulation with gravity and rotation
- Customizable colors and particle count
- Configurable animation duration
- Hand-drawn style visual effects
- Responsive canvas sizing
- Performance optimized with requestAnimationFrame
Dependencies
- Tailwind CSS for styling
- Vue 3 Composition API
- HTML5 Canvas API