# Reanimate

Clone a section, widget, page or animation from any reference (a live website URL, a...

- Repository: https://github.com/NiazMorshed2007/reanimate (719 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add NiazMorshed2007/reanimate --skill reanimate -g -a claude-code -y`
Codex: `npx skills add NiazMorshed2007/reanimate --skill reanimate -g -a codex -y`
Cursor: `npx skills add NiazMorshed2007/reanimate --skill reanimate -g -a cursor -y`
Gemini CLI: `npx skills add NiazMorshed2007/reanimate --skill reanimate -g -a gemini-cli -y`

## Description

Clone a section, widget, page or animation from any reference (a live website URL, a screen recording, an mp4/mov/webm, a gif, a Lottie file, a prototype export) frame by frame into the user's own codebase, then record the clone and verify it against the reference frame by frame, iterating until timing, easing, sequence and layout match. Use whenever the user wants to clone, copy, replicate, recreate, reverse-engineer, port or "steal" a hero, section, widget, marquee, carousel, hover effect, page transition, loader, scroll animation or interaction from a site or video, says "make it look/feel/move like this", "same animation as", "match this exactly", or hands over a gif/video and asks to build it, including when they also want to add their own content, colours or extra features on top, or only want part of the reference (one section, one widget, a few seconds). Covers canvas, WebGL, WebGPU and three.js / 3D scenes (shaders, particles, globes, glTF models) as well as CSS and JS motion. Pixel-level matching of fonts, colours and spacing is done only when they ask for it.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# reanimate

Rebuild what the user points at so that it moves the way the reference moves, prove it with a frame-by-frame comparison, and keep going until the comparison passes. The deliverable is code in the user's project plus evidence (numbers and side-by-side sheets), never "it looks about right".

## What "done" means

Pick the fidelity level from the user's words and state it in the first message; it decides what you verify.

| Level | When | Must match | May differ |
|---|---|---|---|
| **motion-faithful** (default) | "clone this animation", "make ours feel like theirs", "same hero as X but our copy" | trigger, sequence and order, stagger, timing of every step (±80 ms), easing family, direction and distance of movement relative to the element size, layout proportions | copy, colours, fonts, images, brand details |
| **pixel-faithful** | "match it exactly", "pixel-perfect", "details should match", "1:1" | everything above plus fonts, sizes, colours, spacing, radii, shadows, assets; mean frame mismatch ≤ 2 % | nothing the user did not ask to change |
| **mixed** | "clone X and add Y", "like theirs but with our pricing tiers" | the cloned parts at one of the levels above | the additions, which you describe and show but verify only for not breaking the cloned motion |

The user can narrow the target to one section, one widget, one page, or a time range of a video ("the first 3 seconds", "0:12 to 0:15"). Clone exactly that; do not pull in the rest of the page.

## Workflow

Everything below lives in `.reanimate/<name>/` inside the user's project (add it to `.gitignore` unless they want the evidence committed). Keep each round's artefacts; they are the proof.

### 0. Scope

Write three lines at the top of `.reanimate/<name>/spec.md` before any capture:

The rest: https://github.com/NiazMorshed2007/reanimate/blob/HEAD/skills/reanimate/SKILL.md