Shader Grid Gallery
An infinite, draggable grid of framed images rendered entirely in one fragment shader. A single full-screen plane tiles the projects into cells with borders, captions, and a lens-warped vignette; dragging pans the field with inertia and eases in a slight zoom, the cell under the pointer lifts, and a click that does not drag selects that project. Three.js with on-the-fly image and text atlases.
npx shadcn@latest add https://ui.aryank.space/r/shader-grid-gallery.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| projects | ShaderGridProject[] | Twenty-five BLANK projects | Title, year, image, and optional href tiled across the grid. |
| onSelect | (project) => void | undefined | Called when a cell is clicked without dragging. |
projectstextTitle, year, image, and optional link for each cell.
onSelecttextCallback fired with the project of a clicked (non-dragged) cell.
three