reanimate: clone an animation and prove the copy matches

A coding agent can't see motion, so a hover effect rebuilt from a link gets one pass and no check. reanimate closes that loop: it records the original, rebuilds it in your code, then records the copy the same way and compares the two. Niaz Morshed publishes it under the MIT license. Anthropic doesn't publish it. If you haven't installed a skill before, start with Claude Code skills.

What it does with a reference

The source can be a live URL, a screen recording, an mp4, a gif or a Lottie file. From a website it saves a video, numbered frames, every CSS and Web Animations API animation it finds, and where each tracked element sits on every frame. A Lottie file is treated as the spec itself, so nothing gets re-derived from pixels.

Next comes a motion spec with one row per element per property: start, duration, from and to, easing, stagger. A row still marked "?" means the frames haven't been read yet. The build uses whatever your project already has, whether that's CSS, Framer Motion, GSAP or three.js. Then the copy is filmed and compared on timing, easing and pixels, and the agent fixes the biggest difference first. It expects 2 to 5 rounds; a row that still fails after round five goes in the final report with its numbers and the reason.

How close "close" is depends on your wording. "Clone this animation" matches trigger, order, stagger and easing family, with timing within 80 ms, and leaves fonts and colours to you. "Match it exactly" adds fonts, sizes, colours, spacing and assets, at a mean pixel mismatch of 2% or less.

Canvas and WebGL get their own path. With --gl it traces WebGL, WebGPU and canvas 2D calls and reads three.js, Pixi, PlayCanvas, Babylon and OGL scene graphs, so shaders and uniforms come out of the trace. --clock virtual steps time frame by frame and seeds Math.random, which makes two captures of the same page come out identical.

How to install it

npx skills add NiazMorshed2007/reanimate -g -a claude-code

Leave off -a claude-code and the skills CLI asks which agents to set up. You'll need Bun 1.1 or later on macOS or Linux; Windows is untested. On its first run the skill downloads a static ffmpeg into its own folder and Playwright's Chromium into Playwright's cache, about 250 MB together. No API keys.

Example request

/reanimate the [section or widget] on [https://example.com], into [components/Hero.tsx]. Match the motion only and keep our fonts and colours. When you're done, show me the last compare table.

For a clip, name the seconds: /reanimate this loader, 0:03 to 0:05 of ~/Downloads/loader.mov.

Limits

• Some sources can't be recorded. Pages behind a login, YouTube and Loom need a screen recording from you. A canvas inside an iframe needs the iframe's own URL.
• It takes time. The author's example clones of widgets from vercel.com, stripe.com and others ran 30 to 90 minutes each, for most of them.
• Springs are fitted. Physics springs are estimated from their overshoot and settle time, not read from the source code.
• A clone isn't a license. Fonts, images and code from another site still belong to their owners, the README says, so check you may use what you copy.
• Evidence piles up. Each round's captures stay in .reanimate/<name>/ inside your project, which the skill tells the agent to add to .gitignore.
• Tested on one agent. Other agents that read SKILL.md can install it, but it's only been tested with Claude Code.

When to use it

It fits a brief like "make our pricing cards move like theirs", or a hero entrance that feels off when you have the original to measure against. To animate your own illustrations with no reference to copy, use Rossark Motion.