ReactBits 是一個免費開源的動畫化、可交互React組件庫，里面有好多動畫化、能交互而且可以隨便改的 React 組件，能用來做出特別好看的用戶界面。

ReactBits功能特點

• 豐富的動畫組件：ReactBits有110多個動效組件，像文本動畫、按鈕動畫、背景動畫、組件動畫等都有，能滿足很多 UI 場景的需求。

• 高度可定制：每個組件都有不少 props 選項，能輕松調整動畫效果、顏色、速度等參數，滿足不同的設計要求。

• 輕量級：組件依賴的東西少，一般只依賴零個或者一個動畫庫，不會讓項目體積變大，能保證頁面加載速度快。

• 無縫集成：設計出來就能和任何 React 項目輕松整合，不用復雜的配置，直接復制粘貼代碼就能用。

• 多種技術棧支持：ReactBits支持 JavaScript 和 TypeScript，樣式方面支持純 CSS 和 Tailwind CSS，能滿足不同開發者的喜好。

• 開箱即用：不用掌握復雜的動畫庫，直接從ReactBits官網的 Playground 復制代碼，貼到項目里就能運行。

ReactBits組件類別

• 文本動畫 (Text Animations)：比如 Split Text（分割文本）、Blur Text（模糊文本）、Shiny Text（閃亮文本）等。

• 動畫 (Animations)：像 Animated Content（動畫內容）、Fade Content（漸隱內容）、Blob Cursor（墨跡光標）等。

• 組件 (Components)：例如 Stack（堆疊布局）、Dock（?？坎季郑?、Masonry（砌體布局）等。

• 背景 (Backgrounds)：比如 Hyperspeed（超高速）、Squares（方塊）等。

ReactBits使用教程

• 一次性安裝單個組件：通過 CLI 工具 jsrepo 安裝任意組件，很靈活。

• 完整 CLI 設置：初始化項目配置，一次性安裝所有組件。

• 本地運行項目：安裝好后，按照項目說明運行本地開發服務器，看看組件效果。

• 代碼復制與粘貼：直接從官網的 Playground 復制組件代碼，粘貼到項目里就能用。

ReactBits項目技術棧

• 前端框架：React、React Router

• 構建工具：Vite

• 樣式處理：Tailwind CSS、PostCSS

• UI 組件庫：Chakra UI

• 動畫和交互：Framer Motion、GSAP、React Spring

• 3D 圖形處理：Three.js、React Three Fiber、React Three Drei

開源信息

• https://github.com/DavidHDev/react-bits