Cursor Glow

"use client";

import * as React from "react";

export interface CursorGlowProps extends React.ComponentPropsWithoutRef<"div"> {
  /** Glow radius, in px. */
  radius?: number;
  /** Extra blur applied to the glow, in px. */
  blur?: number;
  /** Glow colour (any CSS colour). */
  color?: string;
  /** Peak opacity of the glow, 0–1. */
  intensity?: number;
  /** Smoothing factor per frame, 0.02 (floaty) – 1 (locked to the pointer). */
  easing?: number;
  /** Also light up the container's 1px border near the pointer. */
  border?: boolean;
}

/**
 * A wrapper that renders a soft light following the mouse, clipped to its own bounds.
 * Position is eased in a requestAnimationFrame loop and written to CSS variables
 * (`--glow-x`, `--glow-y`, also usable by children) — React never re-renders on move.
 * Touch and pen input get no glow; reduced motion snaps the glow to the pointer.
 */
export const CursorGlow = React.forwardRef<HTMLDivElement, CursorGlowProps>(function CursorGlow(
  {
    radius = 220,
    blur = 40,
    color = "#FF7448",
    intensity = 0.45,
    easing = 0.15,
    border = true,
    className = "",
    style,
    children,
    onPointerEnter,
    onPointerMove,
    onPointerLeave,
    ...props
  },
  ref,
) {
  const rootRef = React.useRef<HTMLDivElement>(null);
  React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement);

  // Mutable animation state lives in a ref; it's only touched in handlers and rAF.
  const state = React.useRef({ x: 0, y: 0, tx: 0, ty: 0, raf: 0, last: 0, active: false });
  const easingRef = React.useRef(easing);
  React.useEffect(() => {
    easingRef.current = easing;
  }, [easing]);

  const reducedRef = React.useRef(false);
  React.useEffect(() => {
    const s = state.current;
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const sync = () => {
      reducedRef.current = mq.matches;
    };
    sync();
    mq.addEventListener("change", sync);
    return () => {
      mq.removeEventListener("change", sync);
      cancelAnimationFrame(s.raf);
    };
  }, []);

  const write = (x: number, y: number) => {
    const el = rootRef.current;
    if (!el) return;
    el.style.setProperty("--glow-x", `${x.toFixed(1)}px`);
    el.style.setProperty("--glow-y", `${y.toFixed(1)}px`);
  };

  const tick = (time: number) => {
    const s = state.current;
    const dt = Math.min(64, s.last ? time - s.last : 16.7);
    s.last = time;
    const e = reducedRef.current ? 1 : Math.min(Math.max(easingRef.current, 0.02), 1);
    // Frame-rate independent exponential smoothing.
    const k = 1 - Math.pow(1 - e, dt / 16.7);
    s.x += (s.tx - s.x) * k;
    s.y += (s.ty - s.y) * k;
    write(s.x, s.y);
    if (Math.abs(s.tx - s.x) > 0.2 || Math.abs(s.ty - s.y) > 0.2) {
      s.raf = requestAnimationFrame(tick);
    } else {
      s.raf = 0;
      s.last = 0;
    }
  };

  const setTarget = (event: React.PointerEvent<HTMLDivElement>, snap: boolean) => {
    const el = rootRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const s = state.current;
    s.tx = event.clientX - rect.left;
    s.ty = event.clientY - rect.top;
    if (snap) {
      // Entering: start at the pointer rather than sweeping in from the last exit point.
      s.x = s.tx;
      s.y = s.ty;
      write(s.x, s.y);
    }
    if (!s.raf) s.raf = requestAnimationFrame(tick);
  };

  const setActive = (active: boolean) => {
    state.current.active = active;
    rootRef.current?.style.setProperty("--glow-on", active ? "1" : "0");
  };

  return (
    <div
      ref={rootRef}
      className={`group/glow relative isolate overflow-hidden ${className}`}
      style={{
        ["--glow-color" as string]: color,
        ["--glow-on" as string]: 0,
        ...style,
      }}
      onPointerEnter={(event) => {
        onPointerEnter?.(event);
        if (event.pointerType !== "mouse") return;
        setTarget(event, true);
        setActive(true);
      }}
      onPointerMove={(event) => {
        onPointerMove?.(event);
        if (event.pointerType !== "mouse") return;
        if (!state.current.active) {
          setTarget(event, true);
          setActive(true);
        } else setTarget(event, false);
      }}
      onPointerLeave={(event) => {
        onPointerLeave?.(event);
        setActive(false);
      }}
      {...props}
    >
      <div
        aria-hidden="true"
        className="pointer-events-none absolute left-0 top-0 -z-10 rounded-full transition-opacity duration-500 ease-out will-change-transform motion-reduce:transition-none"
        style={{
          width: radius * 2,
          height: radius * 2,
          transform: `translate3d(calc(var(--glow-x, -9999px) - ${radius}px), calc(var(--glow-y, -9999px) - ${radius}px), 0)`,
          background: "radial-gradient(closest-side, var(--glow-color), transparent)",
          filter: blur > 0 ? `blur(${blur}px)` : undefined,
          opacity: `calc(var(--glow-on) * ${Math.min(Math.max(intensity, 0), 1)})`,
        }}
      />
      {border && (
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 rounded-[inherit] transition-opacity duration-500 ease-out motion-reduce:transition-none"
          style={{
            padding: 1,
            background: `radial-gradient(${radius}px circle at var(--glow-x, -9999px) var(--glow-y, -9999px), var(--glow-color), transparent 70%)`,
            // Mask out the content box so only a 1px ring remains.
            mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
            maskComposite: "exclude",
            opacity: "var(--glow-on)",
          }}
        />
      )}
      {children}
    </div>
  );
});