"use client"; import React, { useRef } from "react"; interface SpotlightButtonProps { text?: string; onClick?: () => void; backgroundColor?: string; textColor?: string; borderColor?: string; spotlightColor?: string; spotlightSize?: string; spotlightOpacity?: number; transitionDuration?: number; className?: string; } export const SpotlightButton: React.FC = ({ text = "Spotlight", onClick, backgroundColor = "#020617", textColor = "#cbd5e1", borderColor = "#1e293b", spotlightColor = "rgba(255,255,255,0.1)", spotlightSize = "600px", spotlightOpacity = 0.1, transitionDuration = 300, className = "", }) => { const divRef = useRef(null); const position = { x: 0, y: 0 }; const handleMouseMove = (e: React.MouseEvent) => { if (!divRef.current) return; const div = divRef.current; const rect = div.getBoundingClientRect(); position.x = e.clientX - rect.left; position.y = e.clientY - rect.top; div.style.setProperty("--x", `${position.x}px`); div.style.setProperty("--y", `${position.y}px`); div.style.setProperty("--opacity", "1"); }; const handleMouseLeave = () => { if (!divRef.current) return; divRef.current.style.setProperty("--opacity", "0"); }; return (

); };

Spotlight Button