氛围与背景 · 页面的空气
着色器背景Shader background
- 算出来的
- 一直在流
- 同一个公式换张脸
背景不是图片、也不是 CSS 渐变，而是一段跑在 GPU 上的小公式：每个像素的颜色由坐标和时间当场算出来，所以它一直在流，而且永远不会回到同一帧。极光、液态金属、等离子、丝绸、光束 —— 都是同一件事换了一条公式。
什么时候用它
用在需要「有质感但不抢戏」的首屏和区块背景上，不透明度压在 0.6 以下、内容压在它上面。它有两个代价必须处理：一直占着 GPU（低端机要限帧或降分辨率），以及永远不停（必须配 prefers-reduced-motion 冻成一帧）。
参数
fullscreen fragment shader · 2 triangles · u_time drives noise field · dpr capped 2 · 30fps cap · no easing
配方
着色器背景 → fullscreen fragment shader · 2 triangles · u_time drives noise field · dpr capped 2 · 30fps cap · no easing
给 AI 的一句话
做一个着色器背景：一个铺满容器的 WebGL 画布，用两个三角形当全屏四边形，片段着色器里用坐标加 u_time 算噪声场、映射成颜色。设备像素比封顶 2（再高只是白烧 GPU），帧率封顶 30fps；unmount 时要主动释放 GL 上下文，否则滚几遍就把浏览器的上下文额度用光。低端机降分辨率，reduced-motion 下冻成一帧。