reanimate

A lot of good ideas start on someone else's site. Ask an agent to rebuild one from a link or a screenshot and it makes one pass, calls it done, and misses. It can't see the motion or tell how far off it is.

reanimate records the original, rebuilds it in your code, then records the copy the same way and compares the two. Each round shows what's still off, so the agent keeps going until the numbers match. You end up with a close starting point to make your own.

Install

npx skills add NiazMorshed2007/reanimate -g

The skills CLI asks which agents to set up; add -a claude-code to skip the question. Then, in Claude Code, say what you want, where it is and where it should go:

/reanimate the hero entrance on https://example.com, into components/Hero.tsx
/reanimate this loader, 0:03 to 0:05 of ~/Downloads/loader.mov
/reanimate the card hover in this gif, match it exactly
/reanimate the logo marquee from https://example.com, with our logos and pause on hover

Needs Bun 1.1 or later, on macOS or Linux (Windows is untested). The first run installs a static ffmpeg into the skill's folder and Playwright's Chromium into Playwright's usual cache, about 250 MB together. No API keys. Other agents that read SKILL.md can install it too, but it has only been tested with Claude Code.

How it works

1. Record. It films the reference in a headless browser at a fixed viewport and frame rate: a video, numbered frames, every CSS and Web Animations API animation it finds, and the position of chosen elements on every frame. For canvas and WebGL it also traces the GPU calls (shaders, uniforms, draw calls, the three.js scene) on a virtual clock that makes every capture identical.
2. Spec. One row per element per property: start, duration, from → to, easing, stagger. A row with a "?" means the frames haven't been read yet.
3. Build. It writes the animation with what your project already uses: CSS, Framer Motion, GSAP, three.js.
4. Verify. It films the copy the same way, compares timing, easing and pixels, and makes side-by-side sheets.
5. Repeat. It fixes the biggest difference and films again, usually 2 to 5 rounds. Whatever still doesn't match after 5 is listed in its report, with the reason.

By default it matches the motion and leaves the look to you. Ask for more or less:

Examples

Three cards from the stripe.com homepage, the integrations visual from workos.com/atlas, the feature cards from clerk.com, the demo under the liveblocks.io/comments hero, the cube in the resend.com hero and React Bits Pro's Fading Stars, each cloned by its own agent running this skill, most in 30 to 80 minutes. The site shows each one next to a recording of the original, except the Clerk cards, which run live in the page.

Canvas, WebGL and 3D

A canvas only shows pixels, so reanimate records the calls that drew them. With --gl it traces WebGL, WebGPU and canvas 2D. It hooks the three.js, Pixi, PlayCanvas, Babylon and OGL scene graphs through their own devtools entry points, and reaches into workers. Out come the shader sources, every constant uniform, the render passes, the textures and models, and each animated uniform or object property as a curve that can be fitted and compared. --clock virtual runs the page on a clock that is advanced frame by frame, with Math.random seeded in the page and its workers. Every frame is then exact however slow the GPU is, and two captures of a WebGL globe with random arcs and worker-generated dots come out byte-identical.

On live stripe.com this recovers the issuing card's four-pass composite, its shaders and constants such as u_twistFrequencyX = 0.059. It also records the card's tilt as a curve: −0.174 → 0.262 rad between 33 and 1800 ms on the pointer path. gl.ts compare then checks the clone against it channel by channel; the tilt matched within 33 ms and 0.5 % of its range. See references/webgl.md.

Limits

• Pages behind a login, YouTube and Loom can't be recorded directly; hand it a screen recording.
• Physics springs are fitted from their overshoot and settle time, not read from the source.
• Workers are seeded and traced, but their own clocks run in real time. Canvases inside iframes need the iframe's own URL.
• When a clone can't reproduce the reference's random generator, particles are compared with a blurred mismatch (density, colour, motion) instead of dot by dot.
• --gpu hardware uses the real GPU (macOS: Metal; Linux: Vulkan, untested). The default, SwiftShader, is slower but gives the same pixels on every machine.
• It clones what you point it at. Fonts, images and code from another site still belong to their owners; make sure you may use what you copy.

Repository

Only skills/reanimate/ is installed by the skills CLI; site/ is the website with the examples running live (site/README.md).