Cursor Spotlight

A soft radial light follows the pointer across the card surface and reveals the background beneath.

Add a "Card Spotlight" effect (also called spotlight hover, pointer glow, mouse-following glow or radial gradient hover) to [where].
A soft, faint radial glow should follow the pointer across the card surface, fading in when the pointer enters and out when it leaves.
Keep the glow behind the card content so text stays readable, and on touch devices simply leave the card unlit.

A masked shape wipes or follows the pointer to uncover content beneath.

Add an "SVG Mask Reveal" hover effect (also called a clip-path reveal or spotlight mask) to [where].
While the pointer is over it, a circular mask should grow from the center and uncover the content underneath, then close again when the pointer leaves: smooth and fairly quick.
Keep both layers exactly the same size so nothing shifts, and show the same reveal on keyboard focus and tap.

Moving the pointer across a card uncovers hidden text underneath a mask edge or spotlight.

Add a "Text Reveal Card" effect (also called spotlight text reveal) to [where].
As the pointer moves across the card, a vertical edge should follow it closely and uncover hidden text on one side, smooth and direct with no lag.
On touch devices, where there is no pointer to follow, let a drag or tap reveal the hidden text, and make the hidden text available to screen readers.

A soft cone or pool of light sweeps into place and lights part of the background.

Add a "Spotlight" effect (also called a spotlight sweep or light cone) to [where].
When the page loads, a soft cone of light should sweep in from the corner at an angle and settle over the heading, brightening as it arrives: slow and smooth.
Play it only once, and for users who prefer reduced motion show the light already in place.

A fading string of shapes is left behind the pointer as it moves.

Add a "Cursor Trail" effect (also called a mouse trail) to [where].
As the pointer moves, it should leave a short string of small dots behind it that each shrink and fade away quickly, so the trail stays short and smoothly traces the path.
Only draw the trail while the pointer is moving, never let it block clicks, and leave it out on touch devices and for users who prefer reduced motion.

The default arrow is replaced by a styled dot or ring that changes over interactive elements.

Add a "Custom Cursor" (also called an animated cursor or cursor replacement) to [where].
Replace the default arrow with a small dot that tracks the pointer exactly and a ring that follows a little behind, and let the ring grow smoothly while it is over links and buttons.
Keep the normal cursor on touch devices and in text fields, and never let the custom cursor block clicks.

The element is pulled toward the pointer as it comes close, then snaps back when it leaves.

Add a "Magnetic Button" effect (also called a magnetic target or magnetic hover) to [where].
As the pointer comes close, the button should be pulled a little toward it with its label moving slightly further, and when the pointer leaves it should spring back to its place with a small bounce.
Keep the surrounding layout from shifting, and turn the pull off on touch devices and for users who prefer reduced motion.