Image: GitHub
Why it mattersA coding agent cannot watch a video. The author gives it frames to read, then a step that scores how close the rebuilt clip is.
A coding agent asked to recreate a short motion design clip usually writes what it imagines. The curve is wrong, a word is misspelled, the colours come from memory, and the loop jumps. Motion2Code tries to close that gap. The MIT-licensed skill turns the video into a set of frames and colours an agent can read. It then has the agent rebuild the clip as inline SVG driven by one GSAP timeline. The author published it on 20 October, and the repository has 239 stars five days later.
What the skill produces
The output is a self-contained HTML file. Shapes are inline SVG. One GSAP timeline drives everything. The page exposes window.anim.seek(t), which lets a tester freeze any moment in the clip. The result stays sharp at 4K or higher and weighs tens of kilobytes. Colours and words stay editable in a text editor.
The gallery in the repository holds six rebuilt clips. One shows kinetic type, another a weather site with draggable rain bands. Each folder has a compare.html file. That file places the source video and the rebuilt code side by side, synced frame by frame.
How the agent sees the video
The author provides five Python scripts the agent runs. study_video.py saves a frame every 0.25 seconds and extra frames around each hard cut. It writes a contact sheet, the flat colour palette, and a loop score. palette.py prints the exact hex colours and how much of a frame each covers. check_anim.py opens the page without a window and checks for console errors. It also tests that seek is deterministic. frame_diff.py compares source and rebuild at any time, with a score for the worst moments. render_anim.py renders the final clip frame by frame.
The author's hard rules
The author sets six rules every rebuild must follow. The agent must use only the given source clip, never regenerate it, never embed it, and never trace its frames. Text must match the source prompt exactly, even when the video misspells a word. Flat shapes must be SVG with colours sampled from the source. One GSAP timeline is the only clock. The loop must close in code: the final frame returns to the opening frame.
For a team building software
A video model's output is hard to review and hard to change. A clip rebuilt as code is both. A product team can swap a word, retime a shot, or restyle a colour without regenerating the video. A reviewer can compare the result against the source at any moment and get a score. The old step was to guess whether the two match.
The skill works with Claude Code, Codex, Cursor, Gemini CLI and Copilot. One mode turns a video model's fake screen recording of a website into a real page. That real page uses GSAP ScrollTrigger. The repository has 23 forks, MIT licence, and five sample clips a reader can open today.
Source
Primary source: lovisdotio/motion2code on GitHub.
This item was written by an AI system from the linked source. Reveneau is responsible for what it publishes.
Get AI News in your inbox
New developer tools, model and agent releases, and how teams are actually using them to release software. Short, and only when there is something worth reading.
