BackgroundsCanvasWarp

Liquid Grid

A canvas grid warp where the cursor pulls nearby vertices like liquid.

"use client";

import { useEffect, useRef } from "react";

export default function LiquidGrid() {
  const canvasRef = useRef(null);
  const mouse = useRef(null);

useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
    let frame = 0;
    let width = 0;
    let height = 0;

function resize() {
      const rect = canvas.getBoundingClientRect();
      width = rect.width;
      height = rect.height;
      canvas.width = Math.max(1, Math.floor(width * pixelRatio));
      canvas.height = Math.max(1, Math.floor(height * pixelRatio));
      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
    }

function warp(x, y) {
      if (!mouse.current) return { x, y };

const dx = x - mouse.current.x;
      const dy = y - mouse.current.y;
      const distance = Math.hypot(dx, dy);

if (distance > 0.01 && distance < 110) {
        const force = (1 - distance / 110) * 18 * -0.8;
        return {
          x: x + (dx / distance) * force,
          y: y + (dy / distance) * force
        };
      }

return { x, y };
    }

function draw() {
      ctx.fillStyle = "#080c14";
      ctx.fillRect(0, 0, width, height);
      ctx.strokeStyle = "#60a5fa";
      ctx.lineWidth = 0.5;

const columns = Math.ceil(width / 28) + 1;
      const rows = Math.ceil(height / 28) + 1;

for (let row = 0; row <= rows; row++) {
        ctx.beginPath();
        for (let column = 0; column <= columns; column++) {
          const point = warp(column * 28, row * 28);
          column === 0 ? ctx.moveTo(point.x, point.y) : ctx.lineTo(point.x, point.y);
        }
        ctx.stroke();
      }

for (let column = 0; column <= columns; column++) {
        ctx.beginPath();
        for (let row = 0; row <= rows; row++) {
          const point = warp(column * 28, row * 28);
          row === 0 ? ctx.moveTo(point.x, point.y) : ctx.lineTo(point.x, point.y);
        }
        ctx.stroke();
      }

frame = requestAnimationFrame(draw);
    }

resize();
    draw();

const observer = new ResizeObserver(resize);
    observer.observe(canvas);

return () => {
      cancelAnimationFrame(frame);
      observer.disconnect();
    };
  }, []);

function move(event) {
    const rect = event.currentTarget.getBoundingClientRect();
    mouse.current = { x: event.clientX - rect.left, y: event.clientY - rect.top };
  }

return (
    <canvas
      ref={canvasRef}
      onPointerMove={move}
      onPointerLeave={() => { mouse.current = null; }}
      style={{ display: "block", width: "100%", height: "100%" }}
    />
  );
}