import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; // ----------------------------------------------------------------------------- // Constants & Config // ----------------------------------------------------------------------------- const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; const COLOR_BG = '#0f172a'; // Slate 900 const COLOR_PRIMARY = '#0ea5e9'; // Sky 500 const COLOR_SECONDARY = '#6366f1'; // Indigo 500 const COLOR_ACCENT = '#22d3ee'; // Cyan 400 const COLOR_ALERT = '#f43f5e'; // Rose 500 // ----------------------------------------------------------------------------- // Helper Math Functions // ----------------------------------------------------------------------------- const toRad = (deg) => (deg * Math.PI) / 180; const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => { const angleInRadians = toRad(angleInDegrees - 90); return { x: centerX + radius * Math.cos(angleInRadians), y: centerY + radius * Math.sin(angleInRadians), }; }; // Generates an SVG path for a sector (pie slice) or arc const describeArc = (x, y, radius, startAngle, endAngle, innerRadius = 0) => { const start = polarToCartesian(x, y, radius, endAngle); const end = polarToCartesian(x, y, radius, startAngle); const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'; let d = [ 'M', start.x, start.y, 'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y ]; if (innerRadius > 0) { const startInner = polarToCartesian(x, y, innerRadius, endAngle); const endInner = polarToCartesian(x, y, innerRadius, startAngle); d.push('L', endInner.x, endInner.y); d.push('A', innerRadius, innerRadius, 0, largeArcFlag, 1, startInner.x, startInner.y); d.push('Z'); } else { d.push('L', x, y, 'Z'); } return d.join(' '); }; // ----------------------------------------------------------------------------- // Main Component // ----------------------------------------------------------------------------- export default function CyberBearScanner() { // Animation State (RAF Loop) const [tick, setTick] = useState(0); const reqRef = useRef(null); const startTimeRef = useRef(null); // Initial random data (Stars/Particles) const particles = useMemo(() => { return Array.from({ length: 60 }).map(() => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 2 + 1, opacity: Math.random() * 0.5 + 0.1, speed: Math.random() * 0.5 + 0.1, })); }, []); // Bear Path Definition (Memoized) const bearPath = useMemo(() => { // A cute geometric bear outline // Head is roughly a circle, ears are arcs const r = 80; const earR = 25; const earOffset = 60; // Constructing a continuous path for the outline // Start bottom chin let path = `M 0 ${r}`; // Right cheek to right ear base path += ` A ${r} ${r} 0 0 0 ${earOffset} ${-earOffset + 10}`; // Right Ear path += ` A ${earR} ${earR} 0 0 1 ${earOffset - 20} ${-earOffset - 30}`; path += ` A ${earR} ${earR} 0 0 1 ${earOffset - 45} ${-earOffset - 5}`; // Top head path += ` A ${r} ${r} 0 0 0 ${-(earOffset - 45)} ${-earOffset - 5}`; // Left Ear path += ` A ${earR} ${earR} 0 0 1 ${-(earOffset - 20)} ${-earOffset - 30}`; path += ` A ${earR} ${earR} 0 0 1 ${-earOffset} ${-earOffset + 10}`; // Left cheek back to chin path += ` A ${r} ${r} 0 0 0 0 ${r}`; path += ` Z`; return path; }, []); // Animation Loop useEffect(() => { const animate = (time) => { if (!startTimeRef.current) startTimeRef.current = time; // const elapsed = time - startTimeRef.current; // Update tick state to trigger render setTick(time); reqRef.current = requestAnimationFrame(animate); }; reqRef.current = requestAnimationFrame(animate); return () => { if (reqRef.current) cancelAnimationFrame(reqRef.current); }; }, []); // --------------------------------------------------------------------------- // Dynamic Calculations per Frame // --------------------------------------------------------------------------- // Time scale factors const t = tick * 0.001; const tFast = tick * 0.002; // 1. Scanner Logic (Incomplete -> Complete -> Incomplete) // Use a Sine wave mapped to 0-360 // Cycle duration: approx 4 seconds const scanPhase = (Math.sin(t * 1.5) + 1) / 2; // 0 to 1 oscillating const scanAngle = scanPhase * 360; const isScanningUp = Math.cos(t * 1.5) > 0; // Direction check // 2. Bear Breathing/Float const bearScale = 1 + Math.sin(t * 2) * 0.02; const bearY = CENTER_Y + Math.sin(t) * 10; // 3. Glitch/Decoding Effect for Text const loadingProgress = Math.min(100, Math.floor(scanPhase * 100)); // 4. Rotating Rings const ring1Rot = t * 20; const ring2Rot = t * -15; return (

); }