Zoom Focus Master Detail Features Block for React

The six parts are small objects at the top of the file (a name, a number, a sentence and where the thumbnail sits in the column), and each has a drawing component beside them (ColorDrawing, TypeDrawing and so on). The drawings are fluid, so the same component fills the large panel and, shrunk by CSS zoom, the thumbnail; swap one for your own and pass it to its tab and its panel. The drawings are decoration, hidden from assistive technology, and the panel's heading and sentence say the same in text.

Each panel is a figure whose transform origin is set from a CSS variable: the vertical place of its thumbnail in the column, and the side of the block the column is on (it flips in a right-to-left layout). When a tab opens, the panel mounts at 90% scale and eases to full size, which is one CSS transition and no script. With reduced motion it simply appears.

Tab enters the column on the open part, the Up and Down arrows move between parts and open each as they go, and Tab again moves into the panel. Home and End jump to the first and last part. The thumbnails and the panel's drawing are hidden from the keyboard and screen readers: a tab is named by its text ("Color", "01"). Base UI tabs open on focus here as well, so the arrow keys behave the same as on the other libraries.

The column becomes a row of six tiles above the panel (it scrolls sideways when the screen is narrower than the row), and the panel opens from the top. The panel's heading and its chip name the open part, and the drawings are shorter. Nothing scrolls the page sideways at 320 pixels.

No. There is no lens and nothing follows the pointer; the zoom is a plain scale transition between a thumbnail and its panel. For a circle that magnifies what's under the cursor, see the magnifier lens block in the related list.