StackBits

Buttons

Animated Gradient Button

Copy Button

Hold Button

Toggle Button

Moving Border Button

Navigation Button

Pagination Button

Random Button

Shine Button

Backgrounds

Glowing Dots Background

Prismatic Haze Background

Proximity Background

Space Travel

Wavy Background

Texts

Blur Text

Bounce In Text

Dotted Text

Glitch Text

Gooey Words

Hidden Text

Pixelated Text

Rainbow Text

Sentence Flip

Wavy Text

Utilities

Axios Interceptor

Custom Logger

Dark & Light Theme

Debounce

Encryption Decryption

Express Server

Regex Validations

Yup Validations

Glowing Dots Background

A background with dots that light up when you hover over them. Creates an interactive grid of glowing elements.

Install dependencies

npm i framer-motion     

Component

Create a file glowing-dots-background.tsx in your components folder and paste this code

'use client';

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

type GlowingDotsBackgroundProps = {
  children?: React.ReactNode;
  className?: string;
  diameter?: number;
  fadeDelay?: number;
};

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

const GlowingDotsBackground = ({
  children,
  className,
  diameter = 10,
  fadeDelay = 350
}: GlowingDotsBackgroundProps) => {
  const divRef = useRef<HTMLDivElement>(null);
  const activeCells = useRef<Set<number>>(new Set());
  const [gridSize, setGridSize] = useState({ cols: 0, rows: 0 });
  const [hoveredCells, setHoveredCells] = useState<number[]>([]);

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

    const updateGridSize = () => {
      const height = divRef.current!.offsetHeight;
      const width = divRef.current!.offsetWidth;
      setGridSize({
        rows: Math.ceil(height / diameter),
        cols: Math.ceil(width / diameter)
      });
    };

    updateGridSize();
    window.addEventListener('resize', updateGridSize);
    return () => window.removeEventListener('resize', updateGridSize);
  }, []);

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

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

    setTimeout(() => {
      activeCells.current.delete(index);
      setHoveredCells((prev) => prev.filter((i) => i !== index));
    }, fadeDelay);
  };

  return (
    <div ref={divRef} className="h-full w-full flex items-center justify-center relative bg-black">
      <div
        id="glowing-dots-background"
        style={{
          gridTemplateColumns: `repeat(${gridSize.cols}, ${diameter}px)`
        }}
        className="grid overflow-hidden h-full w-full"
      >
        {Array(gridSize.rows * gridSize.cols)
          .fill(null)
          .map((_, i) => (
            <motion.div
              key={'box' + i}
              onMouseEnter={() => handleMouseEnter(i)}
              animate={{
                boxShadow: hoveredCells.includes(i) ? `1px 1px 20px 2px ${getRandomColor()}` : ''
              }}
              transition={{ duration: 0.3 }}
              className={`h-[${diameter}px] w-[${diameter}px] border-[1px] rounded-full border-zinc-900/0`}
            />
          ))}
      </div>

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

      <div
        className={`h-full w-full flex items-center pointer-events-none justify-center absolute top-0 left-0 ${className}`}
      >
        {children}
      </div>
    </div>
  );
};

export default GlowingDotsBackground;

Usage

<GlowingDotsBackground
  diameter={80}
  className=" text-5xl font-extrabold text-white  rounded-xl flex items-center justify-center h-full w-full"
>
  Glowing Dots Background
</GlowingDotsBackground>