reanimate: reverse-engineer any animation and prove the copy moves the same

You see an animation you like on a live site. You copy the easing from DevTools, squint at the timing, and two hours later you have something that looks close but never quite right. reanimate skips that loop entirely.

What it is

A Claude Code skill that reverse-engineers any web animation — CSS, Framer Motion, GSAP, canvas, or WebGL — and builds a copy using your project's existing stack. The key word is *proves*: it doesn't just attempt a match, it records both the original and the copy, compares them frame by frame, and keeps fixing the largest delta until the motion is verified.

How the loop works

Five stages in order: Record (headless Chromium films the reference at a fixed viewport and frame rate, tracing GPU calls for canvas and WebGL), Spec (produces one row per element per property: timing, from/to values, easing, stagger), Build (writes the animation using your stack), Verify (records the copy the same way and compares timing, easing, and pixels with side-by-side sheets), Repeat (fixes the largest remaining difference and re-records — usually 2 to 5 rounds). The default mode matches motion only. Add "Match it exactly" and it also targets fonts, colours, spacing, and assets, aiming for a ≤ 2% mean pixel mismatch.

npx skills add NiazMorshed2007/reanimate -g
# add -a claude-code to skip the agent-selection prompt
# requires Bun 1.1+ on macOS or Linux

When it actually earns its place

The best use case is the one the tool is clearly built for: you spotted a polished micro-interaction somewhere and you want to understand its timing well enough to build something original on top. The spec output is useful even if you throw the generated code away — it gives you easing curves and stagger values in plain rows, ready to apply to your own design system. It also accepts an mp4, a gif, or a Lottie file as input, not just live URLs.

The real caveats

Pages behind a login, and video sites like YouTube or Loom, can't be recorded directly — supply a screen recording instead. Physics springs are fitted from overshoot and settle time rather than read from source, so they're close but not exact. The first run pulls about 250 MB (a static ffmpeg and Playwright's Chromium), which stings on a slow connection. Windows is entirely untested. The skill has only been confirmed to work with Claude Code — other agents that read SKILL.md may work, but that's not guaranteed. And the obvious note: fonts, images, and code from other sites remain the owners' property. This is a learning and reference tool, not a cloner.

Built by NiazMorshed2007. MIT licensed, 1.2k stars and counting.