Reanimate Gives Claude a Ruler to Clone Web Animations Within 0.03% Pixel Error
A new Claude Code skill records animations from any site, video, or gif, then rebuilds and verifies the copy frame by frame until the motion matches.
- 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.
Two matching modes
| Mode | Scope | Target |
|---|---|---|
| Default | Motion, timing, easing, and element paths | Match the reference animation while preserving the project’s visual styling |
This story is for Pro members
You've reached the end of the free preview. Upgrade to AlphaSignal Pro to read the full article - and everything else behind the paywall.
Comments
