当前位置：网站首页 > 技术文章 > 正文

8.3K star!React Bits，让你拥有全网几乎所有动画效果

myzbx 2025-03-23 21:44 11 浏览

前端开源项目101专栏：一个能让你更快接触到高质量开源项目的地方。我会探索分享精选 101个高质量的开源项目。这是系列的第7篇文章，分享一套拥有计划全网所有动画效果，且创意最丰富的动画 React 组件库。

无论建立个人网站还是官网，用于炫酷的动画会让人眼前一亮。你说你没有动画创意？这不，小前搜罗到一套开源的动态交互式且完全可定制的 React 组件集合，组件库数量丰富，创意满满。（文末附网站地址）

使用体验

React Bits 是一个大型的动画 React 组件集合，包含动画、组件、背景，动画创意满满，开源免费使用！这些组件都通过 props 提供了自定义选项，可以轻松定制。

文字类型的动画特效有 18余种，比如文字模糊渐现、发光文字、文字聚集失焦、渐变文本、计数上升文本等等。下图展示其中文字聚焦失焦动画效果：

网站同时提供组件引入方式，支持代码、和命令行两种方式引入。以文字聚焦失焦动画为例，代码引入方式中，需要安装一个动画npm包。

React 组件 jsx 代码和样式可以直接复制粘贴，支持JS、TS两种模式，样式支持纯CSS和Tailwindcss 实现。

除了文字动画外，还有炫酷的 3D 组件动画、背景动画，对CSS动画感兴趣的快去试试吧！

列下我使用过程中体验到的亮点：

1、总计60 多个动画组件，包括文本动画、动画、组件、背景，还在持续更新

2、所有组件都很轻量级，且高度可定制

3、支持 React 项目无缝集成

4、每个组件都支持4种组合：JS + CSS、JS + Tailwind CSS、TS + CSS、TS + Tailwind CSS

项目技术栈涉及React、Chakra UI、Framer Motion、Three.js 等：

1、前端框架：React、React Router

2、构建工具：Vite

3、样式处理：Tailwind CSS、PostCSS

4、UI组件库：Chakra UI

5、动画和交互：Framer Motion 用于实现复杂的动画效果，GSAP 用于高性能的动画和时间线控制，React Spring 用于实现物理基础的动画

6、3D 图形处理：Three.js 用于创建和显示 3D 图形；React Three Fiber，React 的 Three.js 渲染器，简化 3D 图形的使用；React Three Drei，提供常用的 Three.js 组件和工具。

开源地址：
https://github.com/DavidHDev/react-bits

在线体验网址：
https://www.reactbits.dev/text-animations/split-text

另外，项目支持贡献，贡献指南：
https://github.com/DavidHDev/react-bits/blob/main/CONTRIBUTING.md

PS：前端开源项目101专栏，我会探索分享精选 101个高质量的开源项目。欢迎投稿

PS-1：本文是前端开源项目101项目，介绍了React Bits，一套开源的动态交互式且完全可定制的 React 组件集合，让你拥有全网几乎所有动画效果，方便快速制作创意网站模板，对于学习CSS 动画、3D动画，也是一个很好的创意灵感库。