ambient-section-particles

环境粒子分区

将粒子构建为有边界的氛围层，而不是覆盖整个页面的屏保。让内容始终居于主要位置，并在效果不可见时停止工作。

选择渲染器

• 对于大约 40 个或更多小粒子、频繁运动、指针力或简单的程序化形状，使用 canvas。
• 对于少量需要单独设置样式或语义标签的品牌元素，使用 DOM 或内联 SVG。
• 仅在需要数千个粒子、景深、着色器或真正的 3D 效果时使用 WebGL。限制设备像素比，并提供静态回退方案。

从开销最低且能保留所需形态语言的渲染器开始。

定义一份配置

const particles = {
  count: 54,
  gravity: 7,
  wind: -3,
  sway: 16,
  speed: [8, 18],
  size: [4, 12],
  opacity: [0.18, 0.62],
  rotation: [-0.8, 0.8],
  mode: "recycle",
  pointerRadius: 110,
  maxDpr: 2
};

按容器面积调整密度，然后针对移动设备和低功耗设备进行限制。不要仅根据视口宽度推导粒子数量。

为分区分层

1. 为分区设置定位上下文，并在粒子应保持边界范围内时裁剪溢出内容。
2. 将粒子表面放置在内容后方、背景上方。
3. 将图层设为 pointer-events: none；在分区上监听指针移动。
4. 为安静的内容区域留出空间，或降低长文本和控件后方的粒子密度。
5. 控件和链接保持在正常的 DOM 堆叠顺序中，并显示清晰的焦点状态。

运行模拟

• 在容器边界内或其上方紧邻处为粒子设置初始位置。
• 根据经过的时间更新重力、风力、基于相位的摇摆、旋转、不透明度和位置。
• 后台标签页或帧停滞后，将较大的时间增量限制在合理范围内。
• 整个图层使用一个 requestAnimationFrame 循环。
• 使用 ResizeObserver 调整大小；将 canvas 后备缓冲区分辨率限制为 min(devicePixelRatio, maxDpr)。
• 对于指针扰动，施加基于距离的小幅力，并让粒子自然回落。绝不要为每个粒子单独附加监听器。

支持以下明确的结束模式：

• recycle：粒子离开后，从分区上方重新进入。
• exit：粒子离开边界后将其移除。
• settle：粒子聚成浅层视觉堆积，并严格限制其高度。
• static：渲染确定性的静态构图。

停止不可见的工作

使用 IntersectionObserver，仅在分区可见时启动。分区离开视口或 document.hidden 变为 true 时，取消动画帧。从当前模拟状态恢复，而不是再启动第二个循环。

销毁时，断开观察器、移除调整大小和指针监听器、取消帧，并释放渲染器资源。

尊重读者

• 在 prefers-reduced-motion: reduce 下，渲染稀疏的静态布局或移除该图层。
• 粒子仅作装饰，并对辅助技术隐藏。
• 控制不透明度和对比度，确保动态效果不会影响可读性。
• 避免全屏指针排斥、快速改变方向、闪烁，以及大型物体穿过表单控件。
• 当分区中的模态窗口或关键任务与装饰性动画争夺注意力时，暂停动画。

验证

测试进入和离开时的暂停、后台标签页恢复、快速调整大小、390/768/1440 宽度、设备像素比、指针和触摸输入、减少动态效果、分区溢出、内容焦点、长文本、路由清理，以及控制台错误。确认重复挂载后只剩一个动画循环。

将 demo/index.html 用作实际参考，并使用 demo/PROMPT.md 重新创建或混搭效果。保留 REFERENCES.md 作为仅含链接的实现来源列表。