reanimate

What it does

• Measure, don't guess — it records the reference, builds the copy, films it the same way and compares timing, easing and pixels; 2 to 5 rounds is typical, and whatever is left is reported with the reason
• Three explicit match levels — moves-the-same by default (timing within 80 ms, easing family, distance), pixel-perfect at a 2% mean-pixel-mismatch ceiling, and clone-and-add that keeps your changes separate
• Sees inside canvas and WebGL — --gl traces shaders, uniforms, draw calls and the three.js, Pixi, PlayCanvas, Babylon and OGL scene graphs; on live stripe.com it recovered the issuing card's shader constants
• Byte-identical captures via a virtual clock — --clock virtual steps the page frame by frame with seeded randomness, so results repeat exactly however slow the GPU
• Writes into your stack — the rebuilt motion uses what the project already has (CSS, Framer Motion, GSAP, three.js), not a standalone file

When to use it

A hero entrance, card hover or loader you admire on stripe.com, vercel.com or resend.com becomes a starting point in your own codebase: point the skill at the URL, or hand it a timestamped video or gif when the page is behind a login. The repo's fourteen documented clones — the Vercel Toolbar at 417 of 417 frames identical, stripe.com's Visa card tilt settling within 0.4 px — were built by agents running this skill, most in 30 to 90 minutes. Ask for pixel-perfect when the look must match too; the default only matches motion and leaves styling to you.

Getting started

npx skills add NiazMorshed2007/reanimate -g

# add -a claude-code to skip the skills CLI's agent question

/reanimate the hero entrance on https://example.com, into components/Hero.tsx
/reanimate this loader, 0:03 to 0:05 of ~/Downloads/loader.mov

Needs Bun 1.1 or later, on macOS or Linux (Windows untested). The first run installs a static ffmpeg and Playwright's Chromium, about 250 MB together. No API keys.

Things to know

Only skills/reanimate/ is installed by the skills CLI — site/ is the examples website and stays behind. Pages behind a login, YouTube and Loom cannot be recorded directly; hand the skill a screen recording instead. Physics springs are fitted from their overshoot and settle time, not read from the source. The default GPU backend is SwiftShader (slower but identical on every machine); --gpu hardware is Metal on macOS and untested Vulkan on Linux. The documented examples recreate parts of vercel.com, nextjs.org, turborepo.com, stripe.com, workos.com, clerk.com, liveblocks.io, resend.com and pro.reactbits.dev as a study of the technique — the repo states it is not affiliated with or endorsed by them, and fonts, images and code you copy still belong to their owners. Created 2026-10-29: very new (422 stars as of writing), expect the workflow to keep moving.