SVG Mask Reveal

A circle of light around the pointer reveals content while the rest stays dark.

Add a "Cursor Spotlight" effect (also called a flashlight cursor or spotlight effect) to [where].
A soft circle of light should follow the pointer and reveal the content under it while the rest of the area stays dimmed.
On touch devices, where there is no pointer to follow, show the content fully lit instead.

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.

A clip-path or mask grows from an edge or point so the image or text is progressively uncovered.

Add a "Clip Reveal" entrance effect (also called mask reveal, wipe reveal or image reveal) to [where].
A clipping edge should sweep across from left to right so the content is uncovered progressively while it stays still: smooth, starting and ending softly.
Reserve the element's space from the start so nothing shifts, and show it fully uncovered when the user prefers reduced motion (prefers-reduced-motion).

An image is uncovered by a shrinking cover or expanding mask edge.

Add an "Image Reveal Wipe" (also called a mask reveal or clip-path reveal) to [where].
As the image scrolls into view, a cover should wipe away from one side and smoothly uncover it in step with the scroll, so it is fully open well before it leaves the screen.
Reserve the image's space so the layout does not jump, and show the image fully uncovered for users who prefer reduced motion.

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.

Nearby shapes blend into each other like liquid blobs via blur and contrast filtering.

Add a "Gooey Effect" (also called a goo effect or metaballs) to [where].
When the pointer is over it, small blobs should pull away from the main shape, stretching like liquid before breaking free, and flow back and merge smoothly when the pointer leaves.
Apply the blur-and-contrast filter only to the small group of shapes, not the whole page, and show the same effect on keyboard focus and tap.

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.