ai-react-animations 1.1.3 → 1.2.0

package/mcp/registry.ts

@@ -0,0 +1,857 @@
+/**
+ * AI React Animations - Component Registry
+ * Contains metadata and source code for all animation components
+ */
+
+export interface ComponentInfo {
+  id: string;
+  name: string;
+  description: string;
+  category: 'loading' | 'processing' | 'creative' | 'auth';
+  dependencies: string[];
+  props: Array<{
+    name: string;
+    type: string;
+    required: boolean;
+    description: string;
+    default?: string;
+  }>;
+  usage: string;
+  source: string;
+}
+
+export const components: ComponentInfo[] = [
+  {
+    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>
+  );
+}`,
+  },
+];
+
+export function getComponent(id: string): ComponentInfo | undefined {
+  return components.find(c => c.id === id || c.name.toLowerCase() === id.toLowerCase());
+}
+
+export function listComponents(category?: string): ComponentInfo[] {
+  if (!category || category === 'all') return components;
+  return components.filter(c => c.category === category);
+}
+
+export function getCategories(): string[] {
+  return ['all', ...new Set(components.map(c => c.category))];
+}