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<"div"> {
  customProp?: string
  className?: string
}

export function MagicComponent({ className, customProp, ...props }: ComponentProps) {
  return (
    <motion.div
      className={cn("base-styles", className)}
      {...props}
    >
      {/* Component content */}
    </motion.div>
  )
}

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)

Common Patterns

1. Magic UI: Animated Background 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 (
    <div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border">
      <GridPattern
        squares={[[4, 4], [5, 1], [8, 2], [5, 3], [10, 10], [12, 15]]}
        className={cn(
          "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
          "fill-gray-400/30 stroke-gray-400/30"
        )}
      />
      <AnimatedGridPattern
        numSquares={50}
        maxOpacity={0.5}
        duration={4}
        repeatDelay={0.5}
        className={cn(
          "[mask-image:radial-gradient(500px_circle_at_center,white,transparent)]",
          "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12"
        )}
      />
      <h1 className="relative z-10 text-6xl font-bold">Your Content Here</h1>
    </div>
  )
}

2. React Bits: Text Reveal Animations

import BlurText from './components/BlurText'

export default function MarketingSection() {
  return (
    <section className="py-20">
      <BlurText
        text="Transform your ideas into reality"
        delay={100}
        animateBy="words"
        direction="top"
        className="text-5xl font-bold text-center mb-8"
      />
      <BlurText
        text="Pixel-perfect animations at your fingertips"
        delay={50}
        animateBy="characters"
        direction="bottom"
        threshold={0.3}
        stepDuration={0.4}
        animationFrom={{ filter: 'blur(20px)', opacity: 0, y: 50 }}
        animationTo={{ filter: 'blur(0px)', opacity: 1, y: 0 }}
        className="text-2xl text-gray-600 text-center"
      />
    </section>
  )
}

3. Magic UI: Marquee Component

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

export default function Testimonials() {
  return (
    <section className="py-20">
      <Marquee pauseOnHover className="[--duration:40s]">
        {testimonials.map((item, idx) => (
          <div key={idx} className="mx-4 w-[350px] rounded-lg border p-6">
            <p className="text-lg mb-4">"{item.text}"</p>
            <div className="flex items-center gap-3">
              <img src={item.avatar} alt={item.name} className="w-10 h-10 rounded-full" />
              <p className="font-semibold">{item.name}</p>
            </div>
          </div>
        ))}
      </Marquee>
    </section>
  )
}

4. React Bits: WebGL Background Effects

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

export default function ParticlesHero() {
  return (
    <section style={{ position: 'relative', height: '100vh' }}>
      <Particles
        particleCount={200}
        particleColors={['#FF6B6B', '#4ECDC4', '#45B7D1']}
        particleSpread={10}
        speed={0.12}
        moveParticlesOnHover={true}
        particleHoverFactor={2}
        particleBaseSize={100}
        sizeRandomness={1.2}
        alphaParticles={true}
        cameraDistance={20}
      />
      <div className="relative z-10 flex items-center justify-center h-full">
        <h1 className="text-7xl font-bold text-white">Welcome to the Future</h1>
      </div>
    </section>
  )
}

Common Pitfalls

1. Missing Dependencies

# Magic UI requirements
npm install motion clsx tailwind-merge

# React Bits WebGL components
npm install ogl

2. CSS Animations Not Applied

Add required CSS animations to globals.css:

@theme inline {
  --animate-marquee: marquee var(--duration) linear infinite;
  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
}

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

3. Z-Index Conflicts

<div className="relative">
  <GridPattern className="absolute inset-0 -z-10" />
  <div className="relative z-10">
    <h1>Content appears above pattern</h1>
  </div>
</div>

Resources

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