Floating Particles

1function Particles() {
2  const [t, setT] = React.useState(0);
3  React.useEffect(() => { const id = setInterval(() => setT(x => x + 1), 60); return () => clearInterval(id); }, []);
4  const pts = React.useMemo(() => Array.from({length: 22}, (_, i) => ({
5    x: (i * 47) % 100, base: (i * 31) % 100, r: 2 + (i % 3), sp: 0.4 + (i % 5) * 0.15, hue: i % 2 ? '#a78bfa' : '#67e8f9'
6  })), []);
7  return (
8    <div style={{position:'relative',width:440,height:260,borderRadius:20,overflow:'hidden',background:'#0a0a12'}}>
9      {pts.map((p, i) => {
10        const y = (p.base - t * p.sp) % 100;
11        const yy = y < 0 ? y + 100 : y;
12        return <span key={i} style={{position:'absolute',left:p.x+'%',top:yy+'%',width:p.r*2,height:p.r*2,
13          borderRadius:'50%',background:p.hue,opacity:.6,boxShadow:'0 0 8px '+p.hue}} />;
14      })}
15    </div>
16  );
17}