Animated Grid Pattern

1"use client";
2 
3import { motion } from "motion/react";
4import { useEffect, useId, useRef, useState } from "react";
5 
6import { cn } from "@/lib/utils";
7 
8interface AnimatedGridPatternProps {
9  width?: number;
10  height?: number;
11  x?: number;
12  y?: number;
13  strokeDasharray?: string | number;
14  numSquares?: number;
15  className?: string;
16  maxOpacity?: number;
17  duration?: number;
18}
19 
20export default function AnimatedGridPattern({
21  width = 40,
22  height = 40,
23  x = -1,
24  y = -1,
25  strokeDasharray = 0,
26  numSquares = 50,
27  className,
28  maxOpacity = 0.5,
29  duration = 4,
30  ...props
31}: AnimatedGridPatternProps) {
32  const id = useId();
33  const containerRef = useRef(null);
34  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
35  const [squares, setSquares] = useState(() => generateSquares(numSquares));
36 
37  function getPos() {
38    return [
39      Math.floor((Math.random() * dimensions.width) / width),
40      Math.floor((Math.random() * dimensions.height) / height),
41    ];
42  }
43 
44  // Adjust the generateSquares function to return objects with an id, x, and y
45  function generateSquares(count: number) {
46    return Array.from({ length: count }, (_, i) => ({
47      id: i,
48      pos: getPos(),
49    }));
50  }
51 
52  // Function to update a single square's position
53  const updateSquarePosition = (id: number) => {
54    setSquares((currentSquares) =>
55      currentSquares.map((sq) =>
56        sq.id === id
57          ? {
58              ...sq,
59              pos: getPos(),
60            }
61          : sq
62      )
63    );
64  };
65 
66  // Update squares to animate in
67  useEffect(() => {
68    if (dimensions.width && dimensions.height) {
69      setSquares(generateSquares(numSquares));
70    }
71  }, [dimensions, numSquares]);
72 
73  // Resize observer to update container dimensions
74  useEffect(() => {
75    const resizeObserver = new ResizeObserver((entries) => {
76      for (const entry of entries) {
77        setDimensions({
78          width: entry.contentRect.width,
79          height: entry.contentRect.height,
80        });
81      }
82    });
83 
84    if (containerRef.current) {
85      resizeObserver.observe(containerRef.current);
86    }
87 
88    return () => {
89      if (containerRef.current) {
90        resizeObserver.unobserve(containerRef.current);
91      }
92    };
93  }, [containerRef]);
94 
95  return (
96    <svg
97      aria-hidden="true"
98      className={cn(
99        "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
100        className
101      )}
102      ref={containerRef}
103      {...props}
104    >
105// … truncated