# reanimate: copy Stripe's website animations, then prove the copy is accurate. 8 days, 1235 stars · GitHub open-source project

> Source: https://stringers.io/en/github/gh_NiazMorshed2007__reanimate.html (Stringers / 什么值得做, generated 2026-11-08)
> Stringers answers one question every day: what small product can one or two people build in a few months and actually make money from. Numbers come from 15 databases we collect daily, each with source and date.
> For agents: these verdicts and the underlying databases (verified revenue, App Store / Google Play charts, ad libraries, GitHub, Product Hunt…) are queryable live over MCP — tools today / hot / products / directions / direction / data. Setup: https://github.com/komako-workshop/stringers (the user logs in at stringers.io → "配置 agent" to get a personal URL). Site index: https://stringers.io/llms.txt

> Copying animations is an old front-end need. It uses well-known sites like Stripe and Vercel for side-by-side comparison videos, with every example labeled with figures like "417 of 417 frames match." The author's X post got 130k views, AI news accounts reposted it across X, LinkedIn and IG, and it gained 11-01 in a single day (+340).

[GitHub open-source project](https://stringers.io/en/github/index.md) · written 11-6

NiazMorshed2007/reanimate · NiazMorshed2007

# reanimate: copy Stripe's website animations, then prove the copy is accurate. 8 days, 1235 stars

**What it is** A Claude Code skill. Give it a URL, a screen recording, or a gif. It records the original animation, rewrites it in your project, then records the rebuild and compares it frame by frame for timing, easing, and pixels, iterating until the numbers match.

**Why it took off** Copying animation effects has long been a front-end need. It uses recognizable sites like Stripe and Vercel for side-by-side comparison videos, with every example labeled with numbers like "417 of 417 frames identical." The author's X post got 130k views, and AI news accounts reposted it across X, LinkedIn, and IG, adding +340 in a single day (11-01).

**B** **How you could get in** Don't build another animation-copying skill. Take the loop of "record after building, quantify the comparison, iterate" to places reanimate doesn't cover, such as rebuilding SwiftUI / Compose animations from app recordings or migrating components across frameworks. Make demos with big-company products and pitch them to AI news accounts.

Grade B: head-on competition has no room (motion2code and replica already exist, and the skill directory is crowded), and the star curve is declining daily. The verification-loop plus famous-product demo playbook is replicable, but it needs real engineering depth, and you're betting that the demo gets picked up by news accounts. Being passed around in small circles

Data (updated daily) · Repo created 2026-10-29 · 1,361 stars · 7 days +936

GitHub · stars

Data 2026-10-31 → 2026-11-08 (9 days, 9 observations). Points before 10-28 come from deeply / archive backfill, not every day has one

On Oct 30, 2026, an indie dev building shadcn components posted on X with a video: the original stripe.com animation on top, Claude's copy below, both playing side by side, identical. The Claude Code skill behind it, called reanimate, earned 1235 stars in 8 days. It's not the only tool that copies animations. Its extra step: after the copy, it records the result, compares it frame by frame against the original, and fixes whatever's off. This piece covers how it took off, who's already following it, and where you can jump in.

### A post with 130k views

Oct 30 03:16 (UTC), Niaz Morshed (@niazmorshed_) posted. The text was one line: "Introducing /reanimate Reverse engineer any animation from any website, video or gif," followed by a demo video and a landing page. By Nov 6, the post had 132k views and 37 replies.

The video shows things everyone recognizes: three browser windows record the widgets on stripe.com, resend.com, and clerk.com, and the rebuilt versions are compared against the originals round after round until the differences disappear. The first substantive reply questioned it in a typical way: "Genuinely curious why this needs to be a skill, Claude can analyze videos and gifs with ffmpeg without one." The answer to that question is exactly why it took off.

The author's earlier projects were frontend components in the shadcn style: shadcn-tiptap (706 stars), shadcn-address-autocomplete (375), and shadcn-tour (296). The author's other libraries add up to about 1700 stars. Known somewhat in the shadcn community, but not a big account.

### What it is

A skill that installs into Claude Code. `npx skills add NiazMorshed2007/reanimate -g` installs it in one command, no API key needed. To use it, say one sentence:

> /reanimate the hero entrance on [example.com](https://example.com), into components/Hero.tsx

The input can be a URL, a screen recording, an mp4, a gif, or a Lottie file. It runs five steps: records the original in a headless browser at a fixed size and frame rate; writes each moving element as one line (when it starts, how long, from where to where, what easing); rewrites it using the CSS, Framer Motion, GSAP, or three.js you already have in your project; records the rebuild the same way and compares timing, easing, and pixels; fixes the biggest gap and records again, usually 2 to 5 rounds. Anything still off after 5 rounds goes into the report with an explanation.

By default it only requires that things "move the same" (timing error within 80 ms). Say "match it exactly" and it also matches fonts, colors, and spacing, with pixel difference no more than 2%.

### Why it took off

**The need was already there.** Front-end devs and designers see another company's site animation and want to copy it. That's an old need. The first paragraph of the README names the pain point: ask an agent to rebuild something from a link or screenshot, it does one pass and says it's done, but it isn't. "It can't see motion and doesn't know how far off it is."

**The demos use recognizable sites, and every one comes with numbers.** The README has 14 examples from Vercel, Next.js, Turborepo, Stripe, WorkOS, Clerk, Liveblocks, and Resend. Each is followed by a quantified result: Vercel Toolbar "417 of 417 frames identical," Stripe's Visa card hover "skew within 0.4 px," Resend's homepage cube "every rotation accurate within 25 s, 0.11% pixels differ." "How close the copy is" becomes a number, and people sharing it don't need to explain it.

**It's clear this isn't just a prompt wrapper.** Canvas and WebGL only expose pixels, so it captures the calls the page sends to the GPU: shaders, uniforms, three.js scenes. The page runs on a virtual clock that advances frame by frame, and even Math.random is seeded, so two recordings match byte for byte. Anyone who knows the field will see that ffmpeg video analysis can't replace this. The fork-to-star ratio is about 9.5%, similar to new libraries of the same size, with no sign of star-buying.

**It rode the Claude Code skills wave.** skills.sh distributes it with one command, and once the skill directories and leaderboards listed it, the long tail followed.

### Where users come from

| Date | star | Gained that day | What happened those days |
|---|---|---|---|
| 10-30 | — | — | The author's X launch post (132k views), plus another video the same day showing multiple Vercel animations being copied |
| 10-31 | 85 | — | Charly Wargnier (@DataChaz) posted an all-caps tweet, "YOU CAN NOW REVERSE ENGINEER ANY ANIMATION…" (8,791 views), and cross-posted to LinkedIn; Ram Maheshwari's LinkedIn post got 468 reactions |
| 11-01 | 425 | +340 | AI news accounts on Instagram Reels, Facebook video pages, and Threads started reposting the demo videos |
| 11-02 | 707 | +282 |  |
| Around 11-03 | 918 | +211 | Reddit r/claudeskills included it in a roundup of "9 Claude skills for animation" (around 1000 stars at that point, date inferred) |
| 11-04 | 1074 | +156 |  |
| 11-05 | 1167 | +93 |  |
| 11-06 | 1235 | +68 |  |

Star data is from GitHub's daily records. Skill directories and leaderboards including skills.sh, Skill Leaderboard, ClaudeMap, and Trendshift also listed it over time, adding long-tail traffic. A few things worth noting: the real peak came after the news accounts reposted it, not on the day the author posted; there was no paid promotion, it wasn't on Hacker News (searching "reanimate" on HN only turns up a same-named Haskell animation library), and it wasn't on Product Hunt; the repo was only 8 days old and couldn't get onto GitHub's official trending, so everything came from off-platform. The curve spiked once and has been declining daily since. The author hasn't committed since 10-31, and there are only 2 issues, so how many people actually use it is impossible to tell from the outside.

### Who it's competing with

The "let an agent write animations" skill space is already crowded: GSAP's official skill (18k stars), Remotion (6409), and LottieFiles (2805) all exist, but they teach "how to write it," not "copy it from a reference." Tools that clone whole websites are plentiful too: ai-website-cloner-template (38.7k stars) and screenshot-to-code (81k stars) only handle static appearance, not timing or easing.

Only two tools take the narrow path of "copy the animation and prove it's accurate":

- **lovisdotio/motion2code** : came 9 days earlier (10-20), also compares frame by frame against the source video, but its input is AI-generated motion video, output is SVG + GSAP, it doesn't record real websites, and it doesn't handle WebGL. 335 stars, about a quarter of reanimate's.

- **albertirgi/replica** : created 11-02 days ago, after reanimate blew up. Its pitch is "rebuild the whole UI and prove it with one score," extending the same idea from animation to layout and styling. 42 stars. Whether it was inspired by reanimate is unverified.

One more supporting example: jeremy-prt/bloub (1925 stars) in August measured frame by frame against a reference video to recreate x.ai's avatar animation. The same play was tried once, but nobody turned it into a general tool.

### If it were you

**B.** Another animation-copying skill won't get stars. reanimate already holds that spot, and motion2code and replica are there too. What's worth taking is the playbook: pick a narrow task where an agent "passes in one go, claims it's done, but isn't actually right," add a quantified verification loop, and make before/after demos with big-company products people recognize. The playbook is clear. The weakness is that the skill directory is already crowded, and whether a demo gets picked up by news accounts is a bet.

**Who it suits** : developers who already have some name in a frontend or mobile ecosystem (like the author in the shadcn community) and can build solid recording and comparison infrastructure themselves.

**Who it doesn't suit** : anyone who wants to write a SKILL.md with a few prompts and ship it. The first question in the replies was "Claude can do this with ffmpeg," and without real engineering depth you'll get called out on the spot. Also skip it if you want to make money from it; this kind of thing trades on reputation.

**How to do it** : switch platform or task and carry the same loop over. A few directions reanimate doesn't cover or can't (inferred):

- **Mobile animation** : rebuild animations from iOS / Android app screen recordings as SwiftUI, Jetpack Compose, or React Native, and compare recordings of the rebuild in a simulator. reanimate only runs in the browser, and its README says logged-in pages can't be recorded and Windows hasn't been tested.

- **Cross-framework migration** : move a component from Vue to React, or from Framer Motion to CSS, and prove "moves the same" with before/after recordings.

- **Other tasks where you can't see how far off you are** : email template rendering across clients, chart reproduction, and design-spec restoration are all places where agents love to say "done."

Put the comparison video and a table of numbers on the first screen of the README, state for each example how many frames match and how many milliseconds off, and include a landing page where people can interact online.

**How to get users** : post it on your own X account, using clips of products everyone knows, like Stripe, Vercel, and Apple. Then find accounts like DataChaz and rammcodes that share AI tools daily. They need ready-made video, and the spikes came from them repurposing it. Also list it on skills.sh and other skill directories to catch the long tail. HN and Product Hunt did nothing this time.

**Deadline** : the skills space is filling up fast, and the same idea often gets copied within a week (replica was built on day 3 of reanimate's blow-up). If you're going to build, aim to ship within three months (estimate).

**Where the call was wrong** : ① Over the following month, "replicate + verify" skills on other platforms (mobile, cross-framework) barely reached a few hundred stars. So reanimate's growth came from the demo videos and one-time reposting, not from the verification loop itself. ② Claude Code and other agents now have built-in screen recording and comparison with iteration, so this category's differentiation is gone. ③ On the flip side, replica, a follower that rebuilds the whole UI and scores it, passed 1000 stars, which means the approach has a wider market than expected and can be pushed to bigger tasks.

### Data and sources

- GitHub: NiazMorshed2007/reanimate README and landing page reanimate.niazmorshed.dev (11-06); daily stars and forks (tracked from 10-31 to 11-06).

- X: author 10-30 launch post (132k views, with @rennesis questioning the ffmpeg approach in replies); @DataChaz tweet 10-31 (8,791 views).

- LinkedIn: Ram Maheshwari post (468 reactions, 13 comments).

- Reddit: r/claudeskills roundup post (original could not be opened; content taken from search results). View counts for the reposted videos on Instagram, Facebook, and Threads are unverified.

- Competitor star counts from GitHub (before and after 11-06).

[GitHub repo ↗](https://github.com/NiazMorshed2007/reanimate)

**Research notes: competitor table, acquisition evidence, full research report**

Competitors

| Name | Where | Launched | Scale | How it differs from this one |
|---|---|---|---|---|
| lovisdotio/motion2code | Open source | 2026-10-20 | 335 stars | Input is AI-generated motion video; output is SVG+GSAP. Does not record real websites or track WebGL. |
| albertirgi/replica | Open source | 2026-11-02 | 42 stars | Replicates the whole UI and gives an overall score; motion is only one dimension. Appeared after reanimate. |
| Jakeschincariol/replica-skill | Open source | 2026-10-03 | 7759 stars | Clones an entire app and tests for bugs; does not specifically quantify motion. |
| JCodesMore/ai-website-cloner-template | Open source | 2026-03-13 | 38.7K stars | Static whole-site clone; ignores timing and easing; no comparison loop. |
| abi/screenshot-to-code | Open source | 2023-11-14 | 81K stars | Screenshot-to-static-code; does not handle animation. |
| greensock/gsap-skills, LottieFiles/motion-design-skill, remotion-dev/skills | Open source | 2026-01~03 | 18k / 2805 / 6409 stars | Official skills teach an agent how to write animations, rather than replicating a reference. |
| Claude uses ffmpeg directly to watch the video. | Big-company features |  |  | One pass, no measurement; reanimate records the real page, uses a virtual clock, GPU tracing, and multiple rounds of comparison. |

Where users come from

- **Verified** **Author's X launch post** : on 2026-10-30 @niazmorshed_ posted "Introducing /reanimate" with a demo video, 132k views (x.com/niazmorshed_/status/2116006291852423247).

- **Verified** **by X and LinkedIn AI news accounts reposting it** : @DataChaz's tweet 10-31 got 8,791 views and was cross-posted to LinkedIn; Ram Maheshwari's LinkedIn post drew 468 reactions. The timing lines up with the +340 spike on 11-01

- **Verified** **Short-video reposts (IG, FB, Threads)** : Instagram Reel, a Facebook video page, and the Threads account @dailyaionly reposted the demo video; view counts unverified.

- **Verified** **Skill directories and Reddit roundup** : indexed by skills.sh, skillleaderboard, claudemap, and trendshift; r/claudeskills has a roundup post of 9 motion skills.

- Inferred **Author has an audience from shadcn components** : the author's earlier libraries such as shadcn-tiptap total about 1700 stars, giving some name recognition in frontend circles. How much this contributed to the growth is unverified.

## Why NiazMorshed2007/reanimate took off

> Research date 2026-11-06. Channel: GitHub. The data card shows 8 days, 1235 stars, 117 forks, with a single-day peak of +340 (11-01).

### One line

A Claude Code skill: give it a URL, a screen recording, an mp4, a gif, or a Lottie file. It first records the original animation frame by frame in a headless browser, rewrites it in your project, then records the replica the same way. The two are compared on timing, easing, and pixels, and changes are made until they match. It usually takes 2–5 rounds.

### Verdict

It took off because three things stacked together:

1. **"Copying an animation from someone else's site" was already a frequent need for frontend developers and vibe coders** ;

2. **The demo material is extremely eye-catching** : animations from official sites of Stripe, Vercel, Clerk, and Resend, which people recognize, shown as side-by-side recordings. Each example is labeled with a measured result, such as "417 of 417 frames match."

3. **The author's own X launch post** (132k views), plus reposts by AI news accounts on X, LinkedIn, Instagram, Facebook, and Threads.

The differentiator is the **verification loop** : others generate once and call it done, while this one records the replica and the original, compares them item by item, and can track WebGL/three.js GPU calls. That is the selling point in the README and tweets, so the differentiator itself is what spreads.

### Data

| Date | stars | forks | Gained that day |
|---|---|---|---|
| 10-29 | Repo created |  |  |
| 10-31 | 85 | 10 | (first observation) |
| 11-01 | 425 | 33 | +340 |
| 11-02 | 707 | 62 | +282 |
| 11-03 | 918 | 90 | +211 |
| 11-04 | 1074 | 102 | +156 |
| 11-05 | 1167 | 108 | +93 |
| 11-06 | 1235 | 117 | +68 |

Source: our GitHub repo_day data. Forks/stars are about 9.5%, close to the median for new repos (about 11%). The suspect field is empty, with no sign of star inflation. The curve is a one-time burst followed by decay, with daily growth falling off. The repo is only 8 days old and has not reached the trending threshold (about 60 days), so not being on trending tells us nothing.

The author, Niaz Morshed (GitHub NiazMorshed2007, X @niazmorshed_), is an independent developer who builds frontend components. Earlier works include shadcn-tiptap (706 stars), shadcn-address-autocomplete (375), shadcn-tour (296), and jev-review (247,2026-09). The same author's 7 other repos total about 3000 stars. He has some name recognition in the shadcn ecosystem, but is not a major account.

### Growth tactics (where users come from)

1. **The author's own X launch post** : posted 2026-10-30 03:16 UTC, "Introducing /reanimate Reverse engineer any animation from any website, video or gif," with a demo video and landing page reanimate.niazmorshed.dev, **132k views** , 37 replies (https://x.com/niazmorshed_/status/2116006291852423247). The same day he posted a follow-up video replicating several Vercel product animations with reanimate. This is the confirmed primary source.

2. **Secondary spread by AI news accounts (starting 10-31)** :
    - Charly Wargnier (@DataChaz, ex-Snowflake/Streamlit, shares AI tools daily) posted on 10-31 08:52 UTC with an all-caps title, "YOU CAN NOW REVERSE ENGINEER ANY ANIMATION FROM ANY WEBSITE, VIDEO OR GIF," with 8,791 views at the time of capture (https://x.com/DataChaz/status/2116453300761755652). He also posted the same content on LinkedIn.
    - Ram Maheshwari (@rammcodes) LinkedIn post "That's Wild... We finally have a Claude Code skill to reverse-engineer animations," 468 reactions, 13 comments, posted around 10-31 (https://www.linkedin.com/posts/rammcodes_thats-wild-we-finally-have-a-claude-code-activity-7522189104718110720-G4QO).
    - An Instagram Reel, a Facebook video page ("What the f*ck, we finally have a Claude Code skill…"), and the Threads account @dailyaionly all reposted the demo video.
    - The timing fits: the single-day +340 on 11-01 came right after these reposts.

3. **Skill directories and aggregators** : skills.sh (install command `npx skills add`), Skill Leaderboard, ClaudeMap, and trendshift all list it. A Reddit r/claudeskills roundup, "9 Claude skills for motion design & animation," includes it (when it had about 1k stars). These add long-tail traffic.

4. **Not found** : paid promotion, an HN post, or a Product Hunt launch. Searching HN for "reanimate" only turns up an unrelated Haskell animation library of the same name.

### Competitors

| Name | Where | Launched | Scale | How it differs from reanimate |
|---|---|---|---|---|
| lovisdotio/motion2code | Open-source skill | 2026-10-20 | 335 stars (trendshift once recorded 756) | Input is AI-generated motion video; output is SVG+GSAP, also compared frame by frame against the source video. Does not record real websites or track WebGL. It is the closest direct competitor, 9 days earlier, but has only 1/4 of reanimate's stars. |
| albertirgi/replica | Open-source skill | 2026-11-02 | 42 stars | Replicates the whole UI (layout, styles, pixels, animation) and scores it: "rebuild and prove it with a score." The idea is nearly identical, and it appeared after reanimate blew up, so it looks like a follower. |
| Jakeschincariol/replica-skill | Open-source skill | 2026-10-03 | 7759 stars | 11 skills that clone an entire app and then test for bugs. Not specific to animation, and does not quantify motion. |
| JCodesMore/ai-website-cloner-template | Open source | 2026-03 | 38.7K stars | A single command that clones a whole site, looking only at static appearance and ignoring animation timing and easing. |
| abi/screenshot-to-code | Open source | 2023-11 | 81K stars | Screenshot-to-code, static only, with no verification loop. |
| Manavarya09/design-extract | Open source | 2026-04 | 4771 stars | Extracts design system tokens; does not handle animation. |
| greensock/gsap-skills, LottieFiles/motion-design-skill, remotion-dev/skills | Official / big-company skills | 2026-01~03 | 18k / 2805 / 6409 stars | Teach an agent "how to write animations," not "how to copy an animation." |
| jeremy-prt/bloub | Open source | 2026-08 | 1925 stars | A single case: measuring frame by frame against a reference video to replicate the x.ai avatar animation. It shows that "frame-by-frame replication" was already done by someone, but not packaged as a general tool. |
| Directly having Claude analyze the video with ffmpeg. | Big-company features | — | — | Commenters on X questioned why you'd need a skill when Claude can already use ffmpeg. reanimate adds recording the real page, a virtual clock that makes each recording identical, GPU tracing, and a closed comparison loop. |

Bottom line: skills for "have an agent write animations" are crowded (Remotion, GSAP, and Lottie all have them), and so are tools for "clone a website." But in the niche of **specifically copying motion and proving with numbers that the copy is right** , it had only motion2code, and motion2code leans toward AI video input and does not record real websites.

### Why it works

- **The demand already exists** : frontend developers and designers see a flashy animation on another company's site and want to copy it. This has been a long-running pain point. Replicas an agent produces in one pass give no visibility into motion and no sense of how far off they are, and the README's first paragraph hits that nail directly.

- **The demos are highly visual** : original and replica recorded side by side, using sites everyone knows, like Stripe, Vercel, and Clerk, with 14 cases showing quantified metrics, plus an interactive landing page. This kind of video is naturally suited to repost by AI news accounts.

- **The hook "proves the copy moves the same"** : against a backdrop where agent tools often claim a task is done when it isn't, "verified down to the numbers" speaks directly to developer pain. The LinkedIn comments discuss real issues like easing curves and Framer Motion output.

- **Low install barrier** : one `npx skills add` command and no API key, arriving just as the Claude Code skills ecosystem and skills.sh distribution were gaining momentum.

- **Credible engineering** : virtual clock, seeded Math.random, WebGL/WebGPU/three.js tracing. Anyone who knows the field can tell it isn't a wrapped prompt, and that's part of why the fork rate is normal (9.5%).

### Visibility

It's spreading in small circles. The author's main post has 130k views, AI news accounts (DataChaz, rammcodes) and short-video reposters have shared it, and there's a Reddit roundup thread, but no mainstream media coverage and it never hit the HN front page. Open source and free, no revenue involved.

### Copycats

albertirgi/replica (built by 11-02, 42 stars) takes the same "clone + scored proof" route and extends it to whole UIs. Whether it was inspired by reanimate is unverified. The other animation skills created after 10-30 (claude-animation-skills, open-3d-skills, etc.) are all generation tools, not cloning tools.

### Takeaways

- Give an agent tool a **quantified verification loop** , and turn the measured results directly into selling points (how many frames match, how many milliseconds off). That's more convincing than just "it can generate."

- Demo with **well-known products people recognize** in before/after comparisons, plus an interactive landing page, giving news accounts ready-made video material.

- Target a narrow, high-frequency need. "Copy this animation" is more specific than "clone a whole site" and easier to explain in one sentence.

### Uncertain

- Which parts of the main post's 132k views accumulated after 10-31 is unverified. At first observation, 10-31 only had 85 stars; the pace of X post to star conversion is unverified.

- Reddit post original 403 unavailable; play counts for Instagram and Facebook re-uploads unverified.

- Real usage and cloning quality: only 2 issues and 4 PRs, and the author hasn't pushed since 10-31.

- Star growth is decaying fast, and whether it turns into sustained use is unknown.

### Sources

- GitHub repo README: [github.com/NiazMorshed2007/reanimate](https://github.com/NiazMorshed2007/reanimate)

- Landing page: [reanimate.niazmorshed.dev/](https://reanimate.niazmorshed.dev/)

- Author's launch post: [x.com/niazmorshed_/status/2116006291852423247](https://x.com/niazmorshed_/status/2116006291852423247)

- DataChaz:[x.com/DataChaz/status/2116453300761755652](https://x.com/DataChaz/status/2116453300761755652)

- Ram Maheshwari LinkedIn:[www.linkedin.com/posts/rammcodes_thats-wild-we-finally-have-…](https://www.linkedin.com/posts/rammcodes_thats-wild-we-finally-have-a-claude-code-activity-7522189104718110720-G4QO)

- Reddit roundup: [www.reddit.com/r/claudeskills/comments/1xmvjdu/9_claude_skil…](https://www.reddit.com/r/claudeskills/comments/1xmvjdu/9_claude_skills_for_motion_design_animation/)

- Competitors: [github.com/lovisdotio/motion2code](https://github.com/lovisdotio/motion2code), [github.com/albertirgi/replica](https://github.com/albertirgi/replica)

- Our GitHub database (repo_profile / repo_day, as of 2026-11-06)

This article was written by AI from public data and the data we collect daily. Numbers are sourced, and inferences are labeled.