Categorized Tabs Gallery Block for React

The list is a vertical Tabs: the arrow keys move between collections (Up and Down), Home and End jump to the first and last, and each tab owns one panel. The counts on the tabs and in the panel caption are derived from each collection's pictures. When a collection has fewer pictures, the last row is finished with blank cells so the hairlines stay in whole rows.

An unseen copy of all 24 pictures (hidden from assistive technology and from the keyboard) sits in the same grid cell as the live set, so the block is always as tall as the full gallery and the shown pictures stay at the top. Nothing below the block moves.

Below the large breakpoint the list lies down as a row of chips that scrolls sideways, with the chosen one filled in the text colour, and the grid is two across. The list is still a vertical Tabs, so on a phone with a keyboard attached Up and Down move between chips, as on a wide screen.

Each picture is typed data with a description (its alt text), a scene and a ratio. Add your image's address to it, then replace the Scene in its tile with <img alt="" className="size-full object-cover" src={…} />: the caption already names the picture, and the role="img" wrapper's label can move to the alt. The comment above Scene says where. Tiles crop to a fixed shape, so keep object-cover.

Each one is a scene: a kind (a room, a lamp, a bridge, a pattern…) and three numbers, light, horizon and a seed that moves ridgelines, lights windows and turns tiles. Each kind is a function that returns the picture as SVG paths painted with a few inks mixed from your theme's colours, so two pictures of one kind with different numbers differ. Nothing is random at render time: the server and the browser draw the same picture.

Yes. Every colour is mixed from your foreground, background and muted tokens, so the pictures print dark on pale grey in a light theme and turn low-key in a dark one. The chosen state of every control is the text colour on the page colour; the primary colour stays on the page's one action. The block ends on its last row with no closing line, so the next section's top rule closes it.