Library

Spotlight Card

Spotlight Card

Card with a glowing radial spotlight that follows your cursor. The gradient tracks mouse position in real-time with configurable color and size.

hoverspotlightglowmouse-follow

Installation

bash
# Copy spotlight-card.tsx to your project
cp components/ui/spotlight-card.tsx your-project/components/ui/spotlight-card.tsx

How to use

tsx
import { SpotlightCard } from "@/components/ui/spotlight-card";
tsx
<SpotlightCard spotlightColor="rgba(120, 119, 198, 0.3)">
  <div className="p-6">
    <h3 className="text-lg font-semibold">Card Title</h3>
    <p className="text-sm text-zinc-400">Card content here</p>
  </div>
</SpotlightCard>

Dependencies

framer-motion

Exports

SpotlightCard

File

components/ui/spotlight-card.tsx
Preview

Move your cursor over the cards

Lightning Fast

Built for performance with spring physics.

Responsive

Works beautifully on any screen size.

Developer Friendly

Clean TypeScript API with typed props.

Data Driven

Connect to any data source seamlessly.

Made with