Proximity Glow

A soft glow treatment that follows nearby cursor movement across surfaces.

"use client";

import { useEffect, useRef } from "react";

export default function ProximityGlow() {
  const surfaceRef = useRef(null);
  const targetRef = useRef({ x: 50, y: 50, active: 0 });
  const currentRef = useRef({ x: 50, y: 50, active: 0 });

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

const config = {
      glowColor: "#60a5fa",
      bgColor: "#080c14",
      borderColor: "#1e3a8a",
      radius: 180,
      intensity: 0.72,
      size: 280
    };

const glowRgb = hexToRgb(config.glowColor);

const onMove = (event) => {
      const rect = surface.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      const edgeDistance = Math.min(x, y, rect.width - x, rect.height - y);
      const proximity = Math.max(0, 1 - Math.max(0, -edgeDistance) / config.radius);
      targetRef.current = { x, y, active: proximity };
    };

const onLeave = () => {
      targetRef.current = { ...targetRef.current, active: 0 };
    };

const animate = () => {
      const current = currentRef.current;
      const target = targetRef.current;
      current.x += (target.x - current.x) * 0.18;
      current.y += (target.y - current.y) * 0.18;
      current.active += (target.active - current.active) * 0.12;

surface.addEventListener("pointermove", onMove);
    surface.addEventListener("pointerleave", onLeave);
    let frame = requestAnimationFrame(animate);

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

return (
    <div
      ref={surfaceRef}
      style={{
        minHeight: 280,
        border: `1px solid #1e3a8a`,
        borderRadius: 18,
        color: "white",
        display: "grid",
        placeItems: "center",
        padding: 32
      }}
    >
      <strong>Proximity Glow</strong>
    </div>
  );
}