🌟 Why ReactBits?

ReactBits isn't just another animation library. It's a complete animation ecosystem designed for modern React applications.

⚡ Performance First

• Canvas & WebGL optimized for 60fps animations
• Tree-shakeable - only bundle what you use
• Memory efficient with proper cleanup
• Mobile optimized with touch interactions

🎯 Developer Experience

• Zero configuration - works out of the box
• TypeScript native with full type safety
• Composable - combine animations effortlessly
• Consistent API across all components

🎨 Production Ready

• 80+ components from simple fades to complex 3D effects
• Battle tested in production applications
• Accessible with proper ARIA support
• Framework agnostic - works with Next.js, Vite, CRA

🚀 Unique Features

• 3D Model Viewer with physics and lighting
• Shader-based effects for premium visuals
• Particle systems with WebGL acceleration
• Advanced text animations with character-level control

📦 Installation

# npm
npm install @appletosolutions/reactbits

# yarn
yarn add @appletosolutions/reactbits

# pnpm
pnpm add @appletosolutions/reactbits

Peer Dependencies

ReactBits uses peer dependencies to avoid conflicts and reduce bundle size. Install only what you need:

# 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

⚠️ Troubleshooting

Dependency Resolution Errors: If you encounter "Could not resolve" errors for dependencies like matter-js, @react-three/fiber, etc.:

# 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

Bundle Size Optimization: ReactBits uses peer dependencies to keep your bundle small:

# 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

TypeScript Errors: Ensure you have the correct type definitions:

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

Framework-Specific Issues:

• Next.js: Add to next.config.js:

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

• Vite: Add to vite.config.ts:

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

🚀 Quick Start

Get up and running in 30 seconds:

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

That's it! No configuration, no setup, just beautiful animations.

🧩 Component Categories

🎮 Examples

🎯 Simple Animations

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

⚡ Interactive Effects

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

🎨 Background Effects

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

🏗️ Complex Compositions

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

// 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 Tip: All components are composable! Mix and match to create unique effects.

📖 View Complete Examples →

💡 Showcase

🏆 Built with ReactBits

E-commerce Landing Aurora + ClickSpark + StarBorder	Portfolio Gallery FlyingPosters + ModelViewer
Analytics Dashboard AnimatedList + CountUp + Particles	Gaming Interface GlitchText + Lightning + MetaBalls

🎯 Perfect For

• 🛍️ E-commerce - Product showcases, CTAs, checkout flows
• 💼 SaaS Applications - Onboarding, dashboards, feature highlights
• 🎨 Portfolios - Creative showcases, project galleries
• 📱 Mobile Apps - Touch interactions, micro-animations
• 🎮 Gaming - UI effects, loading screens, achievements
• 📊 Data Visualization - Chart animations, progress indicators

🎨 Styling & Customization

ReactBits components are unstyled by default, giving you complete design freedom:

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

🎨 Framework Compatibility

✅ Tailwind CSS - Perfect integration ✅ Styled Components - Full support ✅ Emotion - Works seamlessly ✅ CSS Modules - Complete compatibility ✅ Vanilla CSS - No restrictions

🚀 Performance

ReactBits is built for production with performance as a top priority:

📊 Benchmarks

• 60fps animations on mobile devices
• <16ms render times for complex effects
• Zero layout thrashing with transform-based animations
• Memory efficient with automatic cleanup

🛠️ Framework Support

🤝 Contributing

We love contributions! Here's how to get started:

🐛 Bug Reports

Found a bug? Open an issue with:

• Clear description
• Reproduction steps
• Expected vs actual behavior
• Environment details

💡 Feature Requests

Have an idea? Start a discussion to:

• Describe your use case
• Explain the proposed solution
• Discuss implementation details

🔧 Development

# 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

📝 Pull Requests

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-animation)
3. Write tests for your changes
4. Ensure all tests pass (npm test)
5. Commit your changes (git commit -m 'Add amazing animation')
6. Push to the branch (git push origin feature/amazing-animation)
7. Open a Pull Request

🏢 About

ReactBits is crafted with ❤️ by Appleto Solutions

• 🌐 Website: appletosolutions.com
• 📧 Contact: [email protected]
• 🐦 Twitter: @AppletoSolutions
• 💼 LinkedIn: Appleto Solutions

🌟 Support the Project

If ReactBits helps your project, consider:

• ⭐ Starring the repository
• 🐦 Sharing on social media
• 💝 Sponsoring development
• 🤝 Contributing code or ideas

📄 License

MIT © Appleto Solutions