Agent 用法 GitHub · lovisdotio/motion2code

用 motion2code Skill 让 coding agent 把动效视频重建为可编辑的 SVG + GSAP 循

给 agent 一段动效视频，得到一个可 seek、无缝循环的内联 SVG+GSAP 页面，并附逐帧对比分数与成片渲染

开始尝试

用

效果

在线示例 fal-motion-in-code.vercel.app 可看成品；gallery/ 每个目录含自包含 index.html、逐帧同步的 compare.html 与 480p 源片段，网页可见成品与对比页。

这是什么

新在哪里：以前 agent 看不到视频，只能凭想象写动画、循环处易跳帧；现在 skill 先分帧研究视频，用单条 GSAP 时间线 + window.anim.seek(t) 重建，并用脚本逐帧对照原片打分。

怎么做到的：study_video.py 把视频切成每 0.25s 一帧并提取调色板与 loop 分数 → agent 据研究结果写只有一个 GSAP 时间线的页面 → frame_diff.py 在指定时刻并排输出 source|code 与差异分数 → check_anim.py（加 --runtime）检查页面契约、控制台错误与循环接缝 → render_anim.py 通过 seek(t) 逐帧输出成片 → side_by_side.py 生成与原片并排的对照视频。

适合谁: 会用 Claude Code、Codex、Cursor、Gemini CLI 等 coding agent，并想把手上的动效视频转成网页动画的开发者或动效爱好者。
能帮你: 让 agent 在能看到帧、能量化对照的前提下重建动效，产出可编辑、任意分辨率清晰的 SVG+GSAP 代码而非视频文件。

评分三项分开看，不合成总分；热度不等于好用

新颖性: 全新做法 · 2026-10-20 出现
热度: 未知
易上手: 需要一些准备

怎么评的

三项都由本站记录的事实按固定规则算出，编辑不能直接改档位；规则改动会写进更新说明。

新颖性

●●● 全新做法，且有来源依据的出现时间在最近 30 天内
●●○ 老工具新用法或近期刚开放，且有来源依据的时间在最近 30 天内
●○○ 出现时间超过 30 天、未核实到精确日期，或已不再是新做法
其他出现时间未核实、晚于今天，或新颖类型未核实时按最低一档处理，不靠猜测加分

热度

●●● 最近一次每周人工确认为“热门”：最近 14 天里独立讨论、实际案例、持续时间、传播平台、相对关注五项门槛全部满足（规则 heat-v1）
●●○ 最近一次人工确认为“观察中”：前三项至少一项达到，或讨论增长 ≥ 50%，且至少 2 个独立案例
●○○ 最近一次人工确认为“未进入跟踪”
其他还没有人工确认过的热度记录时显示“未知”。热度只统计本站已接入的信源，不代表全网

易上手

●●● 准备门槛低且难度入门：不需要新账号或付费，首次尝试不超过 30 分钟，公开可用，会复制粘贴即可
●●○ 准备门槛中等，或门槛低但需要改少量代码或配置
●○○ 准备门槛高：需要商业软件或付费服务、首次尝试超过 2 小时、特殊硬件或网络、排队或邀请且无替代方案，或需要专业知识
其他只有介绍、还没有站内步骤，或关键步骤已失效时显示“暂不可试”；门槛未核实时显示“未核实”

怎么尝试

时间首次约 30 分钟
费用费用待核验：原站未说明费用；仓库为 MIT 开源，模型调用费用取决于所用 agent。
账号不需要新账号
环境能跑 Python 3.9+ 与 ffmpeg 的电脑，已安装受支持的 coding agent（Claude Code / Codex / Cursor / Gemini CLI / Copilot 等）；浏览器类脚本需 Playwright。
准备 coding agent：执行 skill 与编写 SVG/GSAP 页面
准备 Python 3.9+：运行 study_video / frame_diff / check_anim / render_anim 等脚本
准备 ffmpeg：分帧、提取视频信息与合成对比视频
准备一段动效视频：作为重建源素材
准备 Playwright（Chromium）（选用）：check_anim --runtime 等需要打开无头浏览器的脚本

替代方案：没有有效替代方案。能做到：README 中的逐帧对比、loop seam 测量与逐帧渲染脚本构成一套完整闭环，网页未给出等效替代方案。；差别：。

完成替代方案不算复现本实践。

按下面的步骤就能做出第一个结果。复制命令不会自动执行。

安装 motion2code skill
在 Claude Code 中通过插件市场安装；也可按 README 用 npx skills 或手动复制到对应目录（Codex：~/.agents/skills/，Cursor：~/.cursor/skills/ 并加 adapters/cursor/ 规则）。
bash原始来源命令
```
claude plugin marketplace add lovisdotio/motion2code
claude plugin install motion2code@motion2code
# 或
npx skills add lovisdotio/motion2code
```
预期结果：skill 出现在所用 agent 的可用技能/插件列表中
准备脚本运行环境
确认已装 Python 3.9+ 与 ffmpeg；需要打开浏览器的脚本用 Playwright（可用 uv run --with playwright 或 pip install playwright && python -m playwright install chromium）。

预期结果：python3 能运行脚本，ffmpeg 命令可用
让 agent 研究视频并重建
把视频放进工作目录，用自然语言要求重建为循环的 SVG + GSAP 动画，或填写 prompts/convert-video-prompt.md 提供完整需求。
bash原始来源命令
```
python3 scripts/study_video.py clip.mp4 -o study/
```
预期结果：agent 先运行 study_video.py 生成分帧、接触表、调色板与 loop 分数，然后写出单个 GSAP 时间线的 index.html
逐帧对比检查
对源视频与生成的页面做逐帧对比，并检查页面契约、控制台错误与循环接缝（此步不再重复分帧研究）。
bash原始来源命令
```
python3 scripts/frame_diff.py clip.mp4 index.html -o diff/
python3 scripts/check_anim.py index.html --runtime
```
预期结果：diff/ 下生成 source|code 对比图与各时刻差异分数（含最差五个），check_anim 报告无控制台错误、无嵌入位图且接缝达标
渲染成片与并排对照
通过 seek(t) 逐帧渲染动画并生成与原片并排的视频。
bash原始来源命令
```
python3 scripts/render_anim.py index.html -o anim.mp4
python3 scripts/side_by_side.py clip.mp4 anim.mp4 -o side_by_side.mp4 --html index.html
```
预期结果：得到不掉帧不重帧的 anim.mp4 与 side_by_side.mp4，可在浏览器 compare.html 中逐帧对照

原始来源：lovisdotio/motion2code ↗

效果

这是什么

评分 三项分开看，不合成总分；热度不等于好用

新颖性

热度

易上手

怎么尝试

安装 motion2code skill

准备脚本运行环境

让 agent 研究视频并重建

逐帧对比检查

渲染成片与并排对照

评分三项分开看，不合成总分；热度不等于好用