A study on the Retro Grid effect.
This grid animates from far to near, adding a subtle depth illusion to a flat web page. Because it can also be implemented directly with CSS, you could find it on older websites, but it’s less common on modern sites.
However, the pure CSS approach has a rendering bug: distant lines flicker. A common workaround is to occlude the far area with a gradient, but that’s not great because the root cause is 1px rasterization—lines can pop in and out. If you mask the distant grid and then zoom out (Ctrl + -), nearer lines will start to flicker as well.
Live demos, full source code https://github.com/YYsuni/suni-demos
Attempts
The first idea was parameter tuning.
Adjust the tilt angle so distant lines are thicker to avoid the 1px bug; this reduces the issue but doesn’t eliminate it, and it constrains the choice of angle.
Adjust the line width; this can also help, but thicker lines may not match the intended design.
The second approach was using SVG.
SVG scales well for UI, but in practice it still doesn’t solve the 1px flicker.
3D Canvas
Using Three.js for this effect; see the second demo.
This removes the 1px flicker, looks much better, and the gradient mask can be replaced with Three’s fog.
There are two approaches: draw the lines directly, or use GridHelper. GridHelper can’t change width and height independently, but you can achieve it via scaling.
Other grid effects
One idea is a terrain effect, with the camera flying through mountains. In practice the result isn’t great—the terrain disrupts the grid and can negatively affect the page.
Another is turning the squares into concentric rings, which keeps things clean and might be useful. See the third demo.
A third is a simple shuttle effect. There’s a wormhole example on CodePen, but it might be too eye-catching for most pages.
Source code for these experiments: https://github.com/YYsuni/suni-demos