技术
流体不是特效，是一种世界观
2 分钟
我们花了十年把界面做"平"，现在又花十年把它做"活"。这不是循环，是螺旋。
平面设计解决的是信息密度，流体设计解决的是注意力路径。
#为什么是流体
人对流体有毫秒级的直觉。看到液体流动，你不需要学习就知道它会往哪走、什么时候会汇聚、什么时候会断开。这是免费的认知带宽。
而按钮的"点击态"要教，抽屉的"从哪滑出"要教。
#光线步进：用数学画一团东西
传统 3D 是"给我三角形"，光线步进是"给我一个距离函数"。后者对流体极其友好，因为两个球体的融合只需要一个平滑最小值：
float smin(float a, float b, float k) {
float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
return mix(b, a, h) - k * h * (1.0 - h);
}
k 是"表面张力"。k 越大，两团东西越黏，融合时的颈部越粗。调这一个参数，你就在调整整个画面的"材质心理"。
你现在看到的背景，就是四个运动球体加一层域扭曲（domain warping）的结果。没有模型文件，没有贴图，全部是每一帧现算的数学。
#三个不要
- 不要让流体抢主体。它的亮度上限我压在 40% 左右，文字用差值混合叠在上面。
- 不要满帧全屏渲染。渲染分辨率降到 0.55 倍，人眼几乎看不出，GPU 省一半。
- 不要在滚动时继续算。视口外直接停掉
requestAnimationFrame。
#流体的克制
真正好的流体设计，用户说不出"这里有个动效"，只会说"这个网站很舒服"。
特效是被看见的技术，设计是被感受的技术。
一旦你的流体开始被人截图讨论"这个球好酷"，就说明它超标了。