Atmosphere & Background · The air of the page
Reactive grid网格感应
- present
- responsive
- restrained
An even dot grid covers the background; the dots near the pointer brighten and grow slightly, and a click sends a ripple out from where you pressed. The grid itself never moves — only “how near the pointer is” and “has the ring passed” change, so the screen stays calm while making it obvious that it is listening.
When to use it
Fits pages that explain something interactive: a data dashboard, a passcode screen, the ground of a first screen. It is a background by nature, so do not stack another background effect on top. And do not run it edge to edge of a long page — a grid that large shows its own truncation while scrolling and starts to look unpaved.
Parameters
dot pitch 26px · exp(−d²/2·62²) falloff · linear, no easing · ripple 0.36px/ms rings, life 1.3s · r 1.3→3.8px
Recipe
Reactive grid → 1.3s linearReactive grid → dot pitch 26px · exp(−d²/2 · 62²) falloff · linear, no easing · ripple 0.36px/ms rings, life 1.3s · r 1.3→3.8px
One sentence for your AI
Lay a pointer-aware dot grid over this area: 26px pitch, centred in the remaining space. Each dot's brightness falls off with exp(−d²/(2·62²)) by its distance to the pointer and its radius grows from 1.3px to 3.8px, coloured by mixing the accent colour by that brightness. A press emits a ring from the press point: only dots about 0.36px/ms times elapsed time away from it light up extra, rather than the whole area at once, so it reads as a wave instead of a blotch. The ring fades after 1.3 seconds.