# Animated Component Libraries

> Pre-built animated React component collections combining Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits (90+ minimal-dependency animated components). Use this skill when building landing pages, marketing sites, dashboards, or interactive UIs requiring pre-made animated components instead of hand-crafting animations. Triggers on tasks involving animated UI components, Magic U…

- **Type:** Skill
- **Install:** `agentstack add skill-freshtechbro-claudedesignskills-animated-component-libraries`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [freshtechbro](https://agentstack.voostack.com/s/freshtechbro)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [freshtechbro](https://github.com/freshtechbro)
- **Source:** https://github.com/freshtechbro/claudedesignskills/tree/main/plugins/bundles/animation-components/skills/animated-component-libraries

## Install

```sh
agentstack add skill-freshtechbro-claudedesignskills-animated-component-libraries
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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**:

```bash
# 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**:

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

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

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

### React Bits Architecture

React Bits emphasizes lightweight, standalone components with minimal dependencies:

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

**Installation**:

```bash
# 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:

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

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

      {/* Animated Interactive Grid */}
      

      
        Your Content Here
      
    
  )
}
```

### 2. React Bits: Text Reveal Animations

Implement scroll-triggered text reveals with BlurText:

```jsx
import BlurText from './components/BlurText'

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

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

### 3. Magic UI: Button Components with Effects

Create interactive buttons with shimmer and border beam effects:

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

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

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

### 4. React Bits: Interactive Dock Navigation

Implement macOS-style dock with magnification effects:

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

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

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

  return (
    
      
    
  )
}
```

### 5. React Bits: Animated Statistics with CountUp

Display animated numbers for dashboards and landing pages:

```jsx
import CountUp from './components/CountUp'

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

      {/* Uptime Percentage */}
      
        
        Uptime
      

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

### 6. Magic UI: Marquee Component for Infinite Scroll

Create infinite scrolling content displays:

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

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

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

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

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

### 7. React Bits: WebGL Background Effects

Add high-performance animated backgrounds:

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

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

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

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

## Integration Patterns

### Integration with shadcn/ui

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

```bash
# 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`):

```typescript
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:

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

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

### Integration with React Router

Combine animated components with routing:

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

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

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

      {/* Persistent Dock Navigation */}
      
    
  )
}
```

### Combining Magic UI and React Bits

Leverage strengths of both libraries in a single project:

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

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

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

      {/* Stats with React Bits CountUp */}
      
        
      

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

## Performance Optimization

### Magic UI Performance Tips

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

```typescript

```

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

```typescript
const isMobile = window.innerWidth 
```

3. **Lazy Load Components**: Use React.lazy for heavy components

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

### React Bits Performance Tips

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

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

```

2. **Disable Animations on Reduced Motion**:

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

```

3. **Optimize Marquee Content**: Limit items for better performance

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

```

4. **Use RequestIdleCallback for Non-Critical Animations**:

```jsx
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:

```bash
# Magic UI requirements
npm install motion clsx tailwind-merge

# React Bits WebGL components
npm install ogl

# Ensure cn() utility exists
```

```typescript
// 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`:

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

```jsx

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

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

```

### 4. Performance Issues with Multiple Animated Components

**Problem**: Page lags when multiple heavy animations run simultaneously.

**Solution**: Implement progressive enhancement and conditional rendering:

```jsx
import { useState, useEffect } from 'react'

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

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

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

      
        {/* Page content */}
      
    
  )
}
```

### 5. TypeScript Type Errors

**Problem**: TypeScript complains about component props.

**Solution**: Extend proper base types:

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

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

### 6. Tailwind Classes Not Applied

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

**Solution**: Ensure content paths include component directory:

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

## Resources

### Official Documentation
- **Magic UI**: https://magicui.design
- **React Bits**: https://reactbits.dev
- **shadcn/ui**: https://ui.shadcn.com
- **Framer Motion**: https://motion.dev

### Key Scripts
- `scripts/component_importer.py` - Import and customize components from both libraries
- `scripts/props_generator.py` - Generate component prop configurations

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

### Starter Assets
- `assets/component_showcase/` - Interactive demo of all components
- `assets/examples/` - Landing page sections, dashboard widgets, micro-interactions

## Related Skills

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

## Source & license

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

- **Author:** [freshtechbro](https://github.com/freshtechbro)
- **Source:** [freshtechbro/claudedesignskills](https://github.com/freshtechbro/claudedesignskills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-freshtechbro-claudedesignskills-animated-component-libraries
- Seller: https://agentstack.voostack.com/s/freshtechbro
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.