Dock Magnify

Create a magnifying dock (macOS style). A horizontal bar of icon buttons where the icon nearest the cursor grows, its neighbors grow a little, and the rest stay at base size, producing the macOS dock swell. Implementation: on mousemove over the dock, for each icon compute the distance between the cursor X and the icon's center X. Convert distance to influence: max(0, 1 - distance / 90). Icon size = base (38px) + boost (20px) * influence, applied to width and height simultaneously (icon glyph scales proportionally, ~48% of the box). While the cursor moves, use a fast 80ms ease-out transition so the swell tracks tightly; on mouse leave, all icons spring back to base size over 300ms with cubic-bezier(0.34, 1.56, 0.64, 1). Layout: align icons to the bar's bottom (align-items: flex-end) so they grow upward, and give the bar a fixed height covering the max size so nothing outside it shifts. Style: frosted bar (semi-transparent white, backdrop-filter blur, hairline border, large radius). Each icon is a real button with an aria-label. On touch devices and under prefers-reduced-motion, keep all icons at base size. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.