Stacked bands that open like an aperture: the image stays fixed while the band grows from its center, so more of the scene is revealed rather than scaled. Each open band shows a description and a project link.
npx shadcn@latest add https://hyperblur.dev/r/image-accordion-vertical.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/image-accordion-vertical.tsx.
import { ImageAccordionVertical } from "@/components/hyperblur/image-accordion-vertical"
<ImageAccordionVertical openOn="click" height={420} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { title: string; meta: string; description: string; colors?: [string, string, string]; motif?: "arches" | "columns" | "stairs" | "window"; href?: string }[] | four projects | Bands to show. The art is drawn from the motif and colors. |
| value | number | undefined | Controlled index of the open band. |
| defaultValue | number | 0 | Initial open band when uncontrolled. |
| onChange | (index: number) => void | undefined | Called when a band opens. |
| openOn | "hover" | "click" | "hover" | Whether hovering a band opens it. Click, focus and arrow keys always work. |
| height | number | 380 | Total height of the stack in pixels. |
| accent | string | "#2f7bff" | Accent color for focus rings, indicators and highlights. |
| className | string | undefined | Extra classes on the root element. |