Prints hang from a clothes rail on small hangers and swing like pendulums when the pointer brushes past or the rail is dragged. Clicking one pulls it forward.
npx shadcn@latest add https://hyperblur.dev/r/gallery-rail-hang.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/gallery-rail-hang.tsx.
import { GalleryRailHang } from "@/components/hyperblur/gallery-rail-hang"
<GalleryRailHang height={320} 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 index of the print pulled forward, or null when none is open. | |
| defaultValue | number | null | null | Initially opened print when uncontrolled. |
| onChange | (index: number | null) => void | Called when a print is opened or put back. | |
| breeze | boolean | true | Idle motion: slow gusts that sway the prints and a gentle pan along the rail. |
| accent | string | "#2f7bff" | Focus ring and label color. |
| height | number | string | aspect-ratio 16 / 9 | Fixed height. When omitted the gallery keeps its aspect ratio and fills the parent width. |