import React, { useState, useEffect, useRef, useMemo } from 'react'; const WIDTH = 1200; const HEIGHT = 700; const BG_COLOR = '#0f172a'; const READER_COLOR = '#38bdf8'; // Sky blue const GAMER_COLOR = '#e879f9'; // Fuchsia const STROKE_WIDTH = 6; // --- Utility Hooks --- const useAnimationFrame = (callback) => { const requestRef = useRef(); const previousTimeRef = useRef(); useEffect(() => { const animate = (time) => { if (previousTimeRef.current !== undefined) { const deltaTime = time - previousTimeRef.current; callback(time, deltaTime); } previousTimeRef.current = time; requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [callback]); }; // --- Sub-Components --- const TechGrid = ({ time }) => { const lines = useMemo(() => Array.from({ length: 20 }), []); return ( {/* Horizontal moving grid */} {lines.map((_, i) => { const y = (i * 40 + time * 10) % HEIGHT; return ( ); })} {/* Vertical perspective lines */} {lines.map((_, i) => { const x = (i * 80) - 200; return ( ); })} ); }; const FloatingParticles = ({ time, type, count = 10, xBase, yBase }) => { const particles = useMemo(() => { return Array.from({ length: count }).map(() => ({ xOffset: (Math.random() - 0.5) * 150, speed: 20 + Math.random() * 30, phase: Math.random() * Math.PI * 2, symbol: type === 'code' ? ['0', '1', '{', '}', ';'][Math.floor(Math.random() * 5)] : ['+', '×', '?', '!', '...'][Math.floor(Math.random() * 5)] })); }, [type, count]); return ( {particles.map((p, i) => { const y = yBase - ((time * p.speed / 1000 * 60 + p.phase * 50) % 200); const opacity = 1 - (yBase - y) / 200; return ( {p.symbol} ); })} ); }; // --- Main Component --- export default function StickFigureLife() { const [time, setTime] = useState(0); // Animation Loop useAnimationFrame((t) => { setTime(t); }); // --- Derived Animation Values --- // General const breath = Math.sin(time / 500); // Reader (Left) const readerY = 450; const readerX = 350; const headBob = Math.sin(time / 800) * 2; const pageTurn = (Math.sin(time / 600) + 1) / 2; // 0 to 1 const bookAngle = 10 + pageTurn * 5; // Gamer (Right) const gamerY = 450; const gamerX = 850; const gamerRock = Math.sin(time / 150) * 5; // Fast rocking (intense gaming) const thumbSpeed = Math.sin(time / 50) * 3; // Very fast thumb movement const screenFlash = Math.floor(time / 100) % 2 === 0; return (

{/* Title Overlay */}

Analog vs Digital

); }