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: "#0a0d14",
      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 brighten = (hex, amount) => {
      const rgb = hexToRgb(hex);
      const mix = Math.min(1, amount);
      return `rgb(${Math.round(rgb.r + (255 - rgb.r) * mix)} ${Math.round(rgb.g + (255 - rgb.g) * mix)} ${Math.round(rgb.b + (255 - rgb.b) * mix)})`;
    };

    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" }} />;
}

Effect guide

Copy the dot grid animated background effect

What it is: A magnetic canvas dot grid that reacts to cursor proximity with scale and brightness.

Where to use it: Use this motion pattern for hero sections, product pages, dashboards, and interactive marketing surfaces.

Supported formats: React, Vue, Vanilla JS.

Get motion drops

New UI effects, code snippets, and GrabMotion updates by email.