Repolode
Submit
lovisdotio

lovisdotio/motion2code

An agent skill that rebuilds a motion design video as looping inline SVG and GSAP code, checked frame by frame against the source.

View on GitHub
Stars
338
Forks
31
Open issues
2
Last commit
19 days ago

What is it?

Motion2Code is a skill for coding agents such as Claude Code, Codex and Cursor. Agents cannot watch a video, so when asked to recreate a clip they tend to guess timing, easing and colors. This skill gives them a workflow: study the source video into frames, palette and loop score, build the animation from inline SVG shapes driven by one GSAP timeline, then compare it with the source frame by frame.

The generated page exposes a seek(t) function, so any moment can be rendered and tested deterministically, and a check script measures whether the animation loops seamlessly. For screen recordings of websites and apps, the skill goes further and builds a working page using GSAP ScrollTrigger with real buttons and scrolling. The repository includes six rebuilt gallery clips, each with a side-by-side comparison page.

Key features

  • 01Splits a source video into frames, cut points, palette and loop score for study.
  • 02Builds animation as inline SVG driven by a single GSAP timeline.
  • 03Exposes window.anim.seek(t) for deterministic frame-by-frame rendering.
  • 04Compares the source and the code side by side with a per-moment difference score.
  • 05Measures the loop seam and renders output to mp4, GIF or PNG frames.

Use cases

  • Recreating a motion design clip as editable, resolution-independent web code.
  • Turning an app or website screen recording into a working interactive page with scroll animations.
  • Verifying that an AI-generated animation matches its reference video frame by frame.

Quick start

  1. 1

    Install the skill for your coding agent

    npx skills add lovisdotio/motion2code
  2. 2

    Install Python 3.9+ and ffmpeg (Playwright is needed only for the browser-based scripts)

  3. 3

    Study your source video before rebuilding it

    python3 scripts/study_video.py clip.mp4 -o study/

Things to know

  • The scripts need ffmpeg and, for some checks and renders, Playwright with Chromium.
  • The workflow is meant to be driven by a coding agent working from a source video you provide.

In collections

Claude Code tools, skills & pluginsAI agent skill libraries

Topics

#agent-skills#svg#gsap#animation#motion-design#video-to-code#claude-code

FAQ

What is motion2code?
An agent skill that rebuilds a motion design video as looping inline SVG and GSAP code, checked frame by frame against the source. Motion2Code is a skill for coding agents such as Claude Code, Codex and Cursor. Agents cannot watch a video, so when asked to recreate a clip they tend to guess timing, easing and colors. This skill gives them a workflow: study the source video into frames, palette and loop score, build the animation from inline SVG shapes driven by one GSAP timeline, then compare it with the source frame by frame.
Is motion2code free to use? What license does it have?
motion2code is open source under the MIT license. Check the license terms before using it in commercial products.
Is motion2code still maintained?
Actively maintained. The last commit to motion2code was on Oct 20, 2026.
What can I use motion2code for?
Recreating a motion design clip as editable, resolution-independent web code. Turning an app or website screen recording into a working interactive page with scroll animations. Verifying that an AI-generated animation matches its reference video frame by frame.
How do I install motion2code?
Install the skill for your coding agent: npx skills add lovisdotio/motion2code Install Python 3.9+ and ffmpeg (Playwright is needed only for the browser-based scripts) Study your source video before rebuilding it: python3 scripts/study_video.py clip.mp4 -o study/
Where can I get motion2code?
The source code and installation instructions are on GitHub: https://github.com/lovisdotio/motion2code

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects