reanimate: clone an animation and prove it moves the same

这个 skill 做什么

把一个参考动画（网页、录屏、mp4/webm、gif、Lottie）在你自己的代码里重做出来，然后用同样的方式录下复刻版，逐帧和参考对比：时长、缓动、错开、顺序、布局，一轮轮修到数字对上。支持 CSS、Web Animations、canvas、WebGL 和 three.js。默认只对齐「动起来的方式」，文字、颜色、字体、图片用你自己的。

什么时候用

• 想让游戏的标题画面、菜单、HUD 转场和某个参考视频或 gif 动得一样
• 想证明重做的动画时长和缓动一致，而不是「看起来差不多」
• 粒子、canvas、WebGL 动效要做到两次录制可以比较

怎么装

下载本页 ZIP，把 reanimate/ 放进 agent 的 skills 文件夹：Claude Code 用 .claude/skills/，Codex、Gemini CLI、OpenCode 用 .agents/skills/，Cursor 用 .cursor/skills/，Copilot 用 .github/skills/，Windsurf 用 .windsurf/skills/。然后运行一次 bash reanimate/scripts/setup.sh。需要 Bun 1.1+，首次会下载 Playwright 的 Chromium 和静态 ffmpeg（约 250 MB），不需要 API key。也可以直接对 agent 说：Install the skill from https://gameskill.dev/skills/reanimate/install.md

最小示例

gameskill/examples/lantern-menu/ 是我们为测试做的原创标题画面「灯笼菜单」：标题带回弹落下，三个按钮依次淡入上移，左下角一盏灯在呼吸。ref.html 用 CSS 关键帧做参考，clone.html 用 Web Animations API 按动作规格重做；加 ?bad=1 是一个错误的第一版（线性缓动、按钮错开太慢），用来确认对比工具能抓到问题。

我们怎么测的

总分 27/27，结果在 gameskill/test-report.json。全部用 skill 自带的脚本：capture.ts 在虚拟时钟下录参考，inspect.json 读出标题的精确时长 700 ms、延迟 200 ms 和缓动 cubic-bezier(0.34, 1.56, 0.64, 1)，以及按钮错开 700/820/940 ms；easing.ts 只看像素轨迹就认出 easeOutBack 和约 10% 回弹；正确的复刻 compare.ts 通过（像素差 0、时间误差 0）；错误的第一版两项都不通过，easing.ts 指出它是线性缓动；sheet.ts 生成对比图；frames.ts 能读视频并裁剪抽帧；canvas 随机粒子用同一个 --seed 两次录制随机数一致、对比通过。WebGL 追踪（--gl）没有测。注意：两次虚拟时钟录制的动画帧时间戳相差约 0.5 ms，个别抗锯齿像素会不同，以 compare 结果为准，不要求逐字节相同。

版权提醒

这个 skill 复刻的是动作。参考里的文字、图片、字体和品牌属于原作者；只拿你有权改编的参考来用，美术用你自己的。