reanimate

# reanimate

从在线网站、屏幕录像、mp4、gif 或 Lottie 文件里录下一段动画，用你的代码重建出来，并和原版对比，直到两者一致。这是给前端开发者用的 Claude Code 技能。

由 NiazMorshed2007 在 GitHub 上制作。这些说明是 Mindket 根据其 README 写的，项目自己的文件和许可证在它的仓库里。

## 简介

它是什么：reanimate 是一个 Claude Code 技能，能把你喜欢的一段动画在你自己的代码里重建出来。你可以把 Lottie 文件、gif、mp4、屏幕录像或在线页面交给它。它先拍下原版，在你的代码里写出一份复制品，在同样的条件下再拍一遍这份复制品，并把两者对比。循环会一直重复，直到数字对上。

适合谁：它适合前端开发者和设计工程师，他们在别的网站上看到一段好动画，想先得到一个贴近的、属于自己的第一版。

```table
行业 | 谁在用 | 怎么用 | 例子
网页开发 | 前端开发者 | 把参考网站上的首屏入场动画重建成一个组件 | 把首屏入场动画写进 components/Hero.tsx
产品设计 | 设计工程师 | 根据屏幕录像或 gif 还原一个加载动画或悬停效果 | 取自一段视频第 3 到 5 秒的加载动画
营销网站 | 做落地页的团队 | 复制一个徽标跑马灯，换成自己的徽标 | 一个换成你的徽标、悬停时暂停的跑马灯
```

如果你用 Windows，或者不用 Bun，可以跳过它，因为它需要 Bun，而 README 说 Windows 还没测试过。

用在哪里：

- Claude Code：README 说明它只在这个智能体上测试过
- 其他能加载 SKILL.md 文件的智能体：README 说它们也能安装，但没有测试过
- 你项目的技术栈：它会写 CSS、Framer Motion、GSAP 或 three.js，用你已经在用的那个
- macOS 和 Linux：Windows 还没测试过

它能做这些事：

- 重建网站动画：从在线网站上还原首屏入场动画、卡片悬停、加载动画或徽标跑马灯
- 根据文件还原：从 Lottie 文件、gif、mp4 或屏幕录像里还原同类效果
- 处理 canvas 和 WebGL：它会追踪 GPU 调用，所以由着色器驱动的场景也能重建

如何设置：开始之前，你需要先备好几样东西。

- Bun 1.1 或更新版本
- macOS 或 Linux，因为 Windows 还没测试过
- 约 250 MB 空闲磁盘，因为第一次使用会下载 ffmpeg 和 Playwright 的 Chromium
- 不需要 API 密钥

1. 安装 Bun 1.1 或更新版本。
2. 运行下面这行 skills CLI 命令。它会提示你选择智能体，加上 -a claude-code 就能跳过这个提示。
3. 然后在 Claude Code 里，描述这段动画，指出它在哪，并写明目标文件。

```sh
npx skills add NiazMorshed2007/reanimate -g
```

如何使用：在 Claude Code 里输入 /reanimate，然后写明动画是哪一段、它在哪，以及接收它的文件。下面两行展示了写法。

```text
/reanimate this loader, 0:03 to 0:05 of ~/Downloads/loader.mov
/reanimate the card hover in this gif, match it exactly
```

```table
Title: 三个匹配等级
你说 | 结果 | 必须一致
"clone this animation" | 动作一致，这是默认等级 | 触发方式、顺序、错开间隔、距离和缓动类型，时间误差在 80 ms 以内
"match it exactly" 或 "pixel-perfect" | 外观一致 | 以上全部，再加字体、颜色、尺寸、间距和素材，平均像素误差不超过 2%
"clone X and add Y" | 在此基础上加上你的 | 被克隆的部分按其中一个等级一致，你的新增内容保持独立
```

示例：假设你想把一个网站的首屏入场动画重建成你项目里的一个组件。它先拍下原版，在你的项目里写出一份复制品，再在同样的条件下拍复制品，并把两者对比。通常经过 2 到 5 轮，你会得到一个贴近的第一版，外加一份报告，列出仍有差异的地方和原因。README 报告了下面这些克隆。

```table
Title: README 报告的克隆，与原版对照测量
克隆 | 构建方式 | 结果
Vercel Toolbar | HTML、SVG、CSS | 417 帧中 417 帧完全一致
Drop to deploy | WebGL2、Web Workers | 803 帧中 785 帧逐字节一致
Fluid ocean | WebGPU、Web Workers | 12 秒内没有任何像素不同
Inspect every run | HTML、SVG | 六条柱子，每条都是 0 px 偏差
```

新手与专家：如果你是新手，就拿上面的示例命令，对一个 gif 或一小段视频试一下，等级保持默认。默认情况下，这个技能会还原动起来的方式，样式仍然归你。只有在你需要同样的字体和颜色时，才要求更多。

如果你熟悉这个领域，录制是最有意思的部分。录制在无头浏览器里进行，视口和帧率都锁定。它收集一段视频、编号的帧、找到的 CSS 和 Web Animations API 动画，以及选定元素在每一帧里的位置。canvas 和 WebGL 场景的 GPU 调用也会被追踪。一个虚拟时钟让每次捕获都保持一致。最终得到一份规格表，每个元素的每个属性各占一行，并用你项目已有的工具来构建。

```flow
录下原版
为每个元素写规格表
用你自己的技术栈构建
用同样的方式录复制品
对比并修最大的差距
报告仍有差异的地方
```

注意事项：

- 许可证：MIT
- 大多数示例克隆，智能体各花了 30 到 90 分钟
- 五轮之后仍有差异的地方会写进它的报告，并说明原因

## GitHub 上的数据（2026年11月6日）

- 星标：1,274
- 复刻：118
- 关注：4
- 未关闭的议题和拉取请求：6
- 语言：JavaScript
- 许可证：MIT
- 话题：agent-skills, animation, claude-code, claude-skills, frontend, motion, playwright

## 链接

- 代码：https://github.com/NiazMorshed2007/reanimate
- 发布版本：https://github.com/NiazMorshed2007/reanimate/releases
- 议题：https://github.com/NiazMorshed2007/reanimate/issues
- 星标历史：https://www.star-history.com/#NiazMorshed2007/reanimate&Date

## 获取代码

```
git clone https://github.com/NiazMorshed2007/reanimate.git
```

然后按它的 README 完成设置。这个工具包里没有会自己运行的东西。

README.md  6 KB