Animated Component Libraries

Animated Component Libraries

Overview

This skill provides expertise in pre-built animated React component libraries, specifically Magic UI and React Bits. These libraries offer production-ready, animated components that significantly accelerate development of modern, interactive web applications.

Magic UI provides 150+ TypeScript components built on Tailwind CSS and Framer Motion, designed for seamless integration with shadcn/ui. Components are copy-paste ready and highly customizable.

React Bits offers 90+ animated React components with minimal dependencies, focusing on visual effects, backgrounds, and micro-interactions. Components emphasize performance and ease of customization.

Both libraries follow modern React patterns, support TypeScript, and integrate with popular design systems.

Core Concepts

Magic UI Architecture

Magic UI components are built on three foundational technologies:

1. Tailwind CSS: Utility-first styling with full customization via tailwind.config.js
2. Framer Motion: Physics-based animations and gesture recognition
3. shadcn/ui Integration: Follows shadcn conventions for CLI installation and component structure

Installation Methods:

# Via shadcn CLI (recommended)
npx shadcn@latest add https://magicui.design/r/animated-beam

# Manual installation
# 1. Copy component code to components/ui/
# 2. Install motion: npm install motion
# 3. Add required CSS animations to globals.css
# 4. Ensure cn() utility exists in lib/utils.ts

Component Structure:

// All Magic UI components follow this pattern:
import { cn } from "@/lib/utils"
import { motion } from "motion/react"

interface ComponentProps extends React.ComponentPropsWithoutRef {
  customProp?: string
  className?: string
}

export function MagicComponent({ className, customProp, ...props }: ComponentProps) {
  return (
    
      {/* Component content */}
    
  )
}

React Bits Architecture

React Bits emphasizes lightweight, standalone components with minimal dependencies:

1. Self-Contained: Each component has minimal external dependencies
2. CSS-in-JS Optional: Many components use inline styles or CSS modules
3. Performance-First: Optimized for 60fps animations
4. WebGL Support: Some components (Particles, Plasma) use WebGL for advanced effects

Installation:

# Manual copy-paste (primary method)
# Copy component files from reactbits.dev to your project

# Key dependencies (install as needed):
npm install framer-motion  # For animation-heavy components
npm install ogl           # For WebGL components (Particles, Plasma)

Component Categories:

• Text Animations: BlurText, CircularText, CountUp, SpinningText
• Interactive Elements: MagicButton, Magnet, Dock, Stepper
• Backgrounds: Aurora, Plasma, Particles
• Lists & Layouts: AnimatedList, Bento Grid

Common Patterns

1. Magic UI: Animated Background Patterns

Create dynamic background effects with SVG-based patterns:

import { GridPattern } from "@/components/ui/grid-pattern"
import { AnimatedGridPattern } from "@/components/ui/animated-grid-pattern"
import { cn } from "@/lib/utils"

export default function HeroSection() {
  return (
    
      {/* Static Grid Pattern */}
      

      {/* Animated Interactive Grid */}
      

      
        Your Content Here
      
    
  )
}

2. React Bits: Text Reveal Animations

Implement scroll-triggered text reveals with BlurText:

import BlurText from './components/BlurText'

export default function MarketingSection() {
  return (
    
      {/* Word-by-word reveal */}
      

      {/* Character-by-character reveal with custom easing */}
      
    
  )
}

3. Magic UI: Button Components with Effects

Create interactive buttons with shimmer and border beam effects:

import { ShimmerButton } from "@/components/ui/shimmer-button"
import { BorderBeam } from "@/components/ui/border-beam"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

export default function CTASection() {
  return (
    
      {/* Shimmer Button */}
      
        Get Started
      

      {/* Card with Animated Border */}
      
        
          Premium Plan
          Unlock all features
          Subscribe
        
        
      
    
  )
}

4. React Bits: Interactive Dock Navigation

Implement macOS-style dock with magnification effects:

import Dock from './components/Dock'
import { VscHome, VscArchive, VscAccount, VscSettingsGear } from 'react-icons/vsc'
import { useNavigate } from 'react-router-dom'

export default function AppNavigation() {
  const navigate = useNavigate()

  const dockItems = [
    {
      icon: ,
      label: 'Dashboard',
      onClick: () => navigate('/dashboard')
    },
    {
      icon: ,
      label: 'Projects',
      onClick: () => navigate('/projects')
    },
    {
      icon: ,
      label: 'Profile',
      onClick: () => navigate('/profile')
    },
    {
      icon: ,
      label: 'Settings',
      onClick: () => navigate('/settings')
    }
  ]

  return (
    
      
    
  )
}

5. React Bits: Animated Statistics with CountUp

Display animated numbers for dashboards and landing pages:

import CountUp from './components/CountUp'

export default function Statistics() {
  return (
    
      {/* Revenue Counter */}
      
        
        Revenue Generated
      

      {/* Uptime Percentage */}
      
        
        Uptime
      

      {/* Customer Count */}
      
        
        Happy Customers
      
    
  )
}

6. Magic UI: Marquee Component for Infinite Scroll

Create infinite scrolling content displays:

import { Marquee } from "@/components/ui/marquee"

const testimonials = [
  { name: "John Doe", text: "Amazing product!", avatar: "/avatar1.jpg" },
  { name: "Jane Smith", text: "Exceeded expectations", avatar: "/avatar2.jpg" },
  { name: "Bob Johnson", text: "Highly recommend", avatar: "/avatar3.jpg" }
]

export default function Testimonials() {
  return (
    
      
        What Our Customers Say
      

      {/* Horizontal Marquee */}
      
        {testimonials.map((item, idx) => (
          
            "{item.text}"
            
              
              {item.name}
            
          
        ))}
      

      {/* Vertical Marquee */}
      
        {testimonials.map((item, idx) => (
          
            {item.text}
          
        ))}
      
    
  )
}

7. React Bits: WebGL Background Effects

Add high-performance animated backgrounds:

import Particles from './components/Particles'
import Plasma from './components/Plasma'
import Aurora from './components/Aurora'

// Particles Effect
export default function ParticlesHero() {
  return (
    
      
      
        
          Welcome to the Future
        
      
    
  )
}

// Plasma Effect
export default function PlasmaBackground() {
  return (
    
      
      
        Content with Plasma Background
      
    
  )
}

// Aurora Effect
export default function AuroraHero() {
  return (
    
      
      
        Cyberpunk Aurora Effect
      
    
  )
}

Integration Patterns

Integration with shadcn/ui

Magic UI components are designed to work seamlessly with shadcn/ui:

# Install shadcn/ui component
npx shadcn@latest add button card

# Install Magic UI component
npx shadcn@latest add https://magicui.design/r/shimmer-button

# Use together in components
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { ShimmerButton } from "@/components/ui/shimmer-button"
import { BorderBeam } from "@/components/ui/border-beam"

Utility Function Required (lib/utils.ts):

import clsx, { ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Integration with Framer Motion

Both libraries leverage Framer Motion for animations:

import { motion } from "framer-motion"
import { Magnet } from './components/Magnet'

// Combine React Bits Magnet with Framer Motion gestures
export default function InteractiveCard() {
  return (
    
      
        Interactive Card
        Combines magnetic pull with scale animation
      
    
  )
}

Integration with React Router

Combine animated components with routing:

import { AnimatePresence, motion } from "framer-motion"
import { useLocation, Routes, Route } from "react-router-dom"
import { Dock } from './components/Dock'

export default function App() {
  const location = useLocation()

  return (
    <>
      {/* Animated Page Transitions */}
      
        
          
              
            
          } />
        
      

      {/* Persistent Dock Navigation */}
      
    
  )
}

Combining Magic UI and React Bits

Leverage strengths of both libraries in a single project:

// Magic UI: Patterns and structural components
import { GridPattern } from "@/components/ui/grid-pattern"
import { BorderBeam } from "@/components/ui/border-beam"
import { Marquee } from "@/components/ui/marquee"

// React Bits: Interactive elements and effects
import BlurText from './components/BlurText'
import CountUp from './components/CountUp'
import Particles from './components/Particles'

export default function LandingPage() {
  return (
    
      {/* Hero with React Bits background + Magic UI pattern */}
      
        
        
        
      

      {/* Stats with React Bits CountUp */}
      
        
      

      {/* Testimonials with Magic UI Marquee */}
      
        
          {/* Testimonial cards */}
        
      
    
  )
}

Performance Optimization

Magic UI Performance Tips

1. Use CSS Masks Instead of Clipping: More performant for large patterns

1. Reduce Animation Complexity: Lower numSquares for AnimatedGridPattern on mobile

const isMobile = window.innerWidth 

1. Lazy Load Components: Use React.lazy for heavy components

const AnimatedGridPattern = React.lazy(() =>
  import("@/components/ui/animated-grid-pattern")
)

React Bits Performance Tips

1. WebGL Components: Reduce particle count on low-end devices

const particleCount = navigator.hardwareConcurrency > 4 ? 300 : 150

1. Disable Animations on Reduced Motion:

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches

1. Optimize Marquee Content: Limit items for better performance

 {/* Instead of default 4 */}
  {items.slice(0, 10)} {/* Limit items */}

1. Use RequestIdleCallback for Non-Critical Animations:

useEffect(() => {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => {
      // Initialize expensive animations
    })
  }
}, [])

Common Pitfalls

1. Missing Dependencies

Problem: Component breaks due to missing motion or utility functions.

Solution: Always install required dependencies and utilities:

# Magic UI requirements
npm install motion clsx tailwind-merge

# React Bits WebGL components
npm install ogl

# Ensure cn() utility exists

// lib/utils.ts
import clsx, { ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

2. CSS Animations Not Applied

Problem: Magic UI animations don't work after manual installation.

Solution: Add required CSS animations to globals.css:

/* app/globals.css */
@theme inline {
  --animate-ripple: ripple var(--duration, 2s) ease calc(var(--i, 0) * 0.2s) infinite;
  --animate-shimmer-slide: shimmer-slide var(--speed) ease-in-out infinite alternate;
  --animate-marquee: marquee var(--duration) linear infinite;
  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
}

@keyframes ripple {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes shimmer-slide {
  to { transform: translate(calc(100cqw - 100%), 0); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--gap))); }
}

@keyframes marquee-vertical {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-100% - var(--gap))); }
}

3. Z-Index Conflicts

Problem: Background patterns or effects cover foreground content.

Solution: Use proper z-index layering:

  {/* Background (z-0 or negative) */}
  

  {/* Content (higher z-index) */}
  
    Content appears above pattern
  

4. Performance Issues with Multiple Animated Components

Problem: Page lags when multiple heavy animations run simultaneously.

Solution: Implement progressive enhancement and conditional rendering:

import { useState, useEffect } from 'react'

export default function OptimizedPage() {
  const [enableHeavyEffects, setEnableHeavyEffects] = useState(false)

  useEffect(() => {
    // Check device capability
    const isHighEnd = navigator.hardwareConcurrency > 4 &&
                     !navigator.userAgent.includes('Mobile')
    setEnableHeavyEffects(isHighEnd)
  }, [])

  return (
    
      {enableHeavyEffects ? (
        
      ) : (
         {/* Lighter alternative */}
      )}

      
        {/* Page content */}
      
    
  )
}

5. TypeScript Type Errors

Problem: TypeScript complains about component props.

Solution: Extend proper base types:

// Magic UI pattern
interface CustomComponentProps extends React.ComponentPropsWithoutRef {
  customProp?: string
  className?: string
}

// React Bits pattern
interface CustomProps extends React.HTMLAttributes {
  customProp?: string
}

6. Tailwind Classes Not Applied

Problem: Custom Tailwind classes in Magic UI components don't work.

Solution: Ensure content paths include component directory:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}", // Include components directory
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Resources

Official Documentation

• Magic UI: https://magicui.design
• React Bits: https://reactbits.dev
• shadcn/ui: https://ui.shadcn.com
• Framer Motion: https://motion.dev

Key Scripts

• scripts/component_importer.py - Import and customize components from both libraries
• scripts/props_generator.py - Generate component prop configurations

References

• references/magic_ui_components.md - Complete Magic UI component catalog with usage examples
• references/react_bits_components.md - React Bits component library reference
• references/customization_guide.md - Prop-based customization patterns for both libraries

Starter Assets

• assets/component_showcase/ - Interactive demo of all components
• assets/examples/ - Landing page sections, dashboard widgets, micro-interactions

Related Skills

• motion-framer: For understanding underlying animation concepts used by both libraries
• gsap-scrolltrigger: Alternative approach for scroll-driven animations
• react-spring-physics: Alternative physics-based animation library
• threejs-webgl: For 3D background effects as alternative to Particles/Plasma

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: freshtechbro
• Source: freshtechbro/claudedesignskills
• License: MIT

Install and usage instructions live in the source repository linked above.