Печатная машинка

Текст набирается посимвольно с мигающим курсором.

«Повторить» — сколько угодно.

Код

<p class="tw" data-type="Текст, который набирается сам."></p>

<style>
.tw { font-family: ui-monospace, monospace; min-height: 3em; }
.tw.typing::after { content: "▌"; color: #E84B16;
  animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
</style>

<script>
var el = document.querySelector(".tw");
var t = el.getAttribute("data-type"), i = 0;
el.classList.add("typing");
var iv = setInterval(function () {
  el.textContent = t.slice(0, ++i);
  if (i >= t.length) {
    clearInterval(iv);
    setTimeout(function () { el.classList.remove("typing"); }, 1200);
  }
}, 38);
</script>

Промпт для ИИ

Сделай эффект печатной машинки: текст из data-type набирается посимвольно каждые ~38мс через textContent = t.slice(0, ++i). Пока идёт набор — псевдоэлемент ::after с символом ▌ мигает (animation steps(1), 50% opacity 0), после окончания курсор исчезает через секунду. Моноширинный шрифт, min-height по финальному числу строк, чтобы вёрстка не прыгала. Запуск — по попаданию в кадр.