По буквам

Заголовок разбивается на буквы, каждая влетает со своей задержкой — у Joby это AnimatedText c data-use-chars.

Кнопка «Повторить» в углу.

Код

<h1 class="chars" data-text="Заголовок"></h1>

<style>
.chars span { display: inline-block; opacity: 0;
  transform: translateY(.55em) rotate(6deg); }
.chars.play span {
  animation: chIn .55s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--i) * 45ms); }
@keyframes chIn { to { opacity: 1; transform: none; } }
</style>

<script>
var el = document.querySelector(".chars");
Array.prototype.forEach.call(el.getAttribute("data-text"), function (ch, i) {
  var s = document.createElement("span");
  s.textContent = ch;
  s.style.setProperty("--i", i);
  if (ch === " ") s.style.width = ".3em";
  el.appendChild(s);
});
new IntersectionObserver(function (es, io) {
  es.forEach(function (e) {
    if (e.isIntersecting) { el.classList.add("play"); io.disconnect(); }
  });
}, { threshold: .5 }).observe(el);
</script>

Промпт для ИИ

Сделай появление заголовка по буквам как AnimatedText (data-use-chars) на jobyaviation.com: JS разбивает текст на span-буквы (inline-block), каждая изначально opacity:0, translateY(0.55em) и поворот 6deg. При появлении в кадре буквы анимируются к норме за 0.55s по cubic-bezier(0.16,1,0.3,1), задержка = индекс * 45ms через CSS-переменную --i. Пробелам ширина 0.3em. При prefers-reduced-motion показывай сразу.