Подсветка манифеста

Тёмная сцена: слова манифеста наливаются белым по одному по мере прокрутки.

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

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

Код

<!-- тот же принцип, что «караоке», но на тёмном фоне: -->
<!-- слова из тускло-серого #3a4150 наливаются белым #eef1f6 -->
<section class="scene"><div class="stick"><p class="hl">Текст…</p></div></section>

<script>
var el = document.querySelector(".hl");
var words = el.textContent.trim().split(/\s+/);
var n = words.length;
el.innerHTML = words.map(function (w, i) {
  return '<span style="color:color-mix(in srgb,#eef1f6 ' +
    'calc(clamp(0,calc(var(--p,0)*' + (n + 3) + ' - ' + i + '),1)*100%),#3a4150)">' +
    w + "</span>";
}).join(" ");
</script>

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

Промпт для ИИ

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