1
npm i framer-motion

1
'use client';
2

3
import React, { useEffect, useRef, useState } from 'react';
4
import { motion } from 'framer-motion';
5

6
const GRID_SIZE = 30;
7
const FADE_DELAY = 1000;
8

9
type GlowingDotsBackgroundProps = {
10
  children: React.ReactNode;
11
  className?: string;
12
};
13

14
const getRandomColor = () => {
15
  const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A8', '#FFD700', '#00FFFF'];
16
  return `${colors[Math.floor(Math.random() * colors.length)]}77`;
17
};
18

19
const GlowingDotsBackground = ({ children, className }: GlowingDotsBackgroundProps) => {
20
  const divRef = useRef<HTMLDivElement>(null);
21
  const activeCells = useRef<Set<number>>(new Set());
22
  const [gridSize, setGridSize] = useState({ cols: 0, rows: 0 });
23
  const [hoveredCells, setHoveredCells] = useState<number[]>([]);
24

25
  useEffect(() => {
26
    if (!divRef.current) return;
27

28
    const updateGridSize = () => {
29
      const height = divRef.current!.offsetHeight;
30
      const width = divRef.current!.offsetWidth;
31
      setGridSize({
32
        rows: Math.ceil(height / GRID_SIZE),
33
        cols: Math.ceil(width / GRID_SIZE)
34
      });
35
    };
36

37
    updateGridSize();
38
    window.addEventListener('resize', updateGridSize);
39
    return () => window.removeEventListener('resize', updateGridSize);
40
  }, []);
41

42
  const handleMouseEnter = (index: number) => {
43
    if (activeCells.current.has(index)) return;
44

45
    activeCells.current.add(index);
46
    setHoveredCells((prev) => [...prev, index]);
47

48
    setTimeout(() => {
49
      activeCells.current.delete(index);
50
      setHoveredCells((prev) => prev.filter((i) => i !== index));
51
    }, FADE_DELAY);
52
  };
53

54
  return (
55
    <div ref={divRef} className="h-full w-full flex items-center justify-center relative">
56
      <div
57
        id="glowing-dots-background"
58
        style={{
59
          gridTemplateColumns: `repeat(${gridSize.cols}, ${GRID_SIZE}px)`
60
        }}
61
        className="grid overflow-hidden h-full w-full"
62
      >
63
        {Array(gridSize.rows * gridSize.cols)
64
          .fill(null)
65
          .map((_, i) => (
66
            <motion.div
67
              key={'box' + i}
68
              onMouseEnter={() => handleMouseEnter(i)}
69
              animate={{
70
                boxShadow: hoveredCells.includes(i) ? `1px 1px 20px 2px ${getRandomColor()}` : ''
71
              }}
72
              transition={{ duration: 0.3 }}
73
              className={`h-[${GRID_SIZE}px] w-[${GRID_SIZE}px] border-[1px] rounded-full border-neutral-800`}
74
            />
75
          ))}
76
      </div>
77

78
      <div
79
        style={{ background: 'radial-gradient(circle at center, transparent, #000000)' }}
80
        className="h-full w-full absolute pointer-events-none"
81
      />
82

83
      <div
84
        className={`h-full w-full flex items-center pointer-events-none justify-center absolute top-0 left-0 ${className}`}
85
      >
86
        {children}
87
      </div>
88
    </div>
89
  );
90
};
91

92
export default GlowingDotsBackground;