Featured Hero Gallery Block for React

The two trade places. The chosen picture becomes the featured one and the previous feature moves into the slot you chose, so the set of pictures never changes, only their order. order in the component holds the five ids by slot, and swapped is the only function that changes it.

Each small picture is a real button, named "Feature" and its title, and the buttons are keyed by slot, not by picture. After you press one, focus stays on that button, which now shows the picture that used to be featured, so you can keep pressing it to cycle through all five. The featured picture is not a control.

All five captions are laid out in the same cell and only the featured one is visible: the others are invisible, inert and hidden from screen readers. The cell is therefore as tall as the longest caption, and swapping pictures never moves the grid or the page.

The drawn pictures are one small Scene component. Where the code comment says so, swap it for an <img> with object-cover (the pictures are square), and give the featured picture's wrapper the real alt text. Add a src to each entry of PICTURES.

The title appears over a small picture on hover and on keyboard focus, and it is always visible on a coarse pointer such as a phone, where there is no hover. Under reduced motion the pictures stop their slow zoom and the fade between features is off.

The grid comes first: the featured picture across both columns and the four small ones as a 2 x 2 under it, then the caption under a rule. Nothing scrolls sideways at 320 pixels.