A free Claude Code skill, reanimate, films any website animation and rewrites its code until the frames match

Niaz Morshed's reanimate records an animation in a headless browser, rebuilds it in your own code, then films the copy the same way and compares the two, round after round, until timing and easing line up. It works from a live page, a screen recording, a GIF or a Lottie file.

By Chris Pirillo · November 1, 2026 · 5 min read

Chris, drawn in faint overlapping blue and red pencil poses, flips punched animation sheets on a glowing light box, seen from overhead — Illustration: LockerGnome

Its author, Niaz Morshed, starts the README with the problem. Ask an agent to rebuild an animation 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 gives the agent a camera and a ruler.

You ask in plain words. One example from the README reads “/reanimate the hero entrance on https://example.com, into components/Hero.tsx,” and another points at seconds 3 to 5 of a screen recording in your Downloads folder.

Why it matters

It measures instead of guessing. The skill writes a spec with one row per element per property, covering start, duration, from and to, easing and stagger, and a row with a question mark means the frames haven’t been read yet. After building, it films the copy and compares timing, easing and pixels.

It reads canvas and 3D too. A canvas only shows pixels, so reanimate records the calls that drew them. With its GPU tracing on, it pulls shader sources, uniforms and render passes out of WebGL, WebGPU and three.js scenes, and a virtual clock steps the page frame by frame with its random numbers seeded, so “two captures of a WebGL globe with random arcs and worker-generated dots come out byte-identical.”

It writes in what you already use. The build step uses your project’s own tools, whether that’s CSS, Framer Motion, GSAP or three.js.

The README’s examples were each cloned by a separate agent running the skill, “most in 30 to 90 minutes.” The Vercel Toolbar copy matched 417 of 417 frames. Vercel’s fluid ocean, 262,144 dots rolling behind a hero, came out with “0 px differ over 12 s, light and dark.” Stripe’s tilting Visa card differs on 0.03% of its pixels at rest, and the tilt settles within 0.4 px of the original. The demo site runs the ones you can hover or drag live in the page.

By default it copies the motion and leaves the look to you, within 80 milliseconds on timing and the same family of easing. Say “match it exactly” and it holds fonts, sizes, colors, spacing and assets too, to no more than 2% mean pixel mismatch. Say “clone X and add Y” and your additions stay separate from the cloned parts.

Steal this

Use it to learn how a motion is built, then make it yours. The README’s own limits say fonts, images and code from another site “still belong to their owners.” This is like tracing a drawing to learn the strokes: the practice is yours, and the picture still belongs to whoever drew it.
Hand it a recording when the page is locked. Pages behind a login, YouTube and Loom can’t be filmed directly, but a screen recording of them can. Kind of like bringing a photo of the dish to a cook who can’t get into the restaurant.
Budget for the first run. It needs Bun 1.1 or later on macOS or Linux, and the first run downloads a static ffmpeg and Playwright’s Chromium, about 250 MB together, with no API keys. This is like a new printer that spends its first ten minutes installing drivers before it prints a page.

The skill has one honest gap it keeps a list of. Whatever still doesn’t match after five rounds goes into its report, with the reason. Physics springs, for one, are fitted from their overshoot and settle time, “not read from the source,” so a bouncy button is the place a copy is most likely to land close and stop there.

Search

A free Claude Code skill, reanimate, films any website animation and rewrites its code until the frames match

More AI