A wall of tiles in columns that drift against the pointer at different depths, with the hovered tile lifting forward.
npx shadcn@latest add https://hyperblur.dev/r/gallery-drift-wall.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/gallery-drift-wall.tsx.
import { GalleryDriftWall } from "@/components/hyperblur/gallery-drift-wall"
<GalleryDriftWall height={220} columns={6} />| Prop | Type | Default | Description |
|---|---|---|---|
| tiles | { label?: string; color?: string; src?: string }[] | 18 sample tiles | Tiles in reading order, dealt into the columns one by one. |
| columns | number | 6 | Number of columns. Each column drifts at its own depth. |
| strength | number | 28 | Largest horizontal drift in pixels for the deepest column. |
| height | number | 220 | Height of the viewport in pixels. The wall is larger and gets cropped. |
| gap | number | 8 | Gap between tiles in pixels. |
| idle | boolean | true | Drift on a slow path and lift tiles one by one until the pointer arrives. |