A typographic archive index of year, title and type. Hovering or focusing an entry dims the other rows and shows a floating image preview that trails the pointer.
npx shadcn@latest add https://hyperblur.dev/r/gallery-archive.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/gallery-archive.tsx.
import { GalleryArchive } from "@/components/hyperblur/gallery-archive"
<GalleryArchive images={[{ title: "Harbor Lights", year: 2023, tag: "City" }]} onSelect={(i) => console.log(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| images | { src?: string; title: string; caption?: string; year?: string | number; tag?: 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. |
| onChange | (index: number | null) => void | Called when the user previews another entry, with null when the preview closes. | |
| onSelect | (index: number) => void | Called when an entry is clicked or activated with Enter. | |
| idle | boolean | true | Walk through the entries on its own until the pointer or focus arrives. Off under reduced motion. |
| previewWidth | number | 200 | Width of the floating preview in pixels. It keeps a 4:3 shape. |
| showHeader | boolean | true | Show the column header row. |
| columns | [string, string, string] | ["Year", "Title", "Type"] | Labels of the header row. |
| accent | string | "#2f7bff" | Color of the active marker and focus ring. |
| label | string | "Archive" | Accessible name of the archive. |