Filterable Gallery Block for React

The chips are a single-choice ToggleGroup and "All" is the default. Each chip's count is derived from the pictures' categories, so adding a picture to PIECES updates the chip and the "Showing N of M" line. Choosing the chip you already have does nothing: the group is never empty. The pictures that stay re-lay from the start of the grid, and blank cells finish the last row so the hairlines stay in whole rows. Every chip keeps at least two pictures, so there is no empty state to design.

An unseen copy of all 12 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.

Tab reaches the chip group, the arrow keys move between chips and Space or Enter chooses one. The count line is a polite status region, so a screen reader hears "Showing 4 of 12 pieces" after each choice. The pictures are figures with captions, not controls.

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.

The chips become a row that scrolls sideways, the count line sits under it, and the pictures are two across with their captions beneath.