web-motionlisted

# Web Motion This skill closes the agentic coding loop for web animation. Without it, you write animation code blind — you can't watch what you just produced, so you rely on the user to describe what feels wrong. With it you get both halves of the loop: 1. **Vision** — bundled scripts record the page with Playwright (or ffmpeg for hover/click flows), extract frames at 25fps, and build a labelled contact sheet. You read those images directly and reason about timing, easing, and trajectory the way a motion designer reviews a take. 2. **Judgment** — Disney's 12 Principles of Animation, adapted for the constraints of the web (scroll input, GSAP timelines, CSS transitions, browser rendering). Once you can see what's broken, the principles name what's wrong and point at the fix. The combination is what matters. Without vision, you guess about an animation you can't perceive. Without the principles, *"it feels off"* stays unactionable. Together: watch the take → name the violated principle → write the fix → re-record to verify. ## Works with the Official GSAP Skills This skill handles **vision and judgment** — recording the page, reading frames, naming what's wrong. The [official GSAP skills](https://github.com/greensock/gsap-skills) handle **API correctness** — writing GSAP code the right way (timelines, ScrollTrigger, plugins, React, performance). Together they close the full loop: 1. **Write** — use the GSAP skills to produce correct animation code 2. **Record** — this ski