🏠 AI Tools Hub | 首页 | 文章 | 评测 | GitHub热门 | 排行榜

Reanimate教程：录原版→重建→录副本→对比，动画逆向对齐到数字级

📌 项目日期：2026年11月 | 数据来源：GitHub官方仓库 | 星数：737+

📋 项目简介

很多好点子始于别人的网站。让Agent"照着这个链接重建动画"，它通常做一遍、说声完成、然后错过一切细节——它看不见运动，也说不清差多远。Reanimate 的解法是测量的闭环：录制原版 → 在你的代码里重建 → 用同样方式录副本 → 两相比对。每一轮展示还差什么，Agent持续迭代，直到数字对上。你得到的是一个接近的起点，再改成自己的。

UI打磨工具链的搭档：去AI味用 unslop，从设计稿到提示词用 M3E Canvas。注意重建他人动效用于学习与内部参考，商用替换为自己的设计。

🔧 用法示例

/reanimate the hero entrance on https://example.com, into components/Hero.tsx
/reanimate this loader, 0:03 to 0:05 of ~/Downloads/loader.mov
/reanimate the card hover in this gif, match it exactly
/reanimate the logo marquee from https://example.com, with our logos and pause on hover

覆盖三类输入：在线页面、本地视频片段、GIF——都能指定输出到你的组件文件。

📦 安装

npx skills add NiazMorshed2007/reanimate -g
# skills CLI会问装到哪些Agent；-a claude-code 可跳过

# 依赖：Bun 1.1+（macOS/Linux）
# 首次运行自动装：静态ffmpeg + Playwright Chromium（共约250MB）
# 无需任何API Key

✅ 使用建议

指令里写清目标组件路径（into components/Hero.tsx），产出直接可集成
"match it exactly"用于学习比对；落地时加自己的品牌与变化
对比循环会多轮跑Playwright，大页面上先圈定局部动画区域更快

📚 常见问题

Reanimate解决什么问题？

让Agent重建别人的动画（从链接或截图）时，不再做一遍就交差：它先录原版，在你的代码里重建，再用同样方式录副本，两相比对——每轮显示差距，Agent继续改直到数字匹配。

怎么用？

npx skills add NiazMorshed2007/reanimate -g 安装（或-a claude-code跳过提问），然后 /reanimate 指令+目标：网页某处动画、视频某时间段、或一张GIF。

需要什么环境？

Bun 1.1+（macOS/Linux，Windows未测试）；首次运行自动装静态ffmpeg与Playwright的Chromium（约250MB），无需API Key。