Spotlight Button

A gradient border button where the highlight follows cursor movement.

"use client";

import { useState } from "react";

export default function SpotlightButton() {
  const [position, setPosition] = useState(null);
  const config = {
    label: "Hover me",
    bgColor: "#080c14",
    textColor: "#dbeafe",
    borderColor: "#334155",
    spotlightColor: "#60a5fa",
    radius: 999,
    spotlightSize: 140
  };

return (
    <div
      onPointerLeave={() => setPosition(null)}
      onPointerMove={(event) => {
        const rect = event.currentTarget.getBoundingClientRect();
        setPosition({ x: event.clientX - rect.left, y: event.clientY - rect.top });
      }}
      style={{
        position: "relative",
        borderRadius: config.radius,
        padding: 1.5,
        cursor: "pointer",
        background: position
          ? `radial-gradient(${config.spotlightSize}px circle at ${position.x}px ${position.y}px, ${config.spotlightColor}, ${config.borderColor} 70%)`
          : config.borderColor,
        transition: "background 150ms ease"
      }}
    >
      <div
        style={{
          padding: "10px 24px",
          borderRadius: Math.max(config.radius - 1, 0),
          background: config.bgColor,
          color: config.textColor,
          fontSize: 14,
          fontWeight: 600,
          textAlign: "center"
        }}
      >
        {config.label}
      </div>
    </div>
  );
}