← All effects

Grid Pulse

BackgroundVanilla JS · zero dependenciesCanvas · draws only near the wave
-- fps
prefers-reduced-motion detected — grid shown with one still wave

X-ray · layers

the quiet base lines
a wave of light rolling out
dots where lines cross

Parameters

Cell size44 px
Wave speed0.8×
Ring width110 px
Intensity0.70
your version · updates as you tinker

How this effect works

The base grid is the cheapest thing on this page: one faint line per column and per row, redrawn each frame. The interesting part is the pulse. It is not an object moving through the scene — it's a number: the wave's current radius, growing steadily and starting over when it leaves the screen. Every grid intersection asks how far am I from that radius? and the answer feeds a bell curve — exp(-(distance/width)²) — that peaks exactly on the ring and dies off smoothly either side.

That bell value w is then spent on light: intersections near the ring get a bright cross of half-cell arms and an enlarged node dot, both with opacity scaled by w. Points far from the ring get w ≈ 0, so we skip them without drawing anything — the wave touches maybe a tenth of the grid at any moment, and that's the performance story: cost follows the ring, not the screen.

Production notes: respects prefers-reduced-motion (static grid with one frozen wave) · intersections outside the ring are skipped entirely, so bigger screens don't mean proportionally more work · cell size controls how "tech" vs "airy" it reads · the copied snippet is self-contained HTML + JS.