Motion2Code

Motion2Code is an open-source skill by Lovis Odin for coding agents such as Claude Code, Codex, Cursor, Copilot and Gemini. It guides an agent to rebuild a motion design video as clean, editable code: inline SVG shapes animated by a single GSAP timeline. For screen recordings of websites and apps, it can build a real interactive site with GSAP ScrollTrigger.

What It Is

Motion2Code is an agent skill plus a set of Python helper scripts. The README says agents otherwise animate blind because they cannot watch the video, which leads to wrong timing, wrong easing, remembered colors and animations that jump when they loop. The skill has the agent study the clip first, build a self-contained page, then check it against the source.

How the Workflow Runs

• study_video.py saves frames every 0.25 s, frames around each detected cut, a contact sheet, the flat palette and a loop score of the source.
• frame_diff.py writes source and code image pairs side by side with a difference score to find the worst moments.
• check_anim.py validates the page contract, the script allowlist and the absence of embedded raster or video. With --runtime it also checks console errors, network requests, the loop seam and that seek is deterministic.
• render_anim.py renders frame by frame through seek(t) to mp4, GIF or PNG frames at any size.
• side_by_side.py produces a labelled proof video of the source and the render.

The Page Contract

Each output exposes window.anim = { tl, duration, seek(t), play(from), pause() }, where seek(t) is a pure function of time. Query parameters freeze the page at a time or wait to be driven externally. The pages use inline SVG, GSAP 3, flubber for morphs only, and Google Fonts. Hard rules: use only the given source video, never embed or trace it, keep text exactly as in the source, sample colors from the source, and make the last frame equal the first so the loop is done in code.

Install and Gallery

Installation is available as a Claude Code plugin, via npx skills add, or by copying the skill folder for Codex, Cursor, Copilot, Gemini CLI and Hermes. Adapters exist for chat tools without skill support. The scripts need Python 3.9+, ffmpeg and Playwright. The repository includes six rebuilt clips with a self-contained page, a side-by-side compare page and the 480p source clip; the README says the sources were generated with MiniMax H3 Max on fal and rebuilt by Claude Opus 5.5.