Cursor & Pointer · What the pointer touches
Proximity magnify邻近放大
- handy
- physical
- continuous
Whichever item the pointer nears grows and lifts, with neighbours scaling down in turn. Distance decides size, not hit-testing — so icons respond before the pointer lands on them.
When to use it
For a flat row of icons along an edge that should feel as handy as the macOS Dock: a bottom bar, a toolbar, a side rail. Keep it away from dense controls and table rows — changing size pushes the neighbours around; and do not raise the peak scale beyond about 1.6, because bigger icons cover their neighbours. There is no pointer on a touch screen, so use press feedback there instead.
Parameters
1 + 0.62 · exp(−d²/(2·46²)) · lift 26px · 90ms first-order follow
Recipe
Proximity magnify → 90msProximity magnify → 1 + 0.62 · exp(−d²/(2 · 46²)) · lift 26px · 90ms first-order follow
One sentence for your AI
Build a row of proximity-magnified icons, like the macOS Dock: equal-width items where the one nearest the pointer grows and lifts, with its neighbours scaling down in turn. Size follows a Gaussian, 1 + 0.62 times exp(minus d squared over 2 times 46 squared), where d is the distance from the pointer to that item centre (essentially 1x beyond 46px); the lift is (scale minus 1) times 26px, and transform-origin sits at the bottom edge so items are pushed up rather than grown. Approach the target each frame with a 90ms first-order follow — do not glue it to the pointer, and do not add a CSS transition per item, or they will fight each other. Settle back to rest when the pointer leaves.