# @appletosolutions/reactbits 中文文档

规范地址：https://npmcn.com/package/%40appletosolutions/reactbits/

版本：1\.0\.3
npm 元数据更新时间：2025-06-23T17:20:13.991Z
中文译文更新时间：2026-11-08T06:23:33.834Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40appletosolutions/reactbits
原文对照：https://npmcn.com/package/%40appletosolutions/reactbits/?lang=original
项目主页：https://github.com/appletosolutions/reactbits#readme
源码仓库：https://github.com/appletosolutions/reactbits

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.6 MB，173 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0，@chakra-ui/react ^3\.0\.0，@emotion/react ^11\.0\.0，@emotion/styled ^11\.0\.0，framer-motion ^10\.0\.0 \|\| ^11\.0\.0 \|\| ^12\.0\.0，gsap ^3\.0\.0，three ^0\.150\.0，@react-three/fiber ^8\.0\.0 \|\| ^9\.0\.0，@react-three/drei ^9\.0\.0 \|\| ^10\.0\.0，@react-three/postprocessing ^2\.0\.0 \|\| ^3\.0\.0，@react-three/rapier ^1\.0\.0 \|\| ^2\.0\.0，matter-js ^0\.19\.0 \|\| ^0\.20\.0，postprocessing ^6\.0\.0，meshline ^3\.0\.0，ogl ^1\.0\.0，gl-matrix ^3\.0\.0，three-stdlib ^2\.0\.0，@motionone/types ^10\.0\.0
- 首次发布：2025-06-19T07:55:59.954Z
- 最新版本发布：2025-06-23T17:20:13.819Z
- 近 30 天下载量：1878（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 0 个）

## 中文简介

全面收集了美丽,有表演性的回放动画组件,包括弹出效果,点击花花,星际边框,卷轴相接动画,并淡出过渡.

## 安装

```sh
npm install @appletosolutions/reactbits
```

也可以使用：`pnpm add @appletosolutions/reactbits`、`yarn add @appletosolutions/reactbits`、`bun add @appletosolutions/reactbits`

## README

# QQ 反应比特

**终极回想动画库**

[![npm version](https://img.shields.io/npm/v/@appletosolutions/reactbits?style=for-the-badge&color=blue)](https://www.npmjs.com/package/@appletosolutions/reactbits) [![downloads](https://img.shields.io/npm/dm/@appletosolutions/reactbits?style=for-the-badge&color=green)](https://www.npmjs.com/package/@appletosolutions/reactbits) [![GitHub stars](https://img.shields.io/github/stars/appletosolutions/reactbits?style=for-the-badge&color=yellow)](https://github.com/appletosolutions/reactbits) [![MIT License](https://img.shields.io/github/license/appletosolutions/reactbits?style=for-the-badge&color=orange)](https://npmcn.com/package/%40appletosolutions/reactbits/LICENSE)

**80+ 生产-准备动画组件** 二. 支助 **类型脚本第一** 二. 支助 **0 配置** 二. 支助 **可摇动的树**

用制作过程中实际表现的惊人动画来改造你的回放应用.

[**开始吧**](https://npmcn.com/package/%40appletosolutions/reactbits/#readme--installation) 二. 支助 [**页:1**](https://npmcn.com/package/%40appletosolutions/reactbits/#readme--components) 二. 支助 [**实例**](https://npmcn.com/package/%40appletosolutions/reactbits/#readme--examples) 二. 支助 [**显示大小写**](https://npmcn.com/package/%40appletosolutions/reactbits/#readme--showcase)

## 为什么是反弹?

反应 Bits不仅仅是另一个动画库. 这是一个 **完整的动画生态系统** 为现代反应应用而设计.

### ⚡ **业绩第一**

-   **优化了 Canvas 和 WebGL** 60英尺动画
-   **树能震动** - 只把你用的东西捆起来
-   **内存效率** 适当清理
-   **移动优化** 与触摸互动

### 🎯 **开发者经验**

-   **0 配置** - 从盒子里出来
-   **类型脚本原生** 具有全类型安全性
-   **可编曲** - 将动画无懈可击
-   **一致 API** 所有组成部分

### 🎨 **生产准备**

-   **80+组件** 从简单的淡出到复杂的 三维效果
-   **作战测试** 生产应用
-   **可访问** 在适当支助下
-   **框架不可知论** - 和Next.js、Vite、CRA一起工作

### 🚀 **独特的特性**

-   **三维模型查看器** 有物理和照明
-   **基于阴影的效果** 额外视觉
-   **粒子系统** 带有 WebGL 加速
-   **高级文本动画** 带有字符级控制

## \* 安装

```bash
# npm
npm install @appletosolutions/reactbits

# yarn
yarn add @appletosolutions/reactbits

# pnpm
pnpm add @appletosolutions/reactbits
```

### 同伴依赖关系

反应 比特使用对等依赖来避免冲突并减少捆绑大小. 只安装您需要的 :

```bash
# Required for all components
npm install react react-dom

# For 3D components (ModelViewer, Aurora, etc.)
npm install three @react-three/fiber @react-three/drei

# For GSAP-powered animations (Bounce, ScrollReveal, etc.)
npm install gsap

# For physics-based animations (Ballpit, etc.)
npm install matter-js

# For Chakra UI components (optional)
npm install @chakra-ui/react @emotion/react @emotion/styled

# For Framer Motion components (optional)
npm install framer-motion
```

### \* 解决问题

**依赖性解析出错**: 如果您遇到“ 无法解决” 依赖性错误, 如 `matter-js`, (中文(简体) ), `@react-three/fiber`等 :

```bash
# Install only the peer dependencies you need
npm install three @react-three/fiber @react-three/drei  # For 3D components
npm install matter-js                                   # For physics components
npm install gsap                                        # For GSAP animations

# Use --legacy-peer-deps if needed
npm install @appletosolutions/reactbits --legacy-peer-deps
```

**组合大小优化**: 反应 比特使用对等依赖来保持捆绑的小:

```bash
# Check what's included in your bundle
npm run build -- --analyze  # For Create React App with bundle analyzer

# Only install dependencies for components you use
npm install gsap              # Only if using GSAP-powered components
npm install three             # Only if using 3D components
```

**类型脚本出错**: 确保您有正确的类型定义 :

```bash
npm install --save-dev @types/three @types/matter-js
```

**框架具体问题**数字 :

-   **下一个.js**: 添加到 `next.config.js`数字 :
    
    ```js
    module.exports = {
      transpilePackages: ['@appletosolutions/reactbits']
    }
    ```
    
-   **维特**: 添加到 `vite.config.ts`数字 :
    
    ```js
    export default defineConfig({
      optimizeDeps: {
        include: ['@appletosolutions/reactbits']
      }
    })
    ```
    

## QQ 快速启动

30秒后起来跑道:

```jsx
import { Bounce, ClickSpark, StarBorder } from '@appletosolutions/reactbits';

function App() {
  return (
    <div>
      {/* Bounce animation on mount */}
      <Bounce>
        <h1>Welcome to ReactBits! 🎉</h1>
      </Bounce>

      {/* Interactive click effects */}
      <ClickSpark sparkColor="#ff6b6b" sparkCount={12}>
        <button className="btn-primary">
          Click for sparks! ✨
        </button>
      </ClickSpark>

      {/* Animated border effects */}
      <StarBorder color="#00d4ff" speed="3s">
        <div className="premium-card">
          Premium Feature ⭐
        </div>
      </StarBorder>
    </div>
  );
}
```

**就这样!** 没有配置,没有设置,只是美丽的动画.

## 组件类别

**QQ 文本动画( 20+ 组件)**

完全适合头条、CTA和动态内容:

-   **`SplitText`** - 逐个角色的动画
-   **`BlurText`** - 平稳地向焦点过渡
-   **`GlitchText`** - 赛博朋克式故障效应
-   **`ScrambleText`** - 矩阵式字符摇摆
-   **`ShinyText`** - 金属发光效应
-   **`GradientText`** - 动画梯度文本
-   **`DecryptedText`** - 解密动画效果
-   **`FallingText`** - 基于重力的文字动画
-   **`CountUp`** - 动画数字计数器
-   还有11个...

**互动效应(15+组件)**

让用户参与响应性动画:

-   **`ClickSpark`** - 点击时发生粒子爆炸
-   **`StarBorder`** - 动画明星边界
-   **`GlareHover`** - 金属悬浮效应
-   **`MagnetLines`** - 磁线吸引点
-   **`PixelTrail`** - 鼠标跟随像素效果
-   **`SplashCursor`** - 液体光标相互作用
-   **`BlobCursor`** - 粉碎浮标
-   **`ImageTrail`** - 图像跟踪鼠标线索
-   还有7个...

**++ 背景效应(20+组件)**

以惊人的背景来改变您的布局 :

-   **`Aurora`** - 北灯荫影效应
-   **`Particles`** - WebGL粒子系统
-   **`Lightning`** - 电闪电效应
-   **`Silk`** - 流出丝绸动画
-   **`MetaBalls`** - 液体杂动画
-   **`GridDistortion`** - 摇摆电网效应
-   **`Hyperspeed`** - 明星场动画
-   **`LiquidChrome`** - 金属液体效应
-   还有12个...

**版式组件(15+组件)**

用动画布局增强您的 UI :

-   **`AnimatedList`** - 错开的列表动画
-   **`Carousel`** - 旋转木马平稳过渡
-   **`Stack`** - 纸堆互动
-   **`Dock`** - macOS型码头效应
-   **`InfiniteScroll`** - 平滑地无限地滚动
-   **`ElasticSlider`** - 以物理为基础的滑动器
-   **`FlowingMenu`** - 流体菜单动画
-   **`CircularGallery`** - 三维圆形画廊
-   还有7个...

**3D组件(10+组件)**

专业3D效果由Tree.js提供动力:

-   **`ModelViewer`** - 交互式三维模型显示
-   **`FlyingPosters`** - 三维卷轴画廊
-   **`Ballpit`** - 基于物理的球动画
-   **`Orb`** - 浮出三维球体
-   **`Waves`** - 海洋波模拟
-   **`ChromaGrid`** - 染色体异常网格
-   还有4个...

## 实例

### 🎯 **简单动画**

```jsx
// Bounce effect on page load
<Bounce>
  <h1>Welcome! 👋</h1>
</Bounce>

// Fade in with blur effect
<FadeContent blur={true} duration={1000}>
  <img src="/hero.jpg" alt="Hero" />
</FadeContent>

// Scroll-triggered slide animation
<AnimatedContent direction="vertical" distance={100}>
  <div>Slides up when scrolled into view</div>
</AnimatedContent>
```

### ⚡ **交互式效果**

```jsx
// Click sparks with custom colors
<ClickSpark sparkColor="#ff6b6b" sparkCount={15} sparkRadius={30}>
  <button className="cta-button">
    Click me for fireworks! 🎆
  </button>
</ClickSpark>

// Animated star border
<StarBorder color="#ffd700" speed="2s">
  <div className="premium-badge">
    ⭐ Premium Feature
  </div>
</StarBorder>

// Magnetic hover effect
<Magnet strength={0.3} range={100}>
  <div className="magnetic-card">
    Hover to see magnetic attraction
  </div>
</Magnet>
```

### 🎨 **背景影响**

```jsx
// Aurora background with custom colors
<Aurora
  colorStops={["#ff6b6b", "#4ecdc4", "#45b7d1"]}
  amplitude={1.2}
  speed={0.8}
/>

// Particle system background
<Particles
  particleCount={150}
  particleColors={["#ff6b6b", "#4ecdc4"]}
  moveParticlesOnHover={true}
/>

// Animated grid distortion
<GridDistortion
  gridSize={20}
  distortionStrength={0.5}
  animationSpeed={1.0}
/>
```

### 🏗️ **复杂组成**

```jsx
// Multi-layered landing page
<div className="hero-section">
  <Aurora colorStops={["#667eea", "#764ba2"]} />

  <FadeContent blur={true} duration={1200}>
    <Bounce delay={500}>
      <h1>ReactBits Animation Library</h1>
    </Bounce>

    <AnimatedContent direction="vertical" delay={800}>
      <p>80+ components for stunning React animations</p>

      <ClickSpark sparkColor="#ffd700" sparkCount={20}>
        <StarBorder color="#00d4ff">
          <button>Get Started Now</button>
        </StarBorder>
      </ClickSpark>
    </AnimatedContent>
  </FadeContent>
</div>
```

### 🌐 **3D 显示大小写**

```jsx
// Interactive 3D model viewer
<ModelViewer
  url="/models/product.glb"
  width={600}
  height={400}
  autoRotate={true}
  enableMouseParallax={true}
/>

// Flying posters gallery
<FlyingPosters
  items={[
    { image: "/poster1.jpg", title: "Project 1" },
    { image: "/poster2.jpg", title: "Project 2" },
    { image: "/poster3.jpg", title: "Project 3" }
  ]}
  distortion={2.5}
/>
```

> 💡 **Pro 提示**:所有组件都是可堆肥的! 混合并匹配以创造出独特的效果.

📖 **[查看完整实例 −](https://npmcn.com/package/%40appletosolutions/reactbits/examples.md)**

## 显示大小写

### 🏆 **用 ReactBits 构建**

<table><tbody><tr><td align="center"><img alt="E-commerce" src="https://via.placeholder.com/300x200/667eea/ffffff?text=E-commerce+Hero" width="300" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><strong>电子商务</strong><br><em>Aurora + 点击Spark + 星际边界</em></td><td align="center"><img alt="Portfolio" src="https://via.placeholder.com/300x200/764ba2/ffffff?text=Portfolio+Gallery" width="300" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><strong>组合图片库</strong><br><em>FlyingPosters + 模型查看器</em></td></tr><tr><td align="center"><img alt="Dashboard" src="https://via.placeholder.com/300x200/ff6b6b/ffffff?text=Dashboard+UI" width="300" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><strong>分析盘</strong><br><em>动画列表 + 计数 + 粒子</em></td><td align="center"><img alt="Gaming" src="https://via.placeholder.com/300x200/4ecdc4/ffffff?text=Gaming+Interface" width="300" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><strong>游戏界面</strong><br><em>GliitchText + Lightning + MetaBalls 闪光灯</em></td></tr></tbody></table>

### 🎯 **完美为**

-   **电子商务** - 产品展示、CTA、检查流程
-   **QQ SaaS 应用程序** - 登机、仪表板、特征突出
-   **组合** - 创意展示、项目画廊
-   **QQ 移动应用程序** - 触摸相互作用、微动能
-   **游戏** - UI效应、加载屏幕、成就
-   **数据可视化** - 图表动画、进度指标

## • 造型和自定义

反应 位元组件为 **默认取消样式**,给予你完整的设计自由:

```jsx
// Use with any CSS framework
<ClickSpark className="my-custom-button">
  <button className="btn btn-primary">Tailwind Button</button>
</ClickSpark>

// Or with CSS-in-JS
<StarBorder
  style={{ borderRadius: '12px' }}
  color="#ff6b6b"
>
  <div className="styled-component">Custom Styled</div>
</StarBorder>
```

### 🎨 **框架兼容性**

✅ **尾风 CSS** - 完美的融合 ✅ **样式组件** - 全力支持 ✅ **情感** - 工作无缝 ✅ **CSS 模块** - 完全兼容 ✅ **香草CSS( 香草CSS)** - 无限制

## 绩效

反应 以性能为最高优先的生产量构建比特:

| 度量衡 | 反应 | 帧器运动 | 弹簧 |
| --- | --- | --- | --- |
| **套装大小** | 50KB(核心) | 180千贝 | 120千贝 |
| **树摇** | 满分 | \* 部分内容 | \* 部分内容 |
| **WebGL 支持** | 对 | 没有 | 没有 |
| **3D 组件** | ++ 10+ 时间 | 没有 | 没有 |
| **彩绘动画** | 对 | 没有 | 没有 |

### 📊 **基准**

-   **60小时** 移动设备上的动画
-   **< 16 分钟** 产生复杂效应的时间
-   **零布局被打乱** 带有基于变换的动画
-   **内存效率** 自动清理

## \* 框架支助

| 框架 | 支助 | 页:1 |
| --- | --- | --- |
| **下一个.js** | 满分 | SSR 兼容 |
| **维特** | 满分 | 优化建筑 |
| **创建反应应用** | 满分 | 零配置 |
| **重混合** | 满分 | SSR 兼容 |
| **盖茨比** | 满分 | 静态生成 |

## 捐款

我们爱贡献! 下面是怎样开始:

### 🐛 **错误报告**

找到窃听器了吗? [打开一个问题](https://github.com/appletosolutions/reactbits/issues) 改为:

-   清晰描述
-   复制步骤
-   预期与实际行为
-   环境细节

### 💡 **特性请求**

有主意吗? [开始讨论](https://github.com/appletosolutions/reactbits/discussions) 改为:

-   描述您的使用案例
-   解释拟议解决办法
-   讨论执行细节

### 🔧 **发展**

```bash
# Clone the repository
git clone https://github.com/appletosolutions/reactbits.git

# Install dependencies
npm install

# Start development
npm run dev

# Run tests
npm test

# Build library
npm run build
```

### 📝 **调取请求**

1.  叉子存储器
2.  创建您的特性分支( E)`git checkout -b feature/amazing-animation`(中文(简体) )
3.  为您的更改撰写测试
4.  确保所有测试合格(`npm test`(中文(简体) )
5.  提交更改( E)`git commit -m 'Add amazing animation'`(中文(简体) )
6.  推向分行(`git push origin feature/amazing-animation`(中文(简体) )
7.  打开拉请求

## 关于

**反应** 由 qq 设计 [**Appleto 解决方案**](https://appletosolutions.com/)

-   🌐 **网站**数字 : [appletosolutions.com (英语)](https://appletosolutions.com/)
-   📧 **联系人**数字 : [你好@appletosolutions.com](mailto:hello@appletosolutions.com)
-   🐦 **微博**数字 : [@ Appleto 溶解](https://twitter.com/AppletoSolutions)
-   💼 **链接**数字 : [Appleto 解决方案](https://linkedin.com/company/appletosolutions)

### 🌟 **支持项目**

如果反应 比特帮助您的项目, 考虑:

-   ⭐ **导演** 存储器
-   🐦 **共享** 关于社交媒体
-   💝 **赞助** 发展
-   🤝 **捐款** 代码或想法

## 许可证

麻省理工学院 [Appleto 解决方案](https://appletosolutions.com/)

* * *

**与 QQ 为 React 社区制作**

[GitHub 上的"星"("星")](https://github.com/appletosolutions/reactbits) 二. 支助 [关于国家预防机制的意见](https://www.npmjs.com/package/@appletosolutions/reactbits) 二. 支助 [页:1](https://npmcn.com/package/%40appletosolutions/reactbits/examples.md)

## 常见问题

### @appletosolutions/reactbits 是什么？

全面收集了美丽,有表演性的回放动画组件,包括弹出效果,点击花花,星际边框,卷轴相接动画,并淡出过渡\.

### 如何安装 @appletosolutions/reactbits？

在项目目录运行 npm install @appletosolutions/reactbits，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @appletosolutions/reactbits 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @appletosolutions/reactbits 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @appletosolutions/reactbits 可以商用吗？

@appletosolutions/reactbits 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @appletosolutions/reactbits 的下载量有多少？

根据 npm 官方下载统计，@appletosolutions/reactbits 在 2026/10/07 – 2026/11/05 这 30 天内被下载 1,878 次，日均约 63 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @appletosolutions/reactbits 还在维护吗？

最新版本 1\.0\.3 发布于 2025/06/24（1\.4 年前）；至今共发布 4 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/06/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。