←Leaderboard/Design/motion2code
Last commit on October 20, 2026·Created on October 20, 2026

lovisdotio/motion2code

“Rebuild motion videos as SVG and GSAP animations.”
Combined rank
#671
across all skills
In Design
#76
category rank
Stars
333
+12.1% in last 7d
Forks
32
+18.5% in last 7d
Watchers
0
0 watchers in last 7d
Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
TL;DR

Motion2Code rebuilds flat motion design videos as editable inline SVG shapes animated by a single GSAP timeline.

WHO IT'S FOR
Frontend engineers
convert motion design videos into SVG and GSAP
Creative technologists
turn interface recordings into interactive websites
AI agent builders
implement video-to-code reconstruction workflows for agents
Motion designers
export animated logos and clips as HTML animations
Repository contents

1 skill file

Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.

Use this skill

Follow the documented setup, then try a first task.

I’m using

Claude Code plugin marketplace

Installs: Motion2Code plugin · Claude Code

Before you start
  • Python 3.9+ and ffmpeg for the scripts.
  • Playwright for scripts that open a browser.
  1. In a terminal, add the plugin marketplace.

    claude plugin marketplace add lovisdotio/motion2code
  2. In the terminal, install the Motion2Code plugin from that marketplace.

    claude plugin install motion2code@motion2code
README.md ↗ · Checked Nov 5, 2026

Give it something to do.

Suggested first task

Study a motion clip and outline its beats

Uses motion2code

  • A local flat motion design video; photographic footage and 3D rendering are outside the documented scope.
  • An adjacent prompt file with exact wording, if available.
  • Python 3.9+ and ffmpeg installed.

Make sure motion2code is installed in your agent before trying this task.

Use the motion2code skill to study my supplied flat motion design clip. Generate the source-study frames, contact sheet, and sampled palette, then write a concise shot list describing each beat's timing, shapes, easing, and transitions. Note the stage size, duration, and whether the source already loops. Read the adjacent prompt file if one is available for exact wording. Stop after the study and shot list.
README.md ↗ · Checked Nov 5, 2026skills/motion2code/SKILL.md ↗ · Checked Nov 5, 2026