'use client'; import React, { useState, useEffect, useMemo } from 'react'; export const KunKunBasketballView = () => { const [time, setTime] = useState(0); const [mode, setMode] = useState<'dribble' | 'shrug'>('dribble'); // Animation loop logic useEffect(() => { let animationFrameId: number; const startTime = Date.now(); const animate = () => { const now = Date.now(); const elapsed = (now - startTime) / 1000; setTime(elapsed); // Switch modes every 4 seconds (2.5s reference + buffer) const cycle = elapsed % 5; if (cycle < 3) { setMode('dribble'); } else { setMode('shrug'); } animationFrameId = requestAnimationFrame(animate); }; animate(); return () => cancelAnimationFrame(animationFrameId); }, []); // Generate background grid lines const gridLines = useMemo(() => { const lines = []; // Vertical for (let i = 0; i <= 20; i++) { lines.push(); } // Horizontal (Perspective floor) for (let i = 0; i <= 10; i++) { const y = 400 + i * 20; lines.push(); } return lines; }, []); // Audio visualizer bars const visualizerBars = useMemo(() => { return Array.from({ length: 20 }).map((_, i) => ( )); }, []); // --- Animation Calculations --- // Bounce logic const bounceSpeed = 6; const bounceHeight = Math.abs(Math.sin(time * bounceSpeed)) * 120; const ballY = mode === 'dribble' ? 450 - bounceHeight : 380 + Math.sin(time * 10) * 10; const ballX = mode === 'dribble' ? 600 : 350; // Move ball between hand and center // Body movement const bodyY = mode === 'dribble' ? 300 + Math.sin(time * bounceSpeed) * 10 : 300 + Math.sin(time * 20) * 15; const shoulderRotate = mode === 'shrug' ? Math.sin(time * 20) * 15 : 0; // Arm logic const leftArmAngle = mode === 'dribble' ? 20 : -45 + Math.sin(time * 20) * 30; const rightArmAngle = mode === 'dribble' ? 45 + Math.sin(time * bounceSpeed) * 20 : 45 + Math.sin(time * 20) * 30; return ( ); };