reanimate:把 Stripe 官网的动画抄下来,再证明抄对了,8 天 1235 颗 star

2026 年 10 月 30 日,一个做 shadcn 组件的独立开发者在 X 上发了一条帖子,配一段视频:上面是 stripe.com 的原版动画,下面是 Claude 抄出来的,两段同时播,一模一样。这个叫 reanimate 的 Claude Code 技能 8 天拿到 1235 颗 star。抄动画的工具不止它一个,它多做的一步是:抄完录下来,跟原版逐帧比,差多少改多少。这篇讲它怎么起来的、谁已经在跟、你还能从哪里切进去。

一条 13 万浏览的帖子

10 月 30 日 03:16(UTC),Niaz Morshed(@niazmorshed_)发帖,正文只有一句:「Introducing /reanimate Reverse engineer any animation from any website, video or gif.」,下面是演示视频和一个落地页。到 11 月 6 日这条帖子有 13.19 万次浏览、37 条回复。

视频里的东西大家都认得:三个浏览器窗口分别录下 stripe.com、resend.com、clerk.com 上的小部件,然后复刻版被一轮轮拿来和原版比,直到差异消失。回复区第一条像样的质疑也很典型:「真心好奇为什么要做成技能,Claude 不用技能、直接用 ffmpeg 也能分析视频和 gif。」——这个问题的答案,正是它火的原因。

作者此前的作品是 shadcn-tiptap(706 星)、shadcn-address-autocomplete(375)、shadcn-tour(296)这类前端组件,其余几个库加起来约 1700 颗 star。在 shadcn 圈子里有点名气,但不是大号。

它是什么

一个装进 Claude Code 的技能,npx skills add NiazMorshed2007/reanimate -g 一条命令装好,不要 API key。用的时候说一句话:

/reanimate the hero entrance on example.com, into components/Hero.tsx

输入可以是一个网址、一段录屏、mp4、gif 或 Lottie 文件。它做五步:在无头浏览器里按固定尺寸和帧率把原版录下来;把每个动的元素写成一行(什么时候开始、多长、从哪到哪、什么缓动);用你项目里已经在用的 CSS、Framer Motion、GSAP 或 three.js 重写;用同样的方式录下复刻版,比时间、缓动和像素;改掉最大的那处差异,再录,一般 2 到 5 轮。5 轮之后还对不上的,写进报告并说明原因。

默认只要求「动得一样」(时间误差 80 毫秒以内);说「match it exactly」就连字体、颜色、间距一起对,像素差不超过 2%。

它为什么火了

需求本来就在。 前端和设计师看到别家官网的动效就想抄,这是老需求。README 第一段把痛点说穿了:让 agent 照着链接或截图重做一个,它做一遍就说完成了,其实没对上——「它看不到运动,也不知道差多少」。

演示用的是大家认得的网站,而且每个都带数字。 README 里 14 个例子,来自 Vercel、Next.js、Turborepo、Stripe、WorkOS、Clerk、Liveblocks、Resend。每一个后面跟着一句量化结果:Vercel Toolbar「417 帧里 417 帧完全一样」,Stripe 的 Visa 卡悬停「倾斜误差 0.4 像素以内」,Resend 首页的魔方「25 秒内每一次旋转都准确,0.11% 的像素不同」。「抄得像不像」变成了一个数,转发的人不用解释。

看得出不是套个提示词。 画布和 WebGL 只给像素,它就去录页面发给 GPU 的调用:shader、uniform、three.js 场景;页面跑在一个逐帧推进的虚拟时钟上,连 Math.random 都种了种子,两次录制逐字节一致。懂行的人看到这里,就知道 ffmpeg 看视频替代不了它。fork 和 star 的比例约 9.5%,和同量级新库差不多,没有刷星迹象。

赶上了 Claude Code 技能正热。 skills.sh 一条命令分发,技能目录、排行榜一收录,长尾就有了。

用户从哪来

star 数据是 GitHub 每日记录。此外 skills.sh、Skill Leaderboard、ClaudeMap、Trendshift 这些技能目录和排行榜陆续收录,算长尾补量。几点值得记下:真正的波峰在资讯号搬运之后,不在作者发帖当天;没有付费推广,没上 Hacker News(HN 搜「reanimate」只出来一个同名的 Haskell 动画库),也没上 Product Hunt;库才 8 天,进不了 GitHub 官方 trending,全靠站外。曲线是一次爆发后逐日下滑,作者 10-31 之后没再提交,issue 只有 2 个——真实有多少人在用,外面看不出来。

谁在跟它抢

「让 agent 写动画」的技能已经很挤:GSAP 官方(1.8 万星)、Remotion(6409)、LottieFiles(2805)都有,但它们教的是「怎么写」,不是「照着抄」。「克隆整个网站」的工具也多:ai-website-cloner-template 3.87 万星、screenshot-to-code 8.1 万星,都只管静态外观,不管时间和缓动。

真正在「抄动效 + 证明抄对了」这条窄路上的只有两个:

• lovisdotio/motion2code:比它早 9 天(10-20),也逐帧对照源视频,但输入是 AI 生成的动效视频,输出 SVG + GSAP,不录真实网站,不管 WebGL。335 颗 star,约是 reanimate 的四分之一。
• albertirgi/replica:11-02 才建,在 reanimate 爆了之后,口号是「重做整套 UI,用一个分数证明」,把同一个思路从动效扩到布局和样式。42 颗 star。是不是受它启发,未核实。

还有一个旁证:jeremy-prt/bloub(1925 星)8 月就对着参考视频逐帧测量,复刻了 x.ai 的头像动画——同样的玩法有人做过一次,但没做成通用工具。

如果是你

B。 再做一个抄动画的技能拿不到 star 了,这个位置 reanimate 已经占住,motion2code 和 replica 也在。值得拿走的是它的打法:挑一个 agent「一遍过、自称做完、其实没对上」的窄任务,加上量化验证的闭环,用大家认得的大厂产品做前后对比演示。打法清楚,短板在于技能目录已经很挤,一条演示能不能被资讯号搬走要赌。

适合谁:在某个前端或移动端生态里有点名气(像作者在 shadcn 圈)、自己能把录制和比对这种基础设施做扎实的开发者。

不适合谁:想写个 SKILL.md 套几段提示词就上的——回复区第一个问题就是「Claude 用 ffmpeg 也能干」,拿不出工程深度会被当场拆穿。想靠它赚钱的也别来,这一类图的是名气。

怎么做:换平台或换任务,把同一个闭环搬过去。几个 reanimate 没做或做不了的方向(推断):

• 移动端动画:从 iOS / Android App 的录屏复刻成 SwiftUI、Jetpack Compose 或 React Native 动画,在模拟器里录下复刻版比对。reanimate 只跑浏览器,README 写明登录后页面录不了、Windows 没测过。
• 跨框架迁移:把一个组件从 Vue 迁到 React、从 Framer Motion 迁到 CSS,前后录屏证明「动得一样」。
• 其他「看不见差多少」的任务:邮件模板在各客户端的渲染、图表复刻、设计稿还原,都是 agent 爱说做完的地方。

README 第一屏放对比视频和一张数字表,每个例子写「多少帧一样、差多少毫秒」;配一个能在线交互的落地页。

怎么获客:发在自己的 X,视频里用 Stripe、Vercel、Apple 这类人人认得的产品;接着找 DataChaz、rammcodes 这类每天分享 AI 工具的号,他们需要现成的视频素材,波峰就是他们搬出来的。同步交到 skills.sh 和各家技能目录,补长尾。HN 和 Product Hunt 这一次都没起作用。

死线:技能生态正在被刷满,同一个点子往往一周内就有人跟(replica 是 reanimate 爆了第 3 天建的)。动手的话,三个月内为宜(估)。

算看错:① 接下来一个月里,换了平台的「复刻 + 验证」技能(移动端、跨框架)都拿不到几百颗 star——说明 reanimate 靠的是那几段演示视频和一次性的搬运,不是「验证闭环」这个打法;② Claude Code 或其他 agent 自己内置了录屏比对和迭代,这一类技能的差异化就没了;③ 反过来,replica 这种「整套 UI + 打分」的跟进者冲过 1000 颗,说明这条路比想的宽,还能往更大的任务上搬。

数据与出处

• GitHub:NiazMorshed2007/reanimate 的 README 与落地页 reanimate.niazmorshed.dev(11-06);逐日 star / fork(10-31 起每天记录,到 11-06)。
• X:作者 10-30 发布帖(13.19 万浏览,回复区 @rennesis 的 ffmpeg 质疑);@DataChaz 10-31 推文(8,791 浏览)。
• LinkedIn:Ram Maheshwari 帖子(468 个反应、13 条评论)。
• Reddit:r/claudeskills 合集帖(原文未能打开,内容来自搜索结果)。Instagram、Facebook、Threads 的搬运视频播放量未核实。
• 竞品 star 数来自 GitHub(11-06 前后)。