Hexagonal Honeycomb Gallery Block for React

Each entry in TILES has a title, a yard, a year, a description and a scene. Add your image's address and replace the Scene inside the tile with <img alt="" className="size-full object-cover" src={…} />; the button already carries the name. The hexagon is a clip-path on the box that holds the picture, so a real photograph is cut to the same shape. The comment above Scene says where.

The comb is a roving tabindex: only the current tile is in the tab order, so Tab enters the comb once and leaves it once. Left and Right move along the row and stop at its ends. Up and Down go to the nearest tile in the next row; between rows of different length there are two equally near tiles, and the one closer to the middle wins. Home and End go to the first and last tile of the row. Focusing a tile (also with a click or a tap) makes it the current one.

The comb is a drawing, so it keeps its shape: the rows and the arrow keys follow the picture, with Right going toward the right edge of the comb whatever the page's direction. The caption under it flips with the page.

A tile is a button one fifth of the comb wide and 0.866 times as wide as it is high, so a pointy-topped hexagon fits it exactly; the picture is clipped with a six-point clip-path: polygon(). Each row is a centred flex row pulled up by a quarter of a tile. To change the comb, edit ROWS (tiles per row, widest in the middle) and the length of TILES to match; the key navigation reads ROWS.

Yes. The current tile's growth and the outline are CSS transitions that turn off under prefers-reduced-motion, and the header and the comb's entrance on load do too. Nothing moves by itself.

Each tile is a button named by its title, yard and year, and the current one is marked with aria-current. The caption under the comb is a polite live region, so moving to a tile reads its title, yard, year and "8 of 19" once. The group is a fieldset with a screen-reader legend that says the arrow keys move between the tiles.