xiry.

Development · GitHub repo

animation-reverse-engineering

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

From the Xiry library · Updated 10 October 2026

Visit github.com ↗

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.

What it's 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
Topic
AI Coding Tools
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: 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

    Design inspiration MCP server and archive for AI coding agents.

  • agent-skills

    Curated skills and performance rules for AI coding agents by Vercel.

  • AI App Builders & Coding Assistants Roster

    Curated roster of 20 AI app builders and coding assistants.

  • Hallmark

    Design skill preventing LLMs from generating generic, AI-looking web interfaces

  • MCP in Cursor Guide

    Walkthrough for setting up Model Context Protocol servers inside Cursor

  • One

    Unified Mac HUD to triage and control multiple coding agents

All 9 in AI Coding Tools →

Updated