Beams Upstream

1'use client';
2import React, { useState, useMemo } from 'react';
3import { motion } from 'motion/react';
4import { cn } from '@/lib/utils';
5 
6export const BeamsUpstream = React.memo(
7  ({ className }: { className?: string }) => {
8    const [paths] = useState(() => {
9      const pathsList: string[] = [];
10      const screenSections = 12;
11 
12      for (let section = 0; section < screenSections; section++) {
13        const baseX = (section * 100) / (screenSections - 1);
14        for (let variation = 0; variation < 4; variation++) {
15          const startX = baseX + (Math.random() - 0.5) * 15;
16          const midX1 = startX + (Math.random() - 0.5) * 20;
17          const midX2 = startX + (Math.random() - 0.5) * 25;
18          const endX = startX + (Math.random() - 0.5) * 30;
19          const path = `M${startX} 100C${startX} 100 ${midX1} 75 ${midX1} 50C${midX1} 50 ${midX2} 25 ${midX2} 12C${midX2} 12 ${endX} 5 ${endX} 0`;
20          pathsList.push(path);
21          const altPath = `M${startX} 100C${startX} 100 ${
22            startX + 5
23          } 80 ${midX1} 60C${midX1} 60 ${midX2} 35 ${midX2} 15C${midX2} 15 ${endX} 3 ${endX} -2`;
24          pathsList.push(altPath);
25        }
26      }
27 
28      return pathsList;
29    });
30 
31    const [pathAnimations] = useState(() =>
32      paths.map(() => ({
33        duration: Math.random() * 3 + 2,
34        delay: Math.random() * 4,
35      })),
36    );
37 
38    const [particleAnimations] = useState(() =>
39      paths.slice(0, 20).map(() => ({
40        duration: Math.random() * 8 + 6,
41        delay: Math.random() * 6,
42      })),
43    );
44 
45    const [gradientAnimations] = useState(() =>
46      Array.from({ length: 20 }).map(() => ({
47        duration: Math.random() * 4 + 3,
48        delay: Math.random() * 5,
49      })),
50    );
51 
52    return (
53      <div
54        className={cn(
55          'absolute inset-0 flex h-full w-full items-center justify-center overflow-hidden',
56          className,
57        )}
58      >
59        <svg
60          className='pointer-events-none absolute z-0 h-full w-full'
61          width='100%'
62          height='100%'
63          viewBox='0 0 100 100'
64          fill='none'
65          xmlns='http://www.w3.org/2000/svg'
66          preserveAspectRatio='none'
67        >
68          <rect
69            width='100%'
70            height='100%'
71            fill='url(#backgroundGradient)'
72            opacity='0.1'
73          />
74 
75          <g opacity='0.2'>
76            {paths.map((path, index) => (
77              <path
78                key={`static-path-${index}`}
79// … truncated