Pointer Highlight

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.

Al pasar el ratón, un subrayado crece desde un lado o desde el centro bajo un enlace.

Añade un efecto hover de subrayado animado (Underline Draw) en [dónde], también llamado animated underline o hover underline animation.
Cuando el puntero esté sobre el enlace, un subrayado debe crecer suavemente de izquierda a derecha bajo el texto y encogerse de nuevo cuando el puntero salga: rápido y sutil.
Evita que el subrayado desplace el diseño de alrededor y muestra el mismo efecto con el foco del teclado.

Un trazo SVG parece dibujarse a lo largo de su recorrido al animar el desplazamiento del guion.

Añade una animación "Line Drawing" (también llamada path drawing o self-drawing SVG) en [dónde].
Cada trazo debe parecer dibujarse solo con suavidad a lo largo de su recorrido de principio a fin, y un segundo trazo, como una marca de verificación, debe seguir justo después del primero.
Reprodúcela una sola vez al entrar en pantalla en lugar de repetirla, y muestra las líneas ya dibujadas si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se encoge un poco mientras se pulsa y vuelve con un rebote al soltarlo.

Añade un efecto "Press (Button Tap Scale)" (también llamado tap feedback o press state) en [dónde].
Mientras se pulsa, el elemento debe encogerse un poco y oscurecerse ligeramente, y al soltarlo volver a su tamaño con un pequeño rebote: rápido y sutil.
Muestra la misma respuesta al pulsar con el teclado y con el dedo, y evita que el diseño de alrededor se mueva.

Arrastrar una lista hacia abajo muestra un indicador de carga y recarga el contenido al soltar.

Añade una interacción "Pull to Refresh" (también llamada swipe to refresh) en [dónde].
Al tirar de la lista hacia abajo desde arriba, debe seguir al dedo con algo de resistencia y mostrar un indicador de carga que gira mientras se tira; al soltar, sigue girando mientras se recarga el contenido y luego la lista vuelve a subir con suavidad.
Actívala solo cuando la lista ya esté en la parte superior, y ofrece también un control de recarga normal para usuarios de teclado y lector de pantalla.

Una onda circular se expande y se desvanece desde el punto exacto del clic o toque.

Añade un efecto "Ripple" (también llamado material ripple o ink ripple) en [dónde].
En cada clic o toque, una onda circular suave debe extenderse desde el punto exacto pulsado hasta cubrir el elemento, desvaneciéndose mientras crece: rápida y ligera.
Recorta la onda a la forma del elemento, deja que cada pulsación rápida inicie su propia onda, y hazla empezar desde el centro al pulsar con el teclado.