import React, { useState, useEffect, useRef, useMemo } from 'react'; const WIDTH = 1200; const HEIGHT = 700; const OceanAnimation = () => { const requestRef = useRef(); const startTimeRef = useRef(Date.now()); const [time, setTime] = useState(0); // Constants for wave layers const waves = useMemo(() => [ { amplitude: 20, frequency: 0.005, speed: 1.2, color: '#1e293b', opacity: 0.6, yOffset: 450 }, { amplitude: 25, frequency: 0.008, speed: 1.8, color: '#334155', opacity: 0.7, yOffset: 480 }, { amplitude: 15, frequency: 0.012, speed: 2.5, color: '#475569', opacity: 0.8, yOffset: 520 }, { amplitude: 10, frequency: 0.015, speed: 3.2, color: '#64748b', opacity: 0.9, yOffset: 560 }, ], []); // Static stars generation const stars = useMemo(() => { return Array.from({ length: 150 }, () => ({ x: Math.random() * WIDTH, y: Math.random() * (HEIGHT * 0.6), size: Math.random() * 1.5 + 0.5, flickerSpeed: Math.random() * 0.05 + 0.02, phase: Math.random() * Math.PI * 2 })); }, []); const animate = () => { const now = Date.now(); const elapsed = (now - startTimeRef.current) / 1000; setTime(elapsed); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // Calculate boat position and rotation based on a specific wave layer const boatTargetWave = waves[1]; const boatX = WIDTH / 2; const getWaveY = (x, wave, t) => { return wave.yOffset + Math.sin(x * wave.frequency + t * wave.speed) * wave.amplitude; }; const boatY = getWaveY(boatX, boatTargetWave, time); // Calculate derivative for rotation const epsilon = 1; const y1 = getWaveY(boatX - epsilon, boatTargetWave, time); const y2 = getWaveY(boatX + epsilon, boatTargetWave, time); const angle = Math.atan2(y2 - y1, epsilon * 2) * (180 / Math.PI); const generateWavePath = (wave, t) => { let path = `M 0 ${HEIGHT}`; for (let x = 0; x <= WIDTH; x += 10) { const y = getWaveY(x, wave, t); path += ` L ${x} ${y}`; } path += ` L ${WIDTH} ${HEIGHT} Z`; return path; }; return (

{/* Cinematic Vignette Overlay */}

); }; export default OceanAnimation;