danmaku icon

Claude Code clones any animation frame by frame: the /reanimate skill

0 View6 hours ago

A new Claude Code skill, /reanimate: show it an animation — it builds a copy in your project and checks for itself that it moves the same way. • input: a website link, a screen recording, an mp4, a GIF or a Lottie file; • it records the original frame by frame and writes down every movement: start, duration, easing, delays; • it writes the code in whatever your project already uses: CSS, Framer Motion, GSAP or Three.js; • then it records its copy the same way, compares it with the original and fixes the biggest difference — usually 2–5 rounds; • it even handles 3D, Canvas, WebGL and WebGPU: the cube from resend.com differs by 0.11% of pixels, the Visa card from stripe.com by 0.03%; • the author has cloned widgets from Stripe, Clerk, WorkOS, Liveblocks and Resend this way — most in 30–80 minutes. Downsides: needs Bun, macOS or Linux; the first run downloads ~250 MB; pages behind a login and YouTube can't be recorded directly — only via a screen recording. And most importantly: other sites' fonts, images and code belong to their owners — use it as a starting point for your own. Install: npx skills add NiazMorshed2007/reanimate -g My forecast: in 3–5 years, any animation on the web will move into your own project in minutes. Subscribe — there's a lot more coming! Source: github.com/NiazMorshed2007/reanimate (MIT). Video: Niaz Morshed / reanimate. Meme: Catch Me If You Can (2002). Music: Ivan Art — «Midnight Resolve» (album Deep Wishes)
warn iconRepost is prohibited without the creator's permission.
creator avatar

Recommended for You

  • All
  • Anime