diff --git a/src/hooks/use-scroll-reveal.ts b/src/hooks/use-scroll-reveal.ts index 63a6246..eb0dff8 100644 --- a/src/hooks/use-scroll-reveal.ts +++ b/src/hooks/use-scroll-reveal.ts @@ -1,5 +1,3 @@ -'use client'; - import { useEffect, useRef, useState } from 'react'; interface UseScrollRevealOptions { @@ -8,10 +6,13 @@ interface UseScrollRevealOptions { triggerOnce?: boolean; } -export function useScrollReveal(options: UseScrollRevealOptions = {}) { - const { threshold = 0.1, rootMargin = '0px', triggerOnce = true } = options; - const ref = useRef(null); - const [isRevealed, setIsRevealed] = useState(false); +export function useScrollReveal({ + threshold = 0.1, + rootMargin = '0px', + triggerOnce = true, +}: UseScrollRevealOptions = {}) { + const ref = useRef(null); + const [isVisible, setIsVisible] = useState(false); useEffect(() => { const element = ref.current; @@ -20,12 +21,12 @@ export function useScrollReveal(options: UseScrollRevealOptions = {}) { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { - setIsRevealed(true); + setIsVisible(true); if (triggerOnce) { observer.unobserve(element); } } else if (!triggerOnce) { - setIsRevealed(false); + setIsVisible(false); } }, { threshold, rootMargin } @@ -36,64 +37,58 @@ export function useScrollReveal(options: UseScrollRevealOptions = {}) { return () => observer.disconnect(); }, [threshold, rootMargin, triggerOnce]); - return { ref, isRevealed }; + return { ref, isVisible }; } -export function useCountUp(end: number, duration: number = 2000, start: number = 0) { - const [count, setCount] = useState(start); - const [isAnimating, setIsAnimating] = useState(false); - - const startAnimation = () => { - if (isAnimating) return; - setIsAnimating(true); - - const startTime = Date.now(); - const diff = end - start; - - const animate = () => { - const elapsed = Date.now() - startTime; - const progress = Math.min(elapsed / duration, 1); - - const easeOutQuart = 1 - Math.pow(1 - progress, 4); - const current = Math.floor(start + diff * easeOutQuart); - - setCount(current); - - if (progress < 1) { - requestAnimationFrame(animate); - } else { - setIsAnimating(false); - } - }; - - requestAnimationFrame(animate); - }; - - return { count, startAnimation, isAnimating }; +interface UseScrollProgressOptions { + threshold?: number; } -export function useStampAnimation() { - const ref = useRef(null); - const [hasAnimated, setHasAnimated] = useState(false); +export function useScrollProgress({ threshold = 0 }: UseScrollProgressOptions = {}) { + const [progress, setProgress] = useState(0); useEffect(() => { - const element = ref.current; - if (!element) return; + const handleScroll = () => { + const scrollTop = window.pageYOffset; + const docHeight = document.documentElement.scrollHeight - window.innerHeight; + const scrollProgress = scrollTop / docHeight; + setProgress(Math.min(1, Math.max(0, scrollProgress))); + }; - const observer = new IntersectionObserver( - ([entry]) => { - if (entry.isIntersecting && !hasAnimated) { - setHasAnimated(true); - observer.unobserve(element); - } - }, - { threshold: 0.5 } - ); + window.addEventListener('scroll', handleScroll, { passive: true }); + handleScroll(); - observer.observe(element); + return () => window.removeEventListener('scroll', handleScroll); + }, []); - return () => observer.disconnect(); - }, [hasAnimated]); - - return { ref, hasAnimated }; + return progress; +} + +interface UseParallaxOptions { + speed?: number; +} + +export function useParallax({ speed = 0.5 }: UseParallaxOptions = {}) { + const ref = useRef(null); + const [offset, setOffset] = useState(0); + + useEffect(() => { + const handleScroll = () => { + if (!ref.current) return; + + const rect = ref.current.getBoundingClientRect(); + const scrolled = window.pageYOffset; + const elementTop = rect.top + scrolled; + const parallaxOffset = (scrolled - elementTop) * speed; + + setOffset(parallaxOffset); + }; + + window.addEventListener('scroll', handleScroll, { passive: true }); + handleScroll(); + + return () => window.removeEventListener('scroll', handleScroll); + }, [speed]); + + return { ref, offset }; }