Fade Up Words

<!-- Fade Up Words — words fade up one by one
     Each word gets a stagger delay via --i custom property. -->
<div class="nuda-fade-up-words" aria-label="Words fade up one by one">
  <span class="nuda-fade-up-words__word" style="--i:0">Words</span>
  <span class="nuda-fade-up-words__word" style="--i:1">fade</span>
  <span class="nuda-fade-up-words__word" style="--i:2">up</span>
  <span class="nuda-fade-up-words__word" style="--i:3">one</span>
  <span class="nuda-fade-up-words__word" style="--i:4">by</span>
  <span class="nuda-fade-up-words__word" style="--i:5">one</span>
</div>

/* ── Fade Up Words ───────────────────────────────────────────
   Customize:
     --nuda-fuw-offset   : vertical travel distance
     --nuda-fuw-speed    : per-word animation duration
     --nuda-fuw-stagger  : delay between words
   ──────────────────────────────────────────────────────────── */
.nuda-fade-up-words {
  --nuda-fuw-offset: 20px;
  --nuda-fuw-speed: 0.6s;
  --nuda-fuw-stagger: 0.15s;

  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  font-size: 1.6rem;
  font-weight: 700;
  perspective: 600px;
}

.nuda-fade-up-words__word {
  display: inline-block;
  opacity: 0;
  animation: nuda-fade-up-word var(--nuda-fuw-speed)
    cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * var(--nuda-fuw-stagger));
}

@keyframes nuda-fade-up-word {
  from {
    opacity: 0;
    transform: translateY(var(--nuda-fuw-offset)) rotateX(20deg);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
    filter: blur(0);
  }
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-fade-up-words__word {
    animation: none;
    opacity: 1;
  }
}