web-motion

Close the agentic coding loop for web animation. Give your coding agent the ability to scroll your page while recording, analyze the result frame-by-frame, and optimize animations through natural language alone — no more screen recordings or trying to describe what "feels off".

TL;DR

Ask Claude:

"/web-motion this entrance animation feels robotic, fix it" "/web-motion there's a flicker on page transitions, find it" "/web-motion recreate this GSAP scroll-into-view animation"

That's it. Claude records your page, inspects it frame-by-frame, and ships the fix.

Setup

1. Clone the skill into Claude Code's skills directory

git clone https://github.com/Schmandarine/web-motion-skill ~/.claude/skills/web-motion

This makes the skill available globally in Claude Code — no project-level config needed.

2. Install dependencies

bash ~/.claude/skills/web-motion/scripts/setup.sh

Installs three things (asks consent before each):

• ffmpeg (~80MB) — converts recorded video to frames
• Playwright — installed locally inside the skill dir, no project pollution
• Chromium (~300MB) — the headless browser that records your page

3. Reload Claude Code — the skill auto-triggers on animation tasks, or invoke it explicitly with /web-motion.

Within about 15 seconds Claude has a 24-tile labelled contact sheet of your animation, reads it as a single image, identifies where the animation breaks, and writes the fix.

What Claude actually sees

After running analyze.sh + contact-sheet.sh, Claude reads one image like this:

Each tile is a frame from the recording, labelled with its real source frame number. From this single image Claude can answer:

• When does the entrance start? — around f64, cards begin rising from below
• How long is the dwell? — f82 → f118, ~1.4s of cards held in place
• When does the exit begin? — f127, the scatter throw starts
• Is the stagger direction correct? — left card leads (matches reading order ✓)
• Are any frames jumping or clipping?

Then Claude drills into the interesting window — reads f64 through f80 individually to confirm the entrance timing, or f127 through f140 to confirm the exit. The same workflow a motion designer uses reviewing a take in After Effects.

Why this exists

Until now, the loop for fixing a web animation with a coding agent has been open:

1. You watch the animation.
2. You try to articulate what feels wrong ("too fast", "feels robotic", "the exit is jarring").
3. The agent guesses what you mean and edits code.
4. You watch again — still wrong.
5. Repeat.

The agent can write animation code but never actually sees it run. You're the only one in the loop with vision. This skill closes the loop by giving Claude two things:

1. Vision — bundled scripts record the page with headless Chromium, extract frames at 25fps, and build a labelled contact sheet. The agent reads images directly and reasons about timing, easing, and trajectory.

2. Judgment — Disney's 12 Principles of Animation, adapted for web, GSAP, CSS, and scroll input. Once the agent can see what's broken, the principles tell it how to fix it.

With both, you can describe a problem in natural language — or just say "the exit feels off" — and the agent records, watches, diagnoses, and fixes on its own. No more sending screen recordings back and forth.

The 12 Principles, Web-Adapted