Typewriter rotator

<h2 class="typewriter">Build <span data-words='["faster","small tools","real code","for the web"]'></span></h2>

.typewriter {
  margin: 0;
  font: 700 34px/1.2 system-ui, sans-serif;
  letter-spacing: -0.03em;
}
.typewriter span { color: var(--brand); }

/* The caret is a pseudo-element, so it always sits right after the text. */
.typewriter span::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-left: 3px;
  vertical-align: -0.08em;
  background: currentColor;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .typewriter span::after { animation: none; }
}

// Typewriter: types a phrase, waits, deletes it, then moves to the next one.
// Phrases come from the element's `data-words` attribute (a JSON list).

// Typing is text appearing in place, not movement, so it runs with reduced motion too
// (the caret just stops blinking).
const typingDelay = 70;      // ms per letter while typing
const deletingDelay = 35;    // ms per letter while deleting (faster feels natural)
const pauseWhenTyped = 1400; // ms to show the finished phrase
const pauseWhenEmpty = 250;  // ms before typing the next phrase

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

document.querySelectorAll('[data-words]').forEach(async (element) => {
  const phrases = JSON.parse(element.dataset.words);

  for (let index = 0; ; index = (index + 1) % phrases.length) {
    for (const letter of phrases[index]) {
      element.textContent += letter;
      await wait(typingDelay);
    }
    await wait(pauseWhenTyped);

    while (element.textContent) {
      element.textContent = element.textContent.slice(0, -1);
      await wait(deletingDelay);
    }
    await wait(pauseWhenEmpty);
  }
});