Dot Glow Background

npm install motion

"use client";

import type { ReactNode, PointerEvent } from "react";
import { motion, useMotionTemplate, useMotionValue, useReducedMotion, useSpring } from "motion/react";

type DotGlowBackgroundProps = {
  children?: ReactNode;
  /** Distance between dots in pixels. */
  gap?: number;
  /** Radius of the lit area around the pointer. */
  radius?: number;
  className?: string;
};

export function DotGlowBackground({
  children,
  gap = 20,
  radius = 180,
  className = "",
}: DotGlowBackgroundProps) {
  const reduceMotion = useReducedMotion();
  const x = useMotionValue(-1000);
  const y = useMotionValue(-1000);
  // the glow eases after the pointer, unless the user prefers reduced motion
  const smoothX = useSpring(x, { stiffness: 300, damping: 40 });
  const smoothY = useSpring(y, { stiffness: 300, damping: 40 });
  const glowX = reduceMotion ? x : smoothX;
  const glowY = reduceMotion ? y : smoothY;
  const mask = useMotionTemplate`radial-gradient(${radius}px circle at ${glowX}px ${glowY}px, black, transparent)`;
  const dots = (color: string) => ({
    backgroundImage: `radial-gradient(${color} 1px, transparent 1px)`,
    backgroundSize: `${gap}px ${gap}px`,
  });

  function handleMove(event: PointerEvent<HTMLDivElement>) {
    const rect = event.currentTarget.getBoundingClientRect();
    x.set(event.clientX - rect.left);
    y.set(event.clientY - rect.top);
  }

  return (
    <div
      onPointerMove={handleMove}
      onPointerLeave={() => {
        x.set(-1000);
        y.set(-1000);
      }}
      className={`relative isolate overflow-hidden bg-[#0C1010] ${className}`}
    >
      <div aria-hidden className="absolute inset-0 -z-10" style={dots("rgb(255 255 255 / 0.09)")} />
      <motion.div
        aria-hidden
        className="absolute inset-0 -z-10"
        style={{ ...dots("rgb(95 174 180)"), maskImage: mask, WebkitMaskImage: mask }}
      />
      {children}
    </div>
  );
}