Printed Photo Album Gallery Block for React

Each picture in PAGES has a title, a place, a ratio, a width (its share of the page) and a description. Add your image's address, then replace <Scene ratio={item.ratio} scene={item.scene} /> in Mounted with <img alt="" className="size-full object-cover" src={…} />. Pages come in pairs: the cover and page 1 are the two sides of the first sheet, pages 2 and 3 the second, and so on.

Every sheet is in the DOM at all times, a front and a back (the two pages it carries) on a sheet that rotates about the spine with rotateY. A sheet is turned (−180 degrees) when the spread number is higher than its own, so the state is a single number and each sheet only reads it. A sheet's stacking order flips halfway through the turn, when it is edge-on, so it never passes under its neighbour. The whole album slides half a page toward the spine's start while it is closed, so the cover sits in the middle.

Tab reaches Previous and Next; Enter or Space turns. While focus is anywhere in the album, the arrow keys step (mirrored in a right-to-left layout), Home goes to the cover and End to the last page; the album keeps its own left-to-right direction in a right-to-left page, as a printed book does, while the keys and buttons mirror. A polite line under the album says "Spread 2 of 5: Sunday supper, First walk of spring, Window sill, March", and a hidden list holds every page's pictures for a screen reader. The book itself is a drawing and is hidden from assistive technology.

Below md there is no spread: the album shows one page at a time and Next and Previous move a page. The count changes to "Page 3 of 9". The page you are on stays when the window changes size, and a wider window shows the spread that holds it.

Nothing turns or slides: the pages change at once. The album's drop shadows and corner mounts are unchanged.

Yes. The pages are your card colour, the cover a deep mix of your foreground and background, the table a faint tint of your muted colour, and the pictures are mixed from your foreground, background and muted tokens, so the album reads in a light theme and in a dark one.