shadcn.io is not affiliated with official shadcn/ui
Ken Burns Slideshow Gallery Block for Vue
A framed viewer that runs rail to rail with five drawn stills, each panning and zooming slowly for seven seconds before crossfading to the next, with a caption, segments that fill with the time, Previous, Next and a visible Pause.
Installation
Overview
A slow-pan slideshow for Vue with Ark UI, for Longlens, a documentary studio. A compact header sits over one framed viewer that runs from rail to rail, with + marks on its corners. Five drawn stills (a lake, dunes, a forest, a night shore and a coast) each drift and zoom for seven seconds, a different origin and direction every time, then crossfade into the next. A ruled band under the viewer carries the caption (title, place, year and "2 of 5"), five segments that fill as the seven seconds run, Previous and Next buttons and a visible Pause button. Hovering the picture holds the slideshow. Under reduced motion nothing pans, nothing advances and the Pause button goes away, so the stills change only by Previous, Next or a segment. The pictures are drawn, not photographed: a small kit of scenes in your theme's own greys, each a few lines of data you swap for your photographs. It's built from Button and Guides, with CSS animation (the timer is the segment's own animation) and your theme's tokens for every colour. The studio, places and titles are made up for the example.
FAQ
What advances the slideshow?
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.
How can a visitor stop it?
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.
Is every change announced to a screen reader?
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.
How do I change a still's pan?
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.
How do I use my own photographs?
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.