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 @compronents/shader-grid-galleryInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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