Backgrounds
Lens grid
A precise grid of lines and dots that bulges under the pointer like glass, splitting into color at the edge.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { LensGrid } from '@vizzele/react/gl';
<LensGrid cell={36} strength={0.4} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
cell | number | 36 | Cell size (CSS px). |
strength | number | 0.35 | Bulge strength. |
radius | number | 0.28 | Lens radius. |
aberration | number | 1 | Color split inside the lens. |
lineColor | string | '#5a6788' | Grid color. |
Accessibility
- The canvas is aria-hidden and never takes pointer events — content on top stays fully interactive.
- Pauses when off-screen or in a background tab. Renders one still frame with reduced motion.
- Weak devices get a lower resolution automatically; without WebGL2 a static gradient is shown.