Thumbnail Strip Gallery Block for React

The drawn pictures are one small Scene component. Where the code comment says so, swap it for an <img>: in the stage <img alt="" className="size-full object-cover" src={picture.src} /> (the stage's role="img" wrapper names it), and in each thumbnail the same without a wrapper. Add src to each entry of PICTURES. Keep every picture 4:3, the ratio of the stage, or crop them with object-cover as the drawn ones are cropped on a phone.

The strip is a radio group named "Pictures": Tab goes to the chosen thumbnail, the arrow keys move to the previous or next one and choose it, and Home and End jump to the first and last. In a right-to-left layout the arrows follow the reading direction. Each thumbnail is named by the picture's title, and a polite line announces "Island lights, 2 of 12" when the picture changes.

Next on the last picture goes back to the first, and Previous on the first goes to the last. The counter and the polite line follow. Remove the wrap in around if you'd rather the buttons stop at the ends.

The stage is a fixed 4:3 box (square on a phone) and the caption's title and sentence reserve their lines, so a longer title or note never pushes the strip down. The new picture fades in inside the stage in 300 ms; with reduced motion it simply swaps.

It is a plain horizontally scrolling row (touch swipe, trackpad or the scroll bar), and choosing a thumbnail by key or with Previous and Next scrolls it so the chosen one sits in the middle. The scroll moves only the strip, never the page, and it jumps instead of gliding under reduced motion.

The stage becomes a square (the 4:3 drawing is cropped from the middle), the caption stacks under it and the strip stays a swipeable row of 96 px thumbnails. Nothing scrolls sideways at 320 pixels except the strip itself.