Saw a gorgeous animation on someone's site? Bring it home

Sound familiar? You land on a site and a card tilts smoothly after your cursor. Or a strip of logos glides by and slows under the mouse. You want it too. You ask an AI — and get something that's close "by eye". It jerks, the rhythm is off, the easing is wrong.

Here's the catch: the agent can't see motion. It looks at code or a screenshot, makes one pass and says "done". It can't compare — it has nothing to compare with.

On October 29 a Claude Code skill called reanimate came out. It gives the agent eyes and a ruler. It films the original, builds a copy, films the copy the exact same way — and compares. Until the numbers match.

How it works

• Record. A headless browser films the original at a fixed viewport and frame rate. It also logs every CSS animation and where each element sits on every frame.
• Spec. One row per element per property: when it starts, how long it lasts, from where to where, with what easing.
• Build. It writes the animation with what your project already uses: CSS, Framer Motion, GSAP, three.js.
• Verify. It films the copy the same way and compares timing, easing and pixels. It fixes the biggest gap — and goes again. Usually 2–5 rounds.

The source can be a link, a screen recording, an mp4, a gif or a Lottie file. No API keys.

What you'll learn

• Check, don't trust. The skill's core trick: the agent measures its work instead of saying "looks close". That works far beyond animations.
• Break motion into parts. You'll stop seeing an animation as magic and start seeing a table: start, duration, easing, stagger.
• Take the idea, not the brand. By default the skill copies only the motion. Colors, fonts and images are yours.

A ready starter prompt

Install the skill (needs Bun, macOS or Linux):

npx skills add NiazMorshed2007/reanimate -g

Then the key is saying exactly what, where and into what:

Want a one-to-one copy? Add match it exactly — then fonts, sizes and colors get checked too.

What you end up with

A component in your own project that moves like the original. Plus "original / copy" sheets frame by frame and a report: what matched, what didn't and why. The author recreated 18 animations from vercel.com, stripe.com and clerk.com this way — usually 30–90 minutes each.

Honest limits: the first run downloads ffmpeg and Chromium, about 250 MB. The agent run is long and spends your subscription's tokens. Windows is untested. And it's a starting point, not a finished design: build your own on top.

A year ago an agent could only guess an animation. Now it measures it.

Source: reanimate — a Claude Code skill (GitHub, NiazMorshed2007)