Character Cascade

<div class="md-char-stage">
  <div class="md-char-cascade"></div>
</div>

.md-char-stage,
.md-char-stage *,
.md-char-stage *::before,
.md-char-stage *::after {
  box-sizing: border-box
}

.md-char-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.md-char-cascade {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.md-char {
  display: inline-block;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  animation: mdCharIn 0.4s forwards;
}

@keyframes mdCharIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Le mot entier, lu par les lecteurs d'écran, invisible à l'œil */
.md-char-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Mouvement réduit : les lettres sont posées d'emblée, le mot change sans mouvement */
@media (prefers-reduced-motion: reduce) {
  .md-char {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

(function() {
  // Character Cascade : le mot monte lettre par lettre, puis cède la place au suivant toutes les 2,5 s
  document.querySelectorAll('.md-char-cascade').forEach(function(container) {
    // Les mots : un élément enfant par mot (<span>VANNES</span><span>LORIENT</span>),
    // sinon la liste de démonstration
    var words = Array.prototype.map.call(container.children, function(el) {
      return el.textContent.trim();
    }).filter(Boolean);
    if (!words.length) words = ['MOTION', 'DESIGN', 'EFFECT', 'SMOOTH'];
    var currentWord = 0;
    var intervalId = null;

    function showWord() {
      // Animations mises en pause (bouton Pause de la page, outils d'accessibilité) : on garde le mot affiché
      var first = container.querySelector('.md-char');
      if (first && getComputedStyle(first).animationPlayState === 'paused') return;
      container.innerHTML = '';
      var word = words[currentWord];
      // Le mot entier pour les lecteurs d'écran ; les lettres, masquées pour eux, sont pour l'œil
      var label = document.createElement('span');
      label.className = 'md-char-sr';
      label.textContent = word;
      container.appendChild(label);
      word.split('').forEach(function(char, i) {
        var span = document.createElement('span');
        span.className = 'md-char';
        span.setAttribute('aria-hidden', 'true');
        span.textContent = char === ' ' ? '\u00a0' : char;
        span.style.animationDelay = (i * 0.08) + 's';
        container.appendChild(span);
      });
      currentWord = (currentWord + 1) % words.length;
    }
    showWord();
    if (words.length < 2) return;

    // Le cycle ne tourne que lorsque le bloc est visible
    if ('IntersectionObserver' in window) {
      var obs = new IntersectionObserver(function(entries) {
        if (entries[0].isIntersecting) {
          if (!intervalId) intervalId = setInterval(showWord, 2500);
        } else {
          if (intervalId) {
            clearInterval(intervalId);
            intervalId = null;
          }
        }
      }, {
        threshold: 0
      });
      obs.observe(container);
    } else {
      // Repli : cycle permanent
      intervalId = setInterval(showWord, 2500);
    }
  });
})();