React Bits:211个动效组件源码直接拿走

一个 4.8 万星的前端组件库，打开它的官网，你看不到 npm install——它给你的是一条 CLI 命令，或者干脆让你把源码整个复制走。装完之后，这个库在你的 package.json 里一行都不存在。

它叫 React Bits，作者把定位写得很直白：React Bits is not a dependency（不是一个依赖）。在什么都想做成订阅的年代，这种「把东西给你，然后从你的项目里消失」的做法，值得认真聊一聊。

⏱️ 30 秒速览

📦 React Bits（reactbits.dev）：2024 年 8 月开源，作者 David Haz，目前 48,209 星、211 个组件，JS/TS、纯 CSS 或 Tailwind 任选。

📦 Vue Bits（vue-bits.dev）：2025 年 7 月由同一作者移植，不是第三方套壳，204 个组件，统一 Vue 3 + TypeScript + Tailwind。两边组件数量只差 7 个，基本对齐。

🗂️ 211 个组件按分类数一遍：背景类 58 个（极光、粒子、流体、着色器）、可用零件 46 个（卡片、Dock、画廊）、交互动效 40 个（磁吸、点击火花）、微交互 34 个（按钮、开关、加载器）、文字动效 33 个（逐字浮现、解密、打字机）。背景类占了近三成——大多数人是拿它给落地页第一屏加一层能动的背景。

📌 划重点：两个站点同一作者维护，选 React 还是 Vue 只看你的技术栈，组件体验几乎一致。

官方把设计原则写成四条，逐条读下来，每条都在拒绝一种行业惯例：

🔹 Free For All（代码归你，随便改）——拒绝「封装成黑盒，你只能调参数」；

🔹 Prop-First（用 props 调外观）——拒绝「想改样式就得 fork 或者 hack」；

🔹 Fully Modular（只装你要的那个组件）——拒绝「引一个组件，拖进来一整棵依赖树」；

🔹 Free Choice（React 版）——JS 还是 TS、纯 CSS 还是 Tailwind，你定。Vue 版反过来只给「单一技术栈」，因为 Vue 生态相对统一，干脆省掉选型成本。

📌 划重点：同一个作者、两种策略——React 生态分裂就给你选择，Vue 生态统一就只给一种答案。这个分寸感，比组件本身更值得学。

🌌 Aurora（极光背景）——全站最出名的一个。纯自播放，WebGL 实时渲染的光晕缓慢流动，首页背景首选。

⚽ Ballpit（物理小球）——一堆小球在重力下碰撞堆叠，真实物理模拟，每次画面都不一样。

🫧 Meta Balls（融合液滴）——球体靠近时「粘」成一体，跟着光标聚集。以前得写着色器，现在一个组件搞定。

🔦 Spotlight Card（聚光卡片）——光标划过卡片时，一束聚光灯跟着打亮局部。不靠边框阴影，靠光照。

🃏 Card Swap（换牌卡片堆）——三张卡片依次向前翻，自播放循环，适合放产品特性轮播。

🔢 Count Up（数字滚动）——数字从 0 滚到目标值，进入视口触发一次，数据类落地页几乎人手一个。

✍️ Split Text（逐字浮现）——文字一个字一个字浮出来，挂载时播一次，动效库的入门款。

📌 划重点：官方自己劝你「一页别放超过 2~3 个」——它的定位是点缀，不是骨架。挑 1~2 个放进首屏，是最常见也最稳的用法。

🛠️ 路径一：手动复制。每个组件的 Code 标签页就是完整源码，通常单文件（.vue 或 .tsx），复制进项目就完事。依赖外部库（如 gsap）会在标签页里列出来。

🛠️ 路径二：CLI。它暴露了 shadcn 格式的 registry，用 npx shadcn 直接拉源码进项目。

🤖 路径三：MCP——让 AI 帮你装。这是最值得讲的一条：先在 components.json 里注册它的 registry，再装 shadcn 的 MCP server，之后直接对 AI 说人话：

// components.json 注册 registry{  "registries": {    "@vue-bits": "https://vue-bits.dev/r/{name}.json"  }}// 装 shadcn MCP servernpx shadcn@latest mcp init --client claude

之后可以对 AI 直接说：「把 Vue Bits 的 Dither 背景加到页面上，改成紫色」「用 FadeContent 加一个滚动淡入的新区块」。

📌 划重点：它没有自己造 MCP server，而是把自己注册成 shadcn registry 里的一个源——零维护成本，你也不用多装一个 AI 工具。面对 AI 时代，「挂进现有生态」比「自建一套」聪明得多。

⚖️ React Bits 不是纯 MIT，而是 MIT + Commons Clause v1.0。核心一句话：你可以在任何商业项目里用它，只要不把组件本身拿去出售、再授权或再分发——包括单独打包、做成移植版。

💡 「包括做成移植版」这条是专门加的，挡的正是把别人的组件库换个框架就发布成「XX Bits」的玩法。对写业务、做官网、接外包的普通开发者，这条限制几乎不影响你。

📌 划重点：做模板站、UI 套件、低代码平台、组件市场的朋友注意——你可以用它做产品，但不能把它本身当作产品。

💎 免费版与 Pro 是两套东西：免费版 211 个组件开源；付费的 React Bits Pro 另有 150 个组件（pro.reactbits.dev），多出 3D & Shaders 这一类（30 个）——滚动 3D 画廊、着色器卡片、粒子图像这些更吃性能的效果都划在 Pro。别把 211 和 150 加起来当成「361 个免费组件」。

⚠️ 官方的三条性能忠告（写在文档 Performance 段）：① Less Is More，一页不超过 2~3 个组件；② 移动端考虑关掉某些效果、换静态占位；③「你的设备可能是顶配，但你要对用户客气一点」，上线前多设备测试。

🧩 部分组件有额外依赖：文字类动效普遍依赖 gsap，3D 与着色器类依赖 three，Code 标签页会列出来，装之前心里有数。

🎯 今天就可以做的一件事：如果你已经在用 shadcn 系工具，把它的 registry 加进 components.json，然后对 AI 说一句「给我加一个 Aurora 背景，调成蓝色」。你会亲身体会到「源码归你」和「装了个依赖」的差别——改完不满意，删掉那个文件就干净了。

📌 划重点：在一个习惯把一切都变成依赖和订阅的生态里，「我把东西给你，然后从你的项目里消失」本身就是一种产品主张。两个站点：reactbits.dev（React 版）、vue-bits.dev（Vue 版），仓库在 GitHub 搜 DavidHDev/react-bits 与 DavidHDev/vue-bits。

你的项目里现在引了多少个「只是为了一个效果」的依赖？

评论区聊聊。觉得有用就点个「在看」，转发给正在为落地页发愁的朋友。