Spotlight
No library Intermediate
A radial gradient light follows the cursor across the card surface, creating a torch-like spotlight effect. Pure CSS + mouse tracking, no dependencies.
A radial gradient light follows the cursor across the card surface, creating a torch-like spotlight effect. Pure CSS + mouse tracking, no dependencies.
Goal: Create a "Spotlight" card animation.
Visual behavior: As the cursor moves over the card, a soft radial gradient light follows the pointer — like a torch or spotlight sweeping across the card surface. The glow fades out when the cursor leaves.
Technique:
- Track mouse position relative to the card via onMouseMove + getBoundingClientRect
- Render an absolutely-positioned overlay div with:
background: radial-gradient(200px circle at {x}px {y}px, rgba(139,92,246,0.18), transparent 70%)
- The overlay covers the full card (position: absolute; inset: 0; pointer-events: none)
- On mouse leave, remove the overlay or set opacity to 0 with a short 200ms fade
- The card itself has a dark base background and a subtle border to make the glow pop
Accessibility: The spotlight is purely decorative and pointer-driven. Under prefers-reduced-motion, the gradient can still render but should not animate or transition.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.