"use client"; import { useMemo, useRef } from "react"; import { motion, useMotionValue, useSpring } from "framer-motion"; import { cn } from "@/lib/utils"; export function DotPatternGlow({ className, children, }: { className?: string; children?: React.ReactNode; }) { const ref = useRef(null); const mouseX = useMotionValue(-1000); const mouseY = useMotionValue(-1000); const glowX = useSpring(mouseX, { stiffness: 150, damping: 20 }); const glowY = useSpring(mouseY, { stiffness: 150, damping: 20 }); const dots = useMemo(() => { const gap = 24; const arr: { x: number; y: number }[] = []; for (let x = gap / 2; x < 900; x += gap) { for (let y = gap / 2; y < 500; y += gap) { arr.push({ x, y }); } } return arr; }, []); function onMouseMove(e: React.MouseEvent) { const rect = ref.current?.getBoundingClientRect(); if (!rect) return; mouseX.set(e.clientX - rect.left); mouseY.set(e.clientY - rect.top); } function onMouseLeave() { mouseX.set(-1000); mouseY.set(-1000); } return (

{dots.map((d, i) => (

))}

{children}

); } export default function Demo() { return (

Dot Pattern Glow

Move your cursor across the field, a soft light warms the dots beneath it.

); }