Text Distortion

An SVG filter warps text or shapes with animated noise.

Add an "SVG Displacement Distortion" hover effect (also called a displacement map effect) to [where].
While the pointer is over it, the text or shape should ripple and wobble as if seen through moving water, fading in softly, and return to crisp when the pointer leaves.
Apply the distortion filter only while the effect is active so it costs nothing at rest, and show the same effect on keyboard focus.

Letter edges wiggle as if hand-drawn using an SVG displacement filter.

Add a "Squiggly Text" effect (also called wobbly text or turbulence text) to [where].
The letter edges should wobble slightly as if hand-drawn and redrawn several times a second: a subtle, jittery boil rather than a smooth wave.
Keep the text readable, and hold it still for users who prefer reduced motion.

Letters drip and stretch downward as if melting.

Add a "Melting Text" effect to [where].
The letters should slowly sag downward while drips stretch out below them, as if they are melting, and come to rest in a still, melted look.
Play it once when the text comes into view, keep the word readable at the end, and skip the motion for users who prefer reduced motion.

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.

A marker-style colour band draws across a phrase to emphasise it.

Add a "Text Highlighter" effect (also called highlight marker or marker underline) to [where].
A marker-style color band should sweep smoothly behind the key phrase from left to right, like someone highlighting it with a pen.
Play it once when the phrase scrolls into view, keep the text readable on top of the band, and let the band follow the phrase correctly when it wraps onto two lines.

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.