Построчно из маски

Строки выезжают из «прорезей» с каскадом задержек — самый универсальный приём появления заголовков.

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

Каждая строка

выезжает из прорези

с каскадом задержек

Код

<h1 class="masked">
  <span class="ln"><span>Первая строка</span></span>
  <span class="ln"><span>Вторая строка</span></span>
</h1>

<style>
.ln { display: block; overflow: hidden; }
.ln span { display: block; transform: translateY(115%); }
.masked.play .ln span {
  animation: lineUp .75s cubic-bezier(.16,1,.3,1) forwards; }
.masked.play .ln:nth-child(2) span { animation-delay: .12s; }
@keyframes lineUp { to { transform: none; } }
</style>

<script>
new IntersectionObserver(function (es, io) {
  es.forEach(function (e) {
    if (e.isIntersecting) { e.target.classList.add("play"); io.unobserve(e.target); }
  });
}, { threshold: .4 }).observe(document.querySelector(".masked"));
</script>

Промпт для ИИ

Сделай появление заголовков построчно из маски (как на всех премиальных сайтах): каждая строка в обёртке overflow:hidden, сама строка сдвинута translateY(115%). При попадании блока в кадр (IntersectionObserver threshold 0.4) строки анимируются к нулю за 0.75s по cubic-bezier(0.16,1,0.3,1), каждая следующая с задержкой +120ms. Отлично работает поверх фотографии с тёмным градиентом снизу. Одноразово (unobserve). При prefers-reduced-motion текст виден сразу.