Shape Morph

An organic blob continuously changes its outline.

Add a "Blob Morph" loop animation (also called a morphing blob or animated blob) to [where].
An organic blob should keep slowly changing its outline while turning gently, smooth and soft with no sharp corners.
Make the loop seamless so the shape never jumps, and keep it still for users who prefer reduced motion.

An icon such as a hamburger menu turns into another (X) with bars rotating and moving.

Add an "Icon Morph" (also called hamburger to X or a menu icon morph) to [where].
On each press, the top and bottom bars should first slide together to the middle and then rotate into an X while the middle bar fades out, and pressing again reverses it: quick and snappy.
Make it a real toggle button whose accessible label and expanded state change with it, and keep the icon's size fixed so nothing around it shifts.

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.

The corners of the element smoothly round on hover.

Add a "Round Corners" hover effect to [where].
The element's sharp corners should round off smoothly while the pointer is over it, and sharpen again when it leaves: soft and quick.
Keep the element's size unchanged, and show the same effect on keyboard focus.

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.

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.