Dot Pattern

1"use client"
2 
3import React, { useEffect, useId, useRef, useState } from "react"
4import { motion } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7 
8/**
9 *  DotPattern Component Props
10 *
11 * @param {number} [width=16] - The horizontal spacing between dots
12 * @param {number} [height=16] - The vertical spacing between dots
13 * @param {number} [x=0] - The x-offset of the entire pattern
14 * @param {number} [y=0] - The y-offset of the entire pattern
15 * @param {number} [cx=1] - The x-offset of individual dots
16 * @param {number} [cy=1] - The y-offset of individual dots
17 * @param {number} [cr=1] - The radius of each dot
18 * @param {string} [className] - Additional CSS classes to apply to the SVG container
19 * @param {boolean} [glow=false] - Whether dots should have a glowing animation effect
20 */
21interface DotPatternProps extends React.SVGProps<SVGSVGElement> {
22  width?: number
23  height?: number
24  x?: number
25  y?: number
26  cx?: number
27  cy?: number
28  cr?: number
29  className?: string
30  glow?: boolean
31  [key: string]: unknown
32}
33 
34/**
35 * DotPattern Component
36 *
37 * A React component that creates an animated or static dot pattern background using SVG.
38 * The pattern automatically adjusts to fill its container and can optionally display glowing dots.
39 *
40 * @component
41 *
42 * @see DotPatternProps for the props interface.
43 *
44 * @example
45 * // Basic usage
46 * <DotPattern />
47 *
48 * // With glowing effect and custom spacing
49 * <DotPattern
50 *   width={20}
51 *   height={20}
52 *   glow={true}
53 *   className="opacity-50"
54 * />
55 *
56 * @notes
57 * - The component is client-side only ("use client")
58 * - Automatically responds to container size changes
59 * - When glow is enabled, dots will animate with random delays and durations
60 * - Uses Motion for animations
61 * - Dots color can be controlled via the text color utility classes
62 */
63 
64export function DotPattern({
65  width = 16,
66  height = 16,
67  x = 0,
68  y = 0,
69  cx = 1,
70  cy = 1,
71  cr = 1,
72  className,
73  glow = false,
74  ...props
75}: DotPatternProps) {
76  const id = useId()
77  const containerRef = useRef<SVGSVGElement>(null)
78  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
79 
80  useEffect(() => {
81    const updateDimensions = () => {
82      if (containerRef.current) {
83        const { width, height } = containerRef.current.getBoundingClientRect()
84        setDimensions({ width, height })
85      }
86    }
87 
88    updateDimensions()
89    window.addEventListener("resize", updateDimensions)
90// … truncated