Background Ripple Effect

1"use client";
2import React, { useMemo, useRef, useState } from "react";
3import { cn } from "@/lib/utils";
4 
5export const BackgroundRippleEffect = ({
6  rows = 8,
7  cols = 27,
8  cellSize = 56,
9}: {
10  rows?: number;
11  cols?: number;
12  cellSize?: number;
13}) => {
14  const [clickedCell, setClickedCell] = useState<{
15    row: number;
16    col: number;
17  } | null>(null);
18  const [rippleKey, setRippleKey] = useState(0);
19  const ref = useRef<any>(null);
20 
21  return (
22    <div
23      ref={ref}
24      className={cn(
25        "absolute inset-0 h-full w-full",
26        "[--cell-border-color:var(--color-neutral-300)] [--cell-fill-color:var(--color-neutral-100)] [--cell-shadow-color:var(--color-neutral-500)]",
27        "dark:[--cell-border-color:var(--color-neutral-700)] dark:[--cell-fill-color:var(--color-neutral-900)] dark:[--cell-shadow-color:var(--color-neutral-800)]",
28      )}
29    >
30      <div className="relative h-auto w-auto overflow-hidden">
31        <div className="pointer-events-none absolute inset-0 z-[2] h-full w-full overflow-hidden" />
32        <DivGrid
33          key={`base-${rippleKey}`}
34          className="mask-radial-from-20% mask-radial-at-top opacity-600"
35          rows={rows}
36          cols={cols}
37          cellSize={cellSize}
38          borderColor="var(--cell-border-color)"
39          fillColor="var(--cell-fill-color)"
40          clickedCell={clickedCell}
41          onCellClick={(row, col) => {
42            setClickedCell({ row, col });
43            setRippleKey((k) => k + 1);
44          }}
45          interactive
46        />
47      </div>
48    </div>
49  );
50};
51 
52type DivGridProps = {
53  className?: string;
54  rows: number;
55  cols: number;
56  cellSize: number; // in pixels
57  borderColor: string;
58  fillColor: string;
59  clickedCell: { row: number; col: number } | null;
60  onCellClick?: (row: number, col: number) => void;
61  interactive?: boolean;
62};
63 
64type CellStyle = React.CSSProperties & {
65  ["--delay"]?: string;
66  ["--duration"]?: string;
67};
68 
69const DivGrid = ({
70  className,
71  rows = 7,
72  cols = 30,
73  cellSize = 56,
74  borderColor = "#3f3f46",
75  fillColor = "rgba(14,165,233,0.3)",
76  clickedCell = null,
77  onCellClick = () => {},
78  interactive = true,
79}: DivGridProps) => {
80  const cells = useMemo(
81    () => Array.from({ length: rows * cols }, (_, idx) => idx),
82    [rows, cols],
83  );
84 
85  const gridStyle: React.CSSProperties = {
86    display: "grid",
87    gridTemplateColumns: `repeat(${cols}, ${cellSize}px)`,
88    gridTemplateRows: `repeat(${rows}, ${cellSize}px)`,
89// … truncated