做官网、做产品落地页，最耗时的从来不是布局，是那些"看起来有点意思"的动效——渐变流动的背景、逐字浮现的标题、鼠标跟随的按钮光斑。自己写要调半天缓动曲线，找库又常常引入一堆用不上的依赖。React Bits 解决的就是这一段。
React Bits 到底是什么
reactbits.dev 上是数十个 React 动画与交互组件，分成几大类：背景（流动渐变、粒子、网格）、文字特效（打字机、逐字入场、扭曲变形）、按钮与卡片交互、以及一些页面级的过渡效果。适配 Tailwind。
关键在交付方式：它不是一个你 npm install 之后 import 组件的库，而是让你把组件源码复制进项目。这一点和 shadcn/ui 的思路一致——代码进了你的仓库，就是你的代码，想改颜色改时长改触发条件，直接改就行，不用等上游发版、不用写一层 wrapper 去 override。
对做官网这类需要"和设计稿完全对上"的场景，这种模式的价值远大于封装度高的库。
怎么用：三步
- 在官网预览里挑中效果，看清它依赖什么（部分组件需要动画运行时库，部分是纯 CSS/Canvas）。
- 把组件文件复制进你的
components/目录，装上它声明的依赖。 - 按需改参数。绝大多数组件的可调项都是明写的 props，速度、颜色、粒子数、触发方式基本都能从外面传。
踩过的坑说两个：一是背景类和粒子类组件通常带 'use client'，在 Next.js App Router 里要注意别把整个 page 拖成客户端组件，包一层单独的客户端子组件更干净；二是这类组件在移动端和低端设备上可能掉帧，全屏粒子背景尤其明显，上线前一定真机看一眼，必要时给 prefers-reduced-motion 做降级。
什么时候别用它
React Bits 是效果库，不是设计系统。它不管你的按钮、表单、弹窗长什么样，不提供一致的 token 体系。所以：
- 做后台系统 / Dashboard：不合适。你要的是 shadcn/ui 那种规整的组件体系，塞一个流光渐变背景进管理后台只会显得廉价。
- 做落地页 / 官网 / 作品集：非常合适。这类页面本来就要靠视觉抓人，且页面数量少，性能预算宽松。
- 需要严格无障碍的项目：谨慎。大量动效对键盘导航和读屏没有帮助，需要你自己补 reduced-motion 处理。
和 Framer Motion、Aceternity UI 比
**Framer Motion（现 Motion）**是底层动画引擎，给你 API 不给你成品。要什么效果自己编排。灵活度最高，但一个像样的文字入场效果也得写几十行。React Bits 更像是"别人已经用引擎编排好的一批成品"。两者不冲突——很多时候是用 React Bits 拿到 80%，再用 Motion 手动改剩下 20%。
Aceternity UI 定位很接近，同样是复制即用、Tailwind 优先的效果组件集。风格上 Aceternity 偏"AI 产品官网"那一套（聚光灯、3D 卡片、网格背景），React Bits 的文字动效和背景种类更丰富一些。真要选，建议直接去两边官网各挑三个想要的效果，谁的现成度高用谁，没必要二选一站队。
实际怎么组合
比较顺手的组合是：shadcn/ui 打底 + React Bits 点缀。前者负责结构性组件的一致性，后者负责首屏、CTA 区块这些需要留下印象的地方。一个落地页用两三个动效就够了，全页面堆满反而分散注意力——这是最常见的滥用。
如果你想省掉"逐个组件复制、逐个装依赖"的过程，组件模板栏目里收了 React Bits 的完整工程源码，通过私有 Git 仓库交付，git clone 下来就是可跑的项目，上游更新后 git pull 就能同步。栏目里还有 Shadcnblocks、Nexty 这类偏工程侧的模板，永久会员 Pro 可以全部免费获取，如果你不止要一个动画库，可以顺手看看。