Browse components
Cursor Grid
A grid of cells that light up under the cursor and cool into a fading color trail.
Cursor Grid
Installation
npx shadcn@latest add @glint-ui/cursor-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/cursor-grid.json
Usage
import { CursorGrid } from "@/components/ui/cursor-grid";
<div className="relative h-96">
<CursorGrid cellSize={36} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cellSize | number | 36 | Cell size in px. |
| gap | number | 4 | Gap between cells in px. |
| radius | number | 6 | Corner radius in px. |
| baseColor | string | "#27272a" | Idle cell outline color. |
| color | string | "#c6ff3d" | Color of freshly lit cells. |
| trailColor | string | "#22d3ee" | Color lit cells cool down to as they fade. |
| fade | number | 1400 | Ms for a lit cell to fade out. |
| brush | number | 1.5 | Brush radius in cells. |
| className | string | — | Extra classes for the root element. |