Motion2Code — скилл

---
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.