AI Skill MartBrowse skillsPromptsProgramsLearnWhat is a Skill?
 
← Back to list

reanimate — Clone & Verify Reference Animations

Rebuilds any animation from a URL, video or GIF in your own codebase, then re-records the clone and proves the match frame by frame.

Dev & CodingAdvanced★ 448⑂ 37AI score 9/10Last updated: Oct 31, 2026

What it does

  • Captures the reference (live URL, screen recording, mp4/mov/webm, GIF, Lottie, prototype export) into frames, tracking data, computed styles and declared animations/keyframes.
  • Writes a motion spec: one row per element per property with trigger, start time, duration, delay/stagger, from → to and easing.
  • Implements in your existing stack (reads package.json and the animation library already in use), then re-captures the clone with the same viewport, selector crop, trigger and fps and runs numeric comparisons (diff sheets, timing error, easing match).
  • Iterates 2–5 rounds until every spec row passes; unresolved rows are reported with numbers and a reason instead of quietly lowering the threshold.
  • Handles canvas, WebGL, WebGPU and three.js scenes: shader sources, constant uniforms, scene graph, textures/models, with a virtual clock and fixed seed so captures are deterministic.

Who it's for

  • Frontend engineers recreating a hero, marquee, carousel, hover effect or scroll animation from a reference site.
  • Creative/interaction developers who want measurable evidence rather than "looks about right".
  • Teams working with GSAP, Framer Motion, CSS motion or 3D scenes who reverse-engineer often.

Examples

  1. "Make our hero move exactly like this site" → capture the URL, write the spec, build the component, confirm timing within ±80 ms on the compare sheets.
  2. A client sends a screen recording and only wants "the toggle from 0:12 to 0:15" → extract just that range, crop the widget, rebuild it.
  3. Cloning a three.js particle background → read shaders and fixed uniforms from the GL trace, compare each animated channel using a virtual clock and the same seed.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/NiazMorshed2007/reanimate/HEAD/skills/reanimate/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on AI Skill Mart.
Copy the skills/reanimate folder from the GitHub repo NiazMorshed2007/reanimate into my ~/.claude/skills/reanimate/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/NiazMorshed2007/reanimate.git && mkdir -p ~/.claude/skills && cp -r reanimate/skills/reanimate ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Install Bun with curl -fsSL https://bun.sh/install | bash — the scripts require it.
  3. Clone the repo: git clone https://github.com/NiazMorshed2007/reanimate.git
  4. Copy the skill: mkdir -p ~/.claude/skills && cp -r reanimate/skills/reanimate ~/.claude/skills/
  5. Restart Claude Code and confirm reanimate appears in your skill list.
  6. On first use run bash ~/.claude/skills/reanimate/scripts/setup.sh; it downloads Playwright's Chromium and a static ffmpeg (~250 MB), so allow time and disk space.
  7. Ask something like "clone the hero animation from this URL into my project". Artefacts land in .reanimate/ inside your project — add it to .gitignore unless you want the evidence committed.
View source on GitHub ↗License: MIT