Reanimate Gives Claude a Ruler to Clone Web Animations Within 0.03% Pixel Error

Takeaways

Reanimate is an MIT-licensed Claude Code skill that reverse-engineers animations frame by frame.
Works from live URLs, mp4, gif, screen recordings, or Lottie files via a headless Playwright browser.
Pipeline: record reference, generate spec, build in your stack, verify against original, repeat 2 to 5 rounds.
Traces WebGL, WebGPU, and canvas 2D including three.js, Pixi, Babylon scene graphs with shader and uniform capture.
Virtual clock with seeded randomness produces byte-identical frames for reliable pixel comparison.
Install with npx skills add NiazMorshed2007/reanimate -g ; needs Bun 1.1+, no API keys.

Recreating a reference animation with a coding agent often produces a plausible first pass with incorrect timing, easing, spacing, or motion. Reanimate is an MIT-licensed Claude Code skill that measures those differences, revises the implementation, and repeats the process until the result meets a defined threshold.

The installable workflow accepts a live URL, screen recording, MP4, GIF, or Lottie file. It captures the reference, extracts an animation specification, builds the effect in an existing project, and compares a recording of the result with the source.

A capture, compare, correct loop

Capture the reference. Reanimate records it in a headless browser at a fixed viewport and frame rate. It saves video, numbered frames, CSS and Web Animations API data, and the frame-by-frame positions of selected elements.
Generate a specification. The output lists each element and animated property with its start time, duration, initial and final values, easing curve, and stagger.
Build the clone. The agent works with the project’s existing stack, including CSS, Framer Motion, GSAP, three.js, or a combination of them.
Measure the result. Reanimate captures the implementation under the same conditions, compares timing, easing, and pixels, and creates side-by-side contact sheets.
Correct the largest error. The agent typically runs 2 to 5 rounds. After the fifth round, unresolved differences appear in a report with an explanation for each failure.