Glow Effect

Soft box-shadow glow that intensifies as the cursor approaches the element center. Pure React state.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Glow EffectSoft box-shadow glow that intensifies as the cursor approaches the element center. Pure React state.

"use client";
import { useRef, useState } from "react";

type GlowEffectProps = {
  children: React.ReactNode;
  color?: string;
  blur?: number;
  spread?: number;
};

export function GlowEffect({
  children,
  color = "#7c3aed",
  blur = 20,
  spread = 4,
}: GlowEffectProps) {
  const ref = useRef<HTMLDivElement>(null);
  const [intensity, setIntensity] = useState(0);

  function handleMouseMove(e: React.MouseEvent) {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const cx = rect.left + rect.width / 2;
    const cy = rect.top + rect.height / 2;
    const dx = e.clientX - cx;
    const dy = e.clientY - cy;
    const dist = Math.sqrt(dx * dx + dy * dy);
    const maxDist = Math.sqrt(rect.width * rect.width + rect.height * rect.height) * 0.65;
    setIntensity(Math.max(0, 1 - dist / maxDist));
  }

  const b = blur * intensity;
  const s = spread * intensity;
  const shadow = intensity > 0 ? "0 0 " + b + "px " + s + "px " + color : "none";

  return (
    <div
      ref={ref}
      className="mp-glow-effect"
      onMouseMove={handleMouseMove}
      onMouseLeave={() => setIntensity(0)}
      style={{ boxShadow: shadow, transition: "box-shadow 0.15s ease" }}
    >
      {children}
    </div>
  );
}

Props

Prop	Type	Default	Description
childrenrequired	ReactNode	—	Content to wrap with glow
color	string	"#7c3aed"	Glow color
blur	number	20	Max glow blur radius in px
spread	number	4	Max glow spread in px