lighting spotlight hover card premium premium feature cards with lighting feedback dark dashboards with reactive highlights CTA surfaces that need more perceived depth hover states feel flat need premium lighting without canvas or JS libraries want cursor-driven highlights on cards
Spotlight Card
Fetch snippet JSON:
curl https://webspire.de/snippets/lighting/spotlight-card.json Lighting
Hover reactiveSpotlight Card
Move your cursor across the panel to sweep a softer, tighter light that actually tracks the pointer.
Specular
Soft falloff
Background
Customize
Quick Start
<article class="spotlight-card rounded-3xl p-8" onmousemove="const r=this.getBoundingClientRect();this.style.setProperty(`--spotlight-x`,`${event.clientX-r.left}px`);this.style.setProperty(`--spotlight-y`,`${event.clientY-r.top}px`)" onmouseleave="this.style.setProperty(`--spotlight-x`,`50%`);this.style.setProperty(`--spotlight-y`,`50%`)"></article>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 1650 bytes · 62 lines
- Custom Properties
-
--spotlight-x--spotlight-y--spotlight-color--spotlight-duration--spotlight-surface--spotlight-border - Classes
-
.spotlight-card
lighting spotlight hover card premium
Pointer-driven lighting for premium cards. The effect combines a broad colored falloff with a tighter specular highlight so the surface reads as lit rather than merely glowing.
Spotlight feature card
<article
class="spotlight-card rounded-3xl p-8 text-white"
onmousemove="const r=this.getBoundingClientRect();this.style.setProperty('--spotlight-x',`${event.clientX-r.left}px`);this.style.setProperty('--spotlight-y',`${event.clientY-r.top}px`)"
onmouseleave="this.style.setProperty('--spotlight-x','50%');this.style.setProperty('--spotlight-y','50%')"
>
<p class="text-sm text-white/60">Lighting</p>
<h3 class="mt-2 text-2xl font-semibold">Cursor-reactive spotlight</h3>
</article>