A strip of artworks hung in 3D space: every card turns to face the pointer like a sunflower, the closest one widens and steps forward, and the whole wall leans with a sliding sheen.
npx shadcn@latest add https://hyperblur.dev/r/hover-tilt-gallery.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hover-tilt-gallery.tsx.
import { HoverTiltGallery } from "@/components/hyperblur/hover-tilt-gallery"
<HoverTiltGallery height={180} onSelect={(i) => console.log(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { title: string; meta: string; background: string }[] | 5 artworks | Cards to show; background is any CSS background. |
| height | number | 132 | Card height in pixels. |
| maxTilt | number | 22 | Largest card rotation in degrees. |
| lift | number | 34 | How far in pixels the nearest card steps toward the viewer. |
| autoPlay | boolean | true | Sway an invisible pointer across the wall while nobody is hovering. The real pointer, a tap or keyboard focus takes over at once. |
| accent | string | "#2f7bff" | Accent color for focus rings, highlights and glows. |
| onSelect | (index: number, item) => void | Called when a card is clicked. | |
| className | string | Extra classes on the root element. Other HTML attributes are forwarded too. |