React Bits

React Bits 是一个开源的 React 动画组件合集。React Bits 的定位非常纯粹：视觉特效。它提供了一系列精心设计的动效组件，包括文字特效、背景动画、交互式 UI 元素等，帮助开发者以极低的成本，为网站添加令人惊艳的“视觉糖果”（Eye Candy），让网页瞬间从平平无奇变得高端大气。

主要功能

React Bits 目前提供了 110+ 个组件，且还在持续更新中。核心功能板块包括：

• 文字动画 (Text Animations): 提供如模糊揭示 (Blur Text)、分割文本 (Split Text)、波浪文字等多种酷炫的文字进场和展示效果。
• 背景特效 (Backgrounds): 包含粒子效果、网格光束、流体背景、3D 空间等，非常适合用于 Landing Page（落地页）的头图。
• UI 组件 (Components): 带有微交互的卡片、按钮、光标跟随效果、码头栏 (Dock) 等。
• 创意工具 (Creative Tools): 官网还提供在线工具，如 Background Studio（定制背景并导出代码）、Shape Magic（生成异形圆角）等。
• 多变体支持: 这一点非常良心，每个组件都提供 4 种代码变体供选择：
  • JS + CSS
  • JS + Tailwind
  • TS + CSS
  • TS + Tailwind

使用规则

• 版权协议: 采用宽松的 MIT 协议。这意味着你可以免费将其用于个人项目、开源项目甚至商业项目，且无需支付费用（但在代码中保留原作者版权声明是良好的开源礼仪）。
• 下载/使用方式:
  • Copy-Paste（复制粘贴）: 它的核心理念借鉴了 shadcn/ui。你不需要安装一个巨大的 npm 包，而是直接在官网上找到你喜欢的组件，点击“Copy Code”，复制到你的项目中即可。
  • CLI 安装: 支持通过命令行快速添加组件。
    • 使用 shadcn 方式: npx shadcn@latest add @react-bits/组件名
    • 使用 jsrepo 方式: npx jsrepo add @react-bits/组件名