Framed images walk toward the viewer along a lit runway in 3D, growing and stepping aside as they pass. Hovering a frame stops the flow.
Now passing
Dune No. 4
Archival print, 40 x 50 cm
npx shadcn@latest add https://hyperblur.dev/r/gallery-runway.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/gallery-runway.tsx.
import { GalleryRunway } from "@/components/hyperblur/gallery-runway"
<GalleryRunway height={380} onChange={(i) => console.log(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| images | { src?: string; title: string; caption?: string }[] | six built-in scenes | Images to show. Items without `src` fall back to a built-in gradient landscape. |
| value | number | null | Controlled selected index. Pair with onChange. | |
| defaultValue | number | null | null | Initially selected index when uncontrolled. |
| onChange | (index: number) => void | Called when a frame is clicked, or Enter is pressed for the front frame. | |
| speed | number | 0.055 | How fast the frames travel, in runway lengths per second. |
| playing | boolean | true | Set to false to hold the flow still. |
| accent | string | "#2f7bff" | Runway lights, horizon glow and selection ring color. |
| height | number | string | aspect-ratio 16 / 10 | Fixed height. When omitted the gallery keeps its aspect ratio and fills the parent width. |