```javascript import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // Color Palette based on requirements const BG_BASE = '#326fa4'; // User specified const BG_DARK = '#1e4b75'; const ACCENT_CYAN = '#67e8f9'; const ACCENT_YELLOW = '#fde047'; const GLASS_WHITE = 'rgba(255, 255, 255, 0.15)'; const TEXT_WHITE = '#ffffff'; // Floating floating symbols (Mixed EN/CN for context) const SYMBOLS = [ { text: 'A', type: 'en' }, { text: 'B', type: 'en' }, { text: 'C', type: 'en' }, { text: '你', type: 'cn' }, { text: '好', type: 'cn' }, { text: '学', type: 'cn' }, { text: '习', type: 'cn' }, { text: '龙', type: 'cn' }, { text: 'Cat', type: 'en' } ]; export default function ChineseLearningLogin() { // UI State const [isLogin, setIsLogin] = useState(true); // Animation Refs const requestRef = useRef(null); const startTimeRef = useRef(Date.now()); const mouseRef = useRef({ x: VIEW_WIDTH / 2, y: VIEW_HEIGHT / 2 }); const frameRef = useRef(0); // Use ref for frame count to avoid re-renders just for animation // Force re-render only when needed for visual updates that React controls const [, setTick] = useState(0); // Initialize Particles const particles = useMemo(() => { return Array.from({ length: 20 }).map(() => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 20 + 10, speed: Math.random() * 0.5 + 0.2, symbol: SYMBOLS[Math.floor(Math.random() * SYMBOLS.length)], phase: Math.random() * Math.PI * 2, })); }, []); // Mouse Move Handler const handleMouseMove = (e) => { const svg = e.currentTarget; const rect = svg.getBoundingClientRect(); mouseRef.current = { x: (e.clientX - rect.left) * (VIEW_WIDTH / rect.width), y: (e.clientY - rect.top) * (VIEW_HEIGHT / rect.height) }; }; // Main Animation Loop useEffect(() => { const animate = () => { frameRef.current = (Date.now() - startTimeRef.current) / 1000; setTick(prev => prev + 1); // Trigger render for smooth SVG updates requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); const time = frameRef.current; // Dynamic calculations const pandaY = Math.sin(time * 2) * 5; const pandaEyeX = (mouseRef.current.x - 200) / 50; const pandaEyeY = (mouseRef.current.y - VIEW_HEIGHT/2) / 50; return ( ); } ```