lovisdotio/motion2code

这是什么？

核心功能

• 01将源视频拆解为逐帧画面、切点、调色板和循环评分，便于研究。
• 02以内联 SVG 图形配合单条 GSAP 时间线实现动画。
• 03暴露 window.anim.seek(t) 接口，支持确定性的逐帧渲染。
• 04逐时刻并排比对源视频与代码效果，并给出差异评分。
• 05检测动画首尾衔接，并可导出 mp4、GIF 或 PNG 序列。

适用场景

• 将动效短片复刻为可编辑、与分辨率无关的网页代码。
• 把应用或网站的屏幕录制还原为带滚动动画的可交互页面。
• 逐帧验证 AI 生成的动画是否与参考视频一致。

快速上手

1. 1

   为你的编程代理安装该技能

   npx skills add lovisdotio/motion2code
2. 2

   安装 Python 3.9+ 和 ffmpeg（只有需要打开浏览器的脚本才需要 Playwright）

3. 3

   在重建之前先分析源视频

   python3 scripts/study_video.py clip.mp4 -o study/

使用前须知

• !脚本需要 ffmpeg，部分检查和渲染还需要带 Chromium 的 Playwright。
• !该工作流需要由编程代理配合你提供的源视频来运行。

收录于专题

标签

常见问题

motion2code 是什么？

一套智能体技能，把动效设计视频还原为可循环播放的 SVG 与 GSAP 代码，并逐帧与原视频比对。 Motion2Code 是一套面向 Claude Code、Codex、Cursor 等编程智能体的技能。智能体无法直接观看视频，因此在被要求复刻动画时，往往只能凭想象猜测时序、缓动和颜色。该技能提供完整流程：先把源视频拆解为逐帧画面、调色板和循环评分，再用内联 SVG 图形配合一条 GSAP 时间线构建动画，最后与源视频逐帧对比。

motion2code 可以免费使用吗？用的什么许可证？

motion2code 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

motion2code 还在维护吗？

活跃维护中。motion2code 最近一次提交是在 2026年10月20日。

motion2code 适合用来做什么？

将动效短片复刻为可编辑、与分辨率无关的网页代码。 把应用或网站的屏幕录制还原为带滚动动画的可交互页面。 逐帧验证 AI 生成的动画是否与参考视频一致。

motion2code 怎么安装和运行？

为你的编程代理安装该技能: npx skills add lovisdotio/motion2code 安装 Python 3.9+ 和 ffmpeg（只有需要打开浏览器的脚本才需要 Playwright） 在重建之前先分析源视频: python3 scripts/study_video.py clip.mp4 -o study/

在哪里获取 motion2code？

源代码和安装说明在 GitHub 上：https://github.com/lovisdotio/motion2code