'use client'; import React from 'react'; import { cn } from '@/lib/utils'; import { useRef, useEffect } from 'react'; type WWavePathProps = React.ComponentProps<'div'>; function WavePath({ className, ...props }: WWavePathProps) { const path = useRef(null); const containerRef = useRef(null); let progress = 0; let x = 0.2; let time = Math.PI / 2; let reqId: number | null = null; useEffect(() => { setPath(progress); const ro = new ResizeObserver(() => setPath(progress)); if (containerRef.current) ro.observe(containerRef.current); return () => ro.disconnect(); }, []); const setPath = (progress: number) => { const width = containerRef.current?.offsetWidth ?? window.innerWidth * 0.7; if (path.current) { path.current.setAttributeNS( null, 'd', `M0 100 Q${width * x} ${100 + progress * 0.6}, ${width} 100`, ); } }; const lerp = (x: number, y: number, a: number) => x * (1 - a) + y * a; const manageMouseEnter = () => { if (reqId) { cancelAnimationFrame(reqId); resetAnimation(); } }; const manageMouseMove = (e: React.MouseEvent) => { const { movementY, clientX } = e; if (path.current) { const pathBound = path.current.getBoundingClientRect(); x = (clientX - pathBound.left) / pathBound.width; progress += movementY; setPath(progress); } }; const manageMouseLeave = () => { animateOut(); }; const animateOut = () => { const newProgress = progress * Math.sin(time); progress = lerp(progress, 0, 0.025); time += 0.2; setPath(newProgress); if (Math.abs(progress) > 0.75) { reqId = requestAnimationFrame(animateOut); } else { resetAnimation(); } }; const resetAnimation = () => { time = Math.PI / 2; progress = 0; }; return (

); } export default function Demo() { return (

); }

Wave Path