Card Spotlight

spotlight x radial

Card with radial spotlight following the cursor. From Aceternity.

cardspotlightradialaceternity

Spotlight Card

Move your cursor to reveal the spotlight.

Code

card-spotlight.tsx

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

export function SpotlightCard({ children }: { children: React.ReactNode }) {
  const [pos, setPos] = useState({ x: 50, y: 50 });
  const ref = useRef<HTMLDivElement>(null);
  function move(e: React.MouseEvent) {
    const r = ref.current!.getBoundingClientRect();
    setPos({ x: ((e.clientX - r.left) / r.width) * 100, y: ((e.clientY - r.top) / r.height) * 100 });
  }
  return (
    <div ref={ref} onMouseMove={move} className="relative overflow-hidden rounded-xl border border-border bg-card">
      <div className="pointer-events-none absolute inset-0 transition-opacity duration-300"
        style={{ background: `radial-gradient(circle at ${pos.x}% ${pos.y}%, var(--accent, #8b5cf6) 0%, transparent 70%)`, opacity: 0.15 }} />
      <div className="relative p-6">{children}</div>
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Card Spotlight component and wire it to my accent.”