Fireworks

`<pura-fireworks>` is the big-impact celebration, the step up from confetti for launches, milestones, and record-breaking moments. Wrap any trigger and a click sends rockets up from the bottom of the viewport: each one climbs with a glowing trail, decelerates, and explodes at its apex into a sphere of sparks that fall with gravity and fade out, all on a full-viewport canvas overlay that cleans itself up when the show ends. `rockets` sets how many launch per show, `interval` staggers them, `count` sizes each explosion, and `duration` sets how long the sparks live. With `trigger="manual"` you call `fire()` programmatically, optionally overriding `{ rockets, count, interval, duration }` per show; `trigger="auto"` fires one show as soon as the element connects, handy on a success page. Colors come from the `colors` attribute or the `--pura-fireworks-color-1..5` tokens. The `fire` event marks launch, `explode` fires once per rocket burst, and `done` marks the last spark settling. SSR and pre-JS paint only the slotted trigger (the canvas stays hidden and empty); reduced motion skips the show entirely but still dispatches `fire` and `done` so app logic keeps working. Each instance registers in `window.__puraFireworkss` by `data-pura-id` with `{ trigger, rockets, count, fire }`.

Preview

<!-- click the trigger to launch a show of 6 rockets -->
<pura-fireworks rockets="8" count="80">
  <button type="button">Ship it</button>
</pura-fireworks>

<!-- auto show on a success page, themed to the brand -->
<pura-fireworks trigger="auto" rockets="10" interval="250"
  colors="#f43f5e, #f59e0b, #22d3ee">
  <h1>You did it!</h1>
</pura-fireworks>

<script>
  // or programmatically, with per-show overrides
  document.querySelector("pura-fireworks").fire({ rockets: 15, count: 120 });
</script>

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

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