Text Distortion

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.

Los bordes de las letras ondulan como si estuvieran dibujados a mano, con un filtro de desplazamiento SVG.

Añade un efecto "Squiggly Text" (también llamado wobbly text o turbulence text) en [dónde].
Los bordes de las letras deben temblar ligeramente como si se dibujaran a mano y se redibujaran varias veces por segundo: un hervor sutil y nervioso, no una onda suave.
Mantén el texto legible y déjalo quieto si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras gotean y se estiran hacia abajo como si se derritieran.

Añade un efecto "Melting Text" en [dónde].
Las letras deben hundirse lentamente mientras unas gotas se estiran por debajo, como si se derritieran, y quedarse quietas con un aspecto derretido.
Reprodúcelo una sola vez cuando el texto entre en pantalla, mantén la palabra legible al final y omite el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las palabras aparecen una tras otra al cargar la página, a menudo mientras se disipa un desenfoque, como si se estuvieran generando.

Añade un efecto "Text Generate" en [dónde].
Las palabras deben aparecer una tras otra mientras se disipa un suave desenfoque en cada una, como si el texto se estuviera generando: constante y tranquilo.
Reprodúcelo una sola vez al cargar, deja que los lectores de pantalla lean el texto completo desde el principio y muéstralo sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una franja de color tipo rotulador se dibuja sobre una frase para resaltarla.

Añade un efecto "Text Highlighter" (también llamado highlight marker o marker underline) en [dónde].
Una franja de color tipo rotulador debe pasar suavemente por detrás de la frase clave de izquierda a derecha, como si alguien la resaltara con un marcador.
Reprodúcelo una sola vez cuando la frase entre en pantalla al hacer scroll, mantén el texto legible sobre la franja y haz que la franja siga bien la frase cuando se divida en dos líneas.

Una palabra con contorno se rellena o se ilumina con un degradado que sigue al puntero o la recorre de lado a lado.

Añade un "Text Hover Effect" (también llamado text fill on hover o gradient outline text hover) en [dónde].
La palabra debe empezar solo con contorno y, mientras el puntero esté encima, un relleno sólido debe entrar suavemente de izquierda a derecha y retirarse cuando el puntero salga.
Mantén legible la palabra con contorno antes del relleno y muestra el mismo efecto con el foco del teclado.