Components
Confetti
A burst of paper from any element, point or the middle of the screen: pieces flutter, tumble, slow in the air and fall, then the canvas cleans itself up. One function, no component to mount.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { confetti } from '@vizzele/react';
<button onClick={(e) => confetti(e.currentTarget)}>Publish</button>
// Anywhere, with options — resolves when the last piece lands.
await confetti({ x: 200, y: 120 }, { count: 140, spread: 120, power: 1.4 });Props
| Prop | Type | Default | Description |
|---|---|---|---|
origin | Element | { x, y } | — | Where it bursts from. Default the middle of the screen. |
count | number | 90 | Pieces of paper. |
spread | number | 70 | Cone width in degrees. |
angle | number | -90 | Direction in degrees (−90 is up). |
power | number | 1 | Launch speed. |
colors | string[] | — | Defaults to the iridescent palette. |
Accessibility
- Purely decorative: the canvas is aria-hidden and ignores the pointer.
- With reduced motion nothing is drawn — announce the success in text as well.