bg-animated-fractal-dot-grid

1"use client"
2 
3import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
4import { AnimatePresence, motion } from "motion/react"
5 
6interface FractalDotGridProps {
7  /** Size of each dot in pixels */
8  dotSize?: number
9  /** Spacing between dots in pixels */
10  dotSpacing?: number
11  /** Opacity of dots (0-1) */
12  dotOpacity?: number
13  /** Intensity of the wave effect when hovering */
14  waveIntensity?: number
15  /** Radius of the wave effect in pixels */
16  waveRadius?: number
17  /** Color of the dots (supports any valid CSS color) */
18  dotColor?: string
19  /** Color of the dot glow effect (supports any valid CSS color) */
20  glowColor?: string
21  /** Enable or disable the noise overlay */
22  enableNoise?: boolean
23  /** Opacity of the noise overlay (0-1) */
24  noiseOpacity?: number
25  /** Enable or disable the mouse glow effect */
26  enableMouseGlow?: boolean
27  /** Set the initial performance level */
28  initialPerformance?: "low" | "medium" | "high"
29}
30 
31const NoiseSVG = React.memo(() => (
32  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
33    <filter id="noise">
34      <feTurbulence
35        type="fractalNoise"
36        baseFrequency="0.65"
37        numOctaves="3"
38        stitchTiles="stitch"
39      />
40    </filter>
41    <rect width="100%" height="100%" filter="url(#noise)" />
42  </svg>
43))
44 
45NoiseSVG.displayName = "NoiseSVG"
46 
47const NoiseOverlay: React.FC<{ opacity: number }> = ({ opacity }) => (
48  <div
49    className="absolute inset-0 h-full w-full mix-blend-overlay"
50    style={{ opacity }}
51  >
52    <NoiseSVG />
53  </div>
54)
55 
56const useResponsive = () => {
57  const [windowSize, setWindowSize] = useState({
58    width: typeof window !== "undefined" ? window.innerWidth : 0,
59    height: typeof window !== "undefined" ? window.innerHeight : 0,
60  })
61 
62  useEffect(() => {
63    const handleResize = () => {
64      setWindowSize({
65        width: window.innerWidth,
66        height: window.innerHeight,
67      })
68    }
69 
70    window.addEventListener("resize", handleResize)
71    return () => window.removeEventListener("resize", handleResize)
72  }, [])
73 
74  return {
75    isMobile: windowSize.width < 768,
76    isTablet: windowSize.width >= 768 && windowSize.width < 1024,
77    isDesktop: windowSize.width >= 1024,
78  }
79}
80 
81const usePerformance = (
82  initialPerformance: "low" | "medium" | "high" = "medium"
83) => {
84  const [performance, setPerformance] = useState(initialPerformance)
85  const [fps, setFps] = useState(60)
86 
87  useEffect(() => {
88    let frameCount = 0
89// … truncated