import React, { useState, useEffect, useRef, useMemo } from 'react'; import { Activity, Dna, Lock, Zap, XCircle, Fingerprint } from 'lucide-react'; // ========================================== // CONFIGURATION & CONSTANTS // ========================================== const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 600; const FPS = 60; const TOTAL_DURATION = 32; // seconds // Colors const COLORS = { bg: '#0f172a', initial: '#4ade80', // Light Green desertBg: '#451a03', // Dark Orange/Brown forestBg: '#1e1b4b', // Deep Purple desertCreature: '#fbbf24', // Amber/Yellow forestCreature: '#3b82f6', // Blue desertEvolved: '#f59e0b', // Sharp Orange forestEvolved: '#8b5cf6', // Fluid Violet barrier: '#1e293b', // Slate dna: '#22d3ee', // Cyan mutation: '#f472b6', // Pink repulsion: '#ef4444', // Red connection: '#fbbf24', // Gold }; // ========================================== // HELPER FUNCTIONS // ========================================== // Simple seeded random to keep things somewhat deterministic but lively const random = (min, max) => Math.random() * (max - min) + min; // Linear interpolation const lerp = (start, end, t) => start * (1 - t) + end * t; // Generate a polygon path for creatures // t: evolution factor (0 to 1) // type: 'initial', 'desert', 'forest' const generateCreaturePath = (cx, cy, radius, seed, type, t, time) => { const points = []; let numPoints = 12; // Desert: Becomes geometric, sharp, fewer points if (type === 'desert') { numPoints = Math.floor(lerp(12, 5, t)); } // Forest: Becomes fluid, more points if (type === 'forest') { numPoints = Math.floor(lerp(12, 20, t)); } for (let i = 0; i < numPoints; i++) { const angle = (i / numPoints) * Math.PI * 2; let r = radius; // Morphing logic if (type === 'initial') { // Soft blob r += Math.sin(angle * 3 + time * 2 + seed) * 2; } else if (type === 'desert') { // Spiky/Geometric const spikeFactor = lerp(0, 15, t); const jaggedness = (i % 2 === 0) ? spikeFactor : -spikeFactor * 0.5; r += jaggedness + Math.sin(time * 5) * 2; } else if (type === 'forest') { // Wavy/Fluid const waveAmp = lerp(2, 10, t); const waveFreq = lerp(3, 8, t); r += Math.sin(angle * waveFreq + time * 3 - seed) * waveAmp; // Add secondary wave r += Math.cos(angle * 2 + time * 5) * (waveAmp * 0.5); } const px = cx + Math.cos(angle) * r; const py = cy + Math.sin(angle) * r; points.push(`${px},${py}`); } return `M ${points.join(' L ')} Z`; }; // ========================================== // MAIN COMPONENT // ========================================== export default function EvolutionaryIsolationAnimation() { // ------------------------------------------------ // STATE & REFS // ------------------------------------------------ // We use a ref for the game loop state to avoid re-renders on logic updates, // and a single state to trigger the view update. const [frame, setFrame] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(null); // Simulation State const gameState = useRef({ time: 0, // Current time in seconds phase: 'initial', // initial, separation, divergence, contact, fastforward, isolation creatures: [], particles: [], // DNA bits, bubbles, dust barrierHeight: 0, barrierOpacity: 0, bgSplit: 0, // 0 to 1 (0 = full initial, 1 = full split) dayNightIntensity: 0, repulsionWave: { active: false, radius: 0, opacity: 0 }, contactLine: { active: false, opacity: 0, p1: null, p2: null }, }); // Initialize Creatures Once useMemo(() => { const initialCreatures = []; for (let i = 0; i < 20; i++) { initialCreatures.push({ id: i, x: VIEW_WIDTH / 2 + random(-100, 100), y: VIEW_HEIGHT / 2 + random(-100, 100), vx: random(-1, 1), vy: random(-1, 1), radius: 15, type: 'initial', // initial, desert, forest evolution: 0, // 0 to 1 side: i % 2 === 0 ? 'left' : 'right', // Predetermined destiny seed: Math.random() * 100, color: COLORS.initial, }); } gameState.current.creatures = initialCreatures; }, []); // ------------------------------------------------ // ANIMATION LOOP // ------------------------------------------------ const animate = (time) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = (time - startTimeRef.current) / 1000; gameState.current.time = elapsed; updatePhysics(elapsed); setFrame(prev => prev + 1); if (elapsed < TOTAL_DURATION) { requestRef.current = requestAnimationFrame(animate); } }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // ------------------------------------------------ // PHYSICS & LOGIC ENGINE // ------------------------------------------------ const updatePhysics = (t) => { const state = gameState.current; const { creatures } = state; // --- PHASE MANAGEMENT --- if (t < 3) { state.phase = 'initial'; state.bgSplit = 0; } else if (t < 6) { state.phase = 'separation'; // Ramping up barrier const progress = (t - 3) / 3; state.barrierHeight = lerp(0, VIEW_HEIGHT, progress); state.barrierOpacity = progress; state.bgSplit = progress; } else if (t < 15) { state.phase = 'divergence'; state.barrierHeight = VIEW_HEIGHT; state.bgSplit = 1; } else if (t < 20) { state.phase = 'contact'; // Barrier fades slightly state.barrierOpacity = 0.3 + Math.sin(t * 5) * 0.1; } else if (t < 25) { state.phase = 'fastforward'; state.barrierOpacity = 1; // Strobe effect state.dayNightIntensity = (Math.sin(t * 10) + 1) / 2; } else { state.phase = 'isolation'; state.dayNightIntensity = 0; state.barrierOpacity = 0; // Removed for the encounter } // --- CREATURE UPDATES --- const centerX = VIEW_WIDTH / 2; const barrierWidth = 60; creatures.forEach(c => { // 1. Movement c.x += c.vx; c.y += c.vy; // Wall bouncing if (c.y < 50 || c.y > VIEW_HEIGHT - 50) c.vy *= -1; if (c.x < 50 || c.x > VIEW_WIDTH - 50) c.vx *= -1; // Barrier Interaction if (state.phase !== 'initial' && state.phase !== 'contact' && state.phase !== 'isolation') { // Hard separation if (c.side === 'left') { if (c.x > centerX - barrierWidth/2) { c.x = centerX - barrierWidth/2 - 1; c.vx *= -1; } } else { if (c.x < centerX + barrierWidth/2) { c.x = centerX + barrierWidth/2 + 1; c.vx *= -1; } } } else if (state.phase === 'contact') { // Special logic: Two specific creatures meet if (c.id === 0 || c.id === 1) { const targetX = centerX + (c.id === 0 ? -40 : 40); const targetY = VIEW_HEIGHT / 2; c.x = lerp(c.x, targetX, 0.05); c.y = lerp(c.y, targetY, 0.05); // Connection logic state.contactLine.active = true; state.contactLine.p1 = creatures[0]; state.contactLine.p2 = creatures[1]; state.contactLine.opacity = Math.abs(Math.sin(t * 8)); // Heartbeat } } else if (state.phase === 'isolation') { // Final Encounter logic if (c.id === 0 || c.id === 1) { const targetX = centerX + (c.id === 0 ? -20 : 20); const targetY = VIEW_HEIGHT / 2; // Move closer if (t < 27) { c.x = lerp(c.x, targetX, 0.02); c.y = lerp(c.y, targetY, 0.02); } else if (t >= 27 && t < 27.5) { // REPEL! if (!state.repulsionWave.active) { state.repulsionWave.active = true; state.repulsionWave.radius = 10; } c.vx = (c.id === 0 ? -1 : 1) * 15; } else { // Drift away c.vx *= 0.95; } } } // 2. Evolution Logic if (state.phase === 'divergence' || state.phase === 'contact') { const progress = (t - 6) / 14; // Normalize 6s to 20s c.evolution = Math.min(progress, 1); c.type = c.side === 'left' ? 'desert' : 'forest'; // Color transition if (c.side === 'left') { // Green -> Yellow -> Orange c.color = interpolateColor(COLORS.initial, COLORS.desertCreature, c.evolution); } else { // Green -> Cyan -> Blue c.color = interpolateColor(COLORS.initial, COLORS.forestCreature, c.evolution); } } else if (state.phase === 'fastforward') { // Rapid change c.evolution = 1; if (c.side === 'left') { c.color = COLORS.desertEvolved; } else { c.color = COLORS.forestEvolved; } } // 3. DNA Particles Spawning if (state.phase === 'divergence' && Math.random() < 0.02) { state.particles.push({ x: c.x, y: c.y - 20, life: 1, type: 'dna', color: state.phase === 'fastforward' ? (c.side === 'left' ? '#f59e0b' : '#8b5cf6') : COLORS.dna }); } }); // --- PARTICLE UPDATE --- state.particles = state.particles.filter(p => p.life > 0); state.particles.forEach(p => { p.y -= 1; p.life -= 0.02; }); // --- REPULSION WAVE --- if (state.repulsionWave.active) { state.repulsionWave.radius += 10; state.repulsionWave.opacity = Math.max(0, 1 - (state.repulsionWave.radius / 300)); if (state.repulsionWave.opacity <= 0) state.repulsionWave.active = false; } }; // Color Interpolator helper const interpolateColor = (c1, c2, factor) => { // Very basic hex interpolation for simplicity // In a real lib we'd use d3-color or similar, here we hack it // Assuming 7 char hex const r1 = parseInt(c1.slice(1,3), 16); const g1 = parseInt(c1.slice(3,5), 16); const b1 = parseInt(c1.slice(5,7), 16); const r2 = parseInt(c2.slice(1,3), 16); const g2 = parseInt(c2.slice(3,5), 16); const b2 = parseInt(c2.slice(5,7), 16); const r = Math.round(r1 + (r2 - r1) * factor); const g = Math.round(g1 + (g2 - g1) * factor); const b = Math.round(b1 + (b2 - b1) * factor); return `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}`; }; // ------------------------------------------------ // RENDER HELPERS // ------------------------------------------------ const { time, phase, creatures, barrierHeight, barrierOpacity, bgSplit, particles, contactLine, repulsionWave, dayNightIntensity } = gameState.current; // Background Gradients const bgLeftStyle = { opacity: bgSplit, fill: COLORS.desertBg }; const bgRightStyle = { opacity: bgSplit, fill: COLORS.forestBg }; return (

{/* Tech Borders */}

); }