Card Spotlight

A circle of light around the pointer reveals content while the rest stays dark.

Add a "Cursor Spotlight" effect (also called a flashlight cursor or spotlight effect) to [where].
A soft circle of light should follow the pointer and reveal the content under it while the rest of the area stays dimmed.
On touch devices, where there is no pointer to follow, show the content fully lit instead.

A bright highlight follows the pointer across a card surface like a reflection.

Add a "Glare / Holographic Card" effect (also called a glare card or glare hover) to [where].
A soft bright highlight should follow the pointer across the card surface like light reflecting off it, while the card leans slightly toward the pointer; both fade away when the pointer leaves: smooth and subtle.
Let clicks pass through the glare layer, keep the content readable under it, and show the card without glare on touch devices.

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 corner of the element folds up like a turning page on hover.

Add a "Curl" hover effect (also called page curl) to [where].
One corner of the element should fold up smoothly like a page being turned, showing the back of the fold, and flatten again when the pointer leaves.
Keep the fold small so it doesn't cover important content, and show the same effect on keyboard focus.

An overlay slides in from the side the pointer entered and leaves toward the side it exits.

Add a "Direction Aware Hover" effect (also called direction-aware overlay) to [where].
An overlay should slide in from whichever side the pointer entered and slide out toward the side it leaves: quick and smooth.
Work out the side from the pointer position on entry and on exit, and on touch or keyboard focus fall back to one default direction.

Icons in a row grow smoothly as the pointer approaches, like the macOS Dock.

Add a "Dock Magnification" effect (also called dock) to [where].
Icons in the row should grow smoothly as the pointer gets closer, with the nearest icon largest and its neighbors slightly enlarged, and all return to normal size when the pointer leaves.
Grow the icons upward from a fixed baseline, and keep every icon usable at its normal size on touch and keyboard.