@appletosolutions/reactbits

v1.0.3

Published

6 months ago

A comprehensive collection of beautiful, performant React animation components including bounce effects, click sparks, star borders, scroll-triggered animations, and fade transitions.

🎨 ReactBits

The Ultimate React Animation Library

80+ Production-Ready Animation Components • TypeScript First • Zero Config • Tree Shakeable

Transform your React apps with stunning animations that actually perform in production.

🚀 Get Started • 📖 Documentation • 🎮 Examples • 💡 Showcase

🌟 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

Perfect for headlines, CTAs, and dynamic content:

SplitText - Character-by-character animations
BlurText - Smooth blur-to-focus transitions
GlitchText - Cyberpunk-style glitch effects
ScrambleText - Matrix-style character scrambling
ShinyText - Metallic shine effects
GradientText - Animated gradient text
DecryptedText - Decryption animation effect
FallingText - Gravity-based text animations
CountUp - Animated number counters
And 11 more...

Engage users with responsive animations:

ClickSpark - Particle explosions on click
StarBorder - Animated star borders
GlareHover - Metallic hover effects
MagnetLines - Magnetic line attractions
PixelTrail - Mouse-following pixel effects
SplashCursor - Liquid cursor interactions
BlobCursor - Morphing blob cursor
ImageTrail - Image-following mouse trails
And 7 more...

Transform your layouts with stunning backgrounds:

Aurora - Northern lights shader effect
Particles - WebGL particle systems
Lightning - Electric lightning effects
Silk - Flowing silk animations
MetaBalls - Liquid blob animations
GridDistortion - Warping grid effects
Hyperspeed - Star field animations
LiquidChrome - Metallic liquid effects
And 12 more...

Enhance your UI with animated layouts:

AnimatedList - Staggered list animations
Carousel - Smooth carousel transitions
Stack - Card stack interactions
Dock - macOS-style dock effects
InfiniteScroll - Smooth infinite scrolling
ElasticSlider - Physics-based sliders
FlowingMenu - Fluid menu animations
CircularGallery - 3D circular galleries
And 7 more...

Professional 3D effects powered by Three.js:

ModelViewer - Interactive 3D model display
FlyingPosters - 3D scrolling galleries
Ballpit - Physics-based ball animations
Orb - Floating 3D orbs
Waves - Ocean wave simulations
ChromaGrid - Chromatic aberration grids
And 4 more...

🎮 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

🎯 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:

| Metric | ReactBits | Framer Motion | React Spring | |--------|-----------|---------------|--------------| | Bundle Size | 50KB (core) | 180KB | 120KB | | Tree Shaking | ✅ Full | ⚠️ Partial | ⚠️ Partial | | WebGL Support | ✅ Yes | ❌ No | ❌ No | | 3D Components | ✅ 10+ | ❌ No | ❌ No | | Canvas Animations | ✅ Yes | ❌ No | ❌ No |

📊 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

| Framework | Support | Notes | |-----------|---------|-------| | Next.js | ✅ Full | SSR compatible | | Vite | ✅ Full | Optimized builds | | Create React App | ✅ Full | Zero config | | Remix | ✅ Full | SSR compatible | | Gatsby | ✅ Full | Static generation |

🤝 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

Fork the repository
Create your feature branch (git checkout -b feature/amazing-animation)
Write tests for your changes
Ensure all tests pass (npm test)
Commit your changes (git commit -m 'Add amazing animation')
Push to the branch (git push origin feature/amazing-animation)
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

Made with ❤️ for the React community

⭐ Star on GitHub • 📦 View on NPM • 📖 Documentation