Shape Morph

Una mancha orgánica cambia su contorno de forma continua.

Añade una animación en bucle "Blob Morph" (también llamada morphing blob o animated blob) en [dónde].
Una mancha orgánica debe cambiar su contorno lentamente sin parar mientras gira con suavidad, fluida y blanda, sin esquinas marcadas.
Haz que el bucle no tenga cortes para que la forma nunca salte, y déjala quieta si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un icono, como el menú hamburguesa, se transforma en otro (una X) con barras que giran y se desplazan.

Añade un "Icon Morph" (también llamado hamburger to X o menu icon morph) en [dónde].
En cada pulsación, las barras superior e inferior deben deslizarse juntas hasta el centro y luego girar hasta formar una X mientras la barra central se desvanece; al pulsar de nuevo, se invierte: rápido y ágil.
Hazlo un botón de alternancia real cuya etiqueta accesible y estado expandido cambien con él, y mantén fijo el tamaño del icono para que nada a su alrededor se mueva.

Una palabra se difumina y se funde con la siguiente en el mismo lugar.

Añade un efecto "Morphing Text" (también llamado text morph) en [dónde].
Una palabra debe difuminarse y fundirse con la siguiente en el mismo lugar, con una mezcla suave y viscosa, y quedarse quieta un momento antes del siguiente cambio.
Recorre las palabras sin cortes, deja que los lectores de pantalla lean las palabras como texto normal y detén el ciclo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las esquinas del elemento se redondean con suavidad al pasar el cursor.

Añade un efecto hover "Round Corners" en [dónde].
Las esquinas rectas del elemento deben redondearse con suavidad mientras el cursor está encima y volver a ser rectas cuando sale: suave y rápido.
Mantén el tamaño del elemento sin cambios y muestra el mismo efecto con el foco del teclado.

Un filtro SVG deforma texto o formas con ruido animado.

Añade un efecto hover "SVG Displacement Distortion" (también llamado displacement map effect) en [dónde].
Mientras el puntero esté encima, el texto o la forma debe ondularse y temblar como si se viera a través de agua en movimiento, apareciendo con suavidad, y volver a verse nítido cuando el puntero se va.
Aplica el filtro de distorsión solo mientras el efecto esté activo para que no cueste nada en reposo, y muestra el mismo efecto con el foco del teclado.

Una forma de máscara barre o sigue al puntero para descubrir el contenido de debajo.

Añade un efecto hover "SVG Mask Reveal" (también llamado clip-path reveal o spotlight mask) en [dónde].
Mientras el puntero esté encima, una máscara circular debe crecer desde el centro y descubrir el contenido de debajo, y volver a cerrarse cuando el puntero se va: suave y bastante rápido.
Mantén las dos capas exactamente del mismo tamaño para que nada se mueva, y muestra el mismo revelado con el foco del teclado y al tocar.