cardsAdvancedhover
Spotlight Card
A dark card where a soft cursor-following light reveals a gradient border.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a 'spotlight' card: a dark rounded card with a thin gradient border that only lights up where the cursor is. Implementation: track cursor position via mousemove → set --mx and --my CSS variables on the card. The border uses a radial-gradient at (var(--mx) var(--my)) masked to a 1px ring via the standard 'two backgrounds + mask-composite: exclude' trick. A second radial gradient layer (lower opacity, larger radius) adds an inner halo effect. Both layers fade in on hover. Inside: a small mono PRO chip with a purple→pink gradient, a 2-line headline, supporting copy, and an arrow link.
Code
html
<!--
Source: Vibedex
https://vibedex.io
License: MIT
Surfaced via https://vibedex.io/components/vbx-spotlight-card
-->
<div class="stage"><article class="card"><div class="halo"></div><div class="body"><span class="chip">PRO</span><h3>Production-grade<br>by default.</h3><p>Skip the boilerplate. Each component arrives with the polish you'd ship anyway.</p><a class="link" href="#">Explore the kit <span>→</span></a></div></article></div>