Warp Grid Background
Canvas grid vertices displaced by evolving value noise — drifts continuously, or warps locally around the cursor.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/warp-grid.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/warp-grid.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| lineColor | string | "rgba(var(--ink-rgb),0.15)" | Color of the grid lines. |
| spacing | number | 40 | Grid cell size in pixels. |
| lineWidth | number | 0.6 | Stroke width of the grid lines. |
| strength | number | 28 | Maximum vertex displacement in pixels. |
| speed | number | 1 | Noise evolution speed multiplier. |
| cursor | boolean | false | When true, warp is radially scoped to the cursor — rest of the grid stays flat. |
| influenceRadius | number | 180 | Radius of cursor warp influence in pixels (only used when cursor={true}). |
| className | string | — | Additional CSS classes. |
| children | React.ReactNode | — | Content rendered above the grid. |