Motion2Code: let a video model design the motion, then have your agent rebuild it as editable SVG + GSAP

Lovis Odin posted Motion2Code on Oct 20, and the post passed 1,000 likes and 1,300 bookmarks. @RoundtableSpace picked it up on Oct 23. The pitch: models like Claude are weak at designing motion but good at writing code. So a video model (MiniMax H3 Max on fal, in his gallery) designs the clip, and the agent rebuilds it as inline SVG animated by one GSAP timeline. Per the README, the results are tens of kilobytes, loop seamlessly, and render sharp at any size, up to 32K.

What makes it more than a prompt is that the skill makes the agent look before it codes. A study script pulls a frame every 0.25 s, the frames around every hard cut, a contact sheet, the exact flat palette and a loop score. After the build, a frame-diff script puts source and code side by side and ranks the five worst moments. A check script tests the seam and confirms the page is deterministic. The page exposes window.anim.seek(t), so any frame renders the same way twice. It can also turn a model's fake 'screen recording' of a website into a working page with ScrollTrigger.

Install for Claude Code: claude plugin marketplace add lovisdotio/motion2code, then claude plugin install motion2code@motion2code. For other agents: npx skills add lovisdotio/motion2code. The scripts need Python 3.9+, ffmpeg and Playwright. The hard rules in the README matter for client work: never embed or trace the source video, keep text exactly as prompted, and sample colours from the source.

Why it's on ReelStack: it's a cheap way to turn one paid generation into an editable, brand-safe asset you can retime, recolour or reword in a text editor, then drop into HyperFrames or Remotion. Flat, vector-style motion is the sweet spot. Photoreal footage isn't what it's for.

Our take: the side-by-side compare page is the best feature, because you can see exactly where the rebuild drifts. Budget for a few repair passes on complex morphs.