Animated Component Libraries

Overview

このスキルは、Magic UI と React Bits という事前構築されたアニメーション React コンポーネント ライブラリの専門知識を提供します。これらのライブラリは本番環境対応のアニメーション付きコンポーネントを提供し、モダンでインタラクティブな Web アプリケーションの開発を大幅に加速させます。

Magic UI は、Tailwind CSS と Framer Motion 上に構築された 150 以上の TypeScript コンポーネントを提供し、shadcn/ui とのシームレスな統合を実現するよう設計されています。コンポーネントはコピー & ペースト可能で、高度なカスタマイズが可能です。

React Bits は、最小限の依存関係で 90 以上のアニメーション React コンポーネントを提供し、ビジュアルエフェクト、背景、マイクロインタラクションに焦点を当てています。コンポーネントはパフォーマンスとカスタマイズの容易さを重視しています。

両ライブラリは最新の React パターンに従い、TypeScript をサポートし、一般的な設計システムと統合します。

Core Concepts

Magic UI Architecture

Magic UI コンポーネントは、以下の 3 つの基本テクノロジーの上に構築されています：

1. Tailwind CSS: tailwind.config.js での完全カスタマイズが可能なユーティリティファーストのスタイリング
2. Framer Motion: 物理ベースのアニメーションとジェスチャー認識
3. shadcn/ui Integration: CLI インストールとコンポーネント構造について shadcn の規約に従う

インストール方法:

# 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}
    >
      {/* Component content */}
    </motion.div>
  )
}

React Bits Architecture

React Bits は、最小限の外部依存関係を持つ軽量でスタンドアロンなコンポーネントを重視します：

1. 自己完結型: 各コンポーネントは最小限の外部依存関係を持つ
2. CSS-in-JS はオプション: 多くのコンポーネントはインラインスタイルまたは CSS モジュールを使用
3. パフォーマンスファースト: 60fps アニメーション用に最適化
4. WebGL サポート: 一部のコンポーネント（Particles、Plasma）は高度なエフェクト用に WebGL を使用

インストール:

# 手動コピー & ペースト（主要な方法）
# reactbits.dev からコンポーネントファイルをプロジェクトにコピー

# キーとなる依存関係（必要に応じてインストール）:
npm install framer-motion  # アニメーション重視のコンポーネント用
npm install ogl           # WebGL コンポーネント用（Particles、Plasma）

コンポーネント カテゴリ:

• 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

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">
      {/* 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

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

シマー エフェクトとボーダー ビーム エフェクトを使用したインタラクティブなボタンを作成します：

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

macOS スタイルのドック（拡大効果付き）を実装します：

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

ダッシュボードおよびランディングページのアニメーション数字を表示します：

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

無限スクロール コンテンツ ディスプレイを作成します：

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

高パフォーマンスなアニメーション背景を追加します：

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 コンポーネントは 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))
}

Integration with Framer Motion

両ライブラリはアニメーション用に 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>Interactive Card</h3>
        <p>Combines magnetic pull with scale animation</p>
      </motion.div>
    </Magnet>
  )
}

Integration with React Router

アニメーション コンポーネントとルーティングを組み合わせます：

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

単一のプロジェクトで両方のライブラリの長所を活用します：

// 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>
      {/* 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. CSS Mask を使用してクリッピングの代わりに: 大きなパターンの方がパフォーマンスが良い

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

React Bits Performance Tips

1. WebGL コンポーネント: 低スペックデバイスではパーティクル数を減らす

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="Accessible 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(() => {
      // 負荷の大きいアニメーションを初期化
    })
  }
}, [])

Common Pitfalls

1. Missing Dependencies

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

2. CSS Animations Not Applied

問題: 手動インストール後、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))); }
}

3. Z-Index Conflicts

問題: 背景パターンまたはエフェクトが前景のコンテンツをカバーします。

解決策: 適切な z-index レイヤリングを使用します：

<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

問題: 複数の重いアニメーションが同時に実行されるとページがラグします。

解決策: プログレッシブエンハンスメントと条件付きレンダリングを実装します：

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">
        {/* Page content */}
      </div>
    </section>
  )
}

5. TypeScript Type Errors

問題: TypeScript がコンポーネントの props について不平を言います。

解決策: 適切な基本型を拡張します：

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

// React Bits パターン
interface CustomProps extends React.HTMLAttributes<HTMLDivElement> {
  customProp?: string
}

6. Tailwind Classes Not Applied

問題: Magic UI コンポーネント内のカスタム Tailwind クラスが適用されません。

解決策: content パスにコンポーネント ディレクトリが含まれていることを確認します：

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}", // コンポーネント ディレクトリを含める
  ],
  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 - 両方のライブラリからコンポーネントをインポートしてカスタマイズ
• scripts/props_generator.py - コンポーネント prop 設定を生成

References

• references/magic_ui_components.md - 使用例付き Magic UI 完全コンポーネント カタログ
• references/react_bits_components.md - React Bits コンポーネント ライブラリ リファレンス
• references/customization_guide.md - 両方のライブラリ用の prop ベースのカスタマイズ パターン

Starter Assets

• assets/component_showcase/ - すべてのコンポーネントのインタラクティブ デモ
• assets/examples/ - ランディングページ セクション、ダッシュボード ウィジェット、マイクロインタラクション

Related Skills

• motion-framer: 両方のライブラリで使用される基盤となるアニメーション コンセプトを理解する
• gsap-scrolltrigger: スクロール駆動アニメーション用の代替アプローチ
• react-spring-physics: 代替の物理ベースのアニメーション ライブラリ
• threejs-webgl: Particles/Plasma の代替として 3D 背景エフェクト用