NiazMorshed2007/reanimate

reanimate is a Claude Code skill for rebuilding animations you find on live sites, videos, GIFs or Lottie files, then checking that the copy moves like the original. It is aimed at frontend developers who want a measured starting point rather than a one-pass guess. The workflow is capture, spec, build, verify and repeat: it records the reference in a headless browser, writes a per-element timing spec, builds with your existing stack, records the copy the same way, and compares timing, easing and pixels. One round fixes the biggest difference; the README says most clones need 2–5 rounds, with anything still unmatched after 5 listed in a report.

What it produces

You give it a target and a destination, e.g. the hero entrance on a page into components/Hero.tsx. Fidelity is set by wording: the default matches motion (trigger, order, stagger, timing within 80 ms, easing family, distance); "pixel-perfect" additionally compares fonts, sizes, colours, spacing and assets against a ≤ 2 % mean pixel mismatch; "clone X and add Y" keeps your additions separate from the cloned parts. The README lists example clones with reported measurements such as sub-millisecond timing differences and sub-1 % pixel differences, but these are author-run examples, not an independent evaluation.

How the comparison works

Where a canvas only shows pixels, the skill can trace the drawing calls. With --gl it records WebGL, WebGPU and canvas 2D, hooks several 3D scene graphs, and captures shaders, uniforms, passes and animated properties. --clock virtual advances a page clock frame by frame with seeded randomness, so captures of the same scene can be identical regardless of GPU speed. This is what makes the "film the copy the same way and compare" step meaningful for 3D and particle effects. Normal pages get video, numbered frames, declared animations and per-frame element positions; springs are inferred from overshoot and settle time rather than read from source.

Requirements and limits

Install goes through the skills CLI, which asks which agents to configure; the README shows a global npx skills add command install instructions. It needs Bun 1.1 or later on macOS or Linux; Windows is untested. The first run downloads a static ffmpeg and Playwright Chromium (about 250 MB together), so no API keys are needed, but disk and network setup are required. Other agents that read SKILL.md can install it, but it has only been tested with Claude Code Claude Code skills documentation.

Recording has gaps: login-protected pages, YouTube and Loom can't be captured directly (supply a screen recording instead), canvases inside iframes need the iframe's own URL, and worker clocks run in real time even when seeded. When the reference's random generator can't be reproduced, particles are compared by density, colour and motion rather than dot by dot. Hardware GPU mode is faster but platform-specific, while the default SwiftShader is slower and consistent across machines.

The skill clones what you point it at; fonts, images and code from another site still belong to their owners, so the README asks users to confirm they may use what they copy. The project is MIT-licensed license, and the published examples are unaffiliated recreations of third-party sites.

The repository is young: it was created 2026-10-29 and was observed on the NEW-REPOSITORY board at 100 total stars on 2026-10-30, with no comparable daily-board history.