A strip of film with sprocket holes and edge numbers drifts under a center gate, and the frame in the gate is projected large in the viewer above.
npx shadcn@latest add https://hyperblur.dev/r/gallery-filmstrip.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/gallery-filmstrip.tsx.
import { GalleryFilmstrip } from "@/components/hyperblur/gallery-filmstrip"
<GalleryFilmstrip height={360} 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. |
| index | number | Controlled frame index. Pair with onChange. | |
| defaultIndex | number | 0 | Initial frame when uncontrolled. |
| onChange | (index: number) => void | Called when a new frame reaches the gate. | |
| autoPlay | boolean | true | Let the strip drift on its own while the pointer is away. |
| speed | number | 0.35 | Drift speed in frames per second. |
| accent | string | "#2f7bff" | Color of the gate marker. |
| height | number | string | aspect-ratio 16 / 10 | Fixed height. When omitted the gallery keeps its aspect ratio and fills the parent width. |