Staggered Reveal Gallery Block for React

From its place in the grid and the chosen order, at the top of the file: row by row steps through the tiles in reading order, column by column steps down each column in turn, and from the centre uses each tile's distance from the middle, so the four middle tiles arrive together and the corners last. Each tile carries two delays as CSS variables, one for the four-across grid and one for the two-across grid, and the class picks the one for the screen's width.

The grid has a key that changes with each run, so React mounts it afresh and the tiles' starting: styles apply again. Changing the order does the same. A polite status line says "From the centre, replaying" for a screen reader.

The transition is switched off, so every tile is there at once and replaying changes nothing visible. The toggle still works, so the choice is the same on every screen.

Tab reaches the group, the arrow keys move between the three orders and the chosen one is filled with the foreground colour, not the primary, so the page's one accent stays on its action. The group takes a one-item value array; the block ignores an empty one, so one order is always on.

Each tile is a scene of the tile kind: a seed that picks one of eight designs (the number is the design) and a light that moves the raking shadow across it. The design is repeated across the square as paths in your theme's own greys, so two tiles never look alike, and nothing is random at render time.

Each tile in TILES has a name, a finish and a description. Add your image's address to it and replace the Scene with <img alt="" className="size-full object-cover" src={…} />; the square frame crops it and the caption names it.