Band Layout Gallery Block for React

Each picture is a taller layer inside a clipping band. The layer runs the page's entrance keyframe on a scroll timeline (animation-timeline: view()), from the moment the band appears to the moment it leaves, and it sits a little low so the drift passes through its resting place. All of it is behind @supports (animation-timeline: view()) and motion-safe, so a browser without scroll timelines, or a visitor who asked for less motion, gets a still picture. The band clips with overflow-clip, because a hidden box would become the timeline's scroller instead of the page.

The four scenes share one drawing: ridges, a village and furrows, with a table per hour for the sun's place and size, how many windows are lit and how dark each ridge is. Dawn and dusk set the sun on the horizon, noon puts it high and night swaps it for a moon and a field of stars. Nothing is random at render time, so the server and the browser draw the same picture.

Each band has its own disclosure with a visible "Read the note" trigger that reports its state with aria-expanded. Opening one grows only that band's caption; the others stay put. The notes are text in the page, not a tooltip, so they are available on touch. A closed note stays in the HTML, hidden, so it can be found by the browser's in-page search.

They are fixed in the data: one day, 14 June 2025, at 05:42, 12:10, 19:48 and 23:30, each in a time element with its full date and time. Nothing is computed from the visitor's clock.

The bands become sixteen by nine, with the sun and the near hills in the middle of the picture, and the caption's place is hidden so the title and the Read the note trigger fit on two short lines.

Each band in BANDS has an hour, a title, a place, a note and a description. Add your image's address to it and replace the Scene with <img alt="" className="size-full object-cover" src={…} />; keep the layer around it, which makes the drift. The comment above Scene says where.