RAX7

На странице плагина ScrollTrigger есть куча примеров, которые должны помочь разобраться.

Способ весьма костыльный, но вроде работает.

&:nth-child(6n + 1) {
    grid-column: 1 / 3;
}

&:nth-child(6n + 2) {
    grid-column: 3 / 4;
}

&:nth-child(6n + 3) {
    grid-column: 4 / 5;
}

&:nth-child(6n + 4) {
    grid-column: 1 / 2;
}

&:nth-child(6n + 5) {
    grid-column: 2 / 3;
}

&:nth-child(6n + 6) {
    grid-column: 3 / 5;
}

https://svg-art.ru/?p=1783

Это баг самой библиотеки, не получается у нее нормально распарсить значения filter: drop-shadow.
Исправить можно сделав анимацию в объект с последующим обновлением свойств самого элемента.

Можно сделать простой эффект на css

Можно более сложный на WebGl

расстояние от боков карточки до боков экрана может отличаться

Если карточка лежит в контейнере-центровщике, то расстояние до краев вьюпорта можно посчитать как 50vw - 50%. В этом случае нужно еще учесть ширину скроллбара, которую придется определять в js.

Нет вызова рендера
renderer.render(scene, camera);
Базовый пример работы с threejs можно посмотреть здесь https://threejs.org/docs/#manual/en/introduction/C...

https://css-tricks.com/snippets/css/fluid-typography/
https://mattclaffey.medium.com/responsive-fonts-us...