NiazMorshed2007/reanimate

reanimate 是一个 Claude Code skill，用来重建你在实时网站、录屏、mp4、gif 或 Lottie 文件里看到的动画，并核对复制品是否还原了原动画的运动。它的目标是给前端开发者一个带量化验证的起点，而不是让 Agent 只改一遍就交差。流程是录制、生成规格、构建、验证、重复：先在无头浏览器里录下参考动画，写成逐元素、逐属性的时间规格，用你项目现有的技术栈重建，再用同样方式录制复制品，对比时序、easing 和像素。每轮修最大的差异；README 说多数克隆要 2–5 轮，5 轮后仍不一致的部分会列在报告里。

产出什么

你告诉它目标位置和落地文件，例如把某页面的 hero 入场动画重建到 components/Hero.tsx。保真度由说法决定：默认只要求运动一致（触发方式、顺序、stagger、时序误差 80 ms 内、缓动族、距离）；说“像素级”则还要对齐字体、字号、颜色、间距和素材，平均像素差异 ≤ 2%；“克隆 X 再加 Y”会把你的新增部分和克隆部分分开。README 列出若干示例克隆的实测数据，例如时序差不到 1 ms、像素差低于 1%，但这些是作者自己跑的例子，不是独立评测。

对比机制

画布本身只有像素，因此该 skill 可以追踪绘制调用。加 --gl 会记录 WebGL、WebGPU 和 canvas 2D，挂接多个 3D 场景图，抓取 shader、uniform、渲染 pass 和可动画属性。--clock virtual 让页面时钟逐帧前进，并给 Math.random 播种，使同一场景的多次录制在 GPU 快慢不同时也能保持一致。这正是“用同样方式录制复制品再对比”对 3D 和粒子效果有意义的原因。普通页面则录视频、编号帧、声明的动画和逐帧元素位置；弹簧动画从过冲和稳定时间推断，不读源码。

要求与限制

通过 skills CLI 安装，它会询问要给哪些 Agent 配置；README 展示了全局 npx skills add 命令 安装说明。需要 Bun 1.1 或更高版本，支持 macOS 和 Linux，Windows 未测试。首次运行会下载静态 ffmpeg 和 Playwright Chromium，合计约 250 MB，因此不需要 API key，但需要磁盘和网络准备。其他能读 SKILL.md 的 Agent 也能安装，但只在 Claude Code 上测试过 Claude Code skills 文档。

录制有盲区：需要登录的页面、YouTube 和 Loom 不能直接录，要改用录屏文件；iframe 里的 canvas 需要 iframe 自己的 URL；worker 即使播种，时钟仍按真实时间走。无法复现原随机生成器时，粒子不逐点比较，而是比较密度、颜色和运动。硬件 GPU 模式更快但有平台限制；默认 SwiftShader 更慢，但在不同机器上像素一致。

它只克隆你指定的内容；来自别的站的字体、图片和代码仍归其所有者，README 要求用户确认自己有权使用所复制的内容。项目采用 MIT 许可证 许可证，公开示例是对第三方网站的非关联性复刻。

仓库很新：创建于 2026-10-29，2026-10-30 在 NEW-REPOSITORY 榜上被观察到总星数 100；没有可比较的每日榜历史。