spotlight cursor hover radial-gradient glow card Feature-Cards mit Hover-Highlight-Effekt Testimonial-Cards und Pricing-Cards Interaktive Listenelemente Cards wirken flach und statisch beim Hover Elegantes Licht-Tracking ohne Canvas-API
Cursor Spotlight
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/cursor-spotlight.json Preview
Background
Customize
Quick Start
<div class="cursor-spotlight"><div class="cursor-spotlight-layer"></div><p>Inhalt</p></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-color-scheme
- Size
- 735 bytes · 34 lines
- Custom Properties
-
--spotlight-color--spotlight-size--spotlight-radius--cx--cy - Classes
-
.cursor-spotlight.cursor-spotlight-layer
spotlight cursor hover radial-gradient glow card
.cursor-spotlight-layer ist ein absolut positioniertes Overlay. Das Mini-JS (cursor-spotlight.js) setzt --cx/--cy relativ zum Element via mousemove. Dark Mode nutzt weißes Spotlight statt farbigem.