Spotlight

Radial spotlight that follows the cursor inside a container. Uses CSS custom properties updated on mousemove.

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.

SpotlightRadial spotlight that follows the cursor inside a container. Uses CSS custom properties updated on mousemove.

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

type SpotlightProps = {
  children: React.ReactNode;
  color?: string;
  size?: number;
};

export function Spotlight({
  children,
  color = "rgba(255,255,255,0.10)",
  size = 300,
}: SpotlightProps) {
  const ref = useRef<HTMLDivElement>(null);

  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    el.style.setProperty("--sp-x", (e.clientX - rect.left) + "px");
    el.style.setProperty("--sp-y", (e.clientY - rect.top) + "px");
  }

  return (
    <div
      ref={ref}
      className="mp-spotlight"
      onMouseMove={handleMouseMove}
      style={
        {
          "--sp-color": color,
          "--sp-size": size + "px",
          "--sp-x": "-9999px",
          "--sp-y": "-9999px",
        } as React.CSSProperties
      }
    >
      {children}
    </div>
  );
}

Props

Prop	Type	Default	Description
childrenrequired	ReactNode	—	Container content
color	string	"rgba(255,255,255,0.10)"	Spotlight glow color
size	number	300	Spotlight radius in px