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.