用 Shader 复刻「流动的光」
4 个效果都是纯 WebGL 实时渲染，每一个的核心都是一段片段着色器：每个像素拿自己的坐标 + 时间(+ 你给的输入)，算出此刻的颜色。拖滑块、点按钮，看它们怎么随输入变形。
①语音流光带
两层 noise 叠出起伏的上边缘，音量作为 uniform 控制振幅高度——这就是「光随声音起伏」。对应图3那条小爱语音光。
音量
②呼吸光环
SDF 算到圆环的距离，取倒数得辉光；半径随时间做 sin 脉动 = 呼吸，颜色沿角度用 cos 三相位错开 = 流光。对应图5的呼吸光球 / 手势光。鼠标移入会牵引它。
③边缘流光 · Apple Intelligence
用到最近屏幕边缘的距离做 mask，只让四周一圈发光，里面跑流动的彩虹——Siri 唤醒时那圈边缘光的核心做法。
待机
④弥散渐变 · AI Color
noise 扭曲坐标后，在几个颜色之间连续混合，整片色彩场缓慢流动 = mesh gradient。对应图1的主题色和图2的 AI Color。