Typewriter

Words fade in sequentially on page load, often with a blur clearing, as if being generated.

Add a "Text Generate" effect to [where].
The words should fade in one after another while a soft blur clears from each, as if the text is being generated: steady and calm.
Play it once on load, let screen readers read the full text right away, and show it without motion 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.

Three dots in a bubble pulse or rise in turn to show someone or an AI is composing.

Add a "Typing Indicator" (also called typing dots) to [where].
Dots inside a small chat bubble should rise and brighten one after another in a soft, gentle rhythm while the other side is composing.
Keep the loop seamless, remove the bubble as soon as the message arrives, and give screen readers a short status text instead of the dots.

The text caret grows or shrinks to match the size of the character it sits beside.

Add an "Adaptive Caret" effect (also called adaptive caret size) to [where].
The text caret should move in front of the character nearest the pointer and quickly stretch or shrink to match that character's height, with a smooth, snappy resize and no bounce.
Keep the text itself from shifting, and let the caret follow keyboard movement the same way it follows the pointer.

An underline grows from one side or the centre under a link on hover.

Add an "Underline Draw" hover effect (also called animated underline or hover underline animation) to [where].
When the pointer is over the link, an underline should grow smoothly from left to right under the text, and shrink back when the pointer leaves: quick and subtle.
Keep the underline from shifting the surrounding layout, and show the same effect on keyboard focus.

Letters smoothly get bolder or lighter (or change width/slant) via variable-font axes.

Add a "Variable Font Weight Animation" hover effect (also called font weight shift) to [where].
While the pointer is over the text, the letters should grow bolder one after another in a smooth wave from left to right, and thin out again when the pointer leaves.
Use a variable font so the weight changes smoothly instead of jumping, keep the heading from pushing nearby content around as it widens, and show the same effect on keyboard focus.

Big letters act as a window showing a playing video inside them.

Add a "Video Text" effect (also called text video mask) to [where].
Big, bold letters should act as a window onto a playing video, so the moving footage shows only inside the letter shapes.
Keep the video muted and looping without controls, provide the words as real text for screen readers, and show a still frame for users who prefer reduced motion.