Mood Board Gallery Block for React

Each picture piece in PIECES has a scene and a ratio. Replace <Scene ratio={…} scene={…} /> in Body with <img alt="" className="size-full object-cover" src={…} />; the piece's text already names it. The other kinds are plain CSS: change a chip's share of foreground in CHIPS, a material's gradients in OAK and LINEN, or the words and type samples in the data.

The block keeps one value, the kind being shown ("all" at first). Every piece has a pale veil that is transparent while its kind is shown and 70% background while it isn't, with a short fade. The pieces keep their size, place and tilt, so the board never reflows and the page never jumps. Pressing the pressed item again does nothing: one kind is always chosen.

The lens is the only tab stop: Tab reaches it, the arrow keys move between its items and Space or Enter picks one. The pieces are not controls, so nothing else takes focus; each one is a figure that describes itself for a screen reader, in the order of the data. A polite line under the board says "4 of 12 shown: pictures".

It is a grid of four columns and five rows from md, each piece placed by literal classes in its data (md:col-start-3 md:row-start-2) and sized by its spans, so the twelve pieces fill all twenty cells. On a phone it is two columns and the pieces flow in reading order with the same spans.

The veils change at once with no fade. The tilt is part of the picture, not a motion, so the pieces stay a degree off square.

Yes. The pieces are your card colour, the cork a tint of your muted colour with dots of your foreground, the chips and swatches mixes of your foreground and card colours, and the veil your background, so the board reads in a light theme and in a dark one.