Dot Grid Spotlight

1"use client"
2 
3import React, { useEffect, useRef } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export type DotGridSpotlightProps = {
8  /**
9   * The base color of the default/inactive dots.
10   * @default "rgba(255, 255, 255, 0.05)"
11   */
12  dotColor?: string
13 
14  /**
15   * The color of the active dots when illuminated by the cursor's spotlight.
16   * @default "rgba(255, 255, 255, 0.1)"
17   */
18  activeDotColor?: string
19 
20  /**
21   * The distance (in pixels) between each dot in the grid.
22   * @default 10
23   */
24  spacing?: number
25 
26  /**
27   * The default radius of the dots when they are outside the interaction area.
28   * @default 1
29   */
30  baseRadius?: number
31 
32  /**
33   * The maximum radius of a dot when it is at the exact center of the cursor.
34   * @default 2
35   */
36  activeRadius?: number
37 
38  /**
39   * The radius (in pixels) of the interaction area (spotlight) around the cursor.
40   * @default 128
41   */
42  interactionRadius?: number
43 
44  /**
45   * The maximum opacity (alpha) at the exact center of the spotlight.
46   * Accepts a value between `0` and `1` (e.g., `1` for full opacity).
47   * @default 1.0
48   */
49  activeMaxAlpha?: number
50 
51  /**
52   * The minimum opacity (alpha) at the outer edge of the spotlight.
53   * Accepts a value between `0` and `1` (e.g., a low value for a soft, subtle fade).
54   * @default 0.5
55   */
56  activeMinAlpha?: number
57 
58  /**
59   * Optional CSS class name to apply to the canvas or its wrapper.
60   */
61  className?: string
62}
63 
64export function DotGridSpotlight({
65  dotColor = "rgba(255, 255, 255, 0.05)",
66  activeDotColor = "rgba(255, 255, 255, 0.1)",
67  spacing = 10,
68  baseRadius = 1,
69  activeRadius = 2,
70  interactionRadius = 128,
71  activeMaxAlpha = 1.0,
72  activeMinAlpha = 0.5,
73  className,
74}: DotGridSpotlightProps) {
75  const canvasRef = useRef<HTMLCanvasElement>(null)
76  const mouse = useRef({ x: -1000, y: -1000, isActive: false })
77 
78  useEffect(() => {
79    const canvas = canvasRef.current
80    if (!canvas) return
81 
82    const ctx = canvas.getContext("2d")
83    if (!ctx) return
84 
85    let width = 0
86    let height = 0
87    let renderFrameId: number | null = null
88 
89    const draw = () => {
90      ctx.clearRect(0, 0, width, height)
91 
92      const offsetX = (width % spacing) / 2
93      const offsetY = (height % spacing) / 2
94 
95      for (let x = offsetX; x <= width; x += spacing) {
96        for (let y = offsetY; y <= height; y += spacing) {
97          const dx = x - mouse.current.x
98          const dy = y - mouse.current.y
99          const distance = Math.sqrt(dx * dx + dy * dy)
100 
101// … truncated