Confetti

Render the tag behind the condition that earned the celebration and it fires once, as the page paints. It is the moment a client instructs a quote — the one point in the flow where the product is allowed to be loud. Reach for it for a milestone the customer reached, never for a save that worked.

The burst above played as this page loaded. Replay it below.

count sets the number of pieces, clamped to 600. Above 200 the burst also runs longer, so a fuller celebration lasts as long as it looks like it should.

When a script decides on the celebration rather than the server — a poll that sees a status flip — raise the event the behaviour already listens for instead of rendering the tag:

document.dispatchEvent(new CustomEvent('koala-confetti', { detail: { count: 300 } }))

One burst runs at a time: a second trigger while pieces are still falling is ignored rather than stacking a second canvas over the first. The pieces are drawn from the success, primary and warning tokens, read at fire time so a celebration in dark mode wears the dark palette. Under prefers-reduced-motion nothing is drawn at all.