❍Warp Grid Background
01 / 08background

Warp Grid Background

Canvas grid vertices displaced by evolving value noise — drifts continuously, or warps locally around the cursor.

backgroundcanvasinteractiveanimation

Installation

▸ Run the following command

npx shadcn@latest add https://mellowui.com/r/warp-grid.json

▸ Or install manually

  1. Copy the source from the Code tab above.
  2. Place it at components/mellow/warp-grid.tsx
  3. Import and use.

API Reference

PropTypeDefaultDescription
lineColorstring"rgba(var(--ink-rgb),0.15)"Color of the grid lines.
spacingnumber40Grid cell size in pixels.
lineWidthnumber0.6Stroke width of the grid lines.
strengthnumber28Maximum vertex displacement in pixels.
speednumber1Noise evolution speed multiplier.
cursorbooleanfalseWhen true, warp is radially scoped to the cursor — rest of the grid stays flat.
influenceRadiusnumber180Radius of cursor warp influence in pixels (only used when cursor={true}).
classNamestring—Additional CSS classes.
childrenReact.ReactNode—Content rendered above the grid.