Backgrounds
Dot grid
A field of dots that behaves like a membrane: dots near the pointer swell, light up and lean away on springs, and a click sends a shockwave rolling across the grid. Canvas 2D — no WebGL.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { DotGrid } from '@vizzele/react';
<DotGrid gap={24} radius={130} style={{ minHeight: 480 }}>
<h1>Your hero</h1>
</DotGrid>Props
| Prop | Type | Default | Description |
|---|---|---|---|
gap | number | 24 | Distance between dots (px). |
size | number | 1.4 | Dot radius (px). |
radius | number | 130 | Reach of the pointer (px). |
shock | boolean | true | A click sends a shockwave. |
Accessibility
- The canvas is aria-hidden; your content sits on top and stays fully interactive.
- It only animates while on screen and while something is moving, then goes idle.
- With reduced motion the dots still light up near the pointer but never move.