# Motion2Code

> A skill that teaches coding agents to rebuild motion design videos as looping SVG and GSAP code, verified frame by frame against the source.

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.

## Features
- Rebuilds motion design videos as inline SVG animated by one GSAP timeline
- Frame-by-frame study of source video with palette and loop detection
- Side-by-side source vs code comparison with difference scores
- Deterministic seek(t) page contract
- Seamless loop enforced in code
- Frame-exact rendering to mp4, GIF or PNG
- Builds interactive sites from app/website screen recordings with GSAP ScrollTrigger
- Runtime page checks for console errors, network requests and loop seam

## Integrations
Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Hermes, GSAP, Playwright, ffmpeg

## Platforms
API, CLI

## Pricing
Open Source

## Links
- Website: https://github.com/lovisdotio/motion2code
- Repository: https://github.com/lovisdotio/motion2code
- EveryDev.ai: https://www.everydev.ai/tools/motion2code