Click Spark

`<pura-click-spark>` wraps any clickable surface and throws a burst of sparks from the exact click or touch point, a celebration micro-feedback distinct from the material ripple. By default sparks are short lines radiating outward; set `emoji` to a space-separated list to throw emojis instead, cycled per spark. Particles are created on `pointerdown`, animated with WAAPI (radial translate plus scale plus fade) and removed when the animation finishes, so the initial paint carries no effect markup and SSR output is the final resting state by construction. `count`, `size`, `radius` and `duration` shape the burst; `--pura-click-spark-color` themes line sparks. Under reduced motion no particles spawn, but the `pura-click-spark` event (detail `{ id, x, y }`, host-relative pixels) still fires. Each instance registers in `window.__puraClickSparks` by `data-pura-id` with `{ count, burst }`, and `burst(x, y)` can be called programmatically.

Preview

<!-- line sparks from wherever the user clicks -->
<pura-click-spark count="10" radius="36" style="--pura-click-spark-color: gold;">
  <button>Like</button>
</pura-click-spark>

<!-- emoji confetti on tap; listen for the burst event -->
<pura-click-spark id="cheer" emoji="🎉 ✨" count="12" duration="650">
  <button>Celebrate</button>
</pura-click-spark>
<script>
  document.getElementById("cheer").addEventListener("pura-click-spark", (e) => {
    console.log("burst at", e.detail.x, e.detail.y);
  });
</script>

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

import "./pura/lib/click-spark.js";