A classic cover flow: the center image faces you while the others turn away in 3D and stack to each side, with a soft reflection on the floor. Drag, click a side image or use the arrow keys.
Glacier Line
Ambient, 38 min
npx shadcn@latest add https://hyperblur.dev/r/gallery-coverflow.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/gallery-coverflow.tsx.
import { GalleryCoverflow } from "@/components/hyperblur/gallery-coverflow"
<GalleryCoverflow height={320} onChange={(i) => console.log(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| images | { src?: string; title: string; caption?: string }[] | 6 built-in scenes | Images to show. An entry without src renders a built-in gradient scene, so the gallery works with no assets. |
| value | number | Controlled index of the center image. Pair with onChange. | |
| defaultValue | number | middle image | Initial center image when uncontrolled. |
| onChange | (index: number) => void | Called when the center image changes, by the user or by autoplay. | |
| autoplay | boolean | true | Step back and forth on a timer. Pauses on hover, focus, drag and off-screen. Off under reduced motion. |
| interval | number | 2600 | Milliseconds between autoplay steps. |
| height | number | 300 | Height of the stage in pixels. The cover size follows the height and the width. |
| angle | number | 55 | Rotation of the side images in degrees. |
| reflection | boolean | true | Show the fading floor reflection under each image. |
| accent | string | "#2f7bff" | Focus ring color. |
| label | string | "Cover flow" | Accessible name of the carousel. |