'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const COLOR_BG = '#0f172a'; const COLOR_LINUX = '#22c55e'; // Green-500 const COLOR_AI_1 = '#3b82f6'; // Blue-500 const COLOR_AI_2 = '#a855f7'; // Purple-500 const COLOR_TEXT = '#f8fafc'; // Utility for interpolation const lerp = (start, end, t) => start * (1 - t) + end * t; const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; export default function LinuxToAIOS() { const [frame, setFrame] = useState(0); const requestRef = useRef(); // Animation Phase Configuration // 0-180: Linux Idle & Boot // 180-360: Transition / Glitch / Morph // 360+: AI OS Active const CYCLE_LENGTH = 800; // --- Data Initialization (Run Once) --- // Terminal Lines for Linux Phase const terminalLines = useMemo(() => [ "root@kernel:~$ init process", "Loading drivers... [OK]", "Mounting /dev/sda1... [OK]", "Checking file system... 100%", "Starting network service...", "System ready.", "sudo apt-get upgrade", "Reading package lists... Done", "Calculating upgrade... Done", "WARNING: SYSTEM ARCHITECTURE CHANGING" ], []); // Nodes that morph from Grid (Linux) to Neural Net (AI) const nodes = useMemo(() => { const items = []; const rows = 4; const cols = 6; const gridWidth = 400; const gridHeight = 250; // Generate Grid positions (Linux) and Random positions (AI) for (let i = 0; i < rows * cols; i++) { const r = Math.floor(i / cols); const c = i % cols; // Grid Layout centered const lx = (VIEW_WIDTH - gridWidth) / 2 + (c * (gridWidth / (cols - 1))); const ly = (VIEW_HEIGHT - gridHeight) / 2 + (r * (gridHeight / (rows - 1))); // Neural Layout (Circle/Randomized) const angle = (i / (rows * cols)) * Math.PI * 2; const radius = 120 + Math.random() * 100; const ax = VIEW_WIDTH / 2 + Math.cos(angle) * radius; const ay = VIEW_HEIGHT / 2 + Math.sin(angle) * radius; items.push({ id: i, linux: { x: lx, y: ly }, ai: { x: ax, y: ay }, offset: Math.random() * 100 // For floating animation }); } return items; }, []); // Connections for AI Neural Net const connections = useMemo(() => { const lines = []; // Create random connections between nearby nodes for AI phase for(let i=0; i { const animate = () => { setFrame(prev => (prev + 1) % CYCLE_LENGTH); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // --- Render Calculation --- // Determine current phase progress (0 to 1) // Transition happens between frame 200 and 350 let morphProgress = 0; if (frame > 200 && frame <= 350) { morphProgress = (frame - 200) / 150; } else if (frame > 350) { morphProgress = 1; } const smoothMorph = easeInOutCubic(morphProgress); // Glitch Effect factor (peak around frame 275) const glitchIntensity = (frame > 200 && frame < 350) ? Math.max(0, 1 - Math.abs((frame - 275) / 75)) * 10 : 0; // Calculate Node Positions const currentNodes = nodes.map(node => { // Interpolate position let x = lerp(node.linux.x, node.ai.x, smoothMorph); let y = lerp(node.linux.y, node.ai.y, smoothMorph); // Add float/breath const floatY = Math.sin((frame + node.offset) * 0.05) * 5; // Add glitch shake if (glitchIntensity > 0) { x += (Math.random() - 0.5) * glitchIntensity; y += (Math.random() - 0.5) * glitchIntensity; } return { ...node, x, y: y + floatY }; }); // Colors const mainColor = frame < 275 ? COLOR_LINUX : COLOR_AI_1; const secondaryColor = frame < 275 ? '#166534' : COLOR_AI_2; return ( ); }