Animated Wave

1export const AnimatedWave = ({
2  percentage = 64,
3  waveColor = '#3b82f6',
4  waveColorSecondary = '#3b82f6',
5  waveHeight = 16,
6}: {
7  percentage?: number
8  waveColor?: string
9  waveColorSecondary?: string
10  waveHeight?: number
11}) => {
12  return (
13    <div className='relative size-full'>
14      {/* Wave container */}
15      <div
16        className='absolute inset-0 transition-transform duration-1000 ease-out'
17        style={{
18          transform: `translateY(${100 - percentage}%)`,
19        }}
20      >
21        {/* Primary wave */}
22        <svg
23          className='absolute w-[200%] h-full'
24          style={{
25            animation: 'wave 3s linear infinite',
26            left: 0,
27            top: 0,
28          }}
29          viewBox='0 0 400 200'
30          preserveAspectRatio='none'
31        >
32          <path
33            d={`
34                M 0 ${waveHeight}
35                Q 50 0, 100 ${waveHeight}
36                Q 150 ${waveHeight * 2}, 200 ${waveHeight}
37                Q 250 0, 300 ${waveHeight}
38                Q 350 ${waveHeight * 2}, 400 ${waveHeight}
39                L 400 200
40                L 0 200
41                Z
42              `}
43            fill={waveColor}
44          />
45        </svg>
46 
47        {/* Secondary wave (offset) */}
48        <svg
49          className='absolute w-[200%] h-full opacity-60'
50          style={{
51            animation: 'wave 4s linear infinite reverse',
52            left: 0,
53            top: 0,
54          }}
55          viewBox='0 0 400 200'
56          preserveAspectRatio='none'
57        >
58          <path
59            d={`
60                M 0 ${waveHeight}
61                Q 50 ${waveHeight * 2}, 100 ${waveHeight}
62                Q 150 0, 200 ${waveHeight}
63                Q 250 ${waveHeight * 2}, 300 ${waveHeight}
64                Q 350 0, 400 ${waveHeight}
65                L 400 200
66                L 0 200
67                Z
68              `}
69            fill={waveColorSecondary}
70          />
71        </svg>
72      </div>
73 
74      {/* Keyframes */}
75      <style>{`
76        @keyframes wave {
77          0% { transform: translateX(0); }
78          100% { transform: translateX(-50%); }
79        }
80      `}</style>
81    </div>
82  )
83}