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:

Tailwind CSS: Utility-first styling with full customization via tailwind.config.js
Framer Motion: Physics-based animations and gesture recognition
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:

Self-Contained: Each component has minimal external dependencies
CSS-in-JS Optional: Many components use inline styles or CSS modules
Performance-First: Optimized for 60fps animations
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

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 ( <div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border"> {/* Static Grid Pattern */} <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" )} />

  {/* Animated Interactive Grid */}
  &#x3C;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"
    )}
  />

  &#x3C;h1 className="relative z-10 text-6xl font-bold">
    Your Content Here
  &#x3C;/h1>
&#x3C;/div>

) }

React Bits: Text Reveal Animations

Implement scroll-triggered text reveals with BlurText:

import BlurText from './components/BlurText'

export default function MarketingSection() { return ( <section className="py-20"> {/* Word-by-word reveal */} <BlurText text="Transform your ideas into reality" delay={100} animateBy="words" direction="top" className="text-5xl font-bold text-center mb-8" />

  {/* Character-by-character reveal with custom easing */}
  &#x3C;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"
  />
&#x3C;/section>

) }

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 ( <div className="flex gap-4 items-center"> {/* Shimmer Button */} <ShimmerButton shimmerColor="#ffffff" shimmerSize="0.05em" shimmerDuration="3s" borderRadius="100px" background="rgba(0, 0, 0, 1)" className="px-8 py-3" > Get Started </ShimmerButton>

  {/* Card with Animated Border */}
  &#x3C;Card className="relative w-[350px] overflow-hidden">
    &#x3C;div className="p-6">
      &#x3C;h3 className="text-2xl font-bold">Premium Plan&#x3C;/h3>
      &#x3C;p className="text-gray-600">Unlock all features&#x3C;/p>
      &#x3C;Button className="mt-4">Subscribe&#x3C;/Button>
    &#x3C;/div>
    &#x3C;BorderBeam duration={8} size={100} />
  &#x3C;/Card>
&#x3C;/div>

) }

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: <VscHome size={24} />, label: 'Dashboard', onClick: () => navigate('/dashboard') }, { icon: <VscArchive size={24} />, label: 'Projects', onClick: () => navigate('/projects') }, { icon: <VscAccount size={24} />, label: 'Profile', onClick: () => navigate('/profile') }, { icon: <VscSettingsGear size={24} />, label: 'Settings', onClick: () => navigate('/settings') } ]

return ( <div className="fixed bottom-4 left-1/2 -translate-x-1/2"> <Dock items={dockItems} spring={{ mass: 0.15, stiffness: 200, damping: 15 }} magnification={80} distance={250} panelHeight={70} baseItemSize={55} /> </div> ) }

React Bits: Animated Statistics with CountUp

Display animated numbers for dashboards and landing pages:

import CountUp from './components/CountUp'

export default function Statistics() { return ( <div className="grid grid-cols-1 md:grid-cols-3 gap-8 py-16"> {/* Revenue Counter */} <div className="stat-card text-center"> <CountUp start={0} end={1000000} duration={3} separator="," prefix="$" className="text-6xl font-bold text-blue-600" /> <p className="text-xl text-gray-600 mt-2">Revenue Generated</p> </div>

  {/* Uptime Percentage */}
  &#x3C;div className="stat-card text-center">
    &#x3C;CountUp
      end={99.9}
      duration={2.5}
      decimals={1}
      suffix="%"
      className="text-6xl font-bold text-green-600"
    />
    &#x3C;p className="text-xl text-gray-600 mt-2">Uptime&#x3C;/p>
  &#x3C;/div>

  {/* Customer Count */}
  &#x3C;div className="stat-card text-center">
    &#x3C;CountUp
      end={10000}
      duration={2}
      separator=","
      className="text-6xl font-bold text-purple-600"
    />
    &#x3C;p className="text-xl text-gray-600 mt-2">Happy Customers&#x3C;/p>
  &#x3C;/div>
&#x3C;/div>

) }

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 ( <section className="py-20"> <h2 className="text-4xl font-bold text-center mb-12"> What Our Customers Say </h2>

  {/* Horizontal Marquee */}
  &#x3C;Marquee pauseOnHover className="[--duration:40s]">
    {testimonials.map((item, idx) => (
      &#x3C;div key={idx} className="mx-4 w-[350px] rounded-lg border p-6">
        &#x3C;p className="text-lg mb-4">"{item.text}"&#x3C;/p>
        &#x3C;div className="flex items-center gap-3">
          &#x3C;img src={item.avatar} alt={item.name} className="w-10 h-10 rounded-full" />
          &#x3C;p className="font-semibold">{item.name}&#x3C;/p>
        &#x3C;/div>
      &#x3C;/div>
    ))}
  &#x3C;/Marquee>

  {/* Vertical Marquee */}
  &#x3C;Marquee vertical reverse className="h-[400px] mt-8">
    {testimonials.map((item, idx) => (
      &#x3C;div key={idx} className="my-4 w-full max-w-md rounded-lg border p-6">
        &#x3C;p>{item.text}&#x3C;/p>
      &#x3C;/div>
    ))}
  &#x3C;/Marquee>
&#x3C;/section>

) }

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 ( <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} className="particles-bg" /> <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> ) }

// Plasma Effect export default function PlasmaBackground() { return ( <div className="relative min-h-screen"> <Plasma color1="#FF0080" color2="#7928CA" color3="#00DFD8" speed={0.8} blur={30} className="plasma-bg" /> <div className="relative z-10 p-8"> <h1>Content with Plasma Background</h1> </div> </div> ) }

// Aurora Effect export default function AuroraHero() { return ( <div className="relative min-h-screen"> <Aurora colors={['#FF00FF', '#00FFFF', '#FFFF00']} speed={0.5} blur={80} /> <main className="relative z-10"> <h1>Cyberpunk Aurora Effect</h1> </main> </div> ) }

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 ( <Magnet magnitude={0.4} maxDistance={180}> <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="card p-6 rounded-xl shadow-lg" > <h3>Interactive Card</h3> <p>Combines magnetic pull with scale animation</p> </motion.div> </Magnet> ) }

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 */} <AnimatePresence mode="wait"> <Routes location={location} key={location.pathname}> <Route path="/" element={ <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} > <HomePage /> </motion.div> } /> </Routes> </AnimatePresence>

  {/* Persistent Dock Navigation */}
  &#x3C;Dock items={navItems} />
&#x3C;/>

) }

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 ( <main> {/* Hero with React Bits background + Magic UI pattern */} <section className="relative h-screen"> <Particles particleCount={150} /> <GridPattern squares={[[4,4], [8,2], [12,6]]} className="opacity-30" /> <BlurText text="Next-Generation Platform" className="text-7xl font-bold" /> </section>

  {/* Stats with React Bits CountUp */}
  &#x3C;section>
    &#x3C;CountUp end={10000} suffix="+" />
  &#x3C;/section>

  {/* Testimonials with Magic UI Marquee */}
  &#x3C;section>
    &#x3C;Marquee>
      {/* Testimonial cards */}
    &#x3C;/Marquee>
  &#x3C;/section>
&#x3C;/main>

) }

Performance Optimization

Magic UI Performance Tips

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

Reduce Animation Complexity: Lower numSquares for AnimatedGridPattern on mobile

const isMobile = window.innerWidth < 768 <AnimatedGridPattern numSquares={isMobile ? 20 : 50} duration={isMobile ? 6 : 4} />

Lazy Load Components: Use React.lazy for heavy components

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

React Bits Performance Tips

WebGL Components: Reduce particle count on low-end devices

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

Disable Animations on Reduced Motion:

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

Optimize Marquee Content: Limit items for better performance

<Marquee repeat={2}> {/* Instead of default 4 /} {items.slice(0, 10)} {/ Limit items */} </Marquee>

Use RequestIdleCallback for Non-Critical Animations:

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

Common Pitfalls

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)) }

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))); } }

Z-Index Conflicts

Problem: Background patterns or effects cover foreground content.

Solution: Use proper z-index layering:

<div className="relative"> {/* Background (z-0 or negative) */} <GridPattern className="absolute inset-0 -z-10" />

{/* Content (higher z-index) */} <div className="relative z-10"> <h1>Content appears above pattern</h1> </div> </div>

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 ( <section className="relative"> {enableHeavyEffects ? ( <Particles particleCount={300} /> ) : ( <GridPattern /> {/* Lighter alternative */} )}

  &#x3C;div className="content">
    {/* Page content */}
  &#x3C;/div>
&#x3C;/section>

) }

TypeScript Type Errors

Problem: TypeScript complains about component props.

Solution: Extend proper base types:

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

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

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

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

animated-component-libraries

Safety Notice

Copy this and send it to your AI assistant to learn