Applause Burst

<button class="nuda-confetti-clap" aria-label="Applaud">
  <svg class="nuda-confetti-clap__hands" viewBox="0 0 24 24" fill="#09090b" aria-hidden="true">
    <path d="M11 4l1 5 2-4 1 5 2-3 1 6c.5 3-1.5 6-5 6s-6-2-6.5-5L6 12c-.3-1.2.9-2 1.7-1.1L9 12 7.5 5c-.2-1 1.2-1.5 1.7-.5L10 8 9.5 3c-.2-1 1.3-1.3 1.5 0z"/>
  </svg>
  <span class="nuda-confetti-clap__pieces" aria-hidden="true">
    <span class="nuda-confetti-clap__piece" style="--a:-30deg;  --c:#e4ff54"></span>
    <span class="nuda-confetti-clap__piece" style="--a:-47deg;  --c:#ff5db1"></span>
    <span class="nuda-confetti-clap__piece" style="--a:-64deg;  --c:#5dd0ff"></span>
    <span class="nuda-confetti-clap__piece" style="--a:-81deg;  --c:#e4ff54"></span>
    <span class="nuda-confetti-clap__piece" style="--a:-99deg;  --c:#ff5db1"></span>
    <span class="nuda-confetti-clap__piece" style="--a:-116deg; --c:#5dd0ff"></span>
    <span class="nuda-confetti-clap__piece" style="--a:-133deg; --c:#e4ff54"></span>
    <span class="nuda-confetti-clap__piece" style="--a:-150deg; --c:#ff5db1"></span>
  </span>
</button>

/* Applause Burst
   Clap icon taps and throws a fan of confetti upward.
   Customize: --confetti-clap-bg via background, piece colors via --c. */

.nuda-confetti-clap {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e4ff54;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.nuda-confetti-clap__hands { width: 26px; height: 26px; }

.nuda-confetti-clap--go .nuda-confetti-clap__hands {
  animation: nuda-confetti-clap-tap 0.45s cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.nuda-confetti-clap__pieces {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.nuda-confetti-clap__piece {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c, #e4ff54);
  opacity: 0;
  transform: rotate(var(--a, 0deg)) translateY(0) scale(0.4);
  will-change: transform, opacity;
}

.nuda-confetti-clap--go .nuda-confetti-clap__piece {
  animation: nuda-confetti-clap-fly 0.7s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

@keyframes nuda-confetti-clap-tap {
  0%   { transform: scale(1) rotate(0); }
  40%  { transform: scale(0.78) rotate(-8deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes nuda-confetti-clap-fly {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-38px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-confetti-clap--go .nuda-confetti-clap__hands,
  .nuda-confetti-clap--go .nuda-confetti-clap__piece { animation: none; }
  .nuda-confetti-clap__piece { opacity: 0; }
}

/* Applause Burst — vanilla JS
   Re-fires the clap tap + confetti fan on each click. */

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