Wave Bars

1function WaveBars() {
2  const [t, setT] = React.useState(0);
3  React.useEffect(() => { const id = setInterval(() => setT(x => x + 1), 120); return () => clearInterval(id); }, []);
4  const bars = [0,1,2,3,4];
5  return (
6    <div style={{display:'flex',alignItems:'center',gap:6,height:52}}>
7      {bars.map(i => {
8        const h = 16 + 26 * Math.abs(Math.sin((t + i * 1.1) * 0.6));
9        return <span key={i} style={{width:8,height:h,borderRadius:6,background:'linear-gradient(180deg,#8b5cf6,#06b6d4)',transition:'height .12s linear'}} />;
10      })}
11    </div>
12  );
13}