Ken Burns Slideshow

The classic documentary-style slideshow of slow zooms and pans, with cross-fades.

A slideshow presented with the classic documentary camera move (the Ken Burns effect): each frame zooms and pans slowly with the direction alternating from slide to slide, cross-fading on every change, plus dot navigation along the bottom and pause on hover. The frames simulate photographs with gradients and SVG mountain scenery, so it is entirely self-contained.

Loading preview…

npx shadcn@latest add https://webberui.com/r/ken-burns-slideshow.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Hold time (ms)duration

8000

Crossfade duration (ms)fadeDuration

1200

Scale amountzoom

1.16

AutoplayautoPlay

Pause on hoverpauseOnHover

<KenBurnsSlideshow />

Installation

npx shadcn@latest add https://webberui.com/r/ken-burns-slideshow.json

Or, once registries are configured in components.json, install it as @webberui/ken-burns-slideshow.

Usage

import { KenBurnsSlideshow } from "@/components/ui/ken-burns-slideshow";

<KenBurnsSlideshow
  slides={[
    { title: "The mountains wake", subtitle: "A sea of clouds at first light", hue: 210 },
    { title: "Golden waves of rice", subtitle: "Fields at harvest time", hue: 42 },
  ]}
  duration={8000}
/>

Props

Prop	Type	Default	Description
`slides`	`KenBurnsSlide[]`	—	The slide data; each item has `title`, `subtitle?`, and a primary `hue` (0–360)
`duration`	`number`	`8000`	How long each slide stays (milliseconds)
`fadeDuration`	`number`	`1200`	Duration of the cross-fade (milliseconds)
`zoom`	`number`	`1.16`	Maximum Ken Burns zoom amount (≥ 1.02)
`autoPlay`	`boolean`	`true`	Whether it plays automatically
`pauseOnHover`	`boolean`	`true`	Whether autoplay pauses on cursor hover
`className`	`string`	—	Forwarded to the outer container; can override the ratio and corner radius

Accessibility

When the user has "reduce motion" enabled at the system level, the zoom-and-pan camera move and autoplay are disabled, leaving only the dots and the arrow keys for switching by hand
The container is focusable (role="region" plus aria-roledescription="輪播", carousel) and supports the left and right arrow keys for the previous/next slide
Every dot button has a descriptive aria-label (including the slide number and the title), and the current slide is marked aria-current
A hidden aria-live="polite" region announces the current slide number and title to screen readers
Hovering the cursor pauses autoplay right away and shows a pause indicator, which makes the caption content easier to read