Из тумана по скроллу

Слова выходят из блюра по одному под прокрутку — и уходят обратно при возврате.

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

Каждое слово выходит из тумана, когда до него доходит ваша прокрутка — и уходит обратно, если вернуться. Приём с Codrops: блюр вместо цвета делает чтение почти тактильным.

Код

<section class="scene" data-scrub>  <!-- 240vh, --p пишет движок -->
  <div class="stick"><p class="fog">Текст…</p></div>
</section>

<script>
var el = document.querySelector(".fog");
var words = el.textContent.trim().split(/\s+/);
var n = words.length;
el.innerHTML = words.map(function (w) {
  return "<span>" + w + "</span>";
}).join(" ");
el.querySelectorAll("span").forEach(function (sp, i) {
  var k = "clamp(0, calc(var(--p,0) * " + (n + 4) + " - " + i + "), 1)";
  sp.style.filter = "blur(calc((1 - " + k + ") * 10px))";   // туман → резкость
  sp.style.opacity = "calc(.25 + " + k + " * .75)";
});
</script>

<style>
.fog span { display: inline-block; }
.scene { position: relative; height: 240vh; }
.scene .stick { position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center; }
</style>

Промпт для ИИ

Сделай развеивание текста из блюра по скроллу (приём Codrops «Blurry Text Reveal»): sticky-сцена 240vh с прогрессом в --p; слова-спаны, у i-го из n: k = clamp(0, --p*(n+4) - i, 1); filter: blur((1-k)*10px) и opacity .25+k*.75 — слова выходят из тумана по одному под прокрутку, обратный скролл возвращает туман. Всё считает CSS, JS только разбивает текст.