A dark stage with the images standing in a row. A soft spotlight cone picks out the active one while the rest wait dimmed behind; drag across the stage, click or use the arrows to move the light.
Dune Hour
NO. 01 / ERG CHEBBI
npx shadcn@latest add https://hyperblur.dev/r/gallery-backstage.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/gallery-backstage.tsx.
import { GalleryBackstage } from "@/components/hyperblur/gallery-backstage"
<GalleryBackstage height={360} light="#ffe2b0" />| 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 lit image. Pair with onChange. | |
| defaultValue | number | 0 | Initial lit image when uncontrolled. |
| onChange | (index: number) => void | Called when the user moves the spotlight to another image. | |
| idle | boolean | true | Sweep the spotlight back and forth until the pointer or focus arrives. Uncontrolled only, off under reduced motion. |
| interval | number | 2600 | Milliseconds between idle steps. |
| height | number | 320 | Height of the stage in pixels. |
| light | string | "#fff2d6" | Color of the spotlight, its floor pool and the dust in the beam. |
| accent | string | "#2f7bff" | Focus ring color. |
| label | string | "Gallery" | Accessible name of the gallery. |