animated-component-libraries by freshtechbro/claudedesignskills
npx skills add https://github.com/freshtechbro/claudedesignskills --skill animated-component-libraries此技能提供对预构建的动画 React 组件库的专业知识,特别是 Magic UI 和 React Bits。这些库提供生产就绪的动画组件,可显著加速现代交互式 Web 应用程序的开发。
Magic UI 提供 150 多个基于 Tailwind CSS 和 Framer Motion 构建的 TypeScript 组件,旨在与 shadcn/ui 无缝集成。组件可复制粘贴使用且高度可定制。
React Bits 提供 90 多个依赖最少的动画 React 组件,专注于视觉效果、背景和微交互。组件强调性能和易于定制。
两个库都遵循现代 React 模式,支持 TypeScript,并与流行的设计系统集成。
Magic UI 组件建立在三项基础技术之上:
tailwind.config.js 实现完全自定义的实用程序优先样式安装方法 :
# 通过 shadcn CLI(推荐)
npx shadcn@latest add https://magicui.design/r/animated-beam
# 手动安装
# 1. 将组件代码复制到 components/ui/
# 2. 安装 motion: npm install motion
# 3. 将所需的 CSS 动画添加到 globals.css
# 4. 确保 lib/utils.ts 中存在 cn() 工具函数
组件结构 :
// 所有 Magic UI 组件都遵循此模式:
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}
>
{/* 组件内容 */}
</motion.div>
)
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
React Bits 强调轻量级、独立的组件,依赖最少:
安装 :
# 手动复制粘贴(主要方法)
# 从 reactbits.dev 复制组件文件到您的项目
# 关键依赖项(根据需要安装):
npm install framer-motion # 用于动画密集型组件
npm install ogl # 用于 WebGL 组件(Particles, Plasma)
组件类别 :
使用基于 SVG 的图案创建动态背景效果:
import { GridPattern } from "@/components/ui/grid-pattern"
import { AnimatedGridPattern } from "@/components/ui/animated-grid-pattern"
import { cn } from "@/lib/utils"
export default function HeroSection() {
return (
<div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border">
{/* 静态网格图案 */}
<GridPattern
squares={[
[4, 4], [5, 1], [8, 2], [5, 3], [10, 10], [12, 15]
]}
className={cn(
"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
"fill-gray-400/30 stroke-gray-400/30"
)}
/>
{/* 动画交互式网格 */}
<AnimatedGridPattern
numSquares={50}
maxOpacity={0.5}
duration={4}
repeatDelay={0.5}
className={cn(
"[mask-image:radial-gradient(500px_circle_at_center,white,transparent)]",
"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12"
)}
/>
<h1 className="relative z-10 text-6xl font-bold">
您的内容在此处
</h1>
</div>
)
}
使用 BlurText 实现滚动触发的文本显示:
import BlurText from './components/BlurText'
export default function MarketingSection() {
return (
<section className="py-20">
{/* 逐词显示 */}
<BlurText
text="将您的想法变为现实"
delay={100}
animateBy="words"
direction="top"
className="text-5xl font-bold text-center mb-8"
/>
{/* 逐字符显示,带自定义缓动 */}
<BlurText
text="触手可及的像素级完美动画"
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>
)
}
创建具有微光和边框光束效果的交互式按钮:
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">
{/* 微光按钮 */}
<ShimmerButton
shimmerColor="#ffffff"
shimmerSize="0.05em"
shimmerDuration="3s"
borderRadius="100px"
background="rgba(0, 0, 0, 1)"
className="px-8 py-3"
>
开始使用
</ShimmerButton>
{/* 带动画边框的卡片 */}
<Card className="relative w-[350px] overflow-hidden">
<div className="p-6">
<h3 className="text-2xl font-bold">高级计划</h3>
<p className="text-gray-600">解锁所有功能</p>
<Button className="mt-4">订阅</Button>
</div>
<BorderBeam duration={8} size={100} />
</Card>
</div>
)
}
实现具有放大效果的 macOS 风格 Dock:
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: '仪表板',
onClick: () => navigate('/dashboard')
},
{
icon: <VscArchive size={24} />,
label: '项目',
onClick: () => navigate('/projects')
},
{
icon: <VscAccount size={24} />,
label: '个人资料',
onClick: () => navigate('/profile')
},
{
icon: <VscSettingsGear size={24} />,
label: '设置',
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>
)
}
为仪表板和着陆页显示动画数字:
import CountUp from './components/CountUp'
export default function Statistics() {
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 py-16">
{/* 收入计数器 */}
<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">产生的收入</p>
</div>
{/* 正常运行时间百分比 */}
<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">正常运行时间</p>
</div>
{/* 客户数量 */}
<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">满意的客户</p>
</div>
</div>
)
}
创建无限滚动的内容显示:
import { Marquee } from "@/components/ui/marquee"
const testimonials = [
{ name: "John Doe", text: "惊人的产品!", avatar: "/avatar1.jpg" },
{ name: "Jane Smith", text: "超出预期", avatar: "/avatar2.jpg" },
{ name: "Bob Johnson", text: "强烈推荐", avatar: "/avatar3.jpg" }
]
export default function Testimonials() {
return (
<section className="py-20">
<h2 className="text-4xl font-bold text-center mb-12">
我们的客户怎么说
</h2>
{/* 水平跑马灯 */}
<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>
{/* 垂直跑马灯 */}
<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>
)
}
添加高性能动画背景:
import Particles from './components/Particles'
import Plasma from './components/Plasma'
import Aurora from './components/Aurora'
// 粒子效果
export default function ParticlesHero() {
return (
<section style={{ position: 'relative', height: '100vh' }}>
<Particles
particleCount={200}
particleColors={['#FF6B6B', '#4ECDC4', '#45B7D1']}
particleSpread={10}
speed={0.12}
moveParticlesOnHover={true}
particleHoverFactor={2}
particleBaseSize={100}
sizeRandomness={1.2}
alphaParticles={true}
cameraDistance={20}
className="particles-bg"
/>
<div className="relative z-10 flex items-center justify-center h-full">
<h1 className="text-7xl font-bold text-white">
欢迎来到未来
</h1>
</div>
</section>
)
}
// 等离子效果
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>带有等离子背景的内容</h1>
</div>
</div>
)
}
// 极光效果
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>赛博朋克极光效果</h1>
</main>
</div>
)
}
Magic UI 组件设计为与 shadcn/ui 无缝协作:
# 安装 shadcn/ui 组件
npx shadcn@latest add button card
# 安装 Magic UI 组件
npx shadcn@latest add https://magicui.design/r/shimmer-button
# 在组件中一起使用
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"
必需的工具函数 (lib/utils.ts):
import clsx, { ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
两个库都利用 Framer Motion 实现动画:
import { motion } from "framer-motion"
import { Magnet } from './components/Magnet'
// 将 React Bits 的 Magnet 与 Framer Motion 手势结合
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>交互式卡片</h3>
<p>结合了磁力吸引和缩放动画</p>
</motion.div>
</Magnet>
)
}
将动画组件与路由结合:
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 (
<>
{/* 动画页面过渡 */}
<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>
{/* 持久化的 Dock 导航 */}
<Dock items={navItems} />
</>
)
}
在单个项目中利用两个库的优势:
// Magic UI: 图案和结构组件
import { GridPattern } from "@/components/ui/grid-pattern"
import { BorderBeam } from "@/components/ui/border-beam"
import { Marquee } from "@/components/ui/marquee"
// React Bits: 交互元素和效果
import BlurText from './components/BlurText'
import CountUp from './components/CountUp'
import Particles from './components/Particles'
export default function LandingPage() {
return (
<main>
{/* 带有 React Bits 背景 + Magic UI 图案的 Hero 部分 */}
<section className="relative h-screen">
<Particles particleCount={150} />
<GridPattern
squares={[[4,4], [8,2], [12,6]]}
className="opacity-30"
/>
<BlurText
text="下一代平台"
className="text-7xl font-bold"
/>
</section>
{/* 带有 React Bits CountUp 的统计部分 */}
<section>
<CountUp end={10000} suffix="+" />
</section>
{/* 带有 Magic UI Marquee 的推荐部分 */}
<section>
<Marquee>
{/* 推荐卡片 */}
</Marquee>
</section>
</main>
)
}
<GridPattern
className="[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]"
/>
2. 降低动画复杂度 : 在移动设备上为 AnimatedGridPattern 降低 numSquares
const isMobile = window.innerWidth < 768
<AnimatedGridPattern
numSquares={isMobile ? 20 : 50}
duration={isMobile ? 6 : 4}
/>
3. 懒加载组件 : 对重型组件使用 React.lazy
const AnimatedGridPattern = React.lazy(() =>
import("@/components/ui/animated-grid-pattern")
)
const particleCount = navigator.hardwareConcurrency > 4 ? 300 : 150
<Particles
particleCount={particleCount}
speed={0.1}
/>
2. 在减少运动偏好时禁用动画 :
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
<BlurText
text="无障碍文本"
delay={prefersReducedMotion ? 0 : 100}
animateBy={prefersReducedMotion ? "none" : "words"}
/>
3. 优化 Marquee 内容 : 限制项目数量以获得更好的性能
<Marquee repeat={2}> {/* 而不是默认的 4 */}
{items.slice(0, 10)} {/* 限制项目数量 */}
</Marquee>
4. 对非关键动画使用 RequestIdleCallback :
useEffect(() => {
if ('requestIdleCallback' in window) {
requestIdleCallback(() => {
// 初始化昂贵的动画
})
}
}, [])
问题 : 由于缺少 motion 或工具函数导致组件损坏。
解决方案 : 始终安装所需的依赖项和工具函数:
# Magic UI 要求
npm install motion clsx tailwind-merge
# React Bits WebGL 组件
npm install ogl
# 确保 cn() 工具函数存在
// lib/utils.ts
import clsx, { ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
问题 : 手动安装后 Magic UI 动画不起作用。
解决方案 : 将所需的 CSS 动画添加到 globals.css:
/* app/globals.css */
@theme inline {
--animate-ripple: ripple var(--duration, 2s) ease calc(var(--i, 0) * 0.2s) infinite;
--animate-shimmer-slide: shimmer-slide var(--speed) ease-in-out infinite alternate;
--animate-marquee: marquee var(--duration) linear infinite;
--animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
}
@keyframes ripple {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(0.9); }
}
@keyframes shimmer-slide {
to { transform: translate(calc(100cqw - 100%), 0); }
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(calc(-100% - var(--gap))); }
}
@keyframes marquee-vertical {
from { transform: translateY(0); }
to { transform: translateY(calc(-100% - var(--gap))); }
}
问题 : 背景图案或效果覆盖前景内容。
解决方案 : 使用适当的 z-index 分层:
<div className="relative">
{/* 背景 (z-0 或负数) */}
<GridPattern className="absolute inset-0 -z-10" />
{/* 内容 (更高的 z-index) */}
<div className="relative z-10">
<h1>内容显示在图案上方</h1>
</div>
</div>
问题 : 当多个重型动画同时运行时页面卡顿。
解决方案 : 实现渐进增强和条件渲染:
import { useState, useEffect } from 'react'
export default function OptimizedPage() {
const [enableHeavyEffects, setEnableHeavyEffects] = useState(false)
useEffect(() => {
// 检查设备能力
const isHighEnd = navigator.hardwareConcurrency > 4 &&
!navigator.userAgent.includes('Mobile')
setEnableHeavyEffects(isHighEnd)
}, [])
return (
<section className="relative">
{enableHeavyEffects ? (
<Particles particleCount={300} />
) : (
<GridPattern /> {/* 更轻量的替代方案 */}
)}
<div className="content">
{/* 页面内容 */}
</div>
</section>
)
}
问题 : TypeScript 对组件属性报错。
解决方案 : 扩展适当的基础类型:
// Magic UI 模式
interface CustomComponentProps extends React.ComponentPropsWithoutRef<"div"> {
customProp?: string
className?: string
}
// React Bits 模式
interface CustomProps extends React.HTMLAttributes<HTMLDivElement> {
customProp?: string
}
问题 : Magic UI 组件中的自定义 Tailwind 类不起作用。
解决方案 : 确保内容路径包含组件目录:
// tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}", // 包含组件目录
],
theme: {
extend: {},
},
plugins: [],
}
scripts/component_importer.py - 从两个库导入和自定义组件scripts/props_generator.py - 生成组件属性配置references/magic_ui_components.md - 完整的 Magic UI 组件目录,包含使用示例references/react_bits_components.md - React Bits 组件库参考references/customization_guide.md - 两个库基于属性的自定义模式assets/component_showcase/ - 所有组件的交互式演示assets/examples/ - 着陆页部分、仪表板小部件、微交互每周安装量
113
仓库
GitHub 星标
11
首次出现
2026年2月27日
安全审计
安装于
opencode113
github-copilot111
codex111
amp111
cline111
kimi-cli111
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)]"
/>
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")
)
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
})
}
}, [])
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-interactionsWeekly Installs
113
Repository
GitHub Stars
11
First Seen
Feb 27, 2026
Security Audits
Gen Agent Trust HubPassSocketWarnSnykWarn
Installed on
opencode113
github-copilot111
codex111
amp111
cline111
kimi-cli111
TanStack Table 中文指南:React 无头表格库,实现排序过滤分页
518 周安装
使用 Remotion 创建 Kurzgesagt 风格教育视频 - 专业视频制作技能指南
221 周安装
Neon Drizzle 集成指南:为 Neon 数据库设置 Drizzle ORM 的完整解决方案
225 周安装
Elasticsearch安全故障排除指南:诊断401/403错误、TLS证书、API密钥和许可证问题
219 周安装
学术论文LaTeX模板库:Nature/Science/IEEE期刊会议海报申请书模板
224 周安装
应用程序性能优化全栈指南:从分析、数据库到前端与CDN的端到端优化
227 周安装
QA测试策略指南:基于风险的现代软件质量工程与测试金字塔实践
221 周安装