A story-style slideshow with slow zoom and pan on every photo, crossfades, segmented progress bars and tap zones for previous and next.
Weekend in Lisbon
Four photos, four seconds each. Tap the sides to skip.
0:16 total
npx shadcn@latest add https://hyperblur.dev/r/image-ken-burns.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/image-ken-burns.tsx.
import { ImageKenBurns } from "@/components/hyperblur/image-ken-burns"
<ImageKenBurns images={["/a.jpg", "/b.jpg"]} captions={["Morning", "Evening"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | Image URLs. When empty or missing, four built-in gradient and SVG scenes are used. | |
| captions | string[] | Caption per photo, shown bottom left. The built-in scenes have their own captions. | |
| alt | string | "Photo" | Base accessible name. Each slide is announced as the alt text followed by its position, for example Photo 2 of 4. |
| width | number | string | "100%" | CSS width of the component. |
| height | number | string | CSS height. When omitted the height follows `aspect`. | |
| aspect | string | "16 / 10" | CSS aspect-ratio used when `height` is not set. |
| index | number | Controlled slide index. Pair with onChange. | |
| defaultIndex | number | 0 | Initial slide index when uncontrolled. |
| onChange | (index: number) => void | Called with the new slide index after every change, including automatic ones. | |
| autoPlay | boolean | true | Advance on a timer. It pauses on hover, keyboard focus and while off-screen, and stays off under reduced motion. |
| interval | number | 4200 | Milliseconds between automatic changes. |
| loop | boolean | true | Wrap from the last photo back to the first. |
| accent | string | "#2f7bff" | Color of focus rings and highlights. |