Dock Magnifier Features Block for React

Edit TOOLS at the top of the file: each entry has an id, a name, an icon, the key shown in the badge and a text sentence. The curve is written for tiles in a row; the sizes at the top (TILE, GAP, PAD) and the dock's width class must match if you change their number.

A pointer handler on the dock writes one CSS variable, the pointer's place along the dock measured in tiles. Each tile knows its own index and works out its size in CSS: full size two tiles away, and growing to 1.7 times under the pointer. The place is measured on the dock's resting box, so tiles growing never move the pointer's place, and in a right-to-left layout it is measured from the other end.

Yes. The dock is a tab list: Tab enters it, the left and right arrows move along it, and the tool you land on becomes the active one and shows in the detail card. Keyboard focus magnifies the focused tile just as the pointer does, and a tap on a phone or a click selects a tile.

The tiles keep their size: the pointer handler does nothing and the size transition is off. The detail card still follows the active tile, so everything that carries meaning still works.

From sm the dock magnifies. Below it the tiles stay at one size and the dock scrolls sideways inside its own box, with no magnifying (a finger has no hover), and a tap selects a tool and shows its card.

The detail card comes first in the page source and the dock after it, so reading order matches what you see, and the tab order is the card, then the dock.