Ever found an amazing animation on a website and wished you could recreate it in your own project?
Not just something similar. The actual movement, timing, transitions, and visual effects.
Meet /reanimate, a new open-source Claude Code skill that reverse-engineers animations frame by frame and rebuilds them directly in your code.
And the results are pretty impressive.
Here's how it works:
Capture: Give Claude a website URL, screen recording, MP4, or GIF containing the animation you want.
Analyze: The skill extracts movement, timing, easing curves, element positions, and visual properties frame by frame.
Rebuild: Claude recreates the animation using your existing technology stack, including CSS, Framer Motion, GSAP, or Three.js.
Compare: It records the recreated animation and compares it against the original.
Refine: The agent identifies differences and automatically iterates until the result meets its target or reports remaining issues.
And here's where things get really interesting.
This isn't limited to simple CSS transitions.
Reanimate can inspect complex graphics built with:
Three.js: Interactive 3D scenes and animations
WebGL and WebGPU: GPU-powered visual effects
Canvas: Procedural graphics and particle systems
GSAP and Framer Motion: Complex timelines, transitions, and interactive effects
The skill can even trace shaders, GPU rendering calls, and animated properties to understand how sophisticated visual effects work.
But how accurate is it?
According to the project's own demonstrations:
A complex 3D cube animation recreated with 0.11% pixel difference
Interactive feature cards with less than 0.6% difference
A particle-based star animation with just 0.014% difference during a click effect
These are developer-reported examples, not guaranteed results for every animation.
The skill's pixel-perfect mode targets a mean pixel mismatch of 2% or less.
And unlike simply generating a video that looks similar, the result is actual editable code you can integrate into your project.
Install /reanimate:
npx skills add NiazMorshed2007/reanimate -g
Then open Claude Code and try something like:
/reanimate the hero animation from https://example.com into components/Hero.tsx
You'll need Bun 1.1+ on macOS or Linux. The first run also downloads Chromium and FFmpeg.
The project is free and open source under the MIT license. Remember to respect the original creators' rights when reusing visual assets.
And here's why I find this particularly exciting.
Until recently, recreating a sophisticated website animation meant spending hours studying the original, guessing how it worked, and manually tweaking countless tiny details.
Now an AI coding agent can record, analyze, reconstruct, and visually verify the entire process.
We're moving from AI that copies what a website looks like to AI that can reconstruct how it moves.
That's a pretty significant step for creative coding and frontend development.
And a potentially dangerous development for anyone hoping their beautiful website animation will remain unique for long.
/reanimate on GitHub:
https://github.com/NiazMorshed2007/reanimate
Live demonstrations:
https://reanimate.niazmorshed.dev/
#ClaudeCode #Reanimate #CreativeCoding #WebAnimation #MotionDesign #VibeCoding
YouTube / ABVX