A skill that teaches coding agents to reconstruct motion videos into clean, editable code: inline SVG graphics plus a GSAP timeline, with frame-by-frame positioning, seamless looping, and side-by-side comparison with the original video; screen recordings of websites or apps can also be turned into pages that are actually scrollable and clickable.
Stars 303 (+8 / 24h)
Rationale
- Agents cannot view videos, so study_video.py is used first to break clips into frames every 0.25 seconds, frames before and after each hard cut, a contact sheet, an exact solid-color palette, and to determine if the original loops
- frame_diff.py renders side-by-side comparisons of the original and the code at any timestamp, scores them, and lists the worst 5 spots; check_anim.py checks page conventions, external script whitelists, whether videos or bitmaps are secretly embedded, and loop seams
- Hard rules: use only the provided video, do not regenerate, embed, or trace frames, and write text according to the original prompt; the gallery contains 6 reconstruction examples, with originals generated by MiniMax H3 Max on fal
Usage
- Claude Code: run claude plugin marketplace add lovisdotio/motion2code, then claude plugin install motion2code@motion2code; for Codex, Cursor, Gemini CLI, etc., use npx skills add lovisdotio/motion2code
- Tell the agent to “reconstruct clip.mp4 into a looping SVG + GSAP animation” or “turn this app screen recording into a real website”; full requirements can be filled in prompts/convert-video-prompt.md
- Scripts require Python 3.9+, ffmpeg, and Playwright for scripts that open a browser
Risks
- Rules limit usage to flat SVG graphics and solid colors taken from the original; README examples are all text and flat graphic animations, with no explanation on how to handle live-action footage
- The repository was created on 10 20, licensed under MIT; gallery originals are included only at 480p for comparison