← All effects

Spotlight Hover

Micro-interaction Vanilla JS · zero dependencies Kit: Cinematic Dark — soon

Pro plan

Move your cursor around this card. The light follows you — across the surface and along the border.

-- fps
prefers-reduced-motion detected — light stays centered

X-ray · layers

light inside the card
glow along the edge
light trails the cursor

Parameters

Glow size220 px
Intensity0.18
Follow speed0.15
Border width1 px
your version · updates as you tinker

How this effect works

The spotlight is two radial gradients pinned to your cursor. The card is built as a sandwich: an outer wrapper that is 1px bigger on every side, and the card itself on top. The surface glow is a radial gradient painted on the card's own background at the cursor position. The border light is the same gradient painted on the outer wrapper — only its thin 1px rim peeks out from behind the card, which is what draws that glowing arc along the edge.

The smooth follow layer is one line of math: instead of jumping to the cursor, the light's position moves a fraction of the remaining distance every frame (pos += (target - pos) * FOLLOW). Lower fraction = heavier, more liquid light. Turn it off and feel how cheap the instant version looks.

Production notes: respects prefers-reduced-motion (light rests in the center, no chasing) · negligible cost — two CSS gradients per frame · classic use: pricing cards, feature grids (one script can drive many cards) · the copied snippet is self-contained HTML + CSS + JS.