Сетка слетается

Разбросанные по экрану кадры слетаются в аккуратную сетку по мере прокрутки.

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

кадры слетаются в сетку по мере прокрутки

Код

<section class="gather" data-scrub>  <!-- 280vh, --p пишет движок -->
  <div class="stick">
    <div class="grid">
      <i style="--x:-70vw; --y:-30vh; --r:-14deg"></i>
      <i style="--x:0;     --y:-60vh; --r:8deg"></i>
      <i style="--x:70vw;  --y:-30vh; --r:16deg"></i>
      <!-- у каждой карточки свои стартовые смещения -->
    </div>
  </div>
</section>

<style>
.gather { position: relative; height: 280vh; }
.gather .stick { position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid i { aspect-ratio: 3/4; background-size: cover;
  --k: clamp(0, calc(var(--p, 0) * 1.25), 1);   /* прогресс сборки */
  transform:
    translate(calc(var(--x) * (1 - var(--k))),
              calc(var(--y) * (1 - var(--k))))
    rotate(calc(var(--r) * (1 - var(--k))));
  opacity: calc(.2 + var(--k) * .8); }
</style>

Промпт для ИИ

Сделай сетку, собирающуюся по скроллу: sticky-сцена 280vh с прогрессом в --p; карточки стоят в обычном CSS-гриде, но у каждой свои стартовые смещения в переменных (--x до ±70vw, --y до ±60vh, --r до ±16deg); transform интерполирует их к нулю через k = clamp(p*1.25): translate((1-k)*x, (1-k)*y) rotate((1-k)*r) + opacity .2→1. К концу сцены кадры «слетаются» в аккуратную сетку; обратный скролл разбрасывает обратно.