Reanimate is a skill for Claude Code that extracts, analyzes, and replicates complex web animations by recording references and comparing them frame by frame against newly generated code. When frontend developers prompt language models to clone animations from screenshots or URLs, models usually execute a single naive pass without perceiving timing, easing, or spatial trajectories.

By operating directly inside a browser session, the tool evaluates CSS transitions, Web Animations API calls, and WebGL renders to establish quantitative telemetry. This closed feedback loop aligns with broader research trends in autonomous software iteration, where agentic capabilities tackle specialized workflows much like the operational concerns discussed when Anthropic warns about recursive self-improvement in enterprise documentation.

How does its frame-by-frame verification pipeline work?

The skill follows a five-stage loop: recording the reference in a headless browser, generating a property-by-property specification sheet, building the code in the project stack, verifying the result through another recording, and iteratively resolving discrepancies. During each loop, Playwright captures frames while scripts inspect element tracks, computed styles, and active easing curves.

For complex 3D scenes, Canvas 2D, and WebGL interfaces, Reanimate injects an in-page tracer alongside a deterministic virtual clock with seeded random generators. It extracts uniform values, draw passes, and Three.js scene graphs into animated channels. The comparison engine aligns activity curves and measures pixel differences, letting Claude Code repeat adjustments over two to five cycles until deviations settle within strict thresholds.

How do you install and run Reanimate in Claude Code?

Installing Reanimate requires Bun 1.1 or higher on macOS or Linux systems, while Windows remains untested in the initial release. On its first execution, the tool automatically fetches Playwright Chromium and a local static build of ffmpeg, consuming approximately 250 MB of disk space without requesting external API credentials.

Developers can provide live URLs, screen recordings, MP4 files, GIFs, or Lottie assets as reference inputs. Just as low-latency engineering achieves high precision when Realtime TeX renders paragraphs in a millisecond, Reanimate enforces precision by measuring time offsets down to fractions of a pixel and single-digit milliseconds across each pass.

bash
npx skills add NiazMorshed2007/reanimate -g -a claude-code
# Inside Claude Code:
/reanimate the hero entrance on https://example.com, into components/Hero.tsx
Install Reanimate via the skills CLI and execute an animation capture

What technical limitations and operational caveats exist?

The tool cannot authenticate behind private login walls or directly capture streams from video platforms like YouTube and Loom, which require supplying an offline screen recording instead. Furthermore, physics-based springs are fitted from measured overshoot and settling time rather than reading mathematical parameters directly from minified source bundles.

Teams using automated testing must also ensure that local dependencies and headless browser caches maintain strict isolation, avoiding uncontrolled file read vectors akin to vulnerabilities seen when RCE risks hit Collabora Online in unpatched document server environments. Users must also respect intellectual property rights when referencing third-party visual assets and fonts.