Bouncy Letters

<!-- Bouncy Letters — each letter bounces independently
     Wrap every character in a <span> with increasing delay.
     The CSS variable --i drives per-letter stagger. -->
<div class="nuda-bouncy-letters" aria-label="Bouncy">
  <span class="nuda-bouncy-letters__char" style="--i:0">B</span>
  <span class="nuda-bouncy-letters__char" style="--i:1">o</span>
  <span class="nuda-bouncy-letters__char" style="--i:2">u</span>
  <span class="nuda-bouncy-letters__char" style="--i:3">n</span>
  <span class="nuda-bouncy-letters__char" style="--i:4">c</span>
  <span class="nuda-bouncy-letters__char" style="--i:5">y</span>
</div>

/* ── Bouncy Letters ──────────────────────────────────────────
   Customize:
     --nuda-bl-height   : bounce peak height
     --nuda-bl-speed    : bounce cycle duration
     --nuda-bl-stagger  : delay between each letter
   ──────────────────────────────────────────────────────────── */
.nuda-bouncy-letters {
  --nuda-bl-height: -12px;
  --nuda-bl-speed: 0.8s;
  --nuda-bl-stagger: 0.08s;

  display: flex;
  gap: 2px;
  font-size: 2rem;
  font-weight: 800;
}

.nuda-bouncy-letters__char {
  display: inline-block;
  animation: nuda-bouncy var(--nuda-bl-speed) ease infinite;
  animation-delay: calc(var(--i, 0) * var(--nuda-bl-stagger));
}

@keyframes nuda-bouncy {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(var(--nuda-bl-height)); }
  60%      { transform: translateY(calc(var(--nuda-bl-height) / 3)); }
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-bouncy-letters__char {
    animation: none;
  }
}