Text Reveal Card

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.

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 draggable divider reveals one image on one side and another on the other.

Add a "Before-After Slider" (also called an image comparison slider or compare slider) to [where].
Two images sit on top of each other, and dragging a vertical divider reveals more of one and less of the other; the divider follows the pointer directly with no lag.
Start the divider in the middle, and make it work with touch and with the arrow keys.

An outlined word gets filled or lit by a gradient that follows the pointer or sweeps across.

Add a "Text Hover Effect" (also called text fill on hover or gradient outline text hover) to [where].
The word should start as an outline, and while the pointer is over it a solid fill should sweep in smoothly from left to right, then draw back out when the pointer leaves.
Keep the outlined word readable before the fill, and show the same effect on keyboard focus.

Text is replaced by random characters that refresh and gradually resolve into the final word.

Add a "Text Scramble" hover effect (also called text decode or encrypted text) to [where].
When the pointer moves over the text, each letter should flicker rapidly through random characters and settle on its real letter, resolving one after another from left to right.
Keep the text width from jumping while it scrambles, keep screen readers on the real text, and show the same effect on keyboard focus.

Text rotates in 3D perspective following the mouse position.

Add a "Text Tilt" effect (also called perspective text tilt) to [where].
The text should tilt gently in 3D toward the pointer as it moves, following it smoothly, and ease back flat when the pointer leaves.
Keep the tilt subtle so the text stays readable, and leave the text flat on touch devices and for users who prefer reduced motion.

Characters appear one at a time as if typed, usually followed by a blinking caret.

Add a "Typewriter" effect (also called typing animation or typing text) to [where].
The characters should appear one at a time at a steady typing pace, with a caret right after the last typed character that blinks a few times once typing is done.
Play it once rather than looping, let screen readers read the full text right away, and show the full text for users who prefer reduced motion.