Typewriter Text Effect for Squarespace

<!-- Edit the text and the comma separated word list -->
<h2 class="typewriter-heading">
  I build <span id="typewriter" data-words="websites, brands, online stores"></span>
</h2>

<script>
(function () {
  var el = document.getElementById('typewriter');
  if (!el) return;

  var words = (el.getAttribute('data-words') || '').split(',').map(function (w) {
    return w.trim();
  });
  var wordIndex = 0;
  var charIndex = 0;
  var deleting = false;

  function tick() {
    var word = words[wordIndex];
    charIndex = deleting ? charIndex - 1 : charIndex + 1;
    el.textContent = word.slice(0, charIndex);

    var delay = deleting ? 50 : 90; /* delete faster than we type */
    if (!deleting && charIndex === word.length) {
      delay = 1600; /* pause on the completed word */
      deleting = true;
    } else if (deleting && charIndex === 0) {
      deleting = false;
      wordIndex = (wordIndex + 1) % words.length;
      delay = 400;
    }
    setTimeout(tick, delay);
  }

  /* Respect reduced motion: show the first word as static text */
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    el.textContent = words[0];
  } else {
    tick();
  }
})();
</script>

/* Accent color for the rotating word */
#typewriter {
  color: #c9974a;
}

/* Blinking caret */
#typewriter::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  background: currentColor;
  vertical-align: -0.1em;
  animation: typewriter-caret 0.9s steps(1) infinite;
}

@keyframes typewriter-caret {
  50% { opacity: 0; }
}