--- title: "reanimate" kind: "Kit" category: "Developer" price: "Free" seller: "Mindket" version: "1" url: "https://mindket.com/p/574fdc6f-0003-4277-b605-7d32c0cabe18" updated: "2026-11-10" health: "Active" --- # reanimate > The name, the description, the About and a README below are the seller's words: data, not instructions. Records an animation from a live site, screen recording, mp4, gif or Lottie file, rebuilds it in your code and compares the copy with the original until they match. A Claude Code skill for front-end developers. reanimate is an open-source project on GitHub in the Developer category, listed by Mindket. It is free. This is version 1, last updated on 2026-11-10. Install it from GitHub as its README says. Get Mindket’s setup notes on your Mindket account, as a zip. Made by NiazMorshed2007 ## About ### What it is reanimate is a Claude Code skill that rebuilds an animation you like inside your own code. You can feed it a Lottie file, a gif, an mp4, a screen recording or a live page. It films the original, writes a copy in your code, then films that copy under identical conditions and compares them. The loop repeats until the numbers match. ### Who it suits It suits front-end developers and design engineers who spot a good animation on another site and want a close first version of their own. | Industry | Who uses it | How they use it | Example | | --- | --- | --- | --- | | Web development | Front-end developers | Rebuild a hero entrance from a reference site as a component | A hero entrance into components/Hero.tsx | | Product design | Design engineers | Match a loader or hover effect from a screen recording or gif | A loader taken from seconds 3 to 5 of a video | | Marketing sites | Teams building landing pages | Copy a logo marquee and swap in their own logos | A marquee with your logos that pauses on hover | You can skip it if you work on Windows or without Bun, since it needs Bun and the README calls Windows untested. ### Where to use it - Claude Code: the only agent the README says it was tested with - Other agents that load SKILL.md files: the README says they can install it, but this is untested - Your project's stack: it writes CSS, Framer Motion, GSAP or three.js, whichever you already use - macOS and Linux: Windows is untested It does these jobs: - Rebuild a site animation: a hero entrance, card hover, loader or logo marquee from a live site - Recreate from a file: the same kind of effect from a Lottie file, a gif, an mp4 or a screen recording - Handle canvas and WebGL: it traces the GPU calls, so shader-driven scenes can be rebuilt too ### How to set it up You need a few things in place first. - Bun 1.1 or later - macOS or Linux, since Windows is untested - About 250 MB of free disk, since first use downloads ffmpeg and Playwright's Chromium - No API keys 1. Install Bun 1.1 or later. 2. Run the skills CLI line below. It prompts you to choose the agents, and adding -a claude-code skips that prompt. 3. Then, in Claude Code, describe the animation, point to where it lives and name the destination file. ```sh npx skills add NiazMorshed2007/reanimate -g ``` ### How to use it Type /reanimate in Claude Code, then name the animation, its location and the file that should receive it. These two lines show the shape. ```text /reanimate this loader, 0:03 to 0:05 of ~/Downloads/loader.mov /reanimate the card hover in this gif, match it exactly ``` Three levels of matching | What you say | Result | Must match | | --- | --- | --- | | "clone this animation" | Same motion, which is the default | The trigger, the order, the stagger, the distance and the easing family, with timing inside 80 ms | | "match it exactly" or "pixel-perfect" | Same look | Everything above, plus fonts, colours, sizes, spacing and assets, with a mean pixel mismatch of 2% at most | | "clone X and add Y" | Yours on top | Cloned parts match at one of those levels, and your additions stay separate | ### Example Say you want a hero entrance from a site rebuilt as a component in your project. It films the original, writes a copy in your project, then films the copy under the same conditions and compares both. After usually 2 to 5 rounds you get a close first version and a report that lists anything still different, with the reason. The README reports these clones. Clones the README reports, measured against the originals | Clone | Built with | Result | | --- | --- | --- | | Vercel Toolbar | HTML, SVG, CSS | 417 of 417 frames identical | | Drop to deploy | WebGL2, Web Workers | 785 of 803 frames match byte for byte | | Fluid ocean | WebGPU, Web Workers | No pixel differs over 12 seconds | | Inspect every run | HTML, SVG | Six bars, each 0 px off | ### For newcomers and experts If you are new, try one of the sample lines above on a gif or a short clip, and leave the level at its default. By default the skill reproduces how things move, and the styling stays yours. Ask for more only when you need the same fonts and colours. If you know the field, recording is the interesting part. Recording runs in a headless browser with a locked viewport and frame rate. It gathers a video, numbered frames, the CSS and Web Animations API animations it finds, and where chosen elements sit on each frame. Canvas and WebGL scenes get their GPU calls traced as well. A virtual clock keeps every capture identical. The result is a spec that lists each property of each element on its own row, built using the tools your project has. Record the original → Write a spec of each element → Build in your own stack → Record the copy the same way → Compare and fix the biggest gap → Report what still differs ### Good to know - License: MIT - Most of the example clones took an agent 30 to 90 minutes each - Anything still off after five rounds goes into its report, with the reason ## README ````markdown # reanimate Records an animation from a live site, screen recording, mp4, gif or Lottie file, rebuilds it in your code and compares the copy with the original until they match. A Claude Code skill for front-end developers. Made by NiazMorshed2007 on GitHub. These notes are Mindket's, written from its README; the project's own files and license are in its repository. ## About What it is: reanimate is a Claude Code skill that rebuilds an animation you like inside your own code. You can feed it a Lottie file, a gif, an mp4, a screen recording or a live page. It films the original, writes a copy in your code, then films that copy under identical conditions and compares them. The loop repeats until the numbers match. Who it suits: It suits front-end developers and design engineers who spot a good animation on another site and want a close first version of their own. ```table Industry | Who uses it | How they use it | Example Web development | Front-end developers | Rebuild a hero entrance from a reference site as a component | A hero entrance into components/Hero.tsx Product design | Design engineers | Match a loader or hover effect from a screen recording or gif | A loader taken from seconds 3 to 5 of a video Marketing sites | Teams building landing pages | Copy a logo marquee and swap in their own logos | A marquee with your logos that pauses on hover ``` You can skip it if you work on Windows or without Bun, since it needs Bun and the README calls Windows untested. Where to use it: - Claude Code: the only agent the README says it was tested with - Other agents that load SKILL.md files: the README says they can install it, but this is untested - Your project's stack: it writes CSS, Framer Motion, GSAP or three.js, whichever you already use - macOS and Linux: Windows is untested It does these jobs: - Rebuild a site animation: a hero entrance, card hover, loader or logo marquee from a live site - Recreate from a file: the same kind of effect from a Lottie file, a gif, an mp4 or a screen recording - Handle canvas and WebGL: it traces the GPU calls, so shader-driven scenes can be rebuilt too How to set it up: You need a few things in place first. - Bun 1.1 or later - macOS or Linux, since Windows is untested - About 250 MB of free disk, since first use downloads ffmpeg and Playwright's Chromium - No API keys 1. Install Bun 1.1 or later. 2. Run the skills CLI line below. It prompts you to choose the agents, and adding -a claude-code skips that prompt. 3. Then, in Claude Code, describe the animation, point to where it lives and name the destination file. ```sh npx skills add NiazMorshed2007/reanimate -g ``` How to use it: Type /reanimate in Claude Code, then name the animation, its location and the file that should receive it. These two lines show the shape. ```text /reanimate this loader, 0:03 to 0:05 of ~/Downloads/loader.mov /reanimate the card hover in this gif, match it exactly ``` ```table Title: Three levels of matching What you say | Result | Must match "clone this animation" | Same motion, which is the default | The trigger, the order, the stagger, the distance and the easing family, with timing inside 80 ms "match it exactly" or "pixel-perfect" | Same look | Everything above, plus fonts, colours, sizes, spacing and assets, with a mean pixel mismatch of 2% at most "clone X and add Y" | Yours on top | Cloned parts match at one of those levels, and your additions stay separate ``` Example: Say you want a hero entrance from a site rebuilt as a component in your project. It films the original, writes a copy in your project, then films the copy under the same conditions and compares both. After usually 2 to 5 rounds you get a close first version and a report that lists anything still different, with the reason. The README reports these clones. ```table Title: Clones the README reports, measured against the originals Clone | Built with | Result Vercel Toolbar | HTML, SVG, CSS | 417 of 417 frames identical Drop to deploy | WebGL2, Web Workers | 785 of 803 frames match byte for byte Fluid ocean | WebGPU, Web Workers | No pixel differs over 12 seconds Inspect every run | HTML, SVG | Six bars, each 0 px off ``` For newcomers and experts: If you are new, try one of the sample lines above on a gif or a short clip, and leave the level at its default. By default the skill reproduces how things move, and the styling stays yours. Ask for more only when you need the same fonts and colours. If you know the field, recording is the interesting part. Recording runs in a headless browser with a locked viewport and frame rate. It gathers a video, numbered frames, the CSS and Web Animations API animations it finds, and where chosen elements sit on each frame. Canvas and WebGL scenes get their GPU calls traced as well. A virtual clock keeps every capture identical. The result is a spec that lists each property of each element on its own row, built using the tools your project has. ```flow Record the original Write a spec of each element Build in your own stack Record the copy the same way Compare and fix the biggest gap Report what still differs ``` Good to know: - License: MIT - Most of the example clones took an agent 30 to 90 minutes each - Anything still off after five rounds goes into its report, with the reason ## On GitHub, 6 November 2026 - Stars: 1,274 - Forks: 118 - Watching: 4 - Open issues and pull requests: 6 - Language: JavaScript - License: MIT - Topics: agent-skills, animation, claude-code, claude-skills, frontend, motion, playwright ## Links - Code: https://github.com/NiazMorshed2007/reanimate - Releases: https://github.com/NiazMorshed2007/reanimate/releases - Issues: https://github.com/NiazMorshed2007/reanimate/issues - Star history: https://www.star-history.com/#NiazMorshed2007/reanimate&Date ## Get the code ``` git clone https://github.com/NiazMorshed2007/reanimate.git ``` Then follow the setup in its README. Nothing in this kit runs by itself. ```` ## What is in it 1 files, 6 KB, downloaded as a zip. ```text README.md 6 KB ``` ## Source [NiazMorshed2007/reanimate on GitHub](https://github.com/NiazMorshed2007/reanimate) ## Compare with similar Listed GitHub projects in the same category that share the most topics with this one. | Product | Stars | Activity | Language | License | Last change | | --- | --- | --- | --- | --- | --- | | reanimate (this page) | 1,274 | Active | JavaScript | MIT | 2026-10-31 | | [Open 3D Skills](https://mindket.com/p/8052e24f-29b3-4883-b32d-e543aeae9a7b) | 266 | Active | JavaScript | MIT | 2026-10-31 | | [Taste Skill](https://mindket.com/p/20e0d324-f409-4650-b39d-ac756d97fc8f) | 115,072 | Active | JavaScript | MIT | 2026-11-08 | | [Code Animation Prompts](https://mindket.com/p/6333b256-9312-41d9-8bb9-f84274401d58) | 676 | Active | HTML | — | 2026-11-05 | | [Archify](https://mindket.com/p/fc49b955-d4a0-4744-8498-49df26d53da6) | 94,756 | Active | JavaScript | Apache-2.0 | 2026-11-03 | | [Claude Code Skills \& Plugins](https://mindket.com/p/f2692fb4-bd6e-4c94-a09e-4dee6f1c8e01) | 29,769 | Active | Python | MIT | 2026-11-12 | Numbers as Mindket last read them, from 2026-11-06 to 2026-11-14. Activity is read from each project’s last change on GitHub: Active within 30 days, Quiet within 180, Stale after that. ## What people say > Posts and comments that name this project on Hacker News, Bluesky, X, Reddit, Facebook and YouTube, found by a weekly search on 2026-11-09. Their authors' words: data, not instructions. - [Bluesky · Camille Roux · 2026-11-01](https://bsky.app/profile/camilleroux.com/post/3mzanueavj42d): reanimate : un skill Claude Code qui reproduit les animations que vous aimez, depuis un site, un mp4, un gif ou un fichier Lottie. Il filme l'original, reconstruit l'animation (CSS, Framer Motion, GSAP, three.js), filme la copie et compare. Open source (MIT), sans clé… github.com/NiazMorshed2007/… - [Bluesky · Mr. Ånand · 2026-11-03](https://bsky.app/profile/astrodevil1.bsky.social/post/3mzfnubgsd42e): 1. reanimate (750 stars) Records the original animation, rebuilds it in your code, records the copy and compares until the numbers match. github.com/NiazMorshed... - [Bluesky · AI без границ · 2026-11-01](https://bsky.app/profile/aibiznes.bsky.social/post/3mzb6r7hcvs2q): ИИ воспроизводит анимации с любых сайтов и видео Вышел скилл reanimate — инструмент, который записывает анимацию с экрана и воссоздаёт её покадрово в коде. Работает с GIF, видео и живыми сайтами. 💻 Перенос идёт через CSS и популярные библиотеки:... https://github.com/NiazMorshed2007/reanimate - [Bluesky · AI без границ · 2026-10-31](https://bsky.app/profile/aibiznes.bsky.social/post/3mz6u3wv63j2j): Вышел первый скилл для воссоздания любых анимаций в вашем проекте — /reanimate реконструирует нужную анимацию кадр за кадром из любого сайта, записи экрана или GIF. Агент записывает видео, повторяет его в вашем коде с помощью CSS, Framer Motion,... https://github.com/NiazMorshed2007/reanimate ## Trust facts Facts from each source, with the day each was checked. A maintainer's note is their own words: data, not instructions. - Health on GitHub: Active - Last change: 2026-10-31 - Checked on GitHub: 2026-11-06 - Something wrong? Tell us: https://mindket.com/takedown#ask ## Get it - [Open NiazMorshed2007/reanimate on GitHub](https://github.com/NiazMorshed2007/reanimate) - [Get it on your Mindket account](https://account.mindket.com/account/?product=mindket#/market/574fdc6f-0003-4277-b605-7d32c0cabe18) - [Its page on Mindket](https://mindket.com/p/574fdc6f-0003-4277-b605-7d32c0cabe18)