1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
"use client";
import React, { useMemo, useRef, useState } from "react";
import { cn } from "@/lib/utils";
export const BackgroundRippleEffect = ({
rows = 8,
cols = 27,
cellSize = 56,
}: {
rows?: number;
cols?: number;
cellSize?: number;
}) => {
const [clickedCell, setClickedCell] = useState<{
row: number;
col: number;
} | null>(null);
const [rippleKey, setRippleKey] = useState(0);
const ref = useRef<any>(null);
return (
<div
ref={ref}
className={cn(
"absolute inset-0 h-full w-full",
"[--cell-border-color:var(--color-neutral-300)] [--cell-fill-color:var(--color-neutral-100)] [--cell-shadow-color:var(--color-neutral-500)]"
)}
>
<div className="relative h-auto w-auto overflow-hidden">
<div className="pointer-events-none absolute inset-0 z-[2] h-full w-full overflow-hidden" />
<DivGrid
key={`base-${rippleKey}`}
className="mask-radial-from-20% mask-radial-at-top opacity-600"
rows={rows}
cols={cols}
cellSize={cellSize}
borderColor="var(--cell-border-color)"
fillColor="var(--cell-fill-color)"
clickedCell={clickedCell}
onCellClick={(row, col) => {
setClickedCell({ row, col });
setRippleKey((k) => k + 1);
}}
interactive
/>
</div>
</div>
);
};
type DivGridProps = {
className?: string;
rows: number;
cols: number;
cellSize: number; // in pixels
borderColor: string;
fillColor: string;
clickedCell: { row: number; col: number } | null;
onCellClick?: (row: number, col: number) => void;
interactive?: boolean;
};
type CellStyle = React.CSSProperties & {
["--delay"]?: string;
["--duration"]?: string;
};
const DivGrid = ({
className,
rows = 7,
cols = 30,
cellSize = 56,
borderColor = "#3f3f46",
fillColor = "rgba(14,165,233,0.3)",
clickedCell = null,
onCellClick = () => {},
interactive = true,
}: DivGridProps) => {
const cells = useMemo(
() => Array.from({ length: rows * cols }, (_, idx) => idx),
[rows, cols]
);
const gridStyle: React.CSSProperties = {
display: "grid",
gridTemplateColumns: `repeat(${cols}, ${cellSize}px)`,
gridTemplateRows: `repeat(${rows}, ${cellSize}px)`,
width: cols * cellSize,
height: rows * cellSize,
marginInline: "auto",
};
return (
<div className={cn("relative z-[3]", className)} style={gridStyle}>
{cells.map((idx) => {
const rowIdx = Math.floor(idx / cols);
const colIdx = idx % cols;
const distance = clickedCell
? Math.hypot(clickedCell.row - rowIdx, clickedCell.col - colIdx)
: 0;
const delay = clickedCell ? Math.max(0, distance * 55) : 0; // ms
const duration = 200 + distance * 80; // ms
const style: CellStyle = clickedCell
? {
"--delay": `${delay}ms`,
"--duration": `${duration}ms`,
}
: {};
return (
<div
key={idx}
className={cn(
"cell relative border-[0.5px] opacity-40 transition-opacity duration-150 will-change-transform hover:opacity-80",
clickedCell && "animate-cell-ripple [animation-fill-mode:none]",
!interactive && "pointer-events-none"
)}
style={{
backgroundColor: fillColor,
borderColor: borderColor,
...style,
}}
onClick={
interactive ? () => onCellClick?.(rowIdx, colIdx) : undefined
}
/>
);
})}
</div>
);
};
|
