'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ----------------------------------------------------------------------------- // Constants & Config // ----------------------------------------------------------------------------- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const GROUND_Y = 500; const RUNNER_X = 300; // Runner's horizontal position const COLOR_BG = "#0f172a"; // Slate-900 const COLOR_ACCENT_1 = "#06b6d4"; // Cyan const COLOR_ACCENT_2 = "#ec4899"; // Pink const COLOR_GRID = "#1e293b"; // Slate-800 // ----------------------------------------------------------------------------- // Helper Hooks & Math // ----------------------------------------------------------------------------- // Hook for smooth animation loop const useAnimationFrame = (callback: (time: number) => void) => { const requestRef = useRef(); const previousTimeRef = useRef(); useEffect(() => { const animate = (time: number) => { if (previousTimeRef.current !== undefined) { const deltaTime = time - previousTimeRef.current; callback(deltaTime); } previousTimeRef.current = time; requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, [callback]); }; // Simple geometry rotation const rotate = (x: number, y: number, angle: number, ox: number, oy: number) => { const dx = x - ox; const dy = y - oy; return { x: ox + dx * Math.cos(angle) - dy * Math.sin(angle), y: oy + dx * Math.sin(angle) + dy * Math.cos(angle), }; }; // ----------------------------------------------------------------------------- // Components // ----------------------------------------------------------------------------- export const CyberRunAnimation = () => { const [time, setTime] = useState(0); // Scenery State // We use refs for particles to avoid re-allocating arrays every frame, // but we need state to trigger re-renders. // Since we are animating via a global time variable, the re-render is handled. // Generate static mountains const mountains = useMemo(() => { const m = []; let x = -200; while (x < VIEW_WIDTH + 400) { const w = 100 + Math.random() * 200; const h = 50 + Math.random() * 150; m.push({ x, w, h, offset: Math.random() * 100 }); x += w - 20; // overlap } return m; }, []); // Generate stars/particles const stars = useMemo(() => { return Array.from({ length: 40 }).map(() => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * (GROUND_Y - 100), size: Math.random() * 2 + 1, speed: Math.random() * 0.5 + 0.1, opacity: Math.random(), })); }, []); // Animation Loop useAnimationFrame((deltaTime) => { // Increment time (speed control) setTime((prev) => prev + deltaTime * 0.005); }); // --------------------------------------------------------------------------- // Physics & Kinematics Calculation // --------------------------------------------------------------------------- // Runner Base Position const runCycle = time * 2; // Speed of limbs const bounce = Math.abs(Math.sin(runCycle)) * 10; const torsoX = RUNNER_X; const torsoY = GROUND_Y - 140 - bounce; // Angles (Procedural Run Cycle) // Right Leg const rHipAngle = Math.sin(runCycle) * 0.8; const rKneeAngle = Math.sin(runCycle - 1.5) * 0.8 + 0.5; // Offset for drag // Left Leg (Phase shifted by PI) const lHipAngle = Math.sin(runCycle + Math.PI) * 0.8; const lKneeAngle = Math.sin(runCycle + Math.PI - 1.5) * 0.8 + 0.5; // Arms (Opposite to legs) const rArmAngle = Math.sin(runCycle + Math.PI) * 0.7; const rElbowAngle = Math.sin(runCycle + Math.PI - 1) * 0.5 - 1.5; const lArmAngle = Math.sin(runCycle) * 0.7; const lElbowAngle = Math.sin(runCycle - 1) * 0.5 - 1.5; // Joint Position Calculator const getLimbCoords = (startX: number, startY: number, length: number, angle: number, parentAngle = 0) => { const totalAngle = angle + parentAngle; // Simplified relative rotation const endX = startX + Math.sin(totalAngle) * length; const endY = startY + Math.cos(totalAngle) * length; return { x: endX, y: endY }; }; // Body Segments Lengths const thighLen = 50; const shinLen = 50; const armLen = 40; const forearmLen = 35; const torsoLen = 60; // Calculate Points // Hip center const hipX = torsoX; const hipY = torsoY + torsoLen; // Legs const rKnee = getLimbCoords(hipX, hipY, thighLen, rHipAngle); const rAnkle = getLimbCoords(rKnee.x, rKnee.y, shinLen, rKneeAngle); // Simplified FK const lKnee = getLimbCoords(hipX, hipY, thighLen, lHipAngle); const lAnkle = getLimbCoords(lKnee.x, lKnee.y, shinLen, lKneeAngle); // Arms (Shoulders) const shoulderX = torsoX; const shoulderY = torsoY; const rElbow = getLimbCoords(shoulderX, shoulderY, armLen, rArmAngle); const rHand = getLimbCoords(rElbow.x, rElbow.y, forearmLen, rElbowAngle); const lElbow = getLimbCoords(shoulderX, shoulderY, armLen, lArmAngle); const lHand = getLimbCoords(lElbow.x, lElbow.y, forearmLen, lElbowAngle); // Head const headX = torsoX + 5; // Slight forward lean const headY = torsoY - 20; // --------------------------------------------------------------------------- // Parallax Calculations // --------------------------------------------------------------------------- const mountainSpeed = 50; const cloudSpeed = 20; const groundSpeed = 800; const getParallaxX = (initialX: number, speed: number) => { const totalW = VIEW_WIDTH + 400; // Buffer return ((initialX - time * speed) % totalW + totalW) % totalW - 200; }; // Grid lines on ground const gridOffset = (time * groundSpeed) % 100; return ( ); };