BackgroundsCanvasInteractive

Dot Grid

A magnetic canvas dot grid that reacts to cursor proximity with scale and brightness.

"use client";

import { useEffect, useRef } from "react";

export default function MagneticDotGrid() {
  const canvasRef = useRef(null);
  const mouseRef = useRef(null);

useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const canvas = canvasRef.current;
    if (!canvas) return;

const ctx = canvas.getContext("2d");
    if (!ctx) return;

const config = {
      dotColor: "#3b82f6",
      bgColor: "#080c14",
      dotSize: 2,
      gap: 24,
      radius: 180,
      strength: 0.6
    };

const hexToRgb = (hex) => {
      const clean = hex.replace("#", "");
      const value = parseInt(clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean, 16);
      return { r: (value >> 16) & 255, g: (value >> 8) & 255, b: value & 255 };
    };

const resize = () => {
      const rect = canvas.getBoundingClientRect();
      const dpr = window.devicePixelRatio || 1;
      canvas.width = Math.floor(rect.width * dpr);
      canvas.height = Math.floor(rect.height * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };

const draw = () => {
      const { width, height } = canvas.getBoundingClientRect();
      ctx.fillStyle = config.bgColor;
      ctx.fillRect(0, 0, width, height);

for (let x = config.gap / 2; x < width; x += config.gap) {
        for (let y = config.gap / 2; y < height; y += config.gap) {
          const mouse = mouseRef.current;
          let influence = 0;

if (mouse) {
            const distance = Math.hypot(mouse.x - x, mouse.y - y);
            influence = Math.max(0, 1 - distance / config.radius);
          }

const power = influence * config.strength;
          const size = config.dotSize * (1 + power * 3);

ctx.beginPath();
          ctx.fillStyle = brighten(config.dotColor, power * 0.85);
          ctx.arc(x, y, size, 0, Math.PI * 2);
          ctx.fill();
        }
      }

frame = requestAnimationFrame(draw);
    };

const onMove = (event) => {
      const rect = canvas.getBoundingClientRect();
      mouseRef.current = { x: event.clientX - rect.left, y: event.clientY - rect.top };
    };

const onLeave = () => {
      mouseRef.current = null;
    };

resize();
    const observer = new ResizeObserver(resize);
    observer.observe(canvas);
    canvas.addEventListener("pointermove", onMove);
    canvas.addEventListener("pointerleave", onLeave);
    let frame = requestAnimationFrame(draw);

return () => {
      cancelAnimationFrame(frame);
      observer.disconnect();
      canvas.removeEventListener("pointermove", onMove);
      canvas.removeEventListener("pointerleave", onLeave);
    };
  }, []);

return <canvas ref={canvasRef} style={{ width: "100%", height: "100%", display: "block" }} />;
}