Motion2Code
Motion2Code is a skill that teaches coding agents to rebuild a motion design video as editable SVG and GSAP code for designers and developers.
What it is good for
- Recreating a motion design clip as editable animated code
- Making looping animations that restart without a visible jump
- Checking an animation frame by frame against its source video
- Turning a screen recording into a working interactive website
At a glance
- Who it is for
- Setup
- Guided command-line setup
Level 4 of 5. You copy and paste commands into a terminal by following the instructions. Comfortable territory for vibe coders.
- Cost
- Free and open source
- Type
- Skill or plugin
- Tasks
- Works with
- Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, GSAP
Momentum
- Rank this week
- Not ranked (last #92, week 43, 2026)
- Best rank
- #92 week 43, 2026
- GitHub stars
- 317
GitHub numbers as of Nov 2, 2026. Updated weekly.
Ranking history
Official links
Setup steps are on the official pages. We do not repeat them here, since they change.
Questions
- Is Motion2Code free?
- Yes. It is free and open source (MIT license).
- Do I need to know how to code to use Motion2Code?
- You do not need to write code, but setup means copying and pasting commands into a terminal by following its instructions.
- What does Motion2Code work with?
- According to its own documentation, it works with Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and GSAP.
- What is Motion2Code good for?
- Recreating a motion design clip as editable animated code, making looping animations that restart without a visible jump, checking an animation frame by frame against its source video, and turning a screen recording into a working interactive website.
Similar agents
- Impeccable
Impeccable is a set of design commands for coding agents that steers, reviews, and polishes interfaces to avoid generic AI-looking design.
- AI Website Cloner Template
AI Website Cloner Template is a skill that recreates an existing website as a Next.js app for people who want a copy of a site's design and layout.
- skills
Skills is a collection of agent skills that reviews and improves user interfaces for designers and developers building screens and apps.
- stitch-skills
Stitch-skills is a library of skill add-ons that teach coding agents to turn Google Stitch designs into code, design systems, and assets for designers and developers.
- Skills
Skills is a collection of agent skill folders that teaches Codex, Claude, and Cursor how to build landing pages, 3D scenes, and UI prompts for designers and builders.
- baoyu-design
baoyu-design is an Agent Skill that produces UI mockups, prototypes, wireframes and slide decks as HTML files inside a local coding agent, for designers and builders who want to skip a hosted design website.