Images laid out along a spiral that drifts forever, growing and brightening as they leave the center. Drag, scroll or use the arrow keys to move along it.
Field notes
12 places / 2026
npx shadcn@latest add https://hyperblur.dev/r/gallery-infinite-spiral.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/gallery-infinite-spiral.tsx.
import { GalleryInfiniteSpiral } from "@/components/hyperblur/gallery-infinite-spiral"
<div style={{ height: 320 }}><GalleryInfiniteSpiral drift={0.25} /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| images | { src?: string; label?: string; alt?: string }[] | 12 built-in scenes | Items to place on the spiral. An item without src renders a built-in gradient scene. |
| drift | number | 0.3 | Idle speed in items per second. Set 0 to stop the drift. Ignored when the user prefers reduced motion. |
| turns | number | 1.5 | How many turns the spiral makes from the outer edge to the center. |
| wheel | boolean | true | Move along the spiral with the mouse wheel while the pointer is over the gallery. |
| accent | string | "#2f7bff" | Color of the center glow, the guide line and the focus ring. |
| itemRatio | number | 0.78 | Item width divided by height. |
| label | string | "Spiral gallery" | Accessible name of the gallery. |