Перекос от скорости

Сетка карточек «плывёт» skewY пропорционально скорости прокрутки и выпрямляется на остановке.

Скрольте резко.

скрольте резко вверх-вниз — сетка «плывёт» от скорости

Код

<div class="grid skewable">…карточки…</div>

<script>
var el = document.querySelector(".skewable");
var vel = 0, lastY = scrollY;
(function loop() {
  var dy = scrollY - lastY; lastY = scrollY;
  vel += (dy - vel) * .1;                       // сглаженная скорость
  var sk = Math.max(-6, Math.min(6, vel * .28)); // кламп ±6°
  el.style.transform = "skewY(" + sk + "deg)";
  requestAnimationFrame(loop);
})();
</script>

<style>
.skewable { will-change: transform; }
</style>

Промпт для ИИ

Сделай перекос контента от скорости скролла (velocity skew): в rAF считай сглаженную скорость vel += (dy - vel)*0.1, где dy = scrollY - lastY; наклон skewY(clamp(vel*0.28, -6°, 6°)). При остановке скролла vel затухает к нулю и сетка плавно выпрямляется. Вешать на сетки карточек/галереи (will-change: transform), не на текст.