Browse components
Grid Motion
Tilted rows of tiles that slide in alternating directions as the cursor moves across.
Installation
npx shadcn@latest add @glint-ui/grid-motionFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/grid-motion.json
Usage
import { GridMotion } from "@/components/ui/grid-motion";
<div className="relative h-96">
<GridMotion items={["/a.jpg", "/b.jpg", "Hello"]} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | string[] | [] | Image URLs or short labels; repeats to fill the grid. Empty shows numbered tiles. |
| rows | number | 4 | Number of rows. |
| columns | number | 7 | Tiles per row. |
| tilt | number | -12 | Grid rotation in degrees. |
| strength | number | 260 | Max slide in px. |
| gap | number | 16 | Gap between tiles in px. |
| className | string | — | Extra classes for the root element. |