Dual Scroll Gallery Block for React

The Pause scrolling button under the header stops both and keeps aria-pressed, with a play icon while paused. Hovering a column or focusing a name in it holds just that column. Under reduced motion the animation never starts and the button is hidden.

Each column is a vertical Marquee that fills the window's height and repeats its pieces until it does, so the loop never shows a gap. The repeated copies are hidden from screen readers and inert, which keeps them out of the tab order.

Each piece has its own ratio (four by five, square, five by four, three by four) so the two columns drift against each other and never line up. The drawing is scaled to the picture's shape; give your photograph the same ratio and it fits the same way.

The window goes under the header and keeps its height, so the pictures start inside the first screen, and the three facts follow it, one per row. The divider only draws from the large breakpoint; below it a single rule with + marks separates the parts.

Each piece in FIRST_COLUMN and SECOND_COLUMN has a name, a leather note, a ratio and a description. Add your image's address to it and replace the Scene in piece() with <img alt="" className="size-full object-cover" src={…} />. The comment above Scene says where.

Yes. The split mirrors, the divider moves to the other side of the window, and the facts keep their numbers in reading order. The drawn pictures are not mirrored.