Dotted Glow Background

1"use client";
2 
3import React, { useEffect, useRef, useState } from "react";
4 
5type DottedGlowBackgroundProps = {
6  className?: string;
7  /** distance between dot centers in pixels */
8  gap?: number;
9  /** base radius of each dot in CSS px */
10  radius?: number;
11  /** dot color (will pulse by alpha) */
12  color?: string;
13  /** optional dot color for dark mode */
14  darkColor?: string;
15  /** shadow/glow color for bright dots */
16  glowColor?: string;
17  /** optional glow color for dark mode */
18  darkGlowColor?: string;
19  /** optional CSS variable name for light dot color (e.g. --color-zinc-900) */
20  colorLightVar?: string;
21  /** optional CSS variable name for dark dot color (e.g. --color-zinc-100) */
22  colorDarkVar?: string;
23  /** optional CSS variable name for light glow color */
24  glowColorLightVar?: string;
25  /** optional CSS variable name for dark glow color */
26  glowColorDarkVar?: string;
27  /** global opacity for the whole layer */
28  opacity?: number;
29  /** background radial fade opacity (0 = transparent background) */
30  backgroundOpacity?: number;
31  /** minimum per-dot speed in rad/s */
32  speedMin?: number;
33  /** maximum per-dot speed in rad/s */
34  speedMax?: number;
35  /** global speed multiplier for all dots */
36  speedScale?: number;
37};
38 
39/**
40 * Canvas-based dotted background that randomly glows and dims.
41 * - Uses a stable grid of dots.
42 * - Each dot gets its own phase + speed producing organic shimmering.
43 * - Handles high-DPI and resizes via ResizeObserver.
44 */
45export const DottedGlowBackground = ({
46  className,
47  gap = 12,
48  radius = 2,
49  color = "rgba(0,0,0,0.7)",
50  darkColor,
51  glowColor = "rgba(0, 170, 255, 0.85)",
52  darkGlowColor,
53  colorLightVar,
54  colorDarkVar,
55  glowColorLightVar,
56  glowColorDarkVar,
57  opacity = 0.6,
58  backgroundOpacity = 0,
59  speedMin = 0.4,
60  speedMax = 1.3,
61  speedScale = 1,
62}: DottedGlowBackgroundProps) => {
63  const canvasRef = useRef<HTMLCanvasElement | null>(null);
64  const containerRef = useRef<HTMLDivElement | null>(null);
65  const [resolvedColor, setResolvedColor] = useState<string>(color);
66  const [resolvedGlowColor, setResolvedGlowColor] = useState<string>(glowColor);
67 
68  // Resolve CSS variable value from the container or root
69  const resolveCssVariable = (
70    el: Element,
71    variableName?: string,
72  ): string | null => {
73    if (!variableName) return null;
74    const normalized = variableName.startsWith("--")
75      ? variableName
76      : `--${variableName}`;
77    const fromEl = getComputedStyle(el as Element)
78// … truncated