氛围与背景 · 页面的空气
网格感应Reactive 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
配方
网格感应 → 1.3s linear网格感应 → dot pitch 26px · exp(−d²/2 · 62²) falloff · linear, no easing · ripple 0.36px/ms rings, life 1.3s · r 1.3→3.8px
给 AI 的一句话
给这块区域铺一层会回应指针的点阵：点距 26px，把点阵按剩余空间居中。每颗点的亮度按 exp(−d²/(2·62²)) 随它与指针的距离衰减，半径从 1.3px 长到 3.8px，颜色用强调色按亮度混出来。按下去时从落点发出一圈涟漪：只有「离落点约 0.36px/ms 乘以已过时间」那一圈的点会额外变亮，而不是整片一起亮——这样看起来是一道波，不是一团光斑。涟漪 1.3 秒后消失。