Spotlight Card
A high-end card component with a mouse-following spotlight glow effect.
Spotlight Card
SpotlightCard is a modern UI element that adds a dynamic glow effect following the user's mouse. Perfect for feature sections and landing pages.
How To Use
Import
Import the component into your project.
import { SpotlightCard } from '@/components/ui/hatch/spotlight-card';Preview
Feature
Spotlight Effect
Hover over this card to see the beautiful spotlight effect follow your cursor.
Props
| Prop | Type | Default |
|---|---|---|
className? | string | - |
spotlightSize? | number | 400 |
spotlightColor? | string | rgba(255, 255, 255, 0.1) |
children | React.ReactNode | - |
✨ Features
- Smooth mouse tracking
- Customizable color and size
- Built with standard React and CSS
- Fully responsive and performant
🧠 When to Use
- Use for feature highlights
- Use for call-to-action cards
- Use when you want to add a "premium" feel to your layout