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 still not as good as the real framer-motion reference, I cant seem to figure out whats wrong?

Code Sandbox reproduction of the same

Github code for more accurate reproduction

git clone .git
cd apple_watch_grid_view_component
npm install
npm run dev

Live Link of more accurate reproduction

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 of 4 edges of the watchface, the closest edge and within some 50px of margin the icon scales down to 0x. The closer to any edge within this margin the smaller and the farther the larger the scale of icon till 1x,

I have observed that the icons in the reference example stay very close to their neighbours even while scaling down to 0.