lovisdotio / motion2code

# Motion2Code
A skill that teaches coding agents to rebuild a motion design video as clean, editable code: inline SVG shapes
animated by one GSAP timeline, seekable frame by frame, looping seamlessly, and checked side by side against the
source. For screen recordings of websites and apps it goes one step further and builds the real, interactive site
with GSAP ScrollTrigger. It works with Claude Code, Codex, Cursor, Copilot, Gemini and others.
**See them running live:** fal-motion-in-code.vercel.app
| | | |
|---|---|---|
| | | |
| Kinetic type: a square grows into THINK, a bar wipes to BIG, the period becomes a sun. 10 s, 24 KB | Match cuts: an eye opens, its pupil becomes the O of LOOK, a grid of blinking eyes, SEE., NOTICE. 10 s, 40 KB | Festival site replay: the poster folds into a map, a stage card plays, day turns to night. 15 s, 52 KB, real site |
| | | |
| Weather site replay: the slider drags rain bands across the map, TUE turns it sunny, WED strikes lightning. 15 s, 60 KB, real site | Portfolio replay: a sticker is dragged, the cat unfolds into a grid of cards, HI!, every sticker flies home. 15 s, 56 KB, real site | Podcast page replay: PLAY, the waveform pulses, transcript bars light up, the cover bounces to the beat. 15 s, 36 KB, real site |
Each image links to its self-contained `index.html`. Every folder in `gallery/` also has `compare.html`
(the source and the code side by side, synced frame by frame) and the source clip at 480p. The source videos were
generated with MiniMax H3 Max on fal (fal.ai) and rebuilt by Claude Opus 5.5 with this skill.
## Why
Agents animate blind: they cannot watch the video. Asked to "recreate this clip", they write what they imagine:
the wrong beat at the wrong second, `power1.inOut` where the source snaps and overshoots, colors from memory, words
spelled the way the model misspelled them, and an animation that jumps when it loops. Some quietly embed the
video or trace its frames instead of rebuilding it. This skill closes those gaps:
- **Look before coding.** `study_video.py` turns the clip into what an agent can see: a frame every 0.25 s, the
 frames around every hard change, a contact sheet, the exact flat palette, and whether the source loops.
- **One clock, one contract.** A single GSAP timeline drives everything and the page exposes
 `window.anim.seek(t)`, so any moment can be rendered, compared and tested deterministically.
- **Proof, not "looks right".** `frame_diff.py` puts the source and the code side by side at any time, down to
 every frame of a transition, with a score to rank the worst moments. `compare.html` does the same live.
- **The loop is done in code.** Even when the video does not loop, the last moment returns to the exact opening
 frame; `check_anim.py` measures the seam.
- **Exact frames out.** `render_anim.py` renders through `seek(t)`, frame by frame, so proof videos and GIFs never
 drop or double frames.
- **Vectors at any size.** The source is a 1080p video; the code renders sha