Polaroid-style prints lie scattered at loose angles. Drag any of them to the top of the pile, or tidy the whole table into a neat grid.
npx shadcn@latest add https://hyperblur.dev/r/gallery-scatter.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/gallery-scatter.tsx.
import { GalleryScatter } from "@/components/hyperblur/gallery-scatter"
<GalleryScatter height={360} onTidyChange={(tidy) => console.log(tidy)} />| 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. |
| onChange | (index: number) => void | Called with the index of the print brought to the front. | |
| tidy | boolean | Controlled grid state. Pair with onTidyChange. | |
| defaultTidy | boolean | false | Start in the tidy grid when uncontrolled. |
| onTidyChange | (tidy: boolean) => void | Called when the Tidy up / Scatter button is pressed. | |
| autoPlay | boolean | true | While idle, lift the bottom print to the top of the pile every few seconds. |
| interval | number | 3200 | Milliseconds between idle moves. |
| accent | string | "#2f7bff" | Focus ring and button icon color. |
| height | number | string | aspect-ratio 16 / 10 | Fixed height. When omitted the gallery keeps its aspect ratio and fills the parent width. |