A cover flow where the active image throws soft colored light onto the stage while the neighbors turn away into the dark.
npx shadcn@latest add https://hyperblur.dev/r/gallery-coverflow-lights.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/gallery-coverflow-lights.tsx.
import { GalleryCoverflowLights } from "@/components/hyperblur/gallery-coverflow-lights"
<GalleryCoverflowLights height={340} images={[{ title: "Low Tide", color: "#ff7a59" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| images | { src?: string; title: string; caption?: string; color?: string }[] | six built-in scenes | Images to show. `color` sets the light each one casts; built-in scenes bring their own. |
| index | number | Controlled active index. Pair with onChange. | |
| defaultIndex | number | 0 | Initial index when uncontrolled. |
| onChange | (index: number) => void | Called with the new active index. | |
| autoPlay | boolean | true | Advance on a timer while the pointer and focus are elsewhere. |
| interval | number | 3200 | Milliseconds between automatic steps. |
| glow | number | 1 | Strength of the ambient light, from 0 to about 1.5. |
| height | number | string | aspect-ratio 16 / 10 | Fixed height. When omitted the gallery keeps its aspect ratio and fills the parent width. |