motion2code

Motion2Code

视频就是规格说明，但你无法观看它。请把这项工作视为重建：将片段转换成可查看的图像，记下每个时刻发生的事情，构建图形，用同一个时钟驱动它们，然后将各个时刻与源视频并排对照，以证明效果。切勿凭对视频的记忆来制作动画。

工作流

1. 研究源视频。 python3 scripts/study_video.py source.mp4 -o study/ 每 0.25 s 保存一帧、保存每次剪辑切换前后的帧、生成联系表、提取精确的纯色色板，并判断源视频是否已循环播放。先打开联系表，再查看各帧。接着阅读视频旁边的提示词文件（如果有）：其中包含准确的文字。
2. 编写镜头列表。 每个节拍写一行：时间范围、每个图形的动作、缓动方式，以及接下来会变成什么。记下画布尺寸（1920x1080 或 1080x1920）和实际时长（ffprobe，例如 15.10 s 表示 15 s 循环）。参见 references/study-the-source.md。
3. 从 templates/index.html 构建画布：使用一个与源视频分辨率一致的内联 SVG，每个图形都围绕自身原点绘制，使用从采样色板中选出的纯色填充，并选用最接近准确字形的 Google Font 子集。
4. 在一个 GSAP 时间轴上制作动画。 使用补间制作各镜头，并通过纯函数 draw(t) 绘制程序生成的部分（粒子、变形、物理效果），且由同一个时钟调用。匹配各帧的时间，不要按自己的想法调整。参见 references/animation-architecture.md 和 references/motion-vocabulary.md。
5. 在代码中闭合循环。 最后一刻要回到与开场帧完全一致的画面，即使源视频没有循环也一样。参见 references/seamless-loop.md。
6. 验证、修复、重复。 python3 scripts/frame_diff.py source.mp4 index.html -o diff/ 会生成源视频与代码的对照图，以及每个时刻的评分； 打开对照图，先修复问题最严重的部分，再使用 --every 1/24 --start a --end b 放大查看转场。 python3 scripts/check_anim.py index.html --runtime 会检查契约、循环接缝、确定性、控制台错误和网络。只有检查结果都正常时才能交付。参见 references/verification.md。
7. 交付： index.html、compare.html（来自 templates/compare.html），以及在需要时提供验证视频： python3 scripts/render_anim.py index.html -o anim.mp4，然后运行 python3 scripts/side_by_side.py source.mp4 anim.mp4 -o side_by_side.mp4 --html index.html。
8. 可选：制作真实网站。 对于界面录屏，完成忠实复刻后，从 templates/site.html 构建 site.html：将滚动效果改为 ScrollTrigger，将模拟点击改为真实按钮。 参见 references/interfaces-and-sites.md。

脚本需要 Python 3.9+、ffmpeg，以及用于打开浏览器的 Playwright（uv run --with playwright python scripts/...，或 pip install playwright && python -m playwright install chromium）。 请在此技能目录中运行这些脚本，或使用完整路径。

页面契约

window.anim = { tl, duration, seek(t), play(from), pause() }   // seek(t) is a pure function of t

• index.html?t=6.5 会冻结在 6.5 s；?external=1 不会自动播放（由 compare.html 和脚本驱动）； 不带参数时则会自动播放并无限循环。
• 字体加载完成且第 0 帧绘制完毕后，设置 <html data-ready="1">。渲染器会等待此状态。
• frame(duration) 等于 frame(0)；frame(duration - 1/24) 与其相差一步。
• 独立运行：内联 SVG、来自 cdnjs 的 GSAP 3、仅在需要变形时使用来自 jsdelivr 的 flubber，以及 Google Fonts。 不加载其他内容。

硬性规则

• 只能使用给定的源视频。 不要重新生成视频，不要去找“更好的版本”，也不要描摹帧来制作页面。动画中不得使用 <img>、<video>、SVG <image>、canvas drawImage 或栅格数据 URI。
• 文字必须与源提示词中的内容完全一致（如果没有提示词，则以视频为准），即使视频中的拼写有误也要照录。UI 录屏中编造的乱码词语应转换为纯色条，或直接移除。
• 使用 SVG 绘制扁平形状。 使用纯色填充和取样得到的十六进制颜色；不要使用源视频中没有的渐变、阴影或滤镜。贴纸轮廓的描边需设置 stroke-linecap="round"。
• GSAP 时间线是唯一时钟。 不要使用 requestAnimationFrame 循环、setTimeout 编排、CSS 动画或 Date.now() 驱动视觉效果。随机效果必须使用设定好的种子，并预先计算。
• 用代码实现循环。 如果源视频没有回到开场帧，就添加一段简短、流畅的过渡，使其回到开场帧。需通过数值检查接缝。
• 逐时刻与源视频并排检查，至少每 0.5 秒检查一次，并在每个转场和循环接缝处逐帧检查。没有成对图像的“看起来对了”不算检查。
• 时间节奏必须与源视频一致。 根据帧测量，不要压缩、填充或重排节拍。

参考资料路由

只阅读任务所需的内容：

文件	阅读时机
references/study-the-source.md	开始时：帧、剪辑、调色板、镜头列表、文字、时长、宽高比
references/animation-architecture.md	构建时：舞台、形状原点、时间线与 draw(t)、关键帧辅助函数、变形、字体、确定性
references/motion-vocabulary.md	匹配风格时：骤停、挤压与拉伸、拖影、弹性归位、虹膜转场、连续变形
references/seamless-loop.md	源视频不循环，或循环接缝有跳变时
references/verification.md	检查与证明视频：frame_diff、compare.html、check_anim、render、并排对比
references/interfaces-and-sites.md	源视频是网站／应用录屏，或需要实际的 site.html 时

模板：templates/index.html（规范、一个微型循环示例）、templates/compare.html（视频与代码并排显示，与视频时钟同步，支持逐帧浏览和洋葱皮）、templates/site.html（ScrollTrigger 固定与擦动、菜单、标签页、翻转卡片、可拖动滑块、购物车计数器、键盘、减少动态效果）。

输出要求

• 交付 index.html（界面类任务还需交付 compare.html 和 site.html），并说明检查了什么以及如何检查：frame_diff 时间点、最差分数及其对应内容、check_anim.py --runtime 结果、页面大小。
• 如实列出与源视频的差异（例如简化的纹理、合并的节拍），绝不要声称“像素级完美”。
• 使用易读的命名：每个角色或物体一个组，id 能说明其内容，将调色板定义为常量，并在镜头处注明时间范围，方便设计师调整节奏或颜色，而不必通读所有内容。