ai-react-animations 1.1.3 → 1.2.0

package/dist/mcp/server.js

@@ -0,0 +1,1062 @@
+#!/usr/bin/env node
+#!/usr/bin/env node
+
+// mcp/server.ts
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import {
+  CallToolRequestSchema,
+  ListToolsRequestSchema
+} from "@modelcontextprotocol/sdk/types.js";
+
+// mcp/registry.ts
+var components = [
+  {
+    id: "loading-dots",
+    name: "LoadingDots",
+    description: "Simple, elegant bouncing dots animation. Perfect for minimal loading states and inline indicators.",
+    category: "loading",
+    dependencies: ["framer-motion"],
+    props: [
+      { name: "size", type: "'sm' | 'md' | 'lg'", required: false, description: "Size of the dots", default: "'md'" },
+      { name: "color", type: "string", required: false, description: "Color of the dots (hex or CSS color)", default: "'#6366F1'" }
+    ],
+    usage: `import { LoadingDots } from '@/components/LoadingDots';
+
+function MyComponent() {
+  return <LoadingDots size="md" color="#6366F1" />;
+}`,
+    source: `'use client';
+
+import { motion } from 'framer-motion';
+
+interface LoadingDotsProps {
+  size?: 'sm' | 'md' | 'lg';
+  color?: string;
+}
+
+const sizeMap = {
+  sm: { dot: 6, gap: 4 },
+  md: { dot: 10, gap: 6 },
+  lg: { dot: 14, gap: 8 },
+};
+
+export default function LoadingDots({ size = 'md', color = '#6366F1' }: LoadingDotsProps) {
+  const { dot, gap } = sizeMap[size];
+
+  return (
+    <div className="flex items-center justify-center" style={{ gap }}>
+      {[0, 1, 2].map((i) => (
+        <motion.div
+          key={i}
+          style={{
+            width: dot,
+            height: dot,
+            backgroundColor: color,
+            borderRadius: '50%',
+          }}
+          animate={{ y: [0, -dot, 0] }}
+          transition={{
+            duration: 0.6,
+            repeat: Infinity,
+            delay: i * 0.15,
+            ease: 'easeInOut',
+          }}
+        />
+      ))}
+    </div>
+  );
+}`
+  },
+  {
+    id: "pulse-circle",
+    name: "PulseCircle",
+    description: "Circular progress indicator with expanding pulse rings and percentage display. Shows completion checkmark at 100%.",
+    category: "processing",
+    dependencies: ["framer-motion"],
+    props: [
+      { name: "isActive", type: "boolean", required: true, description: "Activates the animation" },
+      { name: "progress", type: "number", required: false, description: "External progress value (0-100)" },
+      { name: "onComplete", type: "() => void", required: false, description: "Callback when progress reaches 100%" }
+    ],
+    usage: `import { PulseCircle } from '@/components/PulseCircle';
+
+function MyComponent() {
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <PulseCircle
+      isActive={isActive}
+      onComplete={() => setIsActive(false)}
+    />
+  );
+}`,
+    source: `'use client';
+
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface PulseCircleProps {
+  isActive: boolean;
+  progress?: number;
+  onComplete?: () => void;
+}
+
+export default function PulseCircle({ isActive, progress: externalProgress, onComplete }: PulseCircleProps) {
+  const [internalProgress, setInternalProgress] = useState(0);
+  const progress = externalProgress ?? internalProgress;
+
+  useEffect(() => {
+    if (!isActive || externalProgress !== undefined) {
+      if (!isActive) setInternalProgress(0);
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setInternalProgress((prev) => {
+        if (prev >= 100) {
+          clearInterval(interval);
+          onComplete?.();
+          return 100;
+        }
+        return prev + Math.random() * 3 + 1;
+      });
+    }, 100);
+
+    return () => clearInterval(interval);
+  }, [isActive, externalProgress, onComplete]);
+
+  const isComplete = progress >= 100;
+  const radius = 45;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - (Math.min(progress, 100) / 100) * circumference;
+
+  return (
+    <div className="relative w-32 h-32">
+      {/* Pulse rings */}
+      <AnimatePresence>
+        {isActive && !isComplete && [0, 1, 2].map((i) => (
+          <motion.div
+            key={i}
+            className="absolute inset-0 rounded-full border-2 border-blue-400"
+            initial={{ scale: 1, opacity: 0.6 }}
+            animate={{ scale: 2, opacity: 0 }}
+            transition={{
+              duration: 2,
+              repeat: Infinity,
+              delay: i * 0.6,
+              ease: 'easeOut',
+            }}
+          />
+        ))}
+      </AnimatePresence>
+
+      {/* Progress circle */}
+      <svg className="w-full h-full -rotate-90" viewBox="0 0 100 100">
+        <circle cx="50" cy="50" r={radius} fill="none" stroke="#e5e7eb" strokeWidth="6" />
+        <motion.circle
+          cx="50"
+          cy="50"
+          r={radius}
+          fill="none"
+          stroke={isComplete ? '#10b981' : '#3b82f6'}
+          strokeWidth="6"
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          initial={{ strokeDashoffset: circumference }}
+          animate={{ strokeDashoffset }}
+          transition={{ duration: 0.3 }}
+        />
+      </svg>
+
+      {/* Center content */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        <AnimatePresence mode="wait">
+          {isComplete ? (
+            <motion.svg
+              key="check"
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              className="w-12 h-12 text-green-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+            </motion.svg>
+          ) : (
+            <motion.span
+              key="progress"
+              className="text-2xl font-bold text-gray-700"
+            >
+              {Math.round(progress)}%
+            </motion.span>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}`
+  },
+  {
+    id: "code-typing",
+    name: "CodeTyping",
+    description: "Realistic code typing effect with syntax highlighting and terminal-style presentation.",
+    category: "creative",
+    dependencies: ["framer-motion"],
+    props: [
+      { name: "isTyping", type: "boolean", required: true, description: "Controls the typing animation" },
+      { name: "onComplete", type: "() => void", required: false, description: "Callback when typing completes" }
+    ],
+    usage: `import { CodeTyping } from '@/components/CodeTyping';
+
+function MyComponent() {
+  const [isTyping, setIsTyping] = useState(false);
+
+  return (
+    <CodeTyping
+      isTyping={isTyping}
+      onComplete={() => setIsTyping(false)}
+    />
+  );
+}`,
+    source: `'use client';
+
+import { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+
+interface CodeTypingProps {
+  isTyping: boolean;
+  onComplete?: () => void;
+}
+
+const codeLines = [
+  { text: 'const', color: '#c678dd' },
+  { text: ' ai', color: '#e06c75' },
+  { text: ' = ', color: '#abb2bf' },
+  { text: 'await', color: '#c678dd' },
+  { text: ' generateResponse', color: '#61afef' },
+  { text: '(', color: '#abb2bf' },
+  { text: 'prompt', color: '#e5c07b' },
+  { text: ');', color: '#abb2bf' },
+];
+
+export default function CodeTyping({ isTyping, onComplete }: CodeTypingProps) {
+  const [displayedCode, setDisplayedCode] = useState<typeof codeLines>([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    if (!isTyping) {
+      setDisplayedCode([]);
+      setCurrentIndex(0);
+      return;
+    }
+
+    if (currentIndex >= codeLines.length) {
+      onComplete?.();
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      setDisplayedCode((prev) => [...prev, codeLines[currentIndex]]);
+      setCurrentIndex((prev) => prev + 1);
+    }, 150);
+
+    return () => clearTimeout(timeout);
+  }, [isTyping, currentIndex, onComplete]);
+
+  return (
+    <div className="bg-[#282c34] rounded-lg p-4 font-mono text-sm min-w-[300px]">
+      <div className="flex gap-2 mb-3">
+        <div className="w-3 h-3 rounded-full bg-red-500" />
+        <div className="w-3 h-3 rounded-full bg-yellow-500" />
+        <div className="w-3 h-3 rounded-full bg-green-500" />
+      </div>
+      <div className="flex items-center">
+        <span className="text-gray-500 mr-2">1</span>
+        {displayedCode.map((token, i) => (
+          <span key={i} style={{ color: token.color }}>{token.text}</span>
+        ))}
+        {isTyping && currentIndex < codeLines.length && (
+          <motion.span
+            className="w-2 h-5 bg-white ml-0.5"
+            animate={{ opacity: [1, 0] }}
+            transition={{ duration: 0.5, repeat: Infinity }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}`
+  },
+  {
+    id: "data-processing",
+    name: "DataProcessing",
+    description: "Data pipeline visualization showing input, processing, and output stages with flowing data cards.",
+    category: "processing",
+    dependencies: ["framer-motion", "lucide-react"],
+    props: [
+      { name: "isProcessing", type: "boolean", required: true, description: "Controls the processing animation" },
+      { name: "onComplete", type: "() => void", required: false, description: "Callback when processing completes" }
+    ],
+    usage: `import { DataProcessing } from '@/components/DataProcessing';
+
+function MyComponent() {
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  return (
+    <DataProcessing
+      isProcessing={isProcessing}
+      onComplete={() => setIsProcessing(false)}
+    />
+  );
+}`,
+    source: `'use client';
+
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Database, Cpu, CheckCircle } from 'lucide-react';
+
+interface DataProcessingProps {
+  isProcessing: boolean;
+  onComplete?: () => void;
+}
+
+export default function DataProcessing({ isProcessing, onComplete }: DataProcessingProps) {
+  const [stage, setStage] = useState<'idle' | 'input' | 'process' | 'output' | 'complete'>('idle');
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (!isProcessing) {
+      setStage('idle');
+      setProgress(0);
+      return;
+    }
+
+    setStage('input');
+    const stages = [
+      { stage: 'process' as const, delay: 800 },
+      { stage: 'output' as const, delay: 1700 },
+      { stage: 'complete' as const, delay: 2500 },
+    ];
+
+    const timeouts = stages.map(({ stage, delay }) =>
+      setTimeout(() => setStage(stage), delay)
+    );
+
+    const progressInterval = setInterval(() => {
+      setProgress((p) => Math.min(p + 4, 100));
+    }, 100);
+
+    const completeTimeout = setTimeout(() => {
+      onComplete?.();
+    }, 3000);
+
+    return () => {
+      timeouts.forEach(clearTimeout);
+      clearTimeout(completeTimeout);
+      clearInterval(progressInterval);
+    };
+  }, [isProcessing, onComplete]);
+
+  const stages = [
+    { id: 'input', icon: Database, label: 'Input', active: ['input', 'process', 'output', 'complete'].includes(stage) },
+    { id: 'process', icon: Cpu, label: 'Processing', active: ['process', 'output', 'complete'].includes(stage) },
+    { id: 'output', icon: CheckCircle, label: 'Output', active: ['output', 'complete'].includes(stage) },
+  ];
+
+  return (
+    <div className="flex flex-col items-center gap-6 p-6">
+      <div className="flex items-center gap-4">
+        {stages.map((s, i) => (
+          <div key={s.id} className="flex items-center">
+            <motion.div
+              className={\`w-16 h-16 rounded-xl flex items-center justify-center \${
+                s.active ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-400'
+              }\`}
+              animate={{ scale: stage === s.id ? [1, 1.1, 1] : 1 }}
+              transition={{ duration: 0.3 }}
+            >
+              <s.icon className="w-8 h-8" />
+            </motion.div>
+            {i < stages.length - 1 && (
+              <div className="w-12 h-1 mx-2 bg-gray-200 rounded overflow-hidden">
+                <motion.div
+                  className="h-full bg-blue-500"
+                  initial={{ width: 0 }}
+                  animate={{ width: s.active ? '100%' : 0 }}
+                  transition={{ duration: 0.5 }}
+                />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+      <div className="text-center">
+        <p className="text-lg font-medium text-gray-700 capitalize">{stage === 'idle' ? 'Ready' : stage}</p>
+        <p className="text-sm text-gray-500">{progress}% complete</p>
+      </div>
+    </div>
+  );
+}`
+  },
+  {
+    id: "ai-creating",
+    name: "AiCreating",
+    description: "Multi-stage animation visualizing AI creation process with thinking, writing, building, and completion phases.",
+    category: "creative",
+    dependencies: ["framer-motion"],
+    props: [
+      { name: "isLoading", type: "boolean", required: true, description: "Controls the animation state" },
+      { name: "size", type: "'sm' | 'md' | 'lg'", required: false, description: "Size of the animation", default: "'md'" },
+      { name: "onComplete", type: "() => void", required: false, description: "Callback when animation completes" }
+    ],
+    usage: `import { AiCreating } from '@/components/AiCreating';
+
+function MyComponent() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <AiCreating
+      isLoading={isLoading}
+      size="md"
+      onComplete={() => setIsLoading(false)}
+    />
+  );
+}`,
+    source: `'use client';
+
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import './AiCreating.css';
+
+interface AiCreatingProps {
+  isLoading: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  onComplete?: () => void;
+}
+
+const stages = ['thinking', 'writing', 'building', 'complete'] as const;
+type Stage = typeof stages[number];
+
+const stageMessages: Record<Stage, string> = {
+  thinking: 'Thinking...',
+  writing: 'Writing...',
+  building: 'Building...',
+  complete: 'Done!',
+};
+
+export default function AiCreating({ isLoading, size = 'md', onComplete }: AiCreatingProps) {
+  const [stage, setStage] = useState<Stage>('thinking');
+
+  const sizeClasses = {
+    sm: 'w-16 h-16',
+    md: 'w-24 h-24',
+    lg: 'w-32 h-32',
+  };
+
+  useEffect(() => {
+    if (!isLoading) {
+      setStage('thinking');
+      return;
+    }
+
+    const timings = [2000, 4000, 6000];
+    const timeouts = timings.map((delay, i) =>
+      setTimeout(() => setStage(stages[i + 1]), delay)
+    );
+
+    const completeTimeout = setTimeout(() => onComplete?.(), 7000);
+
+    return () => {
+      timeouts.forEach(clearTimeout);
+      clearTimeout(completeTimeout);
+    };
+  }, [isLoading, onComplete]);
+
+  if (!isLoading) return null;
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <div className={\`relative \${sizeClasses[size]}\`}>
+        <motion.div
+          className="ai-robot w-full h-full"
+          animate={{
+            y: stage === 'thinking' ? [0, -5, 0] : 0,
+            rotate: stage === 'building' ? [0, 5, -5, 0] : 0,
+          }}
+          transition={{ duration: 1, repeat: stage !== 'complete' ? Infinity : 0 }}
+        >
+          {/* Robot SVG */}
+          <svg viewBox="0 0 100 100" className="w-full h-full">
+            <rect x="25" y="30" width="50" height="45" rx="8" fill="#6366f1" />
+            <rect x="35" y="45" width="10" height="10" rx="2" fill="white" />
+            <rect x="55" y="45" width="10" height="10" rx="2" fill="white" />
+            <rect x="40" y="62" width="20" height="5" rx="2" fill="white" />
+            <rect x="42" y="20" width="16" height="15" rx="3" fill="#6366f1" />
+            <circle cx="50" cy="12" r="4" fill="#fbbf24" />
+          </svg>
+        </motion.div>
+      </div>
+      <motion.p
+        key={stage}
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="text-gray-600 font-medium"
+      >
+        {stageMessages[stage]}
+      </motion.p>
+    </div>
+  );
+}`
+  },
+  {
+    id: "ai-creating-2",
+    name: "AiCreating2",
+    description: "Full-screen AI brain animation with rotating rings, floating particles, and dynamic status messages.",
+    category: "creative",
+    dependencies: ["framer-motion", "lucide-react"],
+    props: [
+      { name: "isLoading", type: "boolean", required: true, description: "Controls animation visibility" },
+      { name: "message", type: "string", required: false, description: "Main loading message" },
+      { name: "subMessage", type: "string", required: false, description: "Secondary description text" },
+      { name: "primaryColor", type: "string", required: false, description: "Primary color (hex)", default: "'#6366F1'" },
+      { name: "backgroundColor", type: "string", required: false, description: "Background color (hex)", default: "'#0f172a'" },
+      { name: "textColor", type: "string", required: false, description: "Text color (hex)", default: "'#ffffff'" },
+      { name: "contained", type: "boolean", required: false, description: "Render in container vs full overlay", default: "false" },
+      { name: "onComplete", type: "() => void", required: false, description: "Callback when complete" }
+    ],
+    usage: `import { AiCreating2 } from '@/components/AiCreating2';
+
+function MyComponent() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <AiCreating2
+      isLoading={isLoading}
+      message="Creating your plan..."
+      primaryColor="#6366F1"
+      onComplete={() => setIsLoading(false)}
+    />
+  );
+}`,
+    source: `'use client';
+
+import { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Brain, Sparkles } from 'lucide-react';
+
+interface AiCreating2Props {
+  isLoading: boolean;
+  message?: string;
+  subMessage?: string;
+  primaryColor?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  contained?: boolean;
+  onComplete?: () => void;
+}
+
+export default function AiCreating2({
+  isLoading,
+  message = 'AI is creating...',
+  subMessage = 'This may take a moment',
+  primaryColor = '#6366F1',
+  backgroundColor = '#0f172a',
+  textColor = '#ffffff',
+  contained = false,
+  onComplete,
+}: AiCreating2Props) {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (!isLoading) {
+      setProgress(0);
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setProgress((p) => {
+        if (p >= 100) {
+          clearInterval(interval);
+          setTimeout(() => onComplete?.(), 500);
+          return 100;
+        }
+        return p + Math.random() * 2 + 0.5;
+      });
+    }, 100);
+
+    return () => clearInterval(interval);
+  }, [isLoading, onComplete]);
+
+  const containerClass = contained
+    ? 'w-full h-full flex items-center justify-center'
+    : 'fixed inset-0 z-50 flex items-center justify-center';
+
+  return (
+    <AnimatePresence>
+      {isLoading && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className={containerClass}
+          style={{ backgroundColor }}
+        >
+          <div className="flex flex-col items-center gap-8">
+            {/* Brain with rings */}
+            <div className="relative w-32 h-32">
+              {[0, 1, 2].map((i) => (
+                <motion.div
+                  key={i}
+                  className="absolute inset-0 rounded-full border-2"
+                  style={{ borderColor: primaryColor }}
+                  animate={{ rotate: 360, scale: [1, 1.1, 1] }}
+                  transition={{
+                    rotate: { duration: 3 + i, repeat: Infinity, ease: 'linear' },
+                    scale: { duration: 2, repeat: Infinity, delay: i * 0.3 },
+                  }}
+                />
+              ))}
+              <div className="absolute inset-0 flex items-center justify-center">
+                <Brain className="w-12 h-12" style={{ color: primaryColor }} />
+              </div>
+            </div>
+
+            {/* Messages */}
+            <div className="text-center">
+              <motion.h2
+                className="text-xl font-semibold mb-2 flex items-center gap-2 justify-center"
+                style={{ color: textColor }}
+              >
+                <Sparkles className="w-5 h-5" style={{ color: primaryColor }} />
+                {message}
+              </motion.h2>
+              <p className="text-sm opacity-70" style={{ color: textColor }}>{subMessage}</p>
+            </div>
+
+            {/* Progress bar */}
+            <div className="w-64 h-2 bg-white/10 rounded-full overflow-hidden">
+              <motion.div
+                className="h-full rounded-full"
+                style={{ backgroundColor: primaryColor }}
+                initial={{ width: 0 }}
+                animate={{ width: \`\${progress}%\` }}
+              />
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}`
+  },
+  {
+    id: "floating-login",
+    name: "FloatingLogin",
+    description: "Animated floating login form with smooth bobbing motion, supporting local and OAuth authentication.",
+    category: "auth",
+    dependencies: ["framer-motion", "lucide-react"],
+    props: [
+      { name: "mode", type: "'light' | 'dark'", required: false, description: "Theme mode", default: "'light'" },
+      { name: "primaryColor", type: "string", required: false, description: "Accent color (hex)", default: "'#6366F1'" },
+      { name: "floatingEnabled", type: "boolean", required: false, description: "Enable floating animation", default: "true" },
+      { name: "floatIntensity", type: "number", required: false, description: "Float intensity (1-10)", default: "5" },
+      { name: "onLogin", type: "(data: LoginData) => void", required: false, description: "Login callback with email/password" },
+      { name: "onGoogleLogin", type: "() => void", required: false, description: "Google OAuth callback" },
+      { name: "onAppleLogin", type: "() => void", required: false, description: "Apple Sign-In callback" }
+    ],
+    usage: `import { FloatingLogin } from '@/components/FloatingLogin';
+
+function MyComponent() {
+  return (
+    <FloatingLogin
+      mode="dark"
+      primaryColor="#6366F1"
+      floatIntensity={5}
+      onLogin={(data) => console.log(data)}
+      onGoogleLogin={() => signInWithGoogle()}
+      onAppleLogin={() => signInWithApple()}
+    />
+  );
+}`,
+    source: `'use client';
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Mail, Lock, Eye, EyeOff } from 'lucide-react';
+
+interface LoginData {
+  email: string;
+  password: string;
+}
+
+interface FloatingLoginProps {
+  mode?: 'light' | 'dark';
+  primaryColor?: string;
+  floatingEnabled?: boolean;
+  floatIntensity?: number;
+  onLogin?: (data: LoginData) => void | Promise<void>;
+  onGoogleLogin?: () => void | Promise<void>;
+  onAppleLogin?: () => void | Promise<void>;
+}
+
+export default function FloatingLogin({
+  mode = 'light',
+  primaryColor = '#6366F1',
+  floatingEnabled = true,
+  floatIntensity = 5,
+  onLogin,
+  onGoogleLogin,
+  onAppleLogin,
+}: FloatingLoginProps) {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const isDark = mode === 'dark';
+  const intensity = Math.max(1, Math.min(10, floatIntensity));
+  const yOffset = intensity * 2;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!onLogin) return;
+    setIsLoading(true);
+    try {
+      await onLogin({ email, password });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const cardBg = isDark ? 'bg-gray-900' : 'bg-white';
+  const textColor = isDark ? 'text-white' : 'text-gray-900';
+  const inputBg = isDark ? 'bg-gray-800 border-gray-700' : 'bg-gray-50 border-gray-200';
+
+  return (
+    <div className="flex items-center justify-center p-8">
+      <motion.div
+        animate={floatingEnabled ? {
+          y: [0, -yOffset, 0],
+          rotate: [0, 1, -1, 0],
+        } : {}}
+        transition={{
+          duration: 4,
+          repeat: Infinity,
+          ease: 'easeInOut',
+        }}
+        className={\`\${cardBg} rounded-2xl shadow-2xl p-8 w-full max-w-md\`}
+      >
+        <h2 className={\`text-2xl font-bold \${textColor} mb-6 text-center\`}>Welcome back</h2>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="relative">
+            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+            <input
+              type="email"
+              placeholder="Email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className={\`w-full pl-10 pr-4 py-3 rounded-lg border \${inputBg} \${textColor} focus:outline-none focus:ring-2\`}
+              style={{ '--tw-ring-color': primaryColor } as any}
+            />
+          </div>
+
+          <div className="relative">
+            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+            <input
+              type={showPassword ? 'text' : 'password'}
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className={\`w-full pl-10 pr-12 py-3 rounded-lg border \${inputBg} \${textColor} focus:outline-none focus:ring-2\`}
+              style={{ '--tw-ring-color': primaryColor } as any}
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400"
+            >
+              {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+            </button>
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="w-full py-3 rounded-lg text-white font-medium transition-opacity disabled:opacity-50"
+            style={{ backgroundColor: primaryColor }}
+          >
+            {isLoading ? 'Signing in...' : 'Sign in'}
+          </button>
+        </form>
+
+        <div className="mt-6 flex items-center gap-4">
+          <div className="flex-1 h-px bg-gray-300" />
+          <span className="text-sm text-gray-500">or</span>
+          <div className="flex-1 h-px bg-gray-300" />
+        </div>
+
+        <div className="mt-6 space-y-3">
+          {onGoogleLogin && (
+            <button
+              onClick={onGoogleLogin}
+              className={\`w-full py-3 rounded-lg border \${inputBg} \${textColor} font-medium flex items-center justify-center gap-2\`}
+            >
+              <svg className="w-5 h-5" viewBox="0 0 24 24">
+                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+              </svg>
+              Continue with Google
+            </button>
+          )}
+
+          {onAppleLogin && (
+            <button
+              onClick={onAppleLogin}
+              className={\`w-full py-3 rounded-lg \${isDark ? 'bg-white text-black' : 'bg-black text-white'} font-medium flex items-center justify-center gap-2\`}
+            >
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
+              </svg>
+              Continue with Apple
+            </button>
+          )}
+        </div>
+      </motion.div>
+    </div>
+  );
+}`
+  }
+];
+function getComponent(id) {
+  return components.find((c) => c.id === id || c.name.toLowerCase() === id.toLowerCase());
+}
+function listComponents(category) {
+  if (!category || category === "all") return components;
+  return components.filter((c) => c.category === category);
+}
+function getCategories() {
+  return ["all", ...new Set(components.map((c) => c.category))];
+}
+
+// mcp/server.ts
+import * as path from "path";
+var server = new Server(
+  {
+    name: "ai-react-animations",
+    version: "1.0.0"
+  },
+  {
+    capabilities: {
+      tools: {}
+    }
+  }
+);
+server.setRequestHandler(ListToolsRequestSchema, async () => {
+  return {
+    tools: [
+      {
+        name: "list_components",
+        description: "List all available AI animation components. Optionally filter by category (loading, processing, creative, auth).",
+        inputSchema: {
+          type: "object",
+          properties: {
+            category: {
+              type: "string",
+              description: "Filter by category: loading, processing, creative, auth, or all",
+              enum: ["all", "loading", "processing", "creative", "auth"]
+            }
+          }
+        }
+      },
+      {
+        name: "get_component",
+        description: "Get detailed information about a specific component including props, usage example, and source code.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            name: {
+              type: "string",
+              description: 'Component name or ID (e.g., "LoadingDots", "loading-dots", "PulseCircle")'
+            }
+          },
+          required: ["name"]
+        }
+      },
+      {
+        name: "add_component",
+        description: "Add an animation component to the user's project. Creates the component file in the specified directory.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            name: {
+              type: "string",
+              description: "Component name or ID to add"
+            },
+            directory: {
+              type: "string",
+              description: "Directory path where to create the component (default: ./components)"
+            }
+          },
+          required: ["name"]
+        }
+      },
+      {
+        name: "get_install_command",
+        description: "Get the npm install command for required dependencies of a component.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            name: {
+              type: "string",
+              description: "Component name or ID"
+            }
+          },
+          required: ["name"]
+        }
+      }
+    ]
+  };
+});
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+  const { name, arguments: args } = request.params;
+  switch (name) {
+    case "list_components": {
+      const category = args?.category || "all";
+      const filtered = listComponents(category);
+      const summary = filtered.map((c) => ({
+        name: c.name,
+        id: c.id,
+        category: c.category,
+        description: c.description
+      }));
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify({
+              total: filtered.length,
+              categories: getCategories(),
+              components: summary
+            }, null, 2)
+          }
+        ]
+      };
+    }
+    case "get_component": {
+      const componentName = args.name;
+      const component = getComponent(componentName);
+      if (!component) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: `Component "${componentName}" not found. Use list_components to see available components.`
+            }
+          ],
+          isError: true
+        };
+      }
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify({
+              name: component.name,
+              id: component.id,
+              description: component.description,
+              category: component.category,
+              dependencies: component.dependencies,
+              props: component.props,
+              usage: component.usage,
+              source: component.source
+            }, null, 2)
+          }
+        ]
+      };
+    }
+    case "add_component": {
+      const componentName = args.name;
+      const directory = args.directory || "./components";
+      const component = getComponent(componentName);
+      if (!component) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: `Component "${componentName}" not found. Use list_components to see available components.`
+            }
+          ],
+          isError: true
+        };
+      }
+      const filePath = path.join(directory, `${component.name}.tsx`);
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify({
+              success: true,
+              component: component.name,
+              filePath,
+              source: component.source,
+              dependencies: component.dependencies,
+              installCommand: `npm install ${component.dependencies.join(" ")}`,
+              usage: component.usage,
+              instructions: `
+1. Create the file at: ${filePath}
+2. Install dependencies: npm install ${component.dependencies.join(" ")}
+3. Import and use the component as shown in the usage example.
+
+Note: Make sure you have 'use client' directive if using Next.js App Router.
+              `.trim()
+            }, null, 2)
+          }
+        ]
+      };
+    }
+    case "get_install_command": {
+      const componentName = args.name;
+      const component = getComponent(componentName);
+      if (!component) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: `Component "${componentName}" not found.`
+            }
+          ],
+          isError: true
+        };
+      }
+      return {
+        content: [
+          {
+            type: "text",
+            text: `npm install ${component.dependencies.join(" ")}`
+          }
+        ]
+      };
+    }
+    default:
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Unknown tool: ${name}`
+          }
+        ],
+        isError: true
+      };
+  }
+});
+async function main() {
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  console.error("AI React Animations MCP Server running on stdio");
+}
+main().catch(console.error);