实验说明
光场仅在桌面首页及本实验页显示：旧模式使用两侧留白，全背景模式使用整个背景并以真实遮罩排除文章与界面，不进入正文。默认是 Refined / 动态熔岩 / 每次打开随机 / 全背景 / 80% / 开启。页面不生成实验控制面板；下面的对照说明仅供开发测试参考。无 JavaScript 时本文、代码、目录和链接仍可阅读。
两种预设如何比较
- Original08：保留最初 08 的三层酒红、蓝灰、淡紫径向渐变，以及顶部 20vh、底部 14vh 的位置。左右使用相同配方；只在真实正文边界需要时缩小原始留白宽度，避免装饰进入阅读区。
- Refined：默认动态，黑底中的暗酒红、暖石墨与极弱冷灰，左右光源错位，没有白色亮核。左侧 22s、右侧 29s 独立往复，超出容器的渐变伪元素缓慢平移、缩放并轻微呼吸；只动画 transform/opacity，不移动正文或安全容器。内侧与上下边缘柔和退场；渐变 mask 与无 mask 时的黑色退场均固定在裁剪容器上。旧模式没有 Canvas；全背景可选 Canvas2D 对照或 PixiJS WebGL 实验。没有纹理噪声、鼠标跟随或新增 CDN。
仅在显式启用开发对照控件时，可关闭装饰并从下拉框选 Original08 /
Refined，以相同强度比较色温、左右重心与正文隔离。Refined
的“运动风格”可选 缓慢漂移 /
熔岩流动（默认），不新增配色预设。熔岩的“构图”默认
每次打开随机：每个新文档（包括刷新）只生成一次种子，旧局部模式两侧各自独立取
2–4 团软径向光斑，全背景额外各加入一团，共 6–10
团；尺寸、长宽比例、初始位置、24–40s
周期、负相位延迟和各关键帧的圆角、旋转、剪切、非均匀缩放均在有界范围变化。初态及真实轮廓都变化，不只是换位置。数量有概率重复，不保证相邻两次一定不同。只复用该侧两种已有
RGBA，多团重叠可能改变局部叠加深浅，但没有新色或基础 alpha
更改。“固定（原版）”在局部模式完整保留此前每侧两团及
24s/31s（左）、28s/35s（右）的精确 CSS
配方；宽域使用扩展轨迹，全背景使用四团及本次缓存曲线路径，不承诺与局部原版画面相同。“范围”默认
全背景（推荐），也可选 宽域，也可选
局部（旧范围）。宽域各团中心在父容器高度约 11–89%
间上下往返、横向跨越约 34–44% 可用留白；位移用实测父容器 CSS 像素与
calc()，不是光斑自身尺寸百分比。光斑保持可见中心，轻柔边缘淡出；越界轮廓始终由固定父层裁剪，不进入中央。切换范围保留控件焦点与同一缓存描述符，不重新抽种子；宽域与局部互切保留父子节点，跨入或离开全背景时取消旧动画并重建对应绘制层。局部加固定构图恢复旧
checkpoint
精确画面。Original08、漂移与静态的尺寸和配方不变。范围与构图只适用于
Refined 的动态熔岩；静态、漂移、Original08
时不可用。种子和描述符只保存在当前文档内存，不写
localStorage；强度、预设、动静态切换、尺寸观察、侧栏、PJAX/返回、pageshow、媒体及解密通知都不重抽，切回随机也恢复同一构图。独立
transform（拉伸、旋转、剪切）与 border-radius
形变使光斑交错靠近、重叠、分离。融合感来自软渐变叠加，不使用昂贵全屏 goo
filter，不是整图平移或 opacity 呼吸。颜色 RGB 和基础 alpha
不变，无白色亮核。Original08 始终静态；Refined 的动态/静态按钮真实禁用
CSS
动画并恢复固定渐变，不只是改文案。动态与运动风格偏好在切换预设时保留，静态时隐藏全部熔岩子层并取消子动画，恢复原静态渐变；切回动态使用所选风格。重置恢复
Refined 动态熔岩、随机构图与全背景（不重新抽种子）。强度滑块从
0–100% 逐一调整装饰元素的真实 CSS
opacity；右侧数字精确显示百分比，不是视觉估算。0%
是透明，不会更改开启状态。滑块输入不会重建控件，键盘焦点与连续方向键操作保留。
渲染与性能边界
开发对照模式的“渲染器”可在 PixiJS GPU（默认） / Canvas2D 对照 间切换，同一文档复用相同色团描述符。PixiJS 8.22.0 是本地固定版本的 MIT 组件，不从 CDN 动态加载。GPU 模式用自定义 WebGL shader 绘制原四种 RGBA、多段柔边、非对称轮廓与独立旋转、剪切、非均匀缩放；不降低分辨率、DPR、数量或帧率。Gaussian 联合遮罩在 GPU 以两个一维卷积 pass 生成，只在保护几何变化时更新；最终输出再次精确扣除文章核心，没有外部 SVG/CSS 全屏遮罩或每帧 Canvas2D 纹理上传。
Canvas2D 对照保持保存点的原生 DPR 缓存软纹理方案。GPU 模式不是对历史 CSS border-radius 动画的恢复，也不是未经验证的逐像素等价复制。Gaussian 使用 12px sigma、四倍 sigma 核半径；与浏览器 SVG 实现的边界采样仍需视觉比较。默认和重置均启用 PixiJS GPU；完整页面的硬件性能仍需对照，而 SwiftShader 软件后端的 GPU 路径明显更慢，开发对照模式可选择 Canvas2D。GPU 失败时安全关闭；开发对照模式可切回 Canvas2D；不会擅自修改浏览器或系统驱动。 ### 阅读区域优先
全背景开启时，header/nav、展开的 sidebar 和 footer 使用与正文相同的 4px 背景柔焦。只过滤独立背景层，文字、导航、目录和链接保持清晰；面板外沿以 16px 渐隐衔接，光场与背景格线可以连续穿过这些区域，不再扣除矩形孔洞。正文核心、搜索层和实验控件仍保持严格避让。关闭效果、减少透明度偏好或不支持 backdrop-filter 时恢复原来的不透明界面。
全背景动态熔岩使用一个完整视口绘制层，不分左右容器：错频二维平滑曲线与独立缓慢形变，沿横纵轴广泛移动；随机模式
6–10 团光斑、固定对照四团；四种原 RGBA 不变，默认强度为
80%。柔和多段椭圆 mask 在光斑边界前归零，不使用 goo
阈值。绘制前减去真实可见
.post-block、搜索界面及控件形状的联合核心孔洞；未启用玻璃背景时同时避让页头、侧栏和页脚（文章圆角同步保留）；不依赖正文透明度或
z-index 掩盖。边界外侧以 18px 膨胀轮廓加 12px SVG Gaussian
模糊形成柔焦衔接，绘制前精确裁剪核心及 1.5px
抗锯齿保险带，不再使用旧全背景 26px 硬矩形间隙。Gaussian
模糊作用于遮罩边界，而非正文、投影文字或整屏光斑；不是替换配色、叠加白光或改正文
backdrop。滚动（包括 Lenis）、缩放、保护区 RO、PJAX
与解密事件更新遮罩，仅几何变化生成新 SVG。鼠标光标 class/style、HUD
投影文字和颜色 hover
不重建光层、不归零动画进度；真正的布局移动过渡期间安全暂停，结束后恢复同一节点及绘制进度。遮罩失效时关闭全背景。
旧模式装饰根据实际 main/content
矩形计算两侧可用留白，与阅读区域至少相隔 24px。Refined
漂移及局部熔岩单侧不超过
320px；宽域熔岩使用全部实测安全留白、顶部及底部各留视口高度 2%，不设
320px 上限。Original08 不超过最初
calc((100vw - 1160px) / 2)
的宽度。窗口缩放、浏览器缩放与侧栏布局改变会重新测量；内容移动过渡期间暂停装饰，而非在正文背后追逐它。
小于 1200px 的视口明确提示不可用；减少动态效果、高对比度、强制颜色和打印模式关闭装饰。开启选择可以保留，但状态说明不会把不可用的小屏幕描述为正在显示。
安全代码示例
1 | const title = document.querySelector('.post-title'); |
导航与目录
验证要点
切换后保留正文和链接语义；通过首页、归档和浏览器返回测试真实 PJAX 导航。导航发送、成功、错误、解密事件以及媒体偏好变化都会取消旧 CSS 动画、清理装饰与观察器；后台 visibilitychange 暂停动画，回到前台从原进度继续。尺寸观察只安排有界、事件驱动的一次测量；全背景仅在开启且可见时循环 RAF 绘制实际 Canvas 像素，动画帧不读取 DOM 矩形。打印使用可读原版布局。
视觉参考只取局部聚焦、同色深浅及柔和退场思路；慢流动为独立 CSS 实现，不采用鼠标互动：Evervault gradient mask · Gradient Topography。