Bell Ring

<button class="nuda-icon-bell" type="button" aria-label="Notifications" aria-pressed="false">
  <svg class="nuda-icon-bell__svg" viewBox="0 0 24 24" aria-hidden="true">
    <g class="nuda-icon-bell__body">
      <path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" />
    </g>
    <path class="nuda-icon-bell__clapper" d="M13.73 21a2 2 0 0 1-3.46 0" />
  </svg>
</button>

/* Bell Ring
   The bell body shakes from its top pivot while the clapper swings.
   GPU-only: transform (rotate/translate). Customize: --icon-accent */

.nuda-icon-bell {
  --icon-accent: #e4ff54;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #09090b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fafafa;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}

.nuda-icon-bell:hover,
.nuda-icon-bell:focus-visible {
  border-color: rgba(228, 255, 84, 0.4);
  outline: none;
}

.nuda-icon-bell:focus-visible {
  box-shadow: 0 0 0 2px rgba(228, 255, 84, 0.5);
}

.nuda-icon-bell[aria-pressed="true"] { color: var(--icon-accent); }

.nuda-icon-bell__svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.nuda-icon-bell__body { transform-origin: 12px 4px; will-change: transform; }
.nuda-icon-bell__clapper { transform-origin: 12px 19px; will-change: transform; }

.nuda-icon-bell--ring .nuda-icon-bell__body {
  animation: icon-bell-shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.nuda-icon-bell--ring .nuda-icon-bell__clapper {
  animation: icon-bell-clap 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes icon-bell-shake {
  0%, 100%          { transform: rotate(0); }
  10%, 30%, 50%, 70% { transform: rotate(10deg); }
  20%, 40%, 60%, 80% { transform: rotate(-10deg); }
}

@keyframes icon-bell-clap {
  0%, 100%   { transform: translateX(0); }
  15%, 55%   { transform: translateX(1.5px); }
  35%, 75%   { transform: translateX(-1.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-icon-bell--ring .nuda-icon-bell__body,
  .nuda-icon-bell--ring .nuda-icon-bell__clapper { animation: none; }
}

/* Bell Ring — vanilla JS
   Toggles aria-pressed and plays the ring animation. */

(function () {
  document.querySelectorAll(".nuda-icon-bell").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var on = btn.getAttribute("aria-pressed") !== "true";
      btn.setAttribute("aria-pressed", String(on));
      if (on) {
        btn.classList.add("nuda-icon-bell--ring");
        setTimeout(function () {
          btn.classList.remove("nuda-icon-bell--ring");
        }, 800);
      }
    });
  });
})();