lovisdotio/motion2code

选用指南

AI 根据 README 整理 · 2026/10/21 08:01:40

使用方式

通过编码代理使用，如Claude Code、Codex、Cursor等，可自然语言描述或填写提示词模板，代理调用Python脚本进行视频分析和代码生成。

查看 README 依据

(`uv run --with playwright python ...`, or `pip install playwright && python -m playwright install chromium`). ## Use Ask naturally: *"Rebuild clip.mp4 as an SVG + GSAP animation that loops"*, or *"turn this app screen recording into a real site"*. For a full brief, fill in [`prompts/convert-video-prompt.md`](prompts/convert-video-prompt.md). The agent studies the video, builds the page, then checks it: ```bash python3 scripts/study_video.py clip.mp4 -o study/ python3 scripts/frame_diff.py clip.mp4 index.html -o diff/ python3 scripts/check_anim.py index.html --runtime

部署要求

需要Python 3.9+、ffmpeg和Playwright（用于打开浏览器的脚本）。

查看 README 依据

- **Copilot:** `gh skill install lovisdotio/motion2code motion2code`, plus `adapters/copilot/`. - **Gemini CLI:** `gemini extensions install https://github.com/lovisdotio/motion2code`. - **Hermes:** copy it to `~/.hermes/skills/`. **claude.ai:** zip `skills/motion2code` and upload it under Settings > Capabilities > Skills. **ChatGPT, Gemini Gems and other chat tools:** see [`adapters/`](adapters/). The scripts need Python 3.9+, ffmpeg, and Playwright for the ones that open a browser

已知限制

技能仅使用给定源视频，不重新生成、不嵌入、不追踪帧；文本必须与源提示完全一致，即使视频拼写错误。

查看 README 依据

- Use only the given source video: never regenerate it, never embed it, never trace its frames. - Text exactly as in the source prompt, even when the video misspells it. - Flat shapes as SVG, colors sampled from the source. - The GSAP timeline is the single clock. - The loop is done in code: frame(duration) equals frame(0). - Every moment is checked against the source, side by side. ## Repository ```text skills/motion2code/ the skill: SKILL.md, references/, scripts/, templates/ gallery/ six rebuilt clips: index.html, compare.html, source.mp4 (480p), poster.gif, site.html