harshit403-pixel/reveal-cursors

项目介绍

Swarm Cursors 实现了一种视觉特效，灵感来自 Joel Califa 的 Swarm：页面先擦除为空白画布，再由一群模拟多人协作的光标重新绘制出来，包括画框、输入文字、钢笔线条，并配合合成音效。仓库把这个效果做成 Claude 技能以及独立的安装脚本和运行脚本，可以按页面或整站接入普通 HTML 页面、常见框架项目和托管建站平台。

该效果以浮层方式运行，不修改真实 DOM，因此底层的表单、统计和 SEO 内容仍然有效。触发方式包括浮动按钮、自动播放、热键、URL 参数 ?swarm、#swarm 链接，或任意标记了 data-swarm-trigger 的元素。运行时代码是一个无依赖文件（157 KB，约 44 KB gzip 后），通过 defer 加载，不向任何服务器发送数据。

快速使用

在 Claude 中使用时，先在 Claude.ai 打开代码执行功能，从发布页下载 swarm-cursors.zip 并作为技能上传；Claude Code 用户则把 swarm-cursors 目录复制到 ~/.claude/skills/（或项目内的 .claude/skills/）。之后直接要求「把蜂群效果加到首页」或「移除」即可。

不用 Claude 时，可对 HTML 文件运行安装脚本：

# 单页，浮动按钮
python swarm-cursors/scripts/install.py site/index.html

# 加载 1.5 秒后自动播放，每个浏览器会话一次
python swarm-cursors/scripts/install.py site/index.html --trigger auto --delay 1500 --once session

# 撤销，文件恢复为与原来逐字节一致
python swarm-cursors/scripts/install.py site/index.html --remove

也可以手动添加标签：

<script src="swarm-cursors.js" defer data-trigger="button" data-position="bottom-right"></script>

配置通过 data-* 属性完成，涵盖触发方式、按钮文字、位置、热键、延迟、是否每个会话只播一次、允许的路径以及减少动态效果的处理。页面 API 提供 SwarmCursors.start()、.stop(true)、.isRunning()，以及 swarm:start / swarm:exit 事件。可打开示例页在本地试用按钮。

使用约束

• WebGL 画布、正在播放的视频和跨域 iframe（地图、YouTube）会显示为灰色占位，页面脚本无法截取这些内容。
• 动画会在点击瞬间冻结；超过约 4,000 层或 40,000 px 高的页面会被截断。
• 如果 CSP 的 style-src 不含 'unsafe-inline'，效果会被拦截；脚本会检测到并隐藏按钮、输出控制台警告。
• 主要面向桌面指针设备；音频在访客首次点击后才解锁，按 M 静音。
• Next.js、WordPress、Shopify 和托管建站平台的方案未在真实平台上测试，README 建议在自己的站点上运行 python swarm-cursors/scripts/verify.py <url> 验证。
• 许可证尚未确定：项目改编了没有许可证的 Swarm 部分内容，在原作者的授权写入记录之前不授予任何许可。

HotRepo 点评

该项目在 2026-11-06 的 JavaScript 新项目记录中出现，站内观测窗口约两小时内 Star 从 101 增至 110。采样区间很短，只能说明早期获得了一些关注，不足以判断趋势。更值得注意的是它的工程封装：既有 Claude 技能形态，也有可撤销且逐字节还原的安装脚本，并明确记录了在无头 Chromium 中测试过的场景。对考虑复用的人来说，许可证问题是最需要留意的未决事项。