ColumnLines

1'use client';
2import React from 'react';
3import { cn } from '@/lib/utils';
4 
5interface ColumnLinesProps {
6  columnWidth?: number;
7  columnCount?: number;
8  radialFadeStart?: number;
9  radialFadeEnd?: number;
10  opacity?: number;
11  showNoise?: boolean;
12  noiseOpacity?: number;
13  className?: string;
14  children?: React.ReactNode;
15}
16 
17export function ColumnLines({
18  columnWidth = 80,
19  columnCount = 14,
20  radialFadeStart = 30,
21  radialFadeEnd = 70,
22  opacity = 1,
23  showNoise = true,
24  noiseOpacity = 0.05,
25  className,
26  children,
27}: ColumnLinesProps) {
28  const id = React.useId().replace(/:/g, '');
29  const maskImage = `radial-gradient(circle at center, white 0%, white ${radialFadeStart}%, transparent ${radialFadeEnd}%)`;
30  const noiseMask = `radial-gradient(circle at center, white 0%, transparent 75%)`;
31 
32  return (
33    <div className={cn('relative overflow-hidden', className)}>
34      <svg width="0" height="0" className="absolute">
35        <filter id={`noise-${id}`}>
36          <feTurbulence
37            type="fractalNoise"
38            baseFrequency="0.65"
39            numOctaves="3"
40            stitchTiles="stitch"
41          />
42          <feColorMatrix type="saturate" values="0" />
43        </filter>
44      </svg>
45 
46      {showNoise && (
47        <div
48          className="absolute inset-0 z-0 scale-[1.2]"
49          style={{
50            opacity: noiseOpacity,
51            filter: `url(#noise-${id})`,
52            WebkitMaskImage: noiseMask,
53            maskImage: noiseMask,
54          }}
55        />
56      )}
57 
58      <div
59        className="absolute inset-0 z-0 flex"
60        style={{
61          opacity,
62          WebkitMaskImage: maskImage,
63          maskImage,
64        }}
65      >
66        {Array.from({ length: columnCount }).map((_, i) => (
67          <div
68            key={i}
69            className={cn(
70              'h-full shrink-0',
71              'bg-linear-to-r from-neutral-100 to-white',
72              'shadow-[2px_0px_0px_0px_var(--color-neutral-300)]',
73              'dark:from-neutral-900 dark:to-neutral-950',
74              'dark:shadow-[2px_0px_0px_0px_var(--color-neutral-800)]',
75            )}
76            style={{ width: columnWidth }}
77          />
78        ))}
79      </div>
80 
81      {children && <div className="relative z-10">{children}</div>}
82    </div>
83  );
84}