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

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 (
    <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 */}
      <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

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 */}
      <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: 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 */}
      <Card className="relative w-[350px] overflow-hidden">
        <div className="p-6">
          <h3 className="text-2xl font-bold">Premium Plan</h3>
          <p className="text-gray-600">Unlock all features</p>
          <Button className="mt-4">Subscribe</Button>
        </div>
        <BorderBeam duration={8} size={100} />
      </Card>
    </div>
  )
}

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

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 (
    <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 */}
      <div className="stat-card text-center">
        <CountUp
          end={99.9}
          duration={2.5}
          decimals={1}
          suffix="%"
          className="text-6xl font-bold text-green-600"
        />
        <p className="text-xl text-gray-600 mt-2">Uptime</p>
      </div>

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

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

      {/* Horizontal Marquee */}
      <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>

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

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 (
    <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 */}
      <Dock items={navItems} />
    </>
  )
}

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 */}
      <section>
        <CountUp end={10000} suffix="+" />
      </section>

      {/* Testimonials with Magic UI Marquee */}
      <section>
        <Marquee>
          {/* Testimonial cards */}
        </Marquee>
      </section>
    </main>
  )
}

Performance Optimization

Magic UI Performance Tips

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

<GridPattern
  className="[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]"
/>

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

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

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

<Particles
  particleCount={particleCount}
  speed={0.1}
/>

2. Disable Animations on Reduced Motion:

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

<BlurText
  text="Accessible text"
  delay={prefersReducedMotion ? 0 : 100}
  animateBy={prefersReducedMotion ? "none" : "words"}
/>

3. Optimize Marquee Content: Limit items for better performance

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

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

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

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

      <div className="content">
        {/* Page content */}
      </div>
    </section>
  )
}

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

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

Animated Component Libraries - Assets

This directory contains starter templates and example code for Magic UI and React Bits components.

Quick Start Templates

Magic UI + shadcn/ui Starter

Create a new Next.js project with Magic UI components:

# Create Next.js app with TypeScript and Tailwind
npx create-next-app@latest my-magic-ui-app --typescript --tailwind --app

cd my-magic-ui-app

# Install dependencies
npm install motion clsx tailwind-merge

# Install shadcn/ui
npx shadcn@latest init

# Add Magic UI components
npx shadcn@latest add https://magicui.design/r/grid-pattern
npx shadcn@latest add https://magicui.design/r/shimmer-button
npx shadcn@latest add https://magicui.design/r/marquee

Required: lib/utils.ts

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

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

Required: app/globals.css (add animations)

@tailwind base;
@tailwind components;
@tailwind utilities;

@theme inline {
  --animate-marquee: marquee var(--duration) linear infinite;
  --animate-shimmer-slide: shimmer-slide var(--speed) ease-in-out infinite alternate;
}

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

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

React Bits Starter

Create a Vite + React project with React Bits components:

# Create Vite app
npm create vite@latest my-react-bits-app -- --template react

cd my-react-bits-app

# Install dependencies
npm install
npm install framer-motion
npm install ogl  # For WebGL components (Particles, Plasma, Aurora)

Copy components from reactbits.dev:

• Visit https://reactbits.dev
• Browse component gallery
• Click "View Code" on desired component
• Copy to src/components/

Example Implementations

Landing Page with Magic UI

app/page.tsx

import { GridPattern } from "@/components/ui/grid-pattern"
import { AnimatedGridPattern } from "@/components/ui/animated-grid-pattern"
import { ShimmerButton } from "@/components/ui/shimmer-button"
import { Marquee } from "@/components/ui/marquee"
import { cn } from "@/lib/utils"

const testimonials = [
  { id: 1, name: "John Doe", text: "Amazing product!", avatar: "/avatar1.jpg" },
  { id: 2, name: "Jane Smith", text: "Exceeded expectations", avatar: "/avatar2.jpg" }
]

export default function Home() {
  return (
    <main>
      {/* Hero Section */}
      <section className="relative flex h-screen items-center justify-center overflow-hidden">
        <AnimatedGridPattern
          numSquares={50}
          maxOpacity={0.5}
          duration={4}
          className={cn(
            "[mask-image:radial-gradient(500px_circle_at_center,white,transparent)]",
            "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12"
          )}
        />
        <div className="relative z-10 text-center">
          <h1 className="text-7xl font-bold mb-8">Welcome to the Future</h1>
          <ShimmerButton
            shimmerDuration="3s"
            className="px-8 py-3"
          >
            Get Started
          </ShimmerButton>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-20">
        <h2 className="text-4xl font-bold text-center mb-12">Testimonials</h2>
        <Marquee pauseOnHover className="[--duration:40s]">
          {testimonials.map((item) => (
            <div key={item.id} 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>
    </main>
  )
}

Interactive Dashboard with React Bits

src/App.jsx

import { useState } from 'react'
import CountUp from './components/CountUp'
import BlurText from './components/BlurText'
import Particles from './components/Particles'
import './App.css'

function App() {
  return (
    <div className="app">
      {/* Background */}
      <Particles
        particleCount={150}
        particleColors={['#4ECDC4', '#45B7D1']}
        particleSpread={10}
        speed={0.1}
        className="fixed inset-0"
      />

      {/* Content */}
      <div className="relative z-10 min-h-screen p-8">
        <BlurText
          text="Analytics Dashboard"
          delay={100}
          animateBy="words"
          className="text-6xl font-bold text-center mb-16"
        />

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
          {/* Stats */}
          <div className="bg-white/10 backdrop-blur-md rounded-xl p-8 text-center">
            <CountUp
              end={10000}
              duration={2}
              separator=","
              className="text-5xl font-bold text-blue-500"
            />
            <p className="text-xl mt-2">Active Users</p>
          </div>

          <div className="bg-white/10 backdrop-blur-md rounded-xl p-8 text-center">
            <CountUp
              end={99.9}
              duration={2.5}
              decimals={1}
              suffix="%"
              className="text-5xl font-bold text-green-500"
            />
            <p className="text-xl mt-2">Uptime</p>
          </div>

          <div className="bg-white/10 backdrop-blur-md rounded-xl p-8 text-center">
            <CountUp
              end={1000000}
              duration={3}
              prefix="$"
              separator=","
              className="text-5xl font-bold text-purple-500"
            />
            <p className="text-xl mt-2">Revenue</p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

Component Showcase Examples

Complete examples are available at:

Magic UI:

• Official examples: https://magicui.design
• GitHub repository: https://github.com/magicuidesign/magicui
• Component registry: Browse site for live demos

React Bits:

• Official examples: https://reactbits.dev
• Component demos: Each component page includes live preview
• GitHub: https://github.com/davidhdev/react-bits

Integration Examples

Combining Libraries

Both libraries can be used together in the same project:

// Magic UI for structural patterns
import { GridPattern } from "@/components/ui/grid-pattern"
import { Marquee } from "@/components/ui/marquee"

// React Bits for interactive elements
import BlurText from './components/BlurText'
import CountUp from './components/CountUp'
import Particles from './components/Particles'

export default function HybridPage() {
  return (
    <div className="relative">
      {/* React Bits background */}
      <Particles particleCount={100} className="fixed inset-0" />

      {/* Magic UI pattern overlay */}
      <GridPattern
        squares={[[4,4], [8,2]]}
        className="absolute inset-0 opacity-30 -z-10"
      />

      {/* Content */}
      <div className="relative z-10 p-8">
        <BlurText
          text="Best of Both Worlds"
          className="text-6xl font-bold mb-8"
        />

        <Marquee>
          {items.map((item) => (
            <div key={item.id} className="mx-4">
              <CountUp end={item.value} />
            </div>
          ))}
        </Marquee>
      </div>
    </div>
  )
}

Production-Ready Patterns

Performance-Optimized Setup

import { lazy, Suspense, useState, useEffect } from 'react'

// Lazy load heavy components
const Particles = lazy(() => import('./components/Particles'))
const AnimatedGridPattern = lazy(() => import('@/components/ui/animated-grid-pattern'))

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

  useEffect(() => {
    // Enable on high-end devices only
    const isHighEnd = navigator.hardwareConcurrency > 4 &&
                     !navigator.userAgent.includes('Mobile')
    setEnableHeavyEffects(isHighEnd)
  }, [])

  return (
    <div className="relative">
      {enableHeavyEffects ? (
        <Suspense fallback={<div className="gradient-bg" />}>
          <Particles particleCount={200} />
        </Suspense>
      ) : (
        <div className="static-gradient-bg" />
      )}

      {/* Content */}
    </div>
  )
}

Accessibility-First Implementation

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

<BlurText
  text="Accessible text reveal"
  delay={prefersReducedMotion ? 0 : 100}
  animateBy={prefersReducedMotion ? "none" : "words"}
/>

<div role="presentation" aria-hidden="true">
  <GridPattern /> {/* Decorative only */}
</div>

<CountUp
  end={10000}
  aria-live="polite"
  aria-label="Total users: 10,000"
/>

Additional Resources

• Magic UI Documentation: https://magicui.design/docs
• React Bits Documentation: https://reactbits.dev/docs
• Framer Motion: https://motion.dev
• shadcn/ui: https://ui.shadcn.com
• Tailwind CSS: https://tailwindcss.com

Scripts

Use the provided scripts to assist with component implementation:

# Import component with instructions
../scripts/component_importer.py

# Generate component props
../scripts/props_generator.py

Notes

1. Magic UI requires shadcn/ui setup and cn() utility 2. React Bits uses manual copy-paste installation 3. WebGL components (Particles, Plasma, Aurora) require ogl package 4. Performance: Test on target devices, especially for WebGL components 5. Accessibility: Always test with screen readers and keyboard navigation

Component Customization Guide

Comprehensive guide for customizing Magic UI and React Bits components through props, styling, and composition.

Customization Principles

Both libraries follow similar customization patterns:

1. Prop-Based Customization: Modify behavior through component props 2. Class-Based Styling: Use className prop with Tailwind CSS 3. Composition: Combine components for complex effects 4. Theming: Leverage CSS variables and Tailwind config

Magic UI Customization

Pattern Customization

Grid Pattern Masking

Create spotlight effects with CSS masks:

// Radial gradient mask
<GridPattern
  className="[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]"
/>

// Linear gradient mask
<GridPattern
  className="[mask-image:linear-gradient(to_bottom,white,transparent)]"
/>

// Elliptical mask
<GridPattern
  className="[mask-image:radial-gradient(600px_ellipse_at_top,white,transparent)]"
/>

// Combined with positioning
<GridPattern
  squares={[[4,4], [8,2]]}
  className={cn(
    "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
    "opacity-30",
    "fill-blue-400/20 stroke-blue-400/20"
  )}
/>

Animated Grid Pattern Timing

Control animation parameters for different effects:

// Fast, subtle animation
<AnimatedGridPattern
  numSquares={30}
  maxOpacity={0.3}
  duration={2}
  repeatDelay={0.2}
/>

// Slow, dramatic animation
<AnimatedGridPattern
  numSquares={80}
  maxOpacity={0.8}
  duration={8}
  repeatDelay={1}
/>

// Responsive animation
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768

<AnimatedGridPattern
  numSquares={isMobile ? 20 : 50}
  maxOpacity={isMobile ? 0.3 : 0.5}
  duration={isMobile ? 6 : 4}
/>

Button Customization

Shimmer Button Variations

// Minimal shimmer
<ShimmerButton
  shimmerColor="rgba(255,255,255,0.2)"
  shimmerSize="0.02em"
  shimmerDuration="4s"
  background="rgba(100,100,100,1)"
  className="px-6 py-2 text-sm"
>
  Subtle Effect
</ShimmerButton>

// Intense shimmer
<ShimmerButton
  shimmerColor="#FFD700"
  shimmerSize="0.1em"
  shimmerDuration="1.5s"
  background="rgba(0,0,0,1)"
  className="px-12 py-4 text-xl font-bold"
>
  Attention Grabber
</ShimmerButton>

// Branded shimmer
<ShimmerButton
  shimmerColor="var(--brand-primary)"
  borderRadius="8px"
  background="var(--brand-secondary)"
  className="px-8 py-3 font-semibold"
>
  Brand Button
</ShimmerButton>

Border Beam Customization

// Slow, wide beam
<BorderBeam duration={20} size={300} />

// Fast, narrow beam
<BorderBeam duration={5} size={80} />

// Multiple beams
<div className="relative">
  <BorderBeam duration={8} size={100} />
  <BorderBeam duration={12} size={150} className="opacity-50" />
</div>

Marquee Customization

Speed and Direction

// Slow horizontal scroll
<Marquee className="[--duration:60s]">
  {items}
</Marquee>

// Fast horizontal scroll
<Marquee className="[--duration:20s]">
  {items}
</Marquee>

// Reverse direction
<Marquee reverse className="[--duration:40s]">
  {items}
</Marquee>

// Vertical with custom gap
<Marquee
  vertical
  className="h-[600px] [--gap:2rem]"
>
  {items}
</Marquee>

Content Repetition

// Minimal repetition (better performance)
<Marquee repeat={2} className="[--duration:30s]">
  {largeItems}
</Marquee>

// Maximum repetition (smoother loop)
<Marquee repeat={6} className="[--duration:50s]">
  {smallItems}
</Marquee>

React Bits Customization

BlurText Customization

Animation Styles

// Fade in from top
<BlurText
  text="Elegant entrance"
  direction="top"
  animationFrom={{ filter: 'blur(10px)', opacity: 0, y: -50 }}
  animationTo={{ filter: 'blur(0px)', opacity: 1, y: 0 }}
/>

// Zoom and blur
<BlurText
  text="Dynamic reveal"
  animationFrom={{ filter: 'blur(20px)', opacity: 0, scale: 0.5 }}
  animationTo={{ filter: 'blur(0px)', opacity: 1, scale: 1 }}
/>

// Slide from side with rotation
<BlurText
  text="Creative animation"
  direction="left"
  animationFrom={{ filter: 'blur(15px)', opacity: 0, x: -100, rotate: -15 }}
  animationTo={{ filter: 'blur(0px)', opacity: 1, x: 0, rotate: 0 }}
/>

Multi-Stage Animations

<BlurText
  text="Complex reveal"
  animateBy="characters"
  animationFrom={{ filter: 'blur(20px)', opacity: 0, y: 100, scale: 0.8 }}
  animationTo={[
    { filter: 'blur(10px)', opacity: 0.3, y: 50, scale: 0.9 },
    { filter: 'blur(5px)', opacity: 0.7, y: 10, scale: 1 },
    { filter: 'blur(0px)', opacity: 1, y: 0, scale: 1 }
  ]}
  stepDuration={0.4}
  easing={(t) => t * t * (3 - 2 * t)} // Smoothstep easing
/>

Timing Control

// Fast reveal
<BlurText
  text="Quick appearance"
  delay={30}
  stepDuration={0.03}
/>

// Slow, dramatic reveal
<BlurText
  text="Suspenseful entrance"
  delay={200}
  stepDuration={0.15}
/>

// Viewport-triggered with custom threshold
<BlurText
  text="Scroll-activated"
  threshold={0.5}
  rootMargin="-50px"
/>

CountUp Customization

Formatting Options

// Currency formatting
<CountUp
  end={1234567.89}
  duration={3}
  decimals={2}
  prefix="$"
  separator=","
/>
// Displays: $1,234,567.89

// Percentage
<CountUp
  end={75.5}
  decimals={1}
  suffix="%"
/>
// Displays: 75.5%

// Abbreviated large numbers
<CountUp
  end={1500000}
  separator=","
  suffix="+"
/>
// Displays: 1,500,000+

// Compact notation (custom implementation)
const formatCompact = (value) => {
  if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`
  if (value >= 1000) return `${(value / 1000).toFixed(1)}K`
  return value.toString()
}

Magnet Customization

Effect Strength Variations

// Subtle magnetic effect
<Magnet
  magnitude={0.15}
  maxDistance={100}
  damping={30}
  stiffness={180}
>
  <button>Gentle Pull</button>
</Magnet>

// Strong magnetic effect
<Magnet
  magnitude={0.6}
  maxDistance={250}
  damping={15}
  stiffness={120}
>
  <div className="card">Strong Attraction</div>
</Magnet>

// Directional restriction (custom)
<Magnet
  magnitude={0.4}
  transformStyle={(x, y) => ({
    transform: `translate(${x}px, 0)` // Only horizontal movement
  })}
>
  <h1>Horizontal Only</h1>
</Magnet>

Dock Customization

Physics and Sizing

// Bouncy, playful dock
<Dock
  items={items}
  spring={{ mass: 0.2, stiffness: 250, damping: 10 }}
  magnification={100}
  distance={300}
  panelHeight={80}
  baseItemSize={60}
/>

// Smooth, minimal dock
<Dock
  items={items}
  spring={{ mass: 0.08, stiffness: 180, damping: 18 }}
  magnification={50}
  distance={120}
  panelHeight={50}
  baseItemSize={40}
/>

// Professional dock
<Dock
  items={items}
  spring={{ mass: 0.1, stiffness: 200, damping: 15 }}
  magnification={70}
  distance={200}
  panelHeight={64}
  baseItemSize={48}
  className="shadow-xl bg-gray-900/90 backdrop-blur-md rounded-2xl p-2"
/>

Particles Customization

Visual Styles

// Minimal particles
<Particles
  particleCount={50}
  particleColors={['#ffffff']}
  particleSpread={20}
  speed={0.03}
  particleBaseSize={60}
  sizeRandomness={0.3}
  alphaParticles={true}
  disableRotation={true}
/>

// Dense, colorful particles
<Particles
  particleCount={500}
  particleColors={['#FF0080', '#00FFFF', '#FFFF00', '#00FF00']}
  particleSpread={8}
  speed={0.2}
  particleBaseSize={80}
  sizeRandomness={2}
  alphaParticles={false}
/>

// Interactive particles
<Particles
  particleCount={200}
  particleColors={['#4ECDC4', '#45B7D1']}
  moveParticlesOnHover={true}
  particleHoverFactor={3}
  speed={0.08}
/>

Cross-Library Combinations

Magic UI Patterns + React Bits Text

<div className="relative h-screen">
  {/* Magic UI background */}
  <AnimatedGridPattern
    numSquares={50}
    className="[mask-image:radial-gradient(500px_circle_at_center,white,transparent)]"
  />

  {/* React Bits text animation */}
  <div className="relative z-10 flex items-center justify-center h-full">
    <BlurText
      text="Powerful Combination"
      animateBy="words"
      className="text-7xl font-bold"
    />
  </div>
</div>

Shimmer Button + Magnet Effect

import { ShimmerButton } from "@/components/ui/shimmer-button"
import Magnet from "./components/Magnet"

<Magnet magnitude={0.3}>
  <ShimmerButton
    shimmerDuration="3s"
    className="px-8 py-3"
  >
    Interactive CTA
  </ShimmerButton>
</Magnet>

Marquee + CountUp Statistics

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

<Marquee pauseOnHover>
  {stats.map((stat) => (
    <div key={stat.id} className="mx-8 text-center">
      <CountUp
        end={stat.value}
        separator=","
        className="text-4xl font-bold"
      />
      <p className="text-sm text-gray-600">{stat.label}</p>
    </div>
  ))}
</Marquee>

Theming with CSS Variables

Creating Theme Variables

/* app/globals.css */
:root {
  --component-duration: 3s;
  --component-primary: #4F46E5;
  --component-secondary: #06B6D4;
  --component-radius: 8px;
  --component-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.dark {
  --component-primary: #818CF8;
  --component-secondary: #22D3EE;
  --component-shadow: 0 10px 40px rgba(255,255,255,0.05);
}

Using Theme Variables

// Magic UI with theme
<ShimmerButton
  shimmerColor="var(--component-primary)"
  shimmerDuration="var(--component-duration)"
  borderRadius="var(--component-radius)"
  className="shadow-[var(--component-shadow)]"
>
  Themed Button
</ShimmerButton>

// React Bits with theme
<Particles
  particleColors={[
    'var(--component-primary)',
    'var(--component-secondary)'
  ]}
  speed={0.1}
/>

Responsive Customization

Breakpoint-Based Props

import { useState, useEffect } from 'react'

function useBreakpoint() {
  const [breakpoint, setBreakpoint] = useState('desktop')

  useEffect(() => {
    const updateBreakpoint = () => {
      if (window.innerWidth < 640) setBreakpoint('mobile')
      else if (window.innerWidth < 1024) setBreakpoint('tablet')
      else setBreakpoint('desktop')
    }

    updateBreakpoint()
    window.addEventListener('resize', updateBreakpoint)
    return () => window.removeEventListener('resize', updateBreakpoint)
  }, [])

  return breakpoint
}

export default function ResponsiveComponent() {
  const breakpoint = useBreakpoint()

  const particleConfig = {
    mobile: { count: 50, spread: 15, size: 60 },
    tablet: { count: 150, spread: 12, size: 80 },
    desktop: { count: 300, spread: 10, size: 100 }
  }

  const config = particleConfig[breakpoint]

  return (
    <Particles
      particleCount={config.count}
      particleSpread={config.spread}
      particleBaseSize={config.size}
    />
  )
}

Tailwind Responsive Classes

<BlurText
  text="Responsive Text"
  className="text-2xl md:text-4xl lg:text-6xl"
  delay={50}
/>

<AnimatedGridPattern
  numSquares={50}
  className="hidden md:block"
/>

<Marquee className="[--duration:60s] md:[--duration:40s] lg:[--duration:30s]">
  {items}
</Marquee>

Accessibility Customization

Respect User Preferences

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

// Disable animations for reduced motion
<BlurText
  text="Accessible text"
  delay={prefersReducedMotion ? 0 : 100}
  animateBy="none" // Skip animation entirely
/>

<Particles
  particleCount={prefersReducedMotion ? 0 : 200}
  speed={prefersReducedMotion ? 0 : 0.1}
/>

// Or provide alternative visual effect
{prefersReducedMotion ? (
  <div className="gradient-bg static" />
) : (
  <AnimatedGridPattern numSquares={50} />
)}

ARIA Labels and Semantic HTML

<div role="presentation" aria-hidden="true">
  <GridPattern /> {/* Decorative only */}
</div>

<Dock
  items={navItems}
  role="navigation"
  aria-label="Main navigation"
/>

<CountUp
  end={10000}
  aria-live="polite"
  aria-label="Total users: 10,000"
/>

Performance Customization

Conditional Rendering

const [isLowPowerMode, setIsLowPowerMode] = useState(false)

useEffect(() => {
  // Detect low power mode or battery status
  if ('getBattery' in navigator) {
    navigator.getBattery().then((battery) => {
      setIsLowPowerMode(battery.level < 0.2)
    })
  }
}, [])

return isLowPowerMode ? (
  <StaticBackground />
) : (
  <Particles particleCount={300} />
)

Lazy Loading Heavy Components

import { lazy, Suspense } from 'react'

const Particles = lazy(() => import('./components/Particles'))
const Plasma = lazy(() => import('./components/Plasma'))

export default function OptimizedPage() {
  return (
    <Suspense fallback={<div className="gradient-bg" />}>
      <Particles particleCount={200} />
    </Suspense>
  )
}

Advanced Customization Patterns

Component Composition

// Layered effects
<div className="relative">
  <Particles particleCount={100} className="absolute inset-0" />
  <AnimatedGridPattern
    numSquares={30}
    className="absolute inset-0 opacity-50"
  />
  <div className="relative z-10">
    <BlurText text="Layered Effects" />
  </div>
</div>

Custom Animation Sequences

import { motion, AnimatePresence } from "framer-motion"

<AnimatePresence>
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    transition={{ delay: 0.5 }}
  >
    <BlurText text="Delayed text" />

    <motion.div
      initial={{ y: 50 }}
      animate={{ y: 0 }}
      transition={{ delay: 1.5 }}
    >
      <CountUp end={10000} />
    </motion.div>
  </motion.div>
</AnimatePresence>

This guide covers the most common customization patterns. For advanced customizations, consult the component source code and extend as needed.

Magic UI Component Catalog

Complete reference for Magic UI components built on Tailwind CSS, Framer Motion, and shadcn/ui.

Installation

# Via shadcn CLI (recommended)
npx shadcn@latest add https://magicui.design/r/[component-name]

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

Background Patterns

Grid Pattern

Static SVG grid pattern for backgrounds.

Props:

• width (number): Grid cell width, default 40
• height (number): Grid cell height, default 40
• x (number): X offset, default -1
• y (number): Y offset, default -1
• squares (Array<[x, y]>): Highlighted squares
• strokeDasharray (string): Dash pattern, default "0"
• className (string): Additional CSS classes

Usage:

<GridPattern
  squares={[[4, 4], [5, 1], [8, 2]]}
  className="[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]"
/>

Animated Grid Pattern

Animated version with dynamic square animations.

Props:

• All GridPattern props
• numSquares (number): Number of animated squares, default 50
• maxOpacity (number): Maximum opacity, default 0.5
• duration (number): Animation duration in seconds, default 4
• repeatDelay (number): Delay between repeats, default 0.5

Usage:

<AnimatedGridPattern
  numSquares={50}
  maxOpacity={0.5}
  duration={4}
  repeatDelay={0.5}
  className="inset-x-0 inset-y-[-30%] h-[200%] skew-y-12"
/>

Interactive Grid Pattern

Grid pattern with interactive squares.

Props:

• width (number): Cell width, default 40
• height (number): Cell height, default 40
• squares ([horizontal, vertical]): Grid dimensions, default [24, 24]
• squaresClassName (string): Class for squares
• className (string): Container class

Usage:

<InteractiveGridPattern
  squares={[24, 24]}
  className="[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]"
/>

Striped Pattern

Diagonal striped background pattern.

Props:

• direction ("left" | "right"): Stripe direction, default "left"
• width (number): Pattern width, default 10
• height (number): Pattern height, default 10
• className (string): Additional CSS classes

Usage:

<StripedPattern
  direction="left"
  className="[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]"
/>

Buttons & Interactive Elements

Shimmer Button

Button with animated shimmer effect.

Props:

• shimmerColor (string): Shimmer color, default "#ffffff"
• shimmerSize (string): Shimmer size, default "0.05em"
• shimmerDuration (string): Animation duration, default "3s"
• borderRadius (string): Border radius, default "100px"
• background (string): Background color, default "rgba(0, 0, 0, 1)"
• className (string): Additional CSS classes
• children (ReactNode): Button content
• All standard button props

Usage:

<ShimmerButton
  shimmerColor="#ffffff"
  shimmerDuration="3s"
  background="rgba(0, 0, 0, 1)"
  className="px-8 py-3"
>
  Get Started
</ShimmerButton>

Border Beam

Animated gradient border effect for containers.

Props:

• duration (number): Animation duration in seconds, default 15
• size (number): Beam width in pixels, default 200
• className (string): Additional CSS classes

Usage:

<Card className="relative overflow-hidden">
  <CardContent>Your content</CardContent>
  <BorderBeam duration={8} size={100} />
</Card>

Text & Typography

Spinning Text

Text arranged in a circular path with rotation.

Props:

• children (string): Text content (use • for separators)
• radius (number): Circle radius, default 5
• duration (number): Rotation duration in seconds, default 10
• reverse (boolean): Reverse rotation direction, default false
• className (string): Additional CSS classes

Usage:

<SpinningText
  reverse={false}
  className="text-4xl"
  duration={4}
  radius={6}
>
  learn more • earn more • grow more •
</SpinningText>

Layout Components

Marquee

Infinite scrolling content container.

Props:

• className (string): Additional CSS classes
• reverse (boolean): Reverse scroll direction, default false
• pauseOnHover (boolean): Pause on mouse hover, default false
• vertical (boolean): Vertical scrolling, default false
• repeat (number): Number of content repetitions, default 4
• children (ReactNode): Content to scroll

Usage:

// Horizontal marquee
<Marquee pauseOnHover className="[--duration:40s]">
  {items.map((item) => (
    <div key={item.id} className="mx-4">
      {item.content}
    </div>
  ))}
</Marquee>

// Vertical marquee
<Marquee vertical reverse className="h-[400px]">
  {items.map((item) => (
    <div key={item.id}>{item.content}</div>
  ))}
</Marquee>

Bento Grid

Responsive grid layout for product features.

Props:

• children (ReactNode): BentoCard components
• className (string): Grid customization classes

BentoCard Props:

• name (string): Card title
• className (string): Card size/position classes
• background (ReactNode): Background component/image
• Icon (React.ElementType): Icon component
• description (string): Card description
• href (string): Link URL
• cta (string): Call-to-action text

Usage:

<BentoGrid className="grid-cols-3 gap-4">
  <BentoCard
    name="Feature Name"
    className="col-span-2"
    background={<div className="bg-gradient" />}
    Icon={FeatureIcon}
    description="Description text"
    href="/feature"
    cta="Learn More"
  />
</BentoGrid>

3D & Visual Effects

Globe

Interactive 3D globe visualization.

Props:

• className (string): Additional CSS classes
• Additional THREE.js globe configuration props

Usage:

<div className="relative flex size-full max-w-lg items-center justify-center">
  <span className="text-8xl font-semibold">Globe</span>
  <Globe className="top-28" />
</div>

Required CSS Animations

Add these to app/globals.css for manual installations:

@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-spin-around: spin-around calc(var(--speed) * 2) infinite linear;
  --animate-marquee: marquee var(--duration) linear infinite;
  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
  --animate-beam: beam 3s 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 spin-around {
  0% {
    transform: translateZ(0) rotate(0);
  }
  15%, 35% {
    transform: translateZ(0) rotate(90deg);
  }
  65%, 85% {
    transform: translateZ(0) rotate(270deg);
  }
  100% {
    transform: translateZ(0) rotate(360deg);
  }
}

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

@keyframes beam {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

Utility Function Required

All Magic UI components require the cn() utility function:

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

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

Common Component Combinations

Hero Section with Pattern

<div className="relative flex h-screen items-center justify-center">
  <AnimatedGridPattern
    numSquares={50}
    className="[mask-image:radial-gradient(500px_circle_at_center,white,transparent)]"
  />
  <h1 className="relative z-10 text-7xl font-bold">Hero Title</h1>
</div>

CTA Card with Border Beam

<Card className="relative overflow-hidden">
  <CardHeader>
    <CardTitle>Premium Plan</CardTitle>
  </CardHeader>
  <CardContent>
    <p>Get all features</p>
    <Button>Subscribe</Button>
  </CardContent>
  <BorderBeam duration={8} />
</Card>

Testimonial Carousel

<Marquee pauseOnHover className="py-4">
  {testimonials.map((t) => (
    <div key={t.id} className="mx-4 w-[350px] rounded-lg border p-6">
      <p className="mb-4">"{t.text}"</p>
      <div className="flex gap-3">
        <img src={t.avatar} className="w-10 h-10 rounded-full" />
        <p className="font-semibold">{t.name}</p>
      </div>
    </div>
  ))}
</Marquee>

Tailwind Configuration

Ensure Tailwind can find Magic UI components:

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

Performance Tips

1. Use CSS Masks: More performant than clipping paths 2. Limit Animated Elements: Reduce numSquares on mobile devices 3. Lazy Load Heavy Components: Use React.lazy() for Globe and complex components 4. Optimize Marquee: Limit repeat prop and number of items 5. Consider Reduced Motion: Check prefers-reduced-motion media query

TypeScript Support

All Magic UI components are fully typed. Extend props interface when customizing:

interface CustomGridPatternProps extends React.ComponentPropsWithoutRef<"svg"> {
  customProp?: string
}

Browser Compatibility

• Modern browsers (Chrome, Firefox, Safari, Edge)
• CSS Grid support required
• SVG support required
• Framer Motion browser requirements apply

React Bits Component Library Reference

Complete reference for React Bits - 90+ animated React components with minimal dependencies.

Installation

React Bits uses a copy-paste installation model. Visit reactbits.dev, browse components, and copy the code directly into your project.

Common Dependencies:

npm install framer-motion  # For animation-heavy components
npm install ogl           # For WebGL components (Particles, Plasma, Aurora)
npm install react-icons   # For icon components (Dock)

Text Animation Components

BlurText

Text reveal animation with blur effect, triggered by viewport intersection.

Props:

• text (string, required): Text to animate
• delay (number): Delay between characters/words in ms, default 50
• animateBy ("characters" | "words"): Animation unit, default "words"
• direction ("top" | "bottom" | "left" | "right"): Animation direction, default "top"
• threshold (number): Intersection Observer threshold, default 0.1
• rootMargin (string): Intersection Observer root margin, default "0px"
• stepDuration (number): Duration per step in seconds, default 0.06
• animationFrom (object): Initial animation state, default { filter: 'blur(10px)', opacity: 0, y: -50 }
• animationTo (object | array): Final animation state(s)
• easing (function): Custom easing function
• onAnimationComplete (function): Callback when animation completes
• className (string): Additional CSS classes

Usage:

// Basic word-by-word reveal
<BlurText
  text="Transform your ideas into reality"
  delay={100}
  animateBy="words"
  direction="top"
  className="text-5xl font-bold"
/>

// Character-by-character with custom animation
<BlurText
  text="Pixel-perfect animations"
  delay={50}
  animateBy="characters"
  direction="bottom"
  threshold={0.3}
  animationFrom={{ filter: 'blur(20px)', opacity: 0, y: 50, scale: 0.8 }}
  animationTo={{ filter: 'blur(0px)', opacity: 1, y: 0, scale: 1 }}
  easing={(t) => t * t * (3 - 2 * t)} // Smoothstep
  className="text-2xl"
/>

CircularText

Arranges text in a circular path with optional rotation.

Props:

• text (string, required): Text to display
• radius (number): Circle radius in pixels, default 100
• fontSize (number): Font size in pixels, default 16
• rotateText (boolean): Enable rotation, default false
• rotationSpeed (number): Rotation speed, default 1
• direction ("clockwise" | "counterclockwise"): Rotation direction, default "clockwise"
• className (string): Additional CSS classes

Usage:

// Static circular text
<CircularText
  text="REACT BITS • REACT BITS • "
  radius={100}
  fontSize={16}
  className="text-blue-500"
/>

// Rotating circular badge
<div className="relative">
  <CircularText
    text="★ NEW FEATURE ★ AVAILABLE NOW ★ "
    radius={80}
    fontSize={14}
    rotateText={true}
    rotationSpeed={0.5}
    direction="clockwise"
    className="text-yellow-400 font-bold"
  />
  <div className="absolute inset-0 flex items-center justify-center">
    <span className="text-2xl font-bold">NEW</span>
  </div>
</div>

CountUp

Animates numbers from start to end value with formatting options.

Props:

• start (number): Starting number, default 0
• end (number, required): Ending number
• duration (number): Animation duration in seconds, default 2
• decimals (number): Decimal places, default 0
• prefix (string): Text before number, default ""
• suffix (string): Text after number, default ""
• separator (string): Thousands separator, default ""
• threshold (number): Intersection Observer threshold, default 0.1
• rootMargin (string): Intersection Observer root margin, default "0px"
• className (string): Additional CSS classes

Usage:

// Revenue counter
<CountUp
  start={0}
  end={1000000}
  duration={3}
  separator=","
  prefix="$"
  className="text-6xl font-bold text-blue-600"
/>

// Percentage counter
<CountUp
  end={99.9}
  duration={2.5}
  decimals={1}
  suffix="%"
  className="text-5xl font-bold text-green-600"
/>

// Simple counter
<CountUp
  end={10000}
  duration={2}
  separator=","
  className="text-6xl font-bold"
/>

SpinningText

Similar to CircularText but from React Bits (verify exact component name in library).

Interactive Components

Magnet

Creates magnetic pull effect on child elements when cursor is nearby.

Props:

• magnitude (number): Pull strength, default 0.3
• maxDistance (number): Max distance for effect in pixels, default 150
• damping (number): Spring damping, default 25
• stiffness (number): Spring stiffness, default 200
• className (string): Additional CSS classes
• children (ReactNode, required): Element to apply effect to

Usage:

// Magnetic button
<Magnet>
  <button className="px-8 py-3 bg-blue-600 text-white rounded-lg">
    Click Me
  </button>
</Magnet>

// Customized magnetic pull
<Magnet
  magnitude={0.5}
  maxDistance={200}
  damping={20}
  stiffness={150}
>
  <div className="card p-6">
    <h3>Hover to feel the pull</h3>
  </div>
</Magnet>

Dock

macOS-style dock with magnification effect.

Props:

• items (array, required): Array of dock items
• Each item: { icon: ReactNode, label: string, onClick: function, className?: string }
• spring (object): Spring physics { mass, stiffness, damping }, default { mass: 0.1, stiffness: 150, damping: 12 }
• magnification (number): Magnification amount in pixels, default 60
• distance (number): Activation distance in pixels, default 140
• panelHeight (number): Dock panel height, default 60
• baseItemSize (number): Base icon size, default 48
• dockHeight (number): Max dock height, default 250
• className (string): Additional CSS classes

Usage:

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

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

<Dock
  items={dockItems}
  spring={{ mass: 0.15, stiffness: 200, damping: 15 }}
  magnification={80}
  distance={250}
  className="dock-custom"
/>

Stepper

Multi-step form/wizard component with navigation.

Props:

• initialStep (number): Starting step (1-indexed), default 1
• onStepChange (function): Callback when step changes (step: number) => void
• onFinalStepCompleted (function): Callback when final step is completed
• stepCircleContainerClassName (string): Step indicator container styles
• stepContainerClassName (string): Individual step indicator styles
• contentClassName (string): Content area styles
• footerClassName (string): Footer area styles
• backButtonText (string): Back button text, default "Back"
• nextButtonText (string): Next button text, default "Next"
• backButtonProps (object): Props for back button
• nextButtonProps (object): Props for next button
• renderStepIndicator (function): Custom indicator renderer
• disableStepIndicators (boolean): Hide step indicators, default false
• children (Step components, required): Step content

Step Component Props:

• children (ReactNode, required): Step content

Usage:

import Stepper, { Step } from './components/Stepper'

// Basic stepper
<Stepper
  initialStep={1}
  onStepChange={(step) => console.log('Step:', step)}
  onFinalStepCompleted={() => console.log('Complete!')}
>
  <Step>
    <h2>Step 1: Welcome</h2>
    <p>Getting started content</p>
  </Step>
  <Step>
    <h2>Step 2: Profile</h2>
    <input type="text" placeholder="Name" />
  </Step>
  <Step>
    <h2>Step 3: Preferences</h2>
    <label><input type="checkbox" /> Enable notifications</label>
  </Step>
</Stepper>

// Custom styled stepper
<Stepper
  initialStep={1}
  stepContainerClassName="custom-indicators"
  contentClassName="p-8"
  footerClassName="border-t"
  backButtonText="Previous"
  nextButtonText="Continue"
  backButtonProps={{ className: 'btn-secondary' }}
  nextButtonProps={{ className: 'btn-primary' }}
>
  {/* Steps */}
</Stepper>

MagicButton

Button component with special visual effects (verify exact implementation in library).

Layout Components

AnimatedList

List container with staggered entrance animations for children.

Props:

• stagger (number): Delay between items in seconds, default 0.1
• duration (number): Animation duration per item in seconds, default 0.5
• initial (object): Initial animation state, default { opacity: 0, y: 20 }
• animate (object): Final animation state, default { opacity: 1, y: 0 }
• exit (object): Exit animation state, default { opacity: 0, y: -20 }
• className (string): Additional CSS classes
• children (ReactNode, required): List items

Usage:

// Basic animated list
<AnimatedList className="space-y-4">
  {notifications.map((notif) => (
    <div key={notif.id} className="notification-item">
      <p>{notif.text}</p>
      <span>{notif.time}</span>
    </div>
  ))}
</AnimatedList>

// Custom animation
<AnimatedList
  stagger={0.15}
  duration={0.6}
  initial={{ opacity: 0, x: -50, scale: 0.8 }}
  animate={{ opacity: 1, x: 0, scale: 1 }}
  exit={{ opacity: 0, x: 50, scale: 0.8 }}
>
  {items.map((item) => (
    <div key={item.id}>{item.content}</div>
  ))}
</AnimatedList>

Background & Visual Effects

Particles

WebGL-powered 3D particle system.

Props:

• particleCount (number): Number of particles, default 200
• particleColors (string[]): Particle colors array, default ['#ffffff']
• particleSpread (number): Spread factor, default 10
• speed (number): Movement speed, default 0.1
• moveParticlesOnHover (boolean): Mouse interaction, default false
• particleHoverFactor (number): Hover effect strength, default 1
• disableRotation (boolean): Disable auto-rotation, default false
• particleBaseSize (number): Base particle size, default 100
• sizeRandomness (number): Size variation factor, default 1
• alphaParticles (boolean): Enable transparency, default false
• cameraDistance (number): Camera distance, default 20
• className (string): Container CSS classes

Usage:

// Basic particle background
<section style={{ position: 'relative', height: '100vh' }}>
  <Particles className="absolute inset-0" />
  <div className="relative z-10">
    <h1>Content with particles</h1>
  </div>
</section>

// Customized branded particles
<Particles
  particleCount={300}
  particleColors={['#FF6B6B', '#4ECDC4', '#45B7D1']}
  particleSpread={12}
  speed={0.15}
  moveParticlesOnHover={true}
  particleHoverFactor={2}
  particleBaseSize={120}
  sizeRandomness={1.5}
  alphaParticles={true}
  cameraDistance={25}
/>

Plasma

Organic plasma effect using WebGL.

Props:

• color1 (string): First color, default varies
• color2 (string): Second color, default varies
• color3 (string): Third color, default varies
• speed (number): Animation speed, default 1
• blur (number): Blur amount in pixels, default 50
• className (string): Additional CSS classes

Usage:

// Default plasma
<div className="relative min-h-screen">
  <Plasma />
  <div className="relative z-10 p-8">Content</div>
</div>

// Custom colors and speed
<Plasma
  color1="#FF0080"
  color2="#7928CA"
  color3="#00DFD8"
  speed={0.8}
  blur={30}
  className="plasma-bg"
/>

Aurora

Dynamic gradient aurora effect.

Props:

• colors (string[]): Color array, default varies
• speed (number): Animation speed, default 1
• blur (number): Blur amount in pixels, default 50
• className (string): Additional CSS classes

Usage:

// Basic aurora
<div style={{ position: 'relative', minHeight: '100vh' }}>
  <Aurora />
  <main style={{ position: 'relative', zIndex: 1 }}>Content</main>
</div>

// Custom aurora colors
<Aurora
  colors={['#FF00FF', '#00FFFF', '#FFFF00']}
  speed={0.5}
  blur={80}
/>

BlobCursor

Custom cursor with blob trail effect.

Props:

• blobType ("circle" | "square"): Blob shape, default "circle"
• fillColor (string): Blob color, default "#5227FF"
• trailCount (number): Number of trail blobs, default 3
• sizes (number[]): Blob sizes array, default [40, 80, 120]
• Additional customization props

Usage:

<BlobCursor
  blobType="circle"
  fillColor="#5227FF"
  trailCount={3}
  sizes={[60, 125, 75]}
/>

Performance Optimization

WebGL Components (Particles, Plasma, Aurora)

1. Reduce Particle Count on Low-End Devices:

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

<Particles particleCount={particleCount} speed={0.1} />

2. Conditional Loading:

const [enableWebGL, setEnableWebGL] = useState(false)

useEffect(() => {
  const isHighEnd = !navigator.userAgent.includes('Mobile') &&
                   navigator.hardwareConcurrency > 4
  setEnableWebGL(isHighEnd)
}, [])

return enableWebGL ? <Particles /> : <div className="gradient-bg" />

Text Animations

1. Respect Reduced Motion:

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

<BlurText
  text="Accessible text"
  delay={prefersReducedMotion ? 0 : 100}
  animateBy={prefersReducedMotion ? "none" : "words"}
/>

2. Use RequestIdleCallback:

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

Common Component Combinations

Hero with Particles + Text Animation

<section style={{ position: 'relative', height: '100vh' }}>
  <Particles
    particleCount={200}
    particleColors={['#4ECDC4']}
    className="absolute inset-0"
  />
  <div className="relative z-10 flex items-center justify-center h-full">
    <BlurText
      text="Welcome to the Future"
      delay={100}
      animateBy="words"
      className="text-7xl font-bold"
    />
  </div>
</section>

Dashboard Stats

<div className="grid grid-cols-3 gap-8">
  <div className="text-center">
    <CountUp end={10000} separator="," className="text-5xl font-bold" />
    <p>Users</p>
  </div>
  <div className="text-center">
    <CountUp end={99.9} decimals={1} suffix="%" className="text-5xl font-bold" />
    <p>Uptime</p>
  </div>
  <div className="text-center">
    <CountUp end={1000000} prefix="$" separator="," className="text-5xl font-bold" />
    <p>Revenue</p>
  </div>
</div>

Onboarding Flow

<Stepper
  initialStep={1}
  onFinalStepCompleted={() => navigate('/dashboard')}
>
  <Step>
    <BlurText text="Welcome!" className="text-4xl font-bold mb-4" />
    <p>Let's get started</p>
  </Step>
  <Step>
    <h2>Profile Setup</h2>
    <form>{/* Form fields */}</form>
  </Step>
  <Step>
    <h2>All Set!</h2>
    <CountUp end={100} suffix="%" />
  </Step>
</Stepper>

Browser Compatibility

• Modern browsers (Chrome, Firefox, Safari, Edge)
• WebGL support required for Particles, Plasma, Aurora
• Intersection Observer support required for BlurText, CountUp
• Framer Motion browser requirements apply

TypeScript Support

React Bits components include TypeScript definitions. Extend interfaces as needed:

interface CustomBlurTextProps extends React.HTMLAttributes<HTMLDivElement> {
  customProp?: string
}