import { useState, useEffect } from 'react'; export const useOceanDepthEffect = () => { const [scrollDepth, setScrollDepth] = useState(0); useEffect(() => { const handleScroll = () => { const scrollPosition = window.scrollY; const documentHeight = document.documentElement.scrollHeight - window.innerHeight; const scrollPercentage = Math.min(scrollPosition / documentHeight, 1); setScrollDepth(scrollPercentage); }; window.addEventListener('scroll', handleScroll); handleScroll(); // Initial call return () => window.removeEventListener('scroll', handleScroll); }, []); return scrollDepth; };