reanimate

# reanimate

Records an animation from a live site, screen recording, mp4, gif or Lottie file, rebuilds it in your code and compares the copy with the original until they match. A Claude Code skill for front-end developers.

Made by NiazMorshed2007 on GitHub. These notes are Mindket's, written from its README; the project's own files and license are in its repository.

## About

What it is: reanimate is a Claude Code skill that rebuilds an animation you like inside your own code. You can feed it a Lottie file, a gif, an mp4, a screen recording or a live page. It films the original, writes a copy in your code, then films that copy under identical conditions and compares them. The loop repeats until the numbers match.

Who it suits: It suits front-end developers and design engineers who spot a good animation on another site and want a close first version of their own.

```table
Industry | Who uses it | How they use it | Example
Web development | Front-end developers | Rebuild a hero entrance from a reference site as a component | A hero entrance into components/Hero.tsx
Product design | Design engineers | Match a loader or hover effect from a screen recording or gif | A loader taken from seconds 3 to 5 of a video
Marketing sites | Teams building landing pages | Copy a logo marquee and swap in their own logos | A marquee with your logos that pauses on hover
```

You can skip it if you work on Windows or without Bun, since it needs Bun and the README calls Windows untested.

Where to use it:

- Claude Code: the only agent the README says it was tested with
- Other agents that load SKILL.md files: the README says they can install it, but this is untested
- Your project's stack: it writes CSS, Framer Motion, GSAP or three.js, whichever you already use
- macOS and Linux: Windows is untested

It does these jobs:

- Rebuild a site animation: a hero entrance, card hover, loader or logo marquee from a live site
- Recreate from a file: the same kind of effect from a Lottie file, a gif, an mp4 or a screen recording
- Handle canvas and WebGL: it traces the GPU calls, so shader-driven scenes can be rebuilt too

How to set it up: You need a few things in place first.

- Bun 1.1 or later
- macOS or Linux, since Windows is untested
- About 250 MB of free disk, since first use downloads ffmpeg and Playwright's Chromium
- No API keys

1. Install Bun 1.1 or later.
2. Run the skills CLI line below. It prompts you to choose the agents, and adding -a claude-code skips that prompt.
3. Then, in Claude Code, describe the animation, point to where it lives and name the destination file.

```sh
npx skills add NiazMorshed2007/reanimate -g
```

How to use it: Type /reanimate in Claude Code, then name the animation, its location and the file that should receive it. These two lines show the shape.

```text
/reanimate this loader, 0:03 to 0:05 of ~/Downloads/loader.mov
/reanimate the card hover in this gif, match it exactly
```

```table
Title: Three levels of matching
What you say | Result | Must match
"clone this animation" | Same motion, which is the default | The trigger, the order, the stagger, the distance and the easing family, with timing inside 80 ms
"match it exactly" or "pixel-perfect" | Same look | Everything above, plus fonts, colours, sizes, spacing and assets, with a mean pixel mismatch of 2% at most
"clone X and add Y" | Yours on top | Cloned parts match at one of those levels, and your additions stay separate
```

Example: Say you want a hero entrance from a site rebuilt as a component in your project. It films the original, writes a copy in your project, then films the copy under the same conditions and compares both. After usually 2 to 5 rounds you get a close first version and a report that lists anything still different, with the reason. The README reports these clones.

```table
Title: Clones the README reports, measured against the originals
Clone | Built with | Result
Vercel Toolbar | HTML, SVG, CSS | 417 of 417 frames identical
Drop to deploy | WebGL2, Web Workers | 785 of 803 frames match byte for byte
Fluid ocean | WebGPU, Web Workers | No pixel differs over 12 seconds
Inspect every run | HTML, SVG | Six bars, each 0 px off
```

For newcomers and experts: If you are new, try one of the sample lines above on a gif or a short clip, and leave the level at its default. By default the skill reproduces how things move, and the styling stays yours. Ask for more only when you need the same fonts and colours.

If you know the field, recording is the interesting part. Recording runs in a headless browser with a locked viewport and frame rate. It gathers a video, numbered frames, the CSS and Web Animations API animations it finds, and where chosen elements sit on each frame. Canvas and WebGL scenes get their GPU calls traced as well. A virtual clock keeps every capture identical. The result is a spec that lists each property of each element on its own row, built using the tools your project has.

```flow
Record the original
Write a spec of each element
Build in your own stack
Record the copy the same way
Compare and fix the biggest gap
Report what still differs
```

Good to know:

- License: MIT
- Most of the example clones took an agent 30 to 90 minutes each
- Anything still off after five rounds goes into its report, with the reason

## On GitHub, 6 November 2026

- Stars: 1,274
- Forks: 118
- Watching: 4
- Open issues and pull requests: 6
- Language: JavaScript
- License: MIT
- Topics: agent-skills, animation, claude-code, claude-skills, frontend, motion, playwright

## Links

- Code: https://github.com/NiazMorshed2007/reanimate
- Releases: https://github.com/NiazMorshed2007/reanimate/releases
- Issues: https://github.com/NiazMorshed2007/reanimate/issues
- Star history: https://www.star-history.com/#NiazMorshed2007/reanimate&Date

## Get the code

```
git clone https://github.com/NiazMorshed2007/reanimate.git
```

Then follow the setup in its README. Nothing in this kit runs by itself.

README.md  6 KB