import React, { useEffect, useState, useRef } from 'react'; interface SunriseAnimationProps { active: boolean; } const SunriseAnimation = ({ active }: SunriseAnimationProps) => { const [position, setPosition] = useState(0); const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); const animationIdRef = useRef(null); useEffect(() => { // Set initial dimensions setDimensions({ width: window.innerWidth, height: window.innerHeight }); const handleResize = () => { setDimensions({ width: window.innerWidth, height: window.innerHeight }); }; window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; }, []); // Animation timing parameters const ANIMATION_DURATION = 10000; //30000; // 30 seconds for full day/night cycle const UPDATE_INTERVAL = 50; // Update every 50ms (~20fps) useEffect(() => { if (!active) { // Clean up animation frame if active becomes false if (animationIdRef.current) { cancelAnimationFrame(animationIdRef.current); animationIdRef.current = null; } return; } console.log('Starting animation with duration:', ANIMATION_DURATION, 'ms'); const startTime = performance.now(); let lastUpdateTime = 0; const animate = (timestamp: number) => { if (!active) return; const elapsed = (timestamp - startTime) % ANIMATION_DURATION; const progress = elapsed / ANIMATION_DURATION; // Only update if enough time has passed since last update if (timestamp - lastUpdateTime >= UPDATE_INTERVAL) { // Use cosine for smooth transition from -1 to 1 over full duration const newPos = Math.cos(progress * Math.PI * 2); setPosition(newPos); lastUpdateTime = timestamp; } animationIdRef.current = requestAnimationFrame(animate); }; // Start the animation loop animationIdRef.current = requestAnimationFrame(animate); return () => { if (animationIdRef.current) { cancelAnimationFrame(animationIdRef.current); animationIdRef.current = null; } }; }, [active]); const yPos = dimensions.height * (1 - position); const normalizedPos = (position + 1) / 2; // Convert from [-1,1] to [0,1] if (!active) return null; return (
{/* Background Overlay */}
Stars Container
{/* Sun Elements */}
{/* Sky and Horizon */}
dimensions.height / 2 ? (dimensions.height - yPos) / (dimensions.height / 2) + 0.2 : yPos / (dimensions.height / 2)) }} />
{/* Moon */}
{/* Water Elements */}
dimensions.height / 2 ? (dimensions.height - yPos) / (dimensions.height / 2) - 0.1 : yPos / (dimensions.height / 2) - 0.1), transform: 'rotateX(45deg)' }} />
{/* Darkness Overlays */}
{/* Ocean Ripple */}
); }; export default SunriseAnimation;