Text Hover Effect

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.

Letter outlines are drawn as a stroke before the fill appears.

Add a "Stroke Text Draw" effect (also called draw in text or animated stroke text) to [where].
The letter outlines should draw themselves in smoothly, and once the outlines are complete the fill should fade in.
Play it once on load, keep the word accessible as real text, and show the filled text straight away for users who prefer reduced motion.

Letters fill with a rising, waving liquid.

Add a "Liquid Fill Text" effect (also called water fill text) to [where].
The outlined letters should fill with liquid whose wavy surface rolls sideways while the level slowly rises and falls, in a soft, continuous loop.
Keep the word available as real text for screen readers, and hold the liquid at a still level for users who prefer reduced motion.

Text follows a curved path and travels along it as the user scrolls.

Add a "Text Path Scroll" effect (also called text path curve scroll animation) to [where].
The text should sit on a curved line and glide along it as the user scrolls, moving forward when scrolling down and back when scrolling up.
Tie the movement directly to the scroll position without lag, and keep the text readable as plain text for screen readers.

A word is duplicated into many stacked copies that shift with scroll.

Add a "Text Repetition" effect (also called repeated text scroll) to [where].
A word should be copied into a stack of fainter outline copies that spread out from behind it as the user scrolls, and fold back together when scrolling up.
Tie the spread directly to the scroll position, and hide the extra copies from screen readers so the word is read only once.

Existing text is animated out and replaced with new text content.

Add a "Text Replacement" effect (also called text swap) to [where].
When the text changes, the old characters should slide up and out while the new ones slide in from below, one character after another in a quick, smooth ripple.
Keep the text box from jumping in size during the swap, and announce only the new text to screen readers.