What Dot Grid is
Dot Grid renders a uniform grid of dots inside the element. As the cursor moves, nearby dots brighten and push away in a shockwave pattern, then settle back into place.
Unlike Aurora, Dot Grid uses Canvas 2D rather than WebGL. It’s lighter on the GPU and works on older devices that struggle with shaders.
Parameters
| Property | Type | Default | Description |
|---|---|---|---|
| baseColor | color | #ffffff | Resting dot color (cursor far away). |
| activeColor | color | #bdfe1b | Highlight color when cursor is near. Dots blend smoothly between base and active based on proximity. |
| dotSize | number (1–20) | 5 | Radius of each dot in pixels. |
| gap | number (5–50) | 15 | Spacing between dots. Smaller gaps make a denser grid; larger gaps make sparser, more distinct dots. |
| proximity | number (0–500) | 100 | Distance in pixels at which dots respond to the cursor. Larger values mean a wider area lights up. |
| shockRadius | number (0–800) | 150 | How far the shockwave ripple extends from the cursor. Larger values create more dramatic waves. |
| shockStrength | number (0–20) | 5 | How much the dots displace in the shockwave. Higher values produce more visible ripple. |
| resistance | number (0–2000) | 750 | Damping after a shockwave. Higher resistance means dots settle back faster. |
| returnDuration | number (s) | 1.5 | Time in seconds for displaced dots to return to their resting position. |
| lift | number (0–1) | 0.5 | Vertical displacement factor when dots are pushed by the cursor. 0 keeps motion in-plane; 1 lifts dots noticeably. |
When Dot Grid shines
- Hero sections that invite interaction. Visitors notice the cursor-reactive grid immediately and start moving the mouse around. Engagement without copy.
- Empty states with personality. A playful background for areas that would otherwise be blank.
- 404 pages.The interaction softens the “wrong page” moment and gives the visitor something to do while you suggest where to go next.
Note
Dot Grid is non-interactive on touch devices because there’s no hover. The grid still renders, just without the ripples. Consider whether the static grid still adds value on mobile, or use breakpoint overrides to swap it out below the tablet threshold.
Performance notes
- Cheaper than Aurora. Canvas 2D is lighter than WebGL shaders. Dot Grid runs comfortably on integrated graphics.
- Density matters. A small
gapwith a smalldotSizecan mean tens of thousands of dots. The math stays cheap, but be reasonable. Default values are well-tuned. - Multiple Dot Grids on one page is fine. Two or three is no problem.
- Lazy-loadedlike every effect. Pages without Dot Grid don’t pay the cost.
Next steps
- Aurora: the ambient WebGL companion to Dot Grid.
- WordPress-only effects: Liquid Ether and others, available today on WordPress.
- Responsive breakpoint overrides: disable Dot Grid on mobile when interaction isn’t available.