Караоке-подсветка

Абзац приколот к экрану, слова наливаются цветом по мере прокрутки — читатель сам задаёт темп.

Скрольте сквозь сцену.

Этот абзац читается вместе со скроллом: слова наливаются цветом по мере движения — как караоке. Приём который делает лендинг «управляемым» — читатель сам задаёт темп истории. Доскрольте до конца — и сцена отпустит вас дальше.

Код

<section class="scene">  <!-- 260vh, --p пишет движок -->
  <div class="stick"><p class="karaoke">Текст который читается со скроллом…</p></div>
</section>

<script>
// разбиваем на слова, каждому — формула цвета от --p
var p = document.querySelector(".karaoke");
var words = p.textContent.trim().split(/\s+/);
p.innerHTML = words.map(function (w, i) {
  return "<span>" + w + "</span>";
}).join(" ");
var n = words.length;
p.querySelectorAll("span").forEach(function (sp, i) {
  sp.style.color =
    "color-mix(in srgb, #101010 calc(clamp(0, calc(var(--p,0) * " + (n + 4) +
    " - " + i + "), 1) * 100%), #cfccc3)";
});
</script>

<style>
.scene { position: relative; height: 260vh; }
.scene .stick { position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center; }
/* --p (0..1) на .scene обновляет скролл-движок с lerp-доводкой */
</style>

Промпт для ИИ

Сделай караоке-подсветку абзаца по скроллу (как у Apple): sticky-сцена 260vh, прогресс скролла пишется в CSS-переменную --p (0..1, с лерп-доводкой). JS разбивает абзац на слова-спаны; цвет каждого i-го из n слов: color-mix(in srgb, #темный calc(clamp(0, var(--p)*(n+4) - i, 1)*100%), #светло-серый) — слова наливаются цветом по одному слева направо, при обратном скролле гаснут. Никаких перерисовок в JS — только CSS-формула.