← All effects
Dot Grid Reactive
-- fps
prefers-reduced-motion detected — static dot grid
X-ray · layers
the regular grid
dots bend away
nearby dots light up
Parameters
Spacing28 px
Reaction radius120 px
Push strength22 px
Dot size2.0 px
your version · updates as you tinker
How this effect works
The field starts as plain rows and columns. For each dot we measure the distance to the cursor. Inside the reaction radius, a smooth falloff pushes the dot along the line pointing away from the cursor. Distance becomes displacement — that is the entire illusion of a flexible surface.
The glow reuses that same falloff as opacity and size. No second simulation is needed: one number controls both motion and light, which keeps the field visually coherent and cheap enough for a background.
Production notes: respects prefers-reduced-motion (static grid) · spacing is clamped so dot count stays bounded · Site Lab uses the same parameters and performance limits · copied snippet is self-contained HTML + JS.