快速了解本文
Swarm Rebuild 将任意网页 DOM 降维为二维蓝图图层以驱动群集动画。
重建过程基于 DOM 依赖图严格编排，并配合 Web Audio API 实时合成空间音效。
扩展仅使用内存快照且无网络请求，但存在交互冻结与性能上限等技术局限。
本摘要由 AI 辅助整理，请以正文内容为准。
本文目录
Joel Califa 的 Swarm 网站曾展示过令人印象深刻的多光标重建动画。Chrome 扩展 swarm-cursors（Swarm Rebuild）致敬并改编了该项目，其核心贡献在于：在适配原有动画引擎的基础上，新增了对任意页面的 DOM 快照与扩展封装，能够将任意网页擦除为空白画布，并通过模拟多光标群集（swarm）实时重建页面视觉元素。
01降维与快照：从 DOM 到蓝图图层
将复杂网页转化为群集动画，首要难题是如何让动画引擎理解页面结构。swarm-cursors 的核心机制第一步是快照（Snapshot）。在 DOM 解析阶段，swarm.js 会遍历实时 DOM（包含 open shadow roots），将盒模型、文本、边框、媒体和重复元素等复杂的网页结构，降维转化为 rects、text layers、pen-tool lines、media 以及 master/duplicates 等二维蓝图图层。
这种将动态或复杂的网页结构降维为可被动画引擎消费的蓝图数据，是后续群集动画的基础。它使得原本难以直接处理的 DOM 节点，变成了具有明确坐标和属性的几何与文本图层。
02依赖图编排与空间音效合成
在重建阶段，群集动画并非随机播放，而是采用严格的任务编排机制。每个光标运行独立的生成器脚本，任务按照自上而下的 DOM 顺序解锁：子元素必须等待父元素完成，重复元素则等待 master 元素完成。这种基于 DOM 结构依赖图的编排，保证了视觉重建的逻辑合理性，为前端视觉解析与程序化编排提供了一种可参考的工程范式。
在听觉维度，音效系统完全由 Web Audio API 实时合成，不依赖任何外部音频文件。系统会根据光标位置进行声像平移（panned），并基于 E 大调五声音阶生成空间化反馈，实现与视觉动画同步的多感官体验。
03工程取舍与采用边界
在实现复杂视觉重建的同时，项目在权限与隐私上做了严格取舍。扩展仅请求 activeTab 和 scripting 权限，无网络请求与本地存储，所有快照与截图仅存在于当前标签页内存中，退出即销毁，实现了零隐私泄露的视觉重建。
然而，开发者在采用时需明确其视觉重建而非功能克隆的本质。该机制存在明确的适用边界与技术局限：
- 动画在点击瞬间会冻结，无法替代真实的页面交互。
- 装饰性伪元素可能被跳过。
- 首屏以下的 canvas、video 和 iframe 会变为占位符。
- Web components 会被重建为普通样式元素，且不执行原脚本。
- 长页面重建存在性能与规模上限，通常限制在约 4,000 个图层或 40,000px 高度。