🌟 Why ReactBits?

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

$3

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

$3

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

$3

- 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

$3

- 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

``bash

npm

npm install @appletosolutions/reactbits

yarn

yarn add @appletosolutions/reactbits

pnpm

pnpm add @appletosolutions/reactbits
`

$3

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

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

$3

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

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

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

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

TypeScript Errors: Ensure you have the correct type definitions:

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

Framework-Specific Issues:

- Next.js: Add to next.config.js:
`js
module.exports = {
transpilePackages: ['@appletosolutions/reactbits']
}
`

- Vite: Add to vite.config.ts:
`js
export default defineConfig({
optimizeDeps: {
include: ['@appletosolutions/reactbits']
}
})
`

🚀 Quick Start

Get up and running in 30 seconds:

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

function App() {
return (

{/ Bounce animation on mount /}

Welcome to ReactBits! 🎉

{/ Interactive click effects /}


Click for sparks! ✨



{/ Animated border effects /}

Premium Feature ⭐

);
}
`

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

🧩 Component Categories

📝 Text Animations (20+ components)

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







✨ Interactive Effects (15+ components)

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







🎨 Background Effects (20+ components)

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







🏗️ Layout Components (15+ components)

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







🌐 3D Components (10+ components)

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

$3

`jsx
// Bounce effect on page load

Welcome! 👋

// Fade in with blur effect




// Scroll-triggered slide animation

Slides up when scrolled into view

`

$3

`jsx
// Click sparks with custom colors


Click me for fireworks! 🎆



// Animated star border

⭐ Premium Feature

// Magnetic hover effect

Hover to see magnetic attraction

`

$3

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

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

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

$3

`jsx
// Multi-layered landing page

ReactBits Animation Library

80+ components for stunning React animations

Get Started Now

`

$3

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

// Flying posters gallery
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

$3

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

$3

- 🛍️ 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:

`jsx
// Use with any CSS framework

Tailwind Button


// Or with CSS-in-JS
style={{ borderRadius: '12px' }}
color="#ff6b6b"
>

Custom Styled

`

$3

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

$3

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

$3

Found a bug? Open an issue with:
- Clear description
- Reproduction steps
- Expected vs actual behavior
- Environment details

$3

Have an idea? Start a discussion to:
- Describe your use case
- Explain the proposed solution
- Discuss implementation details

$3

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

$3

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: hello@appletosolutions.com
- 🐦 Twitter: @AppletoSolutions
- 💼 LinkedIn: Appleto Solutions

$3

If ReactBits helps your project, consider:

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

📄 License

MIT © Appleto Solutions

---