抄动画这件事，被 agent 做成了带验收的工程

抄动画这件事，被 agent 做成了带验收的工程。reanimate 是一个 Claude Code 技能：你给它一个网址、一段录屏、一个 GIF 甚至一个 Lottie 文件，它把里面的动画逐帧逆向成你项目里的代码，然后录下自己的成品和原版并排对比，修到数字对上为止。仓库 10 月 29 日创建，三天拿了 599 星，MIT 协议，昨天还在提交。

一、五步流水线，抄完还要自证

作者对「让 agent 照着链接复刻动画」的诊断和 ffmpeg-skill 如出一辙：agent 做一遍就说做完了，它看不见运动，也说不清差多远。reanimate 的解法是把流程焊死成五步：录、写规格、建、验、再来一轮。

录屏在无头浏览器里做，固定视口和帧率，产出视频、逐帧编号，以及它探测到的每一条 CSS 和 Web Animations API 动画，外加选中元素在每一帧的位置。规格表给每个会动的部件一行：何时开始、多久、从哪到哪、走什么缓动、怎么交错，没读出来的格子标问号。然后才是写代码，用的是你项目已有的技术栈：CSS、Framer Motion、GSAP 或 three.js，不是重新发明一套。

验证环节把成品用同样的方式再录一遍，对比时机、缓动和像素，生成并排对比图；修掉最大的差异再录，通常 2 到 5 轮收敛。五轮之后仍有对不上的，会连同原因列进报告，而不是假装完成。

二、三档验收标准，按需加码

默认档位叫 clone this animation，对齐的是运动：触发、顺序、交错、时机误差 80 毫秒以内、缓动同族、距离一致，外观留给你自己发挥。喊一声 match it exactly 就升到像素档：字体、字号、颜色、间距、素材全部要对，平均像素差异不超过 2%。还有第三档 clone X and add Y，复刻的部分照标准验收，你自己的改动单独保留。

成绩单是全站公开的：Vercel 工具栏 417 帧全一致；Vercel 流体海洋 26.2 万个粒子 12 秒零像素差；turborepo 的速度表悬停时零像素差；resend 首页的魔方 25 秒内每一步旋转完全一致；26 个实例多数在 30 到 90 分钟内完成，能交互的直接挂在页面上让你上手试。

三、连 WebGL 都能逆向

canvas 只吐像素，reanimate 的对策是把画出这些像素的调用录下来。加 --gl 旗标后它会追踪 WebGL、WebGPU 和 canvas 2d，通过各自的 devtools 入口挂进 three.js、Pixi、PlayCanvas、Babylon 和 OGL 的场景图（没错，正好是本系列写过的那几个渲染引擎），拿到着色器源码、常量 uniform、渲染通道和逐帧的 uniform 曲线。虚拟时钟让页面按帧推进，Math.random 连 worker 一起播种，两次采集逐字节一致。

在真实 stripe.com 上，这套流程还原出了发卡卡片四次合成的渲染管线、着色器常量 u_twistFrequencyX = 0.059，以及指针滑动时卡片倾斜的曲线：33 到 1800 毫秒之间从 -0.174 摆到 0.262 弧度。复刻版的倾斜在 0.4 像素内吻合。

四、边界与上手

作者把限制写得很老实：登录墙后的页面、YouTube 和 Loom 没法直接录，递一段屏幕录像即可；物理弹簧是从超调和回稳时间拟合的，不是从源码读的；worker 自己的时钟仍按真实时间走；随机数发生器对不上时，粒子改按模糊密度和色彩对比。默认用 SwiftShader 软渲染，慢一点但保证每台机器像素一致。还有一条法律提醒：字体、图片和代码依然归原主所有，抄之前确认有权使用。

上手一条命令：npx skills add NiazMorshed2007/reanimate -g，需要 Bun 1.1 以上，macOS 或 Linux，首次运行下载 ffmpeg 加 Chromium 约 250MB，无 API 密钥。然后在 Claude Code 里一句话派活，比如：/reanimate 复刻 example.com 的首屏入场动画，输出到 components/Hero.tsx；也可以指定视频片段、GIF 或要求像素级对齐。

对照这个系列看就更有意思：anime.js 和 react-spring 是写动画的笔，reanimate 教 agent 先看懂别人的笔法。前端动画这门手艺的学徒制，被压缩成了一轮轮对帧。