Image: GitHub
Why it mattersA product designer can point at a Stripe or Clerk animation and ask for the same one. The skill does the work. The skill shows the match in a report.
A product manager sees a sign-up animation they like on another website. The engineer tries to copy it by eye. The timing is almost right, and the manager says it is not. Reanimate is a free Claude Code skill that removes the guessing. It records the animation. It rebuilds the animation in your own code. It records the copy the same way. It compares the two until they match.
The project is by NiazMorshed2007. It sits at 201 stars with 17 forks on GitHub, under the MIT licence. The readme sets out five steps. The skill records the reference animation in a headless browser at a fixed size and frame rate. It writes down the timing and easing. It builds the animation in your project's own stack. It records the copy. It then improves the copy until the measurements line up.
What it can copy
The readme lists eight finished copies. The list has the Stripe hero cards. It has the Stripe issuing card with pointer tilt. It has the Stripe crypto globe. It has the WorkOS Atlas robot. It has the Clerk feature cards with hover. It has the Liveblocks comments panel. It has the Resend hero cube. It has React Bits Pro's fading stars. The author notes the skill is not tied to any of these companies.
Input can come from a live website, a screen recording, an MP4 file, a GIF, or a Lottie file. A page behind a login works through a screen recording. The skill cannot record YouTube pages. It cannot record any page that needs a login.
Which code stacks it writes
The output can be CSS, Framer Motion, GSAP or three.js. Canvas and WebGL animations are supported through GPU call tracing. The same tracing covers Pixi, PlayCanvas, Babylon and OGL scene graphs. The author says the skill records shader source, uniform values, render passes and textures when a canvas scene is involved.
How closely it matches
The default match level accepts an 80 millisecond timing difference. A pixel-perfect mode asks for at most 2 percent mean pixel mismatch. It also asks for the same fonts, sizes, colours, spacing and assets. A --clock virtual option runs the page on a deterministic clock with seeded randomness. Two captures of the same page then come out byte for byte the same.
The readme is honest about the limits. Physics springs are fitted from how far an element overshoots. They are also fitted from how long it takes to settle. The springs are not read from the source code. Worker threads keep running on real time. That is true even when the clock is virtual. Particle systems that use their own random generator are compared with a blurred match, not pixel to pixel.
What it needs
The skill runs on macOS and Linux and asks for Bun 1.1 or later. The author notes Windows has not been tested. The first install downloads a static ffmpeg and Playwright's Chromium, about 250 MB in total. No API keys are needed on top of Claude Code's own account. The eight example copies are the only published proof that this skill matches a real production animation. A team that wants its own number can run the skill on one of its own pages. The report shows how close the copy is.
Source
This item was written by an AI system from the linked source. Reveneau is responsible for what it publishes.
Get AI News in your inbox
New developer tools, model and agent releases, and how teams are actually using them to release software. Short, and only when there is something worth reading.