What is reanimate?
reanimate is an agent skill for copying motion. Point Claude Code at a live page, a screen recording, an mp4, a gif or a Lottie file and name the element and the destination file; the skill records the reference in a headless Chromium at a fixed viewport and frame rate, writes a spec with one row per element per property (start, duration, from and to, easing, stagger), builds the animation with whatever the project already uses (CSS, Framer Motion, GSAP or three.js), then records the copy the same way and compares timing, easing and pixels. It repeats, usually 2 to 5 rounds, and lists whatever still does not match after 5.
For canvas, WebGL and WebGPU it traces the GPU calls instead of reading pixels: shader sources, uniforms, render passes, textures and the three.js, Pixi, PlayCanvas, Babylon or OGL scene graph, on a virtual clock with Math.random seeded so two captures come out identical. The default fidelity is motion only (timing within 80 ms, same easing family and order); asking for pixel-perfect adds fonts, colours, spacing and a mean pixel mismatch of 2 % or less.
The repository is by Niaz Morshed, MIT-licensed, created on 29 October 2026 and last changed on 31 October. It has about 1,570 stars, 137 forks, one contributor, no tagged releases and a site with 14 cloned examples from Vercel, Stripe, Clerk, Resend and others, each measured against its original.
Is reanimate worth it?
reanimate's contribution is a feedback loop, not a prompt. An agent asked to rebuild an animation from a link makes one pass and declares victory because it has no way to see timing. This skill gives it eyes: a capture script that records frames, declared CSS and Web Animations keyframes, computed styles and per-frame element positions, and a compare script that reports timing error, pixel mismatch and diff sheets for both reference and copy. SKILL.md tells Claude to read every contact sheet and to keep iterating against fixed pass criteria rather than stopping at "looks right". When the source declares its own keyframes, the skill takes the exact durations and easings from them instead of estimating.
The published evidence is unusually concrete. On the Vercel toolbar clone, 417 of 417 frames match; the Resend hero cube's rotations are exact over 25 s with 0.11 % of pixels different; Stripe's tilting card settles within 0.4 px, and its WebGL tilt curve matches within 33 ms. These are the author's own runs on 14 examples, most taking 30 to 90 minutes, not an independent benchmark, but the method is reproducible and every round's artefacts stay in .reanimate/ in your project as proof.
It is a narrower and more rigorous tool than the motion skills around it. motionmaxxing and bang-motion help an agent design new motion with good taste; reanimate only copies existing motion, and its value is that it can show how close the copy is.
The catch: it is two weeks old, has one contributor and no releases, and its scope invites trouble. Capturing means running arbitrary third-party pages in a local headless browser, and an open issue filed on 10 November 2026 shows a page can name trace files with ../ to write outside the capture folder; the suggested patch is not merged. Pages behind a login, YouTube and Loom cannot be captured directly, Windows is untested, the first run downloads about 250 MB, and the default software GPU is slow. The README also reminds you that fonts, images and code copied from another site still belong to their owners.
Our take: reanimate is the right instrument for a front-end developer told to make the new hero feel exactly like a reference, and the wrong one for designing motion from scratch. Run it against sites you trust, review the diff it writes, and budget an hour of agent time per animation.
Where it earns its place
A front-end developer at a startup redesigning its marketing site
Rebuild the card hover from a design reference in our Framer Motion components
Run /reanimate with the reference URL and the target file; the skill reads the declared keyframes, writes the motion in Framer Motion and stops when timing is within 80 ms. Expect two to five capture rounds.
A creative developer porting a WebGL hero they were licensed to reuse
Recover the shaders, uniforms and timing of a three.js scene
Capture with --clock virtual --gl --assets to extract shader sources, constant uniforms and animated channels, then compare the clone channel by channel with gl.ts compare.
A design-systems engineer turning a motion designer's screen recording into code
Match a 2-second loader from an mp4 frame by frame
Give the file and the time range; frames.ts extracts and crops frames, the skill builds the loader in CSS and compares the copy's recording against the video until mismatch is under target.
Before you commit
- Setup
- npx skills add NiazMorshed2007/reanimate -g (add -a claude-code to skip the agent prompt), then /reanimate <what> from <where>, into <file>. Needs Bun 1.1 or later on macOS or Linux; the first run installs a static ffmpeg and Playwright's Chromium, about 250 MB.
- Integrations
- Built and tested for Claude Code; other agents that read SKILL.md can load it untested. Bun scripts for capture, frames, compare, easing fitting, contact sheets and GPU traces; hooks three.js, Pixi, PlayCanvas, Babylon and OGL.
- Data and privacy
- Runs locally with no API keys or telemetry described; captures, frames and diff sheets go to .reanimate/<name>/ in your project. It loads third-party pages in headless Chromium, and an open issue reports page-controlled trace ids can write files outside the capture folder. MIT; copied fonts, images and code keep their owners' rights.
- Cost at scale
- Free. The real cost is agent time: the author's examples mostly took 30 to 90 minutes each in Claude Code, so regular use needs a generous Claude plan or API budget. Hardware GPU mode is faster than the default SwiftShader.
- Limits
- No login-walled pages, YouTube or Loom without a screen recording; springs are fitted rather than read; worker clocks run in real time; canvases in iframes need the iframe URL; Windows fixes sit in open pull requests.
What’s good
- Measures the copy against the original every round instead of guessing
- Reads exact keyframes and easings when the page declares them
- Traces WebGL, WebGPU and three.js scenes on a deterministic virtual clock
- Builds in the project's existing stack: CSS, Framer Motion, GSAP or three.js
- No API keys; MIT licence
What’s not
- One contributor, no releases, two weeks old
- Open path-traversal issue when capturing untrusted pages
- Cannot capture login-walled pages, YouTube or Loom directly
- Windows untested; about 250 MB of downloads on first run
- Long runs of 30 to 90 minutes burn agent tokens
Best for
Front-end developers using Claude Code who need a specific hover, entrance or WebGL effect reproduced closely and want proof of how close it is.
reanimate alternatives
reanimate: common questions
- Is reanimate worth it?
- reanimate fixes the real reason agents botch animation clones (they cannot see motion) by making the agent measure its copy against the original until the numbers agree. We rate it 3.8 out of 5.
- How much does reanimate cost?
- Free (MIT). No API keys; the cost is the Claude Code usage of runs that often last 30 to 90 minutes.
- What are the downsides of reanimate?
- One contributor, no releases, two weeks old; open path-traversal issue when capturing untrusted pages; cannot capture login-walled pages, YouTube or Loom directly; windows untested; about 250 MB of downloads on first run; long runs of 30 to 90 minutes burn agent tokens.
- Who is reanimate best for?
- Front-end developers using Claude Code who need a specific hover, entrance or WebGL effect reproduced closely and want proof of how close it is.
- How much does reanimate cost for a team or in production?
- Free. The real cost is agent time: the author's examples mostly took 30 to 90 minutes each in Claude Code, so regular use needs a generous Claude plan or API budget. Hardware GPU mode is faster than the default SwiftShader.
- Is reanimate safe for company data?
- Runs locally with no API keys or telemetry described; captures, frames and diff sheets go to .reanimate/<name>/ in your project. It loads third-party pages in headless Chromium, and an open issue reports page-controlled trace ids can write files outside the capture folder. MIT; copied fonts, images and code keep their owners' rights.
- What are the best reanimate alternatives?
- The closest alternatives we have reviewed are motionmaxxing, Bang Motion and Playwright Test Agents.
Answers checked Nov 11, 2026.