import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // Utility for 3D projection const project = (x, y, z, width, height, time) => { const scale = 200 / (200 + z); const x2d = x * scale + width / 2; const y2d = y * scale + height / 2; return { x: x2d, y: y2d, scale }; }; // Component: Script / Code Rain const ScriptPanel = ({ active }) => { const lines = useMemo(() => Array.from({ length: 12 }, (_, i) => ({ id: i, width: Math.random() * 60 + 40, delay: i * 0.1 })), []); return ( SCRIPT_GENERATION.json {lines.map((line, i) => ( {active && ( AI_SEQ_{i}: GENERATING... )} ))} ); }; // Component: Storyboard Sketch const StoryboardPanel = ({ time }) => { const pathLength = 500; return ( STORYBOARD_SKETCH.ai {/* Animated Stick Figures/Sketches */} ); }; // Component: Comic Render const ComicPanel = () => { return ( COMIC_RENDER.png {/* Comic Panel Background */} {/* Dynamic Action Lines */} {/* Comic Character Silhouette */} {/* Speech Bubble */} AI RENDER ); }; // Component: 3D Scene const Scene3DPanel = ({ time }) => { const points = useMemo(() => { const pts = []; // Create a simplified terrain mesh for(let x = -2; x <= 2; x+=0.5) { for(let z = -2; z <= 2; z+=0.5) { pts.push({x: x * 40, y: Math.sin(x*2 + z*2) * 10 + 20, z: z * 40}); } } return pts; }, []); return ( 3D_SCENE_MODEL.obj {points.map((pt, i) => { // Rotate points const angle = time * 0.5; const rx = pt.x * Math.cos(angle) - pt.z * Math.sin(angle); const rz = pt.x * Math.sin(angle) + pt.z * Math.cos(angle); const proj = project(rx, pt.y, rz, 0, 0, time); return ( ); })} {/* Connection lines would be expensive to calc real-time in SVG, using dots for point cloud effect */} POLYGON COUNT: 12,405 ); }; // Main Component export default function AIWorkflowAnimation() { const [time, setTime] = useState(0); const [phase, setPhase] = useState(0); // 0: Split, 1: Merge, 2: Panorama const requestRef = useRef(); useEffect(() => { const animate = (t) => { const seconds = t / 1000; setTime(seconds); // Phase Logic const cycle = seconds % 20; // 20s total loop if (cycle < 6) setPhase(0); // 0-6s: 4 Screens else if (cycle < 9) setPhase(1); // 6-9s: Merge else setPhase(2); // 9s+: Panorama requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // Calculate layout transforms based on phase const getTransform = (quadrant) => { if (phase === 0) return `translate(0, 0)`; // During merge, everything moves to center and scales down/fades if (phase === 1) { const progress = Math.min(1, (time % 20 - 6) / 2); // 2s transition const ease = 1 - Math.pow(1 - progress, 3); let tx = 0, ty = 0; if (quadrant === 0) { tx = 250; ty = 150; } // TL to Center if (quadrant === 1) { tx = -250; ty = 150; } // TR to Center if (quadrant === 2) { tx = 250; ty = -150; } // BL to Center if (quadrant === 3) { tx = -250; ty = -150; } // BR to Center return `translate(${tx * ease}, ${ty * ease}) scale(${1 - ease * 0.5}) opacity(${1 - ease})`; } return `scale(0) opacity(0)`; // Hidden in phase 2 }; // Generate Digital Fuchun River Waves const renderRiver = () => { if (phase < 1) return null; const opacity = phase === 1 ? (time % 20 - 6) / 3 : 1; const waves = []; for(let i = 0; i < 5; i++) { let d = `M0 ${300 + i * 40}`; for(let x = 0; x <= VIEW_WIDTH; x+=20) { const y = Math.sin(x * 0.01 + time + i) * (20 + i * 5); d += ` L${x} ${300 + i * 40 + y}`; } d += ` L${VIEW_WIDTH} ${VIEW_HEIGHT} L0 ${VIEW_HEIGHT} Z`; waves.push( ); } // Abstract Digital Mountains const mountains = ( {/* Data points on mountains */} ); return ( {mountains} {waves} {/* Grid overlay for digital feel */} ); }; return ( ); }