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 <project>/.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 "<url-or-file>"
# → 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 — open at 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 from stacks → pixel-diff fidelity scoring → spring/bezier curve fitting. Keep the phase structure and the "measured, not guessed" rule.

Ethics

For studying motion technique to build your own work — not for 1:1 clones of a branded product's identity.

MIT