Browse components
Motion Grid
A grid of tiles that shrink, spin and flash in rolling waves radiating from whichever tile you click.
Installation
npx shadcn@latest add @glint-ui/motion-gridFirst 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/motion-grid.json
Usage
import { MotionGrid } from "@/components/ui/motion-grid";
<MotionGrid rows={9} cols={15} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | number | 9 | Tile rows. |
| cols | number | 15 | Tile columns. |
| gap | number | 6 | Px between tiles. |
| stagger | number | 45 | Ms of delay per tile of distance. |
| duration | number | 900 | Ms per tile wave. |
| accent | string | "#c6ff3d" | Flash color as the wave passes. |
| autoplay | boolean | true | Send waves from random tiles on its own. |
| className | string | — | Extra classes for the root element. |