Ken Burns Slideshow Gallery Block for React

The filling segment. It is a CSS animation seven seconds long, and when it ends the block shows the next still. Pausing, hovering and reduced motion all stop that one animation, so the picture's pan, the fill and the timer can never fall out of step. Nothing uses setInterval or a frame loop.

A Pause slideshow button sits beside Previous and Next, with aria-pressed and a play icon while paused. Hovering the picture also holds it. Under reduced motion nothing moves by itself, so the button is not shown at all and the stills change only when the visitor asks.

No, on purpose. When the slideshow turns by itself it is silent, so it never talks over the page. When a visitor presses Previous, Next or a segment, a polite status line says "The last ferry out, 5 of 5". Only the shown still is available to assistive technology, the others are inert, and each is an image named by its description.

Each still has a pan string with three custom properties: where the zoom is anchored (origin-[30%_60%]), how far it starts zoomed in (--tw-enter-scale) and the drift it settles from (--tw-enter-translate-x and -y). The pan is slow, twelve seconds against the seven a still is shown, so it never stops short during the crossfade and the drift stays gentle. Keep the zoom under about 1.15 so the picture always covers its frame.

Each still in STILLS has a title, a place, a year and a description; add your image's address to it. Then replace the Scene in the viewer with <img alt="" className="size-full object-cover" src={…} />: the picture's label and the caption already name it. The comment above Scene says where.

Yes. The fill grows from the start side of its segment, Previous and Next mirror, and the caption keeps its place and year in reading order. The drawn pictures are never mirrored, because a picture is not text.