Magnifying dock

Use it for

• Playful app launchers or a small set of shortcuts
• Portfolio or brand pages that borrow desktop metaphors

Avoid

• Primary navigation in product UI, where targets should not move
• More than eight items, where the growth pushes icons out of reach

How it works

On pointermove the distance from the pointer to each icon's resting centre (offsetLeft, which ignores transforms) maps to a scale through a sine falloff. The extra width of every grown icon is summed and each icon is shifted by the growth to its left minus half the total, so the row spreads evenly. The shelf behind is a pseudo element widened by the same amount. Everything is transform, written as CSS variables.

Accessibility

Icons are real buttons with labels and a tooltip on hover and focus that is counter scaled to stay readable. Touch and reduced motion skip the magnify; a tap still gives a bounce on touch, and reduced motion drops the bounce too.