По словам

Заголовок выходит на сцену по словам — мягче, чем по буквам. У Joby это AnimatedText с data-use-words.

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

Код

<h1 class="words" data-text="Заголовок из нескольких слов"></h1>

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

<script>
var el = document.querySelector(".words");
el.getAttribute("data-text").split(" ").forEach(function (w, i) {
  var sp = document.createElement("span");
  sp.textContent = w;
  sp.style.setProperty("--i", i);
  el.appendChild(sp);
  el.appendChild(document.createTextNode(" "));
});
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-words) на jobyaviation.com: JS разбивает текст по пробелам, каждое слово в span (inline-block) с переменной --i, между словами текстовые пробелы. Слова изначально opacity:0 и translateY(0.5em); при появлении блока в кадре анимируются к норме за 0.6s по cubic-bezier(0.16,1,0.3,1), задержка = индекс * 90ms. При prefers-reduced-motion показывай сразу.