FancyUI
Saved GitHub Get started
Card — cursor spotlight — preview

Card — cursor spotlight

FancyUI FANCYUI

The cursor becomes the light source, so the card reads as lit, not highlighted.

#glow#minimal#hover

Open docs

Use in FancyUI

Type
Interaction
Interaction
Hover
Style
Glow, Minimal
Code availability
Open source

Why it works

A radial gradient is centred on the pointer inside the card, so the surface brightens where the light would fall rather than changing colour as a whole. On leave the light is parked far off-card and the card goes back to plain.

When to use it

Feature grids and pricing cards on pointer devices, where a hover state should feel physical.

Things to watch

It listens to `mousemove` only — no touch or pen — so on phones it is a plain card. There is nothing to see at rest. The root carries an unnamed Tailwind `group`, so `group-hover:` inside the card fires on card hover.

Implementation clues

  • radial-gradient at pointer
  • CSS vars from mousemove
  • opacity ramp on enter