AI Typo Morph

<div class="fx-0419-root">
  <div class="ai-typo-morph">
    <div class="ai-typo-word" data-words="DESIGN, CRÉER, FORMER, RÊVER, BÂTIR">DESIGN</div>
  </div>
</div>

.fx-0419-root,
.fx-0419-root *,
.fx-0419-root *::before,
.fx-0419-root *::after {
  box-sizing: border-box
}

.fx-0419-root {
  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;
}

.ai-typo-morph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-typo-word {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2px;
}

(function() {
  // AI Typo Morph : le mot se brouille puis se recompose lettre par lettre
  // Mots : attribut data-words, séparés par des virgules (relu à chaque changement)
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)');
  var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%';

  document.querySelectorAll('.ai-typo-word').forEach(function(wordEl) {
    function readWords() {
      return (wordEl.getAttribute('data-words') || '').split(',')
        .map(function(w) { return w.trim(); })
        .filter(Boolean);
    }
    var currentWord = 0;
    var scramble = 0;
    var onScreen = true;
    if (!wordEl.textContent.trim()) wordEl.textContent = readWords()[0] || '';

    function morphTo(target) {
      clearInterval(scramble);
      // Mouvement réduit : le mot change d'un coup, sans brouillage
      if (reduce.matches) {
        wordEl.textContent = target;
        return;
      }
      var iterations = 0;
      scramble = setInterval(function() {
        var result = '';
        for (var i = 0; i < target.length; i++) {
          if (iterations > i * 2 || target[i] === ' ') {
            result += target[i];
          } else {
            result += chars[Math.floor(Math.random() * chars.length)];
          }
        }
        wordEl.textContent = result;
        iterations++;
        if (iterations > target.length * 2 + 5) {
          clearInterval(scramble);
          wordEl.textContent = target;
        }
      }, 50);
    }

    // Pause quand le bloc est hors écran
    if ('IntersectionObserver' in window) {
      new IntersectionObserver(function(entries) {
        onScreen = entries[0].isIntersecting;
      }).observe(wordEl);
    }

    setInterval(function() {
      var words = readWords();
      if (!onScreen || document.hidden || words.length < 2) return;
      currentWord = (currentWord + 1) % words.length;
      morphTo(words[currentWord]);
    }, 3000);
  });
})();