A comprehensive collection of beautiful, performant React animation components including bounce effects, click sparks, star borders, scroll-triggered animations, and fade transitions.
npm install @appletosolutions/reactbitsbash
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 /}
{/ 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
// 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
`
$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
// 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`)