chatkit/frontend/src/lib/sparkle.ts

import type { MouseEvent } from "react";

/** Spawn CSS-animated spark particles at the click position within a button. */
export function spawnSparkles(e: MouseEvent<HTMLButtonElement>) {
  const btn = e.currentTarget;
  const rect = btn.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  const count = 18;
  for (let i = 0; i < count; i++) {
    const span = document.createElement("span");
    span.className = "sparkle-particle";
    span.style.left = `${x}px`;
    span.style.top = `${y}px`;
    const angle = (i / count) * Math.PI * 2;
    const dist = 36 + Math.random() * 40;
    span.style.setProperty("--dx", `${Math.cos(angle) * dist}px`);
    span.style.setProperty("--dy", `${Math.sin(angle) * dist - 28}px`);
    btn.appendChild(span);
    span.addEventListener("animationend", () => span.remove(), { once: true });
  }
}