A fine line grid that bulges around the pointer like a magnifying lens, with a soft accent glow where it bends. Drifts on its own until the pointer arrives.
npx shadcn@latest add https://hyperblur.dev/r/bg-grid-distortion.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-grid-distortion.tsx.
import { BgGridDistortion } from "@/components/hyperblur/bg-grid-distortion"
<div className="relative h-96"><BgGridDistortion /><h1 className="relative">...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| cellSize | number | 32 | Grid cell size in pixels. |
| radius | number | 140 | Radius of the lens in pixels. |
| strength | number | 0.55 | How far lines are pushed outward at the lens center. 0 keeps the grid flat. |
| color | string | "rgba(255,255,255,0.13)" | Line color away from the lens. |
| accent | string | "#2f7bff" | Line and intersection color at the lens center. |
| lineWidth | number | 1 | Stroke width of the grid lines. |
| speed | number | 1 | Speed of the idle drift and the breathing of the lens. |