用途:在单个区块内构建有边界的粒子氛围层,而非全页屏保,保持内容为主,效果不可见时停止工作。
主要能力:可选择渲染器——约40个以上小粒子、频繁运动、指针力或简单程序化形状用 canvas;少量需单独样式或语义标签的品牌碎片用 DOM 或内联 SVG;仅数千粒子、深度、着色器或真实 3D 用 WebGL,并限制设备像素比、提供静态回退。提供统一配置对象,含 count、gravity、wind、sway、speed、size、opacity、rotation、mode、pointerRadius、maxDpr 等字段。密度按容器面积缩放,再针对移动与低功耗设备钳制,不单凭视口宽度推导数量。
使用方式:为区块设置定位上下文并在需要时裁剪溢出;粒子层置于内容之后、背景之上,设为 pointer-events: none,在区块上监听指针移动;为长文本和控件预留安静区或降低密度。粒子在容器边界内或略上方播种,按经过时间更新重力、风、相位摆动、旋转、不透明度与位置,钳制后台标签或卡顿后的大时间增量,整层使用一个 requestAnimationFrame 循环,用 ResizeObserver 调整尺寸并将画布后备分辨率限制为 min(devicePixelRatio, maxDpr)。指针扰动按距离施加小力并自然回落,不为每个粒子绑定监听器。支持 recycle、exit、settle、static 四种结束模式。用 IntersectionObserver 仅在可见时启动,退出或 document.hidden 时取消帧,从当前状态恢复而非新建循环;销毁时断开观察器、移除监听、取消帧并释放资源。
限制与注意:在 prefers-reduced-motion: reduce 下渲染稀疏静态排列或移除该层;粒子应装饰性且对辅助技术隐藏;控制不透明度与对比度,避免全屏指针排斥、快速方向变化、闪烁及大物体穿过表单控件;模态或关键任务活跃时暂停装饰运动。需验证进入退出暂停、后台恢复、快速缩放、390/768/1440 宽度、设备像素比、指针与触摸、减少动态、区块溢出、内容焦点、长文本、路由清理与控制台错误,确认重复挂载后仅存一个动画循环。demo/index.html 为工作参考,demo/PROMPT.md 用于重建或改编,REFERENCES.md 为仅链接的实现来源列表。