Fireworks

<button class="nuda-confetti-fw" aria-label="Launch fireworks">
  <span class="nuda-confetti-fw__label">Fireworks</span>
  <span class="nuda-confetti-fw__sky" aria-hidden="true">
    <!-- Each burst sits at a position and contains 8 sparks. -->
    <span class="nuda-confetti-fw__burst" style="left:24%; top:30%; --d:0s;  --c:#e4ff54">
      <span class="nuda-confetti-fw__spark" style="--a:0deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:45deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:90deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:135deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:180deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:225deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:270deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:315deg"></span>
    </span>
    <span class="nuda-confetti-fw__burst" style="left:70%; top:22%; --d:.4s; --c:#ff5db1">
      <span class="nuda-confetti-fw__spark" style="--a:0deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:45deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:90deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:135deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:180deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:225deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:270deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:315deg"></span>
    </span>
    <span class="nuda-confetti-fw__burst" style="left:50%; top:60%; --d:.8s; --c:#5dd0ff">
      <span class="nuda-confetti-fw__spark" style="--a:0deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:45deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:90deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:135deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:180deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:225deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:270deg"></span>
      <span class="nuda-confetti-fw__spark" style="--a:315deg"></span>
    </span>
  </span>
</button>

/* Fireworks
   Three staggered radial bursts inside a dark sky panel.
   Customize: per-burst position & --c, stagger via --d. */

.nuda-confetti-fw {
  position: relative;
  width: 200px;
  height: 120px;
  background: #09090b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
}

.nuda-confetti-fw:focus-visible {
  box-shadow: 0 0 0 3px rgba(228, 255, 84, 0.4);
}

.nuda-confetti-fw__label {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font: 600 12px/1 system-ui, sans-serif;
  color: #e4ff54;
  pointer-events: none;
}

.nuda-confetti-fw__sky { position: absolute; inset: 0; pointer-events: none; }

.nuda-confetti-fw__burst { position: absolute; width: 0; height: 0; }

.nuda-confetti-fw__spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c, #e4ff54);
  box-shadow: 0 0 6px var(--c, #e4ff54);
  opacity: 0;
  transform: rotate(var(--a, 0deg)) translateY(0);
  will-change: transform, opacity;
}

.nuda-confetti-fw--go .nuda-confetti-fw__spark {
  animation: nuda-confetti-fw-shoot 1s var(--d, 0s) ease-out forwards;
}

@keyframes nuda-confetti-fw-shoot {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.3); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-32px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-confetti-fw--go .nuda-confetti-fw__spark { animation: none; opacity: 0; }
}

/* Fireworks — vanilla JS
   Re-triggers the staggered bursts on each click. */

(function () {
  document.querySelectorAll(".nuda-confetti-fw").forEach(function (btn) {
    btn.addEventListener("click", function () {
      btn.classList.remove("nuda-confetti-fw--go");
      void btn.offsetWidth;
      btn.classList.add("nuda-confetti-fw--go");
      setTimeout(function () {
        btn.classList.remove("nuda-confetti-fw--go");
      }, 1800);
    });
  });
})();