Reanimate: A Claude Code Skill for High-Fidelity Animation Reverse Engineering

Overview of Reanimate

Reanimate is a tool designed to address the challenges developers face when attempting to replicate complex web animations. Unlike standard AI agents that may struggle to interpret motion or timing, Reanimate uses an iterative, verification-based approach to clone animations from live sites, screen recordings, or media files.

How It Works

• Record: The tool captures the reference animation in a headless browser, documenting frame-by-frame movement, CSS properties, Web Animations API states, and GPU calls for canvas or WebGL elements.
• Analyze: It extracts technical specifications, including timing, easing, and coordinate transformations.
• Build: The agent generates code tailored to the user's preferred stack (e.g., Framer Motion, GSAP, or Three.js).
• Verify: It records the newly created animation and performs a side-by-side comparison against the original. If discrepancies exist, the agent iterates until the motion profiles align.

Technical Capabilities

• WebGL/Canvas Tracing: For complex graphical elements, Reanimate tracks GPU calls, shader sources, and uniform constants. Using a virtual clock, it ensures that even randomized effects are reproducible frame-by-frame.
• Physics Matching: Rather than relying solely on source code, it calculates physics parameters, such as spring behavior, based on observed movement characteristics like overshoot and settling time.
• Compatibility: The tool supports macOS and Linux (with Bun 1.1 or later) and integrates with Claude Code.

Important Considerations

Users should verify the original source's terms of use. Reanimate is intended as a technical tool for study and development; it is not affiliated with the companies whose animations are used as examples in the project documentation. For those interested in the underlying methodology, the project source is available on GitHub under the MIT license.