Animation Reverse Engineering

animation-reverse-engineering

Claude Code skill: turn any motion reference (X/Twitter video, Dribbble shot, screen recording) into production animation code via **frame-level dissection** — measured, not eyeballed.

Install (30 seconds)

# 1. prerequisites (macOS; use apt/scoop elsewhere)
brew install ffmpeg yt-dlp

# 2. install the skill (per-user — available in every project)
git clone https://github.com/scriptscrypt/animation-reverse-engineering \
  ~/.claude/skills/animation-reverse-engineering

Project-local instead: clone into `/.claude/skills/`.

Run

Paste a reference into Claude Code and ask for the port:

https://x.com/60fpsdesign/status/…
implement this slider interaction end to end

Claude loads the skill and walks the pipeline below. To pre-dissect manually:

~/.claude/skills/animation-reverse-engineering/scripts/dissect.sh ""
# → probe.txt + overview.png; then re-run with --band W:H:X:Y --window S-E for stacks

How it works


Editable source: [`docs/architecture.excalidraw`](docs/architecture.excalidraw) — open at [excalidraw.com](https://excalidraw.com).

The invariant: **every timing, order, and easing decision traces to a measured frame, and the port is screenshot-verified against those same frames.**

Files

Path	What
SKILL.md	The pipeline (what Claude loads)
references/	Per-phase deep dives: acquisition, dissection, analysis, porting (framer-motion + interactions), verification
references/examples/	Two full case studies — a text sweep (timeline) and a timelapse scrubber (interaction)
scripts/dissect.sh	One-command acquire → probe → contact sheet → stacks

Extend

Ordered by leverage: more worked examples per species (gesture physics, scroll narratives, shared-element transitions, canvas/shader) → more port targets (CSS/WAAPI, Reanimated, SwiftUI) → automated delta measurement fr