Landscape panels that open one at a time on a story-style timer, with segmented progress at the top. The ridges of each scene slide into place as its panel widens, and hovering pauses the reel.
npx shadcn@latest add https://hyperblur.dev/r/image-accordion-reel.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/image-accordion-reel.tsx.
import { ImageAccordionReel } from "@/components/hyperblur/image-accordion-reel"
<ImageAccordionReel interval={4500} height={320} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { title: string; place: string; caption: string; colors?: [sky, horizon, land, sun] }[] | five destinations | Panels to show. Each scene is drawn from its four colors. |
| value | number | undefined | Controlled index of the open panel. |
| defaultValue | number | 0 | Initial open panel when uncontrolled. |
| onChange | (index: number) => void | undefined | Called when a panel opens, by click, keyboard or the timer. |
| autoPlay | boolean | true | Advances to the next panel when the progress segment fills. |
| interval | number | 5000 | Time each panel stays open, in milliseconds. |
| height | number | 360 | Height of the panel row in pixels. |
| accent | string | "#2f7bff" | Accent color for focus rings, indicators and highlights. |
| className | string | undefined | Extra classes on the root element. |