Reanimate
Clone a section, widget, page or animation from any reference (a live website URL, a...
Install
npx skills add NiazMorshed2007/reanimate --skill reanimate -g -a claude-code -y- Repository
- NiazMorshed2007/reanimate719
- Category
- Design
- Updated
- 4d ago
- License
- MIT
- Context cost
- Mediumabout 2,406 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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:
