Confetti

`<pura-confetti>` is the celebration burst for success, achievement, and checkout moments, the natural companion to fly-to-cart. Wrap any trigger and a click launches a cannon of confetti from it: particles scatter across the page on a full-viewport canvas overlay with simple physics (gravity, drift, air decay, tumble) and clean themselves up when they settle. `angle` aims the cannon (90 is straight up), `spread` widens the cone, `count`, `velocity`, and `duration` shape the burst. With `trigger="manual"` nothing happens on click and you call `fire()` programmatically, optionally overriding `{ count, angle, spread, velocity, duration, x, y }` per burst. Colors come from the `colors` attribute or the `--pura-confetti-color-1..5` tokens, so the party matches your theme. The `fire` event marks launch and `done` marks the last particle settling. SSR and pre-JS paint only the slotted trigger (the canvas stays hidden and empty); reduced motion skips the burst entirely but still dispatches both events so app logic keeps working. Each instance registers in `window.__puraConfettis` by `data-pura-id` with `{ trigger, count, fire }`.

Preview

<!-- click the trigger to fire a burst from it -->
<pura-confetti count="100" spread="80">
  <button type="button">Complete order</button>
</pura-confetti>

<!-- programmatic: fire on checkout success, aimed like a side cannon -->
<pura-confetti id="celebrate" trigger="manual" angle="60" spread="55"
  colors="#f43f5e, #f59e0b, #3b82f6">
  <span>Order confirmed</span>
</pura-confetti>

<script>
  checkout.addEventListener("success", () => {
    document.getElementById("celebrate").fire({ count: 150 });
  });
</script>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/confetti.js"></script>

import "./pura/lib/confetti.js";