"use client"; import React, { useRef, useState } from "react"; /** * Card with a light source that follows the cursor. * * The glow is painted with a radial-gradient whose centre is driven by CSS * custom properties, so moving the pointer only writes two variables — no * React state per frame, no re-render, and the compositor does the rest. */ export function SpotlightCard({ title = "Spotlight card", body = "A radial highlight tracks the cursor and the border picks up the same light.", footer = "Hover me", className = "", }: { title?: string; body?: string; footer?: string; className?: string; }) { const ref = useRef(null); const [lit, setLit] = useState(false); const move = (e: React.PointerEvent) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); el.style.setProperty("--mx", `${e.clientX - r.left}px`); el.style.setProperty("--my", `${e.clientY - r.top}px`); }; return (

setLit(true)} onPointerLeave={() => setLit(false)} style={{ "--mx": "50%", "--my": "50%" } as React.CSSProperties} className={`group relative overflow-hidden rounded-2xl border border-white/10 bg-neutral-950 p-7 transition-colors duration-300 ${className}`}> {/* the light itself */}

{/* border catching the same light */}

{title}

{body}

{footer}

); } export default SpotlightCard;

Spotlight Card

Preview

Source