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