Spotlight Card

Cards

About

Card surface with a crisp spotlight that tracks the cursor and fades in on hover. Built on Cursor Glow and design tokens.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Spotlight Card to your project and fits it to your theme.

Code

How Spotlight Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { SpotlightCard } from "@/components/ui/spotlight-card";

export default function SpotlightCardDemo() {
  return (
    <div className="flex min-h-[400px] w-full items-center justify-center bg-background p-8">
      <SpotlightCard className="w-full max-w-sm p-6">
        <h3 className="text-lg font-semibold text-card-foreground">
          Spotlight Card
        </h3>
        <p className="mt-2 text-sm text-muted-foreground">
          Move your cursor over this card to see the spotlight glow follow your
          pointer.
        </p>
      </SpotlightCard>
    </div>
  );
}