Text Replacement

One word in a sentence is swapped for the next word in a list with a slide, flip or fade.

Add a "Word Rotate" effect (also called rotating words or flip words) to [where].
One word in the line should slide up and out while the next word from a list slides in from below, pausing on each word before the next change.
Keep the rest of the line from jumping when the words have different widths, don't make screen readers announce every change, and stop rotating for users who prefer reduced motion.

One word blurs and blends into the next in the same spot.

Add a "Morphing Text" effect (also called text morph) to [where].
One word should blur and melt into the next in the same spot with a soft, gooey merge, then hold still for a moment before the next change.
Cycle through the words seamlessly, let screen readers read the words as plain text, and stop cycling for users who prefer reduced motion.

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 slides up from behind a clipping line so it looks like it emerges from nowhere.

Add a "Mask Reveal" text entrance (also called line mask reveal or text masking) to [where].
Each line should slide up from behind an invisible edge so it seems to emerge from nowhere, one line after another, quick and smooth without bounce.
Play it once when the text scrolls into view, and show the text right away without motion for users who prefer reduced motion.

Words of a paragraph go from dim to full opacity as the user scrolls.

Add a "Text Reveal" effect (also called scroll text reveal or word-by-word reveal) to [where].
The paragraph should start dim, and as the user scrolls each word should brighten to full strength one after another, tied to the scroll position.
Scrolling back up should dim the words again, and the whole paragraph should stay available to screen readers whatever its dimming.

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.