"use client"; import React, { useRef, useEffect, useState } from "react"; const WaveAnimation: React.FC = () => { const segmentRefs = useRef<(HTMLDivElement | null)[]>([]); const containerRef = useRef(null); const [isVisible, setIsVisible] = useState(false); const animationRef = useRef(null); useEffect(() => { const observer = new window.IntersectionObserver( ([entry]) => setIsVisible(entry.isIntersecting), { threshold: 0.2 } ); if (containerRef.current) observer.observe(containerRef.current); return () => { if (containerRef.current) observer.unobserve(containerRef.current); }; }, []); useEffect(() => { let s = 0; const animate = () => { let r = 0; segmentRefs.current.forEach((segment, t) => { if (segment) { r += Math.max(0, 20 * Math.sin((s + t) * 0.3)); segment.style.transform = `translateY(${t + r}px)`; } }); s += 0.1; animationRef.current = requestAnimationFrame(animate); }; if (isVisible) { animate(); } else if (animationRef.current) { cancelAnimationFrame(animationRef.current); animationRef.current = null; } return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current); animationRef.current = null; } s = 0; }; }, [isVisible]); const waveSegments = [...Array(23).keys()].map((s) => (

{ segmentRefs.current[s] = el; }} className="wave-segment" style={{ height: `${s + 1}px`, backgroundColor: "#ffffff", transition: "transform 0.1s ease", willChange: "transform", marginTop: "-2px", }} /> )); return (

); }; export default WaveAnimation;

Wave

Installation