Проблема с масштабированием значков для компонента просмотра с сети Apple ⇐ CSS

[Anonymous]

Goal:
I am trying to create an apple-watch-grid-view type component inspired by this example
Tech used
I am using ReactTS(vite) + framer-motion to achieve this
Current Progress and Problem
I have replicated the reference but it Все еще не так хорош, как настоящий справочник по мощности фреймер, я не могу понять, что не так?

Код: Выделить всё

git clone https://github.com/MVARUNREDDY8203/apple_watch_grid_view_component.git
cd apple_watch_grid_view_component
npm install
npm run dev

Живая ссылка на более точное воспроизведение


Current Logic to replicate the example:
Theres a watchface-div with overflow-hidden, a draggable grid inside the watchface of icons, and for the dynamic scaling of icons, I am calculating the distance between every icon and the all Из 4 краев часового лица, ближайшего края и в пределах около 50 пикселей края значок масштабируется до 0x. Чем ближе к любому краю в этом крае, тем меньше и чем дальше, тем больше масштаб значка до 1x,
Я заметил, что значки в эталонном примере остаются очень близкими к своим соседям, даже при масштабировании до 0.

Подробнее здесь: https://stackoverflow.com/questions/794 ... -component