Squiggly Text

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.

El texto se deforma y ondula de forma orgánica, impulsado por el scroll o el movimiento del puntero.

Añade un efecto "Text Distortion" (también llamado organic text distortion) en [dónde].
Una fila de texto debe fluir de lado sin fin y deformarse y ondular de forma orgánica mientras se mueve, como vista a través de agua en movimiento, con el flujo impulsado por el scroll del usuario.
Mantén la distorsión lo bastante ligera para que el texto siga siendo legible, que vaya fluida en dispositivos más lentos y desactívala 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).

El texto queda fijo mientras sus líneas aparecen y desaparecen según el avance del scroll.

Añade un efecto "Sticky Text Fade" (también llamado sticky scroll text opacity fade) en [dónde].
Mientras la sección avanza con el scroll, el bloque de texto debe quedarse fijo en su sitio y sus líneas deben aparecer y desaparecer una a una según el avance del scroll.
Liga los fundidos directamente a la posición del scroll para que al volver se inviertan, y mantén todas las líneas disponibles para los lectores de pantalla, sea cual sea su opacidad.

Los contornos de las letras se dibujan como un trazo antes de que aparezca el relleno.

Añade un efecto "Stroke Text Draw" (también llamado draw in text o animated stroke text) en [dónde].
Los contornos de las letras deben dibujarse solos con suavidad y, una vez completos, el relleno debe aparecer con un fundido.
Reprodúcelo una sola vez al cargar, mantén la palabra accesible como texto real y muestra el texto ya relleno si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras o palabras giran en 3D sobre un eje para mostrar el siguiente texto en su cara trasera.

Añade un efecto hover "Text 3D Flip" (también llamado 3D flip text reveal) en [dónde].
Cuando el puntero esté sobre el texto, cada letra debe girar en 3D sobre su eje horizontal para mostrar una letra nueva en su otra cara, una tras otra en un barrido rápido y suave, y volver cuando el puntero salga.
Mantén el mismo tamaño de la caja de texto durante el giro y muestra el mismo efecto con el foco del teclado.