canvas-fractal-grid

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