# animation-reverse-engineering

> Claude Code skill to turn animation videos into production Framer Motion code.

This Claude Code skill extracts exact timing, easing, and stagger parameters from video references like X clips, Dribbble shots, or screen recordings. It uses ffmpeg and yt-dlp to dissect frames instead of guessing transitions, then writes the corresponding Framer Motion implementation. It supports both timeline-driven and interaction-driven animations.

Website: https://github.com/scriptscrypt/animation-reverse-engineering

## What it is for

- Replicate UI animation references from X or Dribbble into Framer Motion code
- Extract frame-by-frame timing and easing parameters from screen recordings
- Analyze interaction-driven animations to map gesture triggers and progress curves

## Features

- Automated video acquisition via yt-dlp and ffprobe
- Frame dissection generating 2fps contact sheets and crop-band stacks at native fps
- Classification pipeline separating timeline-driven and interaction-driven animations
- Framer Motion easing and stagger extraction derived directly from frame deltas
- Interactive gesture grammar and progress mapping analysis
- Command-line dissect script for manual extraction workflows

## Pricing

Free and open source (MIT license)

## Details

- Type: GitHub repo
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [AI Coding Tools](https://xiry.app/topics/development/ai-coding-tools.md)
- Open source: yes
- Platforms: Command line, macOS, Linux, Windows
- For: Front-end developers and creative technologists building web animations with Framer Motion.
- Tags: claude code, framer motion, animation, reverse engineering, ffmpeg, web development

## Why it was saved

- [@0xsrinivasa, 30 July 2026](https://x.com/0xsrinivasa/status/2082800929301254280): Makes replicating cool animations seen on X practical: the skill measures frame-level timing instead of guessing, and classifies animations as timeline-driven vs interaction-driven to generate accurate easing, stagger order, progress mappings and gesture triggers.

## Related

- [Inspo](https://xiry.app/resources/inspo): Design inspiration MCP server and archive for AI coding agents. (Web app, Free)
- [agent-skills](https://xiry.app/resources/agent-skills): Curated skills and performance rules for AI coding agents by Vercel. (GitHub repo, Open source)
- [AI App Builders & Coding Assistants Roster](https://xiry.app/resources/ai-app-builders-and-coding-assistants-roster): Curated roster of 20 AI app builders and coding assistants. (List)
- [Hallmark](https://xiry.app/resources/hallmark): Design skill preventing LLMs from generating generic, AI-looking web interfaces (GitHub repo, Open source)
- [MCP in Cursor Guide](https://xiry.app/resources/mcp-in-cursor-guide): Walkthrough for setting up Model Context Protocol servers inside Cursor (Framework, Free)
- [One](https://xiry.app/resources/one): Unified Mac HUD to triage and control multiple coding agents (Web app, Freemium)

Updated 10 October 2026. Page: https://xiry.app/resources/animation-reverse-engineering

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.