```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; // ---------------------------------------------------------------------- // CONFIGURATION & CONSTANTS // ---------------------------------------------------------------------- const WIDTH = 1600; const HEIGHT = 900; const CENTER_X = WIDTH / 2; const CENTER_Y = HEIGHT / 2; // Colors const C_LEFT_BG = '#E5E7EB'; const C_LEFT_FG = '#374151'; // Dark gray for lines/text const C_LEFT_ACCENT = '#111827'; // Black/Darkest gray const C_RIGHT_BG = '#0B1120'; const C_RIGHT_GRID = '#06B6D4'; // Cyan const C_CORE_START = '#A855F7'; // Purple const C_CORE_END = '#06B6D4'; // Cyan const C_ACTIVE = '#F97316'; // Orange for active tools const C_TEXT_GLOW = '#E2E8F0'; // Animation Timing (in Frames approx 60fps) const CYCLE_DURATION = 900; // Right Side Phases const P_IDLE = { start: 0, end: 60 }; const P_INPUT = { start: 60, end: 120 }; const P_PULSE = { start: 120, end: 160 }; const P_CONNECT = { start: 160, end: 220 }; const P_ACTIVATE = { start: 220, end: 320 }; const P_RETURN = { start: 320, end: 420 }; const P_RESULT = { start: 420, end: 800 }; // ---------------------------------------------------------------------- // UTILS // ---------------------------------------------------------------------- const easeOutBack = (t) => { const c1 = 1.70158; const c3 = c1 + 1; return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2); }; const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; // Cubic Bezier calculation for particles // P0: Start, P1: Control, P2: End const getBezierPoint = (t, p0, p1, p2) => { const oneMinusT = 1 - t; const x = oneMinusT * oneMinusT * p0.x + 2 * oneMinusT * t * p1.x + t * t * p2.x; const y = oneMinusT * oneMinusT * p0.y + 2 * oneMinusT * t * p1.y + t * t * p2.y; return { x, y }; }; // ---------------------------------------------------------------------- // SUB-COMPONENTS (SVG PATHS) // ---------------------------------------------------------------------- const IconMagnifier = ({ color, size }) => ( ); const IconPython = ({ color, size }) => ( ); const IconChart = ({ color, size }) => ( ); // ---------------------------------------------------------------------- // MAIN COMPONENT // ---------------------------------------------------------------------- export default function AIComparisonAnimation() { const [tick, setTick] = useState(0); const requestRef = useRef(); // Main Loop useEffect(() => { const animate = () => { setTick(prev => (prev + 1) % CYCLE_DURATION); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // -------------------------------------------------------------------- // LEFT SIDE LOGIC (Traditional AI) // -------------------------------------------------------------------- const leftCycle = 240; // Shorter loop for left side const leftTick = tick % leftCycle; // Movement: User(150) -> Processor(400) const leftStartX = 150; const leftEndX = 400; const travelTime = 100; // frames to travel let signalX = leftStartX; let showPopup = false; if (leftTick < travelTime) { signalX = leftStartX + (leftEndX - leftStartX) * (leftTick / travelTime); } else { signalX = leftEndX; // Popup shows for 80 frames after arrival if (leftTick > travelTime && leftTick < travelTime + 80) { showPopup = true; } } // -------------------------------------------------------------------- // RIGHT SIDE LOGIC (Agent AI) // -------------------------------------------------------------------- // Phase calculations const pInput = Math.max(0, Math.min(1, (tick - P_INPUT.start) / (P_INPUT.end - P_INPUT.start))); const pPulse = Math.max(0, Math.min(1, (tick - P_PULSE.start) / (P_PULSE.end - P_PULSE.start))); const pConnect = Math.max(0, Math.min(1, (tick - P_CONNECT.start) / (P_CONNECT.end - P_CONNECT.start))); const pActivate = Math.max(0, Math.min(1, (tick - P_ACTIVATE.start) / (P_ACTIVATE.end - P_ACTIVATE.start))); const pReturn = Math.max(0, Math.min(1, (tick - P_RETURN.start) / (P_RETURN.end - P_RETURN.start))); const pResult = Math.max(0, Math.min(1, (tick - P_RESULT.start) / (P_RESULT.end - P_RESULT.start))); // Core Pulse let coreScale = 1; if (pPulse > 0 && pPulse < 1) { // 1.0 -> 1.15 -> 1.0 coreScale = 1 + Math.sin(pPulse * Math.PI) * 0.15; } // Tools Configuration const tools = useMemo(() => [ { id: 'search', angle: -60, dist: 220, Icon: IconMagnifier, color: '#F472B6' }, // Pink { id: 'python', angle: 0, dist: 240, Icon: IconPython, color: '#FACC15' }, // Yellow { id: 'chart', angle: 60, dist: 220, Icon: IconChart, color: '#4ADE80' }, // Green ], []); // Calculate Tool Positions (with floating) const toolPositions = tools.map((tool, i) => { const rad = (tool.angle * Math.PI) / 180; const floatY = Math.sin(tick * 0.05 + i) * 8; // Sine wave floating const baseX = WIDTH * 0.75 + Math.cos(rad) * tool.dist; const baseY = CENTER_Y + Math.sin(rad) * tool.dist; return { ...tool, x: baseX, y: baseY + floatY, baseX, baseY }; }); return (

); } ```