为什么是反弹?

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

⚡ 业绩第一

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

🎯 开发者经验

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

🎨 生产准备

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

🚀 独特的特性

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

* 安装

# npm
npm install @appletosolutions/reactbits

# yarn
yarn add @appletosolutions/reactbits

# pnpm
pnpm add @appletosolutions/reactbits

同伴依赖关系

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

# 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等 :

# 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

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

# 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

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

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

框架具体问题数字 :

• 下一个.js: 添加到 next.config.js数字 :

  module.exports = {
    transpilePackages: ['@appletosolutions/reactbits']
  }
  

• 维特: 添加到 vite.config.ts数字 :

  export default defineConfig({
    optimizeDeps: {
      include: ['@appletosolutions/reactbits']
    }
  })
  

QQ 快速启动

30秒后起来跑道:

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>
  );
}

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

组件类别

实例

🎯 简单动画

// 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>

⚡ 交互式效果

// 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>

🎨 背景影响

// 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}
/>

🏗️ 复杂组成

// 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 显示大小写

// 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 提示:所有组件都是可堆肥的! 混合并匹配以创造出独特的效果.

📖 查看完整实例 −

显示大小写

🏆 用 ReactBits 构建

电子商务 Aurora + 点击Spark + 星际边界	组合图片库 FlyingPosters + 模型查看器
分析盘 动画列表 + 计数 + 粒子	游戏界面 GliitchText + Lightning + MetaBalls 闪光灯

🎯 完美为

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

• 造型和自定义

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

// 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) - 无限制

绩效

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

📊 基准

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

* 框架支助

捐款

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

🐛 错误报告

找到窃听器了吗? 打开一个问题 改为:

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

💡 特性请求

有主意吗? 开始讨论 改为:

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

🔧 发展

# 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 解决方案

• 🌐 网站数字 : appletosolutions.com (英语)
• 📧 联系人数字 : 你好@appletosolutions.com
• 🐦 微博数字 : @ Appleto 溶解
• 💼 链接数字 : Appleto 解决方案

🌟 支持项目

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

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

许可证

麻省理工学院 Appleto 解决方案