animated-grid-pattern

1"use client"
2 
3import React, { useEffect, useMemo, useRef, useState } from "react"
4import { Canvas, useFrame, useThree } from "@react-three/fiber"
5import { useTheme } from "next-themes"
6import { ExtrudeGeometry, Shape } from "three"
7import * as THREE from "three"
8 
9interface GridProps {
10  position: [number, number, number]
11  width?: number
12  length?: number
13  cornerRadius?: number
14  gridPosition: [number, number]
15  hoveredGrid: [number, number] | null
16  rippleScale?: number
17  rippleRadius?: number
18}
19 
20const Grid = ({
21  position,
22  width = 4,
23  length = 4,
24  cornerRadius = 2,
25  gridPosition,
26  hoveredGrid,
27  rippleScale = 0.3,
28  rippleRadius = 3,
29}: GridProps) => {
30  const meshRef = useRef<THREE.Mesh>(null)
31  const [currentScale, setCurrentScale] = useState(1)
32  const { theme } = useTheme()
33 
34  const gridColor = theme === "dark" ? "#232323" : "#e5e7eb"
35 
36  const geometry = useMemo(() => {
37    const shape = new Shape()
38    const angleStep = Math.PI * 0.5
39    const radius = cornerRadius
40 
41    const halfWidth = width / 2
42    const halfLength = length / 2
43 
44    shape.absarc(
45      halfWidth - radius,
46      halfLength - radius,
47      radius,
48      angleStep * 0,
49      angleStep * 1
50    )
51    shape.absarc(
52      -halfWidth + radius,
53      halfLength - radius,
54      radius,
55      angleStep * 1,
56      angleStep * 2
57    )
58    shape.absarc(
59      -halfWidth + radius,
60      -halfLength + radius,
61      radius,
62      angleStep * 2,
63      angleStep * 3
64    )
65    shape.absarc(
66      halfWidth - radius,
67      -halfLength + radius,
68      radius,
69      angleStep * 3,
70      angleStep * 4
71    )
72 
73    const extrudeSettings = {
74      depth: 0.3,
75      bevelEnabled: true,
76      bevelThickness: 0.05,
77      bevelSize: 0.05,
78      bevelSegments: 20,
79      curveSegments: 20,
80    }
81 
82    const geometry = new ExtrudeGeometry(shape, extrudeSettings)
83    geometry.center()
84 
85    return geometry
86  }, [width, length, cornerRadius])
87 
88  useEffect(() => {
89    return () => {
90      geometry.dispose()
91    }
92  }, [geometry])
93 
94  useFrame(() => {
95    if (meshRef.current) {
96      let targetScale = 1
97 
98      const isThisGridHovered =
99        hoveredGrid &&
100        gridPosition[0] === hoveredGrid[0] &&
101        gridPosition[1] === hoveredGrid[1]
102 
103      if (isThisGridHovered) {
104        targetScale = 5
105      } else if (hoveredGrid) {
106        const dx = gridPosition[0] - hoveredGrid[0]
107        const dz = gridPosition[1] - hoveredGrid[1]
108        const distance = Math.sqrt(dx * dx + dz * dz)
109 
110// … truncated