AI Recreates Web Animations: First, Learn to Catch Its Own Mistakes

When you ask an agent to rebuild a web animation from a screenshot, a common outcome is that it makes one guess and stops. It may look similar, but the timing may not be right. Alvaro Cintas shared a free Claude Code skill called reanimate that specifically adds the verification step.

It first records the original animation, then rebuilds it using your project's existing tech stack, records the recreated version in the same way, and compares timing, easing, and pixels. It usually runs 2 to 5 rounds of correction, and the remaining parts that don't match are written into a report.

Inputs you can feed it include:

• Online web page URL
• Screen recording
• mp4 or gif
• Lottie file

Its output doesn't start from scratch; it is written into the CSS, Framer Motion, GSAP, or three.js that the project already uses. This constraint is very practical. The worst thing when recreating animations is generating code that looks runnable but is disconnected from existing components, build processes, and interaction states.

The hard part of animation is often timing and easing. A 50 ms difference is enough for the eye to feel that something is off. A commenter noted that the key is the process of recording the original, rebuilding, re-recording, and comparing frame by frame, and that 2 to 5 rounds of correction are more cost-effective for landing-page scenarios that require repeated changes. Another suggestion is to play the original and the recreation side by side at 0.25x speed before release, then check it on a cheap phone; dropped frames will expose timing issues first.

Listing the parts that still don't match in the report is one of the more honest aspects of this tool. A commenter warned that chasing only a perfect match score may deliver a copy with close parameters but the wrong look and feel.

Installation command:

npx skills add NiazMorshed2007/reanimate -g

Project URL: github.com/reanimate

Original tweet: Alvaro Cintas