Skip to content
Get Friday PicksSubmit

reanimate: copy an animation you like and prove the copy matches

A Claude Code skill that records an animation from a live site, a screen recording, a gif or a Lottie file, rebuilds it in your own code, then films the copy the same way and compares the two, round after round, until timing and motion match.

In short: A Claude Code skill that records an animation from a live site, a screen recording, a gif or a Lottie file, rebuilds it in your own code, then films the copy the same way and compares the two, round after round, until timing and motion match. It is a free skill for people who use Claude Code and want help with coding agent skills.

Checked on · Added

Works with

Agent / toolAccess / costLink
Claude CodePaid Claude plan or APIclaude.com/claude-code
GitHub repoOpen source · ★ 809NiazMorshed2007/reanimate
reanimate: copy an animation you like and prove the copy matches

Image: from the GitHub README, shown with credit.

Image from the NiazMorshed2007/reanimate README

Images from the project README on GitHub.

Try it in 60 seconds

npx skills add NiazMorshed2007/reanimate -g

Install command copied from the project README. Check the README for the latest version.

What it does

A Claude Code skill that records an animation from a live site, a screen recording, a gif or a Lottie file, rebuilds it in your own code, then films the copy the same way and compares the two, round after round, until timing and motion match.

reanimate takes a live page, a screen recording, an mp4, a gif or a Lottie file and records the animation in a headless browser at a fixed size and frame rate. It turns what it sees into a spec (each element, each…

Short excerpt from the README of NiazMorshed2007/reanimate. Read the full README on GitHub.

Inside the repo

InstallHow it worksExamplesCanvas, WebGL and 3DLimitsRepositoryLicense

A prompt to try

/reanimate the card hover in this gif, match it exactly

From the original post, credited below.

Step by step

  1. Open the GitHub repo and watch the demo and the side-by-side examples.
  2. Install Bun 1.1 or newer (macOS or Linux), then run npx skills add NiazMorshed2007/reanimate -g -a claude-code.
  3. In Claude Code say what, where from and where to: /reanimate the hero entrance on https://example.com, into components/Hero.tsx.
  4. Read its report after the rounds; say "match it exactly" for a pixel-level copy, or "clone X and add Y" to build your own version on top.

Watch out for

It copies whatever you point it at; fonts, images and code from another site still belong to their owners, so use it to learn the motion and make your own. Pages behind a login, YouTube and Loom can't be recorded directly; give it a screen recording instead. Windows is untested.

Docs, demos & materials

Common questions

What does reanimate do?

A Claude Code skill that records an animation from a live site, a screen recording, a gif or a Lottie file, rebuilds it in your own code, then films the copy the same way and compares the two, round after round, until timing and motion match.

Which AI agents can use reanimate?

It works with Claude Code. The code is on GitHub at NiazMorshed2007/reanimate.

Is reanimate free?

Free & open source (MIT). No API key. Runs with the Claude plan you already pay for. The first run downloads ffmpeg and a Playwright browser, about 250 MB.

How do I install reanimate?

Run the install command from the README: “npx skills add NiazMorshed2007/reanimate -g”. Check the README on GitHub for the latest version, then follow the steps on this page.

Is reanimate safe to install?

We read 121 instruction and code files in the repo and found no red flags. That is not a guarantee, so review anything that runs commands on your machine. How to check a skill before you install it →

Sources & credit

All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.

Related skills and use cases in Coding Agent Skills

See all Coding Agent Skills entries →

Related

CleanYourTV: your agent removes the ads from your TV thumbnailSKILL

CleanYourTV: your agent removes the ads from your TV

Your coding agent connects to an Android or Google TV over Wi-Fi, switches off the ad and tracking apps, and puts in a clean, Apple TV-style home screen. Nothing is uninstalled.

Claude Code logoCodex logoGemini logoClaude Code +2★ 14.8k
unslop: turn AI-looking UI into a designed interface thumbnailSKILL

unslop: turn AI-looking UI into a designed interface

A Claude skill that reviews a vibecoded screen like a designer: it lists the tell-tale AI touches, proposes a direction from your own product, then fixes spacing, colour, icons, copy, type and layout pass by pass. Works on dashboards, apps, landing pages, or a live site from a link.

Claude Code logoClaude Code★ 540
ECC: a full work system for your coding agent thumbnailSKILL

ECC: a full work system for your coding agent

One install gives your agent a plan, test, build, review and remember routine, with 71 helper agents, about 300 skills, memory between sessions and a built-in scanner for risky agent settings.

Claude Code logoCodex logoCursor logoClaude Code +3★ 285.3k
Superpowers: plan, test and debug before coding thumbnailSKILL

Superpowers: plan, test and debug before coding

A skills framework that makes agents brainstorm, plan, test and debug systematically.

Claude Code logoCodex logoClaude Code +1★ 299.2k
Matt Pocock's engineering skills thumbnailSKILL

Matt Pocock's engineering skills

Real engineering skills from a well-known TypeScript educator's own .agents folder.

Claude Code logoCodex logoClaude Code +1★ 291.4k
Ponytail: make your agent write less code thumbnailSKILL

Ponytail: make your agent write less code

A skill that pushes coding agents to act like a lazy senior: fewer lines, more tests, lower cost — without skipping the hard checks.

Claude Code logoCodex logoCursor logoClaude Code +2★ 164.8k

Free newsletter

Friday Picks

New AI tools you can use right away, in plain words. Every Friday.

Free. No spam. Unsubscribe anytime.