react-bits：把 168 个 React 动画组件直接粘贴进项目

react-bits：把 168 个 React 动画组件直接粘贴进项目

【免费下载链接】react-bitsAn open source collection of animated, interactive & fully customizable React components for building memorable websites.项目地址: https://gitcode.com/GitHub_Trending/rea/react-bits

react-bits 是一个开源的动画 React 组件合集，一共 168 个组件，而且不用当依赖装——复制源码或跑一条命令就能进你的项目。从渐变标题、故障风文字到 WebGL 背景，拿来即用，代码完全归你改。

为什么不装，而是"复制走"

多数动画库的流程是：先npm install，再把你的界面套进它的 API。react-bits 反过来——它直接给你完整源码，粘贴进项目后就是你自己的：颜色、缓动曲线、渲染方式想怎么改就怎么改，不存在"这个库不支持这种写法"。

两种拿代码的方式：

• 手动：打开任一组件的 Code 标签页，源码直接展示，连该装哪些依赖都列好了
• CLI：用 shadcn 或 jsrepo 一条命令把组件拉进项目

每个组件的源码都能在 组件源码目录 里翻到，想看实现细节很方便。

168 个动画组件能干什么

168 个组件分四类，且每个都有 JS/CSS、JS/Tailwind、TS/CSS、TS/Tailwind 四个版本，团队用什么技术栈都能对上：

• 38 个交互动画：光标拖尾、磁吸跟随、点击火花、波纹扭曲
• 32 个文字动画：逐字拆分入场、乱码解密、3D 深度、随滚动速度变形
• 54 个背景效果：极光、星系、CRT 老电视扭曲、粒子星野
• 44 个交互组件：弹跳卡片、3D 倾斜卡、带景深的轮播、毛玻璃图标

一条命令装进你的项目

用 shadcn CLI 的话，一行搞定：

npx shadcn@latest add @react-bits/SplitText-JS-CSS

组件名和结尾的版本后缀（JS/TS × CSS/TW）换成你要的就行。不想用 CLI 就直接去官网复制源码，效果一样。

适合谁，有什么要注意的

适合这三类人：

• 做个人站、落地页的：塞个文字动画加背景，页面立刻不"素"了
• 做演示、答辩、作品集的：3D 卡片、粒子标题比纯文字有记忆点
• TS 和 Tailwind 用户：四个版本直接选对应的，零适配成本

两个提醒：粒子星野、流体金属这类重度 canvas/WebGL 组件，在低配设备上会吃帧率，上线前在自己目标设备上跑一下；另外因为是复制使用，以后想升级组件得手动同步代码，不像依赖那样npm update一下就好。

react-bits 属于那种打开就想往下翻、用一次就存进书签的工具箱。下次做页面卡壳时，别先搜"React 动画"教程了——挑一个复制过去，30 秒就能看到效果。

【免费下载链接】react-bitsAn open source collection of animated, interactive & fully customizable React components for building memorable websites.项目地址: https://gitcode.com/GitHub_Trending/rea/react-bits