Performance
Pasa el ratón por el borde y verás cómo la luz te persigue.
Spotlight border card
A card whose thin border lights up exactly where the cursor is, with a faint glow spilling inside.
Settings
Code
<div class="uv-ks"><div><h3>Performance</h3><p>Hover along the edge and watch the light follow you.</p></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
Where to use it
The spotlight card effect is a favorite on developer tool and SaaS landing pages: a grid of feature cards like “Performance”, “Security” and “Integrations”, or the three tiers of a pricing section. As the mouse moves, a patch of light follows it along the border and warms the inside of the card. A few lines of JavaScript track the pointer.
It shines on dark pages with several cards side by side, each one catching the light as the cursor passes. On phones there's no cursor, so the light simply rests at the top center, which still looks tidy.