Confetti
A canvas-based confetti animation for celebrating user achievements like quote acceptance. The animation creates falling rectangular pieces with rotation, drift, and fade-out effects.
Basic usage
Trigger confetti with showConfetti(200)
for a standard celebration. Requires the confetti function to be loaded (see script below).
<button type="button" onclick="showConfetti(200)">
Launch confetti
</button>
More pieces
Use a higher piece count for bigger celebrations, such as a client accepting a quote.
<button type="button" onclick="showConfetti(300)">
Launch confetti (300 pieces)
</button>
API
The confetti function signature and parameters.
| Function | Parameter | Default | Description |
|---|---|---|---|
showConfetti(pieceCount) |
pieceCount |
200 | Number of confetti pieces to create |
| Colors |
#10b981
#059669
#34d399
#6ee7b7
#a7f3d0
#fbbf24
#f59e0b
|
||
| Max frames | 250 frames. Pieces begin fading out after 60% of frames have elapsed, then the canvas is removed when all pieces are invisible or the frame limit is reached. | ||
Usage guidance
When and where to use confetti animations.
| Do | Don't |
|---|---|
| Use for positive achievements (quote accepted, transaction created) | Use for minor actions (saving a form, toggling a setting) |
| Trigger once per achievement (not repeatedly) | Use for error states or negative outcomes |
| Use the green/amber palette to match the brand | Use on every page load or navigation |