Help us improve
Share bugs, ideas, or general feedback.
From animated-component-libraries
Provides pre-built animated React components from Magic UI (Tailwind/Framer Motion/shadcn-ui) and React Bits for landing pages, dashboards, and interactive UIs.
npx claudepluginhub freshtechbro/claudedesignskills --plugin animated-component-librariesHow this skill is triggered — by the user, by Claude, or both
Slash command
/animated-component-libraries:animated-component-librariesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
Provides pre-built animated React components from Magic UI (Tailwind/Framer Motion/shadcn-ui) and React Bits for landing pages, dashboards, and interactive UIs.
Provides copy-paste animation patterns for React/Next.js: buttons, modals, toasts, stagger, page transitions, scroll reveals, and layout animations using motion-foundations tokens and springs.
Installs and customizes 100+ animated Aceternity UI React components in Next.js apps using Tailwind, shadcn CLI, and Framer Motion. Fixes integration errors for heroes, parallax, 3D effects.
Share bugs, ideas, or general feedback.
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.
Magic UI components are built on three foundational technologies:
tailwind.config.jsInstallation 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 emphasizes lightweight, standalone components with minimal dependencies:
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:
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>
)
}
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>
)
}
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>
)
}
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>
)
}
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>
)
}
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>
)
}
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>
)
}
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))
}
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>
)
}
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} />
</>
)
}
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>
)
}
<GridPattern
className="[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]"
/>
numSquares for AnimatedGridPattern on mobileconst isMobile = window.innerWidth < 768
<AnimatedGridPattern
numSquares={isMobile ? 20 : 50}
duration={isMobile ? 6 : 4}
/>
const AnimatedGridPattern = React.lazy(() =>
import("@/components/ui/animated-grid-pattern")
)
const particleCount = navigator.hardwareConcurrency > 4 ? 300 : 150
<Particles
particleCount={particleCount}
speed={0.1}
/>
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
<BlurText
text="Accessible text"
delay={prefersReducedMotion ? 0 : 100}
animateBy={prefersReducedMotion ? "none" : "words"}
/>
<Marquee repeat={2}> {/* Instead of default 4 */}
{items.slice(0, 10)} {/* Limit items */}
</Marquee>
useEffect(() => {
if ('requestIdleCallback' in window) {
requestIdleCallback(() => {
// Initialize expensive animations
})
}
}, [])
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))
}
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))); }
}
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>
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>
)
}
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
}
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: [],
}
scripts/component_importer.py - Import and customize components from both librariesscripts/props_generator.py - Generate component prop configurationsreferences/magic_ui_components.md - Complete Magic UI component catalog with usage examplesreferences/react_bits_components.md - React Bits component library referencereferences/customization_guide.md - Prop-based customization patterns for both librariesassets/component_showcase/ - Interactive demo of all componentsassets/examples/ - Landing page sections, dashboard widgets, micro-interactions