Motion2Code skill
Motion2Code includes a web-animation skill: the agent checks output against source frames and shows both versions side by side.
- 335 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent runs local video-processing scripts and browser checks and writes HTML and media files.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/motion2codeDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent runs local video-processing scripts and browser checks and writes HTML and media files.
This is third-party code. Review the repository files before installing.
What it does
Motion2Code is an agent skill for reconstructing motion-design clips in SVG and GSAP. It studies frames, colors and scene changes before building SVG shapes and a shared GSAP timeline. The resulting page can seek to a precise time for comparison with the source. For interface recordings, the skill also guides an interactive site with scrolling and buttons. Its scripts highlight large differences, check loop seams and produce a comparison video with source and output in the same frame.
Who it is for. Design engineers translating graphic or interface videos into editable web animation.
Good fit when
- You are rebuilding a graphic clip as vectors so its text and colors remain editable.
- A designer compares transition timing with the original frames.
- An approved website video concept needs working buttons and scrolling.
- Before sign-off, you show the designer a synchronized reference-and-page comparison.
Not a fit when
- The task is editing footage rather than reconstructing graphic motion in code.
- Only a vague verbal idea is available, with no source clip.
- You expect automatic exact reconstruction of complex live-action footage.
Example request
Rebuild this short clip in SVG and GSAP. Show key frames first, then compare transitions and the loop seam.Limitations
Scripts need Python 3.9 or later, ffmpeg and Playwright with a browser. The main format is flat SVG animated with GSAP, so complex photographic scenes need another approach. Allowed external dependencies are GSAP 3 from cdnjs, flubber from jsdelivr for morphs, and Google Fonts; they cannot load offline. Even with a low numerical difference score, the agent reviews frames for pacing and legibility.
How to disable. Uninstall the Motion2Code plugin or skill directory. Preserve generated pages and comparison materials separately.
FAQ
How do I install it in Claude Code?
Run `claude plugin marketplace add lovisdotio/motion2code`, then `claude plugin install motion2code@motion2code`.
Can the source video be embedded as the animation?
The skill forbids that shortcut. The agent must build editable shapes and verify them against frames.
How do I inspect a precise time?
Open the page with `?t=6.5`, replacing the time as needed. It freezes at that moment.
Can the code become an MP4?
Yes. `render_anim.py` renders frame by frame, with GIF and PNG frames also available. Choose the required handoff format.
Which text should the output use?
The exact text from the original brief. If a video model misspelled it, the agent follows the brief and identifies the difference in review.
Discussion
No questions or reviews yet.
Related
SkillsA skill for Claude Code and Codex that turns AI video and frames into web animation driven by scroll, cursor, touch or device tilt
A motion design skill for agents: timing, easing, choreography and Disney animation principles applied to UI
A catalog of 24 text animations with exact JSON specs that an agent ports to Motion, GSAP, WAAPI or CSS
A free Claude skill that writes a build spec, picks cinematic media, builds a landing page and checks it with screenshots
The /motion skill and an MCP server with current Motion docs: agents write React and Vue animations from fresh examples.
Motion Web
motion-web
Sites with motion first on pure Three.js, Canvas 2D, WebGL and CSS: damping physics, tokens, 7 examples. CC BY-NC 4.0 license
README in short
The package includes a brief template and adapters for multiple agent clients. Its gallery pairs finished pages with sources and comparisons.
README badge
Original SKILL.md
---
name: motion2code
description: >-
Rebuilds an AI-generated (or any) flat motion design video as clean, editable code: inline SVG shapes animated by
one GSAP timeline, seekable frame by frame, looping seamlessly, checked side by side against the source; and
optionally turns an interface recording into a real interactive website (GSAP ScrollTrigger, real clicks).
Ships scripts to study the video (frames, cuts, contact sheet, exact palette), render the code to mp4/GIF through
anim.seek, compare it with the source frame by frame and check the loop seam and page contract. Use when the user
wants a video, GIF, Lottie-like clip, motion design shot, animated logo, UI screen recording or AI video
"recreated in code", "converted to SVG/GSAP", "made into an HTML animation" or "made into a real site". Not for
photographic footage, 3D rendering or video editing.
license: MIT
metadata:
hermes:
tags:
- svg
- gsap
- motion-design
- animation
- video-to-code
- scrolltrigger
category: development
---
# Motion2Code
The video is the spec, and you cannot watch it. Treat the job as reconstruction: turn the clip into images you can
look at, write down what happens and when, build the shapes, drive them with one clock, then prove every moment
against the source with images side by side. Never animate from a memory of the video.
## Workflow
1. **Study the source.** `python3 scripts/study_video.py source.mp4 -o study/` saves a frame every 0.25 s, the
frames around every cut, a contact sheet, the exact flat palette and whether the source already loops. Open the
sheet, then the frames. Read the prompt file next to the video if there is one: it holds the exact words.
2. **Write the shot list.** One line per beat: time range, what each shape does, how it eases, what it becomes
next. Note the stage size (1920x1080 or 1080x1920) and the real duration (ffprobe, e.g. 15.10 s means a 15 s
loop). See `references/study-the-source.md`.
3. **Build the stage** from `templates/index.html`: one inline SVG at the source resolution, every shape drawn
around its own origin, flat fills from the sampled palette, the closest Google Font subset to the exact letters.
4. **Animate on one GSAP timeline.** Tweens for the shots, plus a pure `draw(t)` for procedural parts (particles,
morphs, physics) called from the same clock. Match the timing of the frames, not your idea of it.