录一遍比一遍，reanimate 给动效复刻装上验收

「照着这个网站的动效做一个」是前端最常见的口头需求，也是 agent 最容易糊弄过去的需求：看起来差不多就算完了。reanimate（MIT，1,248 星）给这件事装上了验收闭环：录下原动效、在你的代码里重建、再用同样方式录一遍逐帧比对，循环到数字对上为止。

流程五步：无头浏览器按固定视口与帧率拍参考，连 Canvas 与 WebGL 的 GPU 调用都追踪；规格落到每元素每属性一行（开始、时长、从到、缓动、stagger，读不出的帧标问号）；用项目已有技术重建（CSS、Framer Motion、GSAP、three.js）；同样方式拍复刻版比对时间、缓动与像素，出并排对照图；修最大差异再来一轮，通常 2 到 5 轮，5 轮仍不匹配的列入报告并说明原因。

验收标准分三档：默认「动得一样」（触发、顺序、时间误差 80 毫秒内、同缓动族）；match it exactly 才要求像素级（字体、尺寸、颜色、间距与素材，平均像素差异不超过 2%）；clone X and add Y 是在复刻之上加自己的东西。实测按作者自述口径：18 个示例动画各由一个独立 agent 复刻，大多 30 到 90 分钟完成，其中 Vercel Toolbar 417 帧中 417 帧完全一致、每次变化都在同一帧。

边界与版权要写清：它复刻的是看得见的动效手法，交互逻辑与后端不在范围内；30 到 90 分钟一个动效的速度，适合抄点睛之笔而非整站搬运；直接搬字体、图片与商标仍有风险，抄的是手法不是素材。门槛是 Bun 1.1 加 macOS 或 Linux，首次运行装 ffmpeg 与 Playwright Chromium 约 250MB，不用 API key。

和此前写过的动效词典对照，这是一个方向互补的答案：词典教 agent 怎么描述动效，reanimate 让 agent 把动效抄回来并验算。agent 写前端从「凭感觉」变成「有验收」，这一步比省下的时间更值钱。