Password Reveal Toggle (mostrar/ocultar contraseña)

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.

El icono de copiar se transforma en una marca de verificación y la etiqueta muestra Copiado por un momento.

Añade una animación de copiar al portapapeles (Copy-to-Clipboard Feedback) en [dónde], también llamada copied state o copy icon to checkmark.
Al pulsar el botón de copiar, el icono de copiar debe encogerse rápidamente mientras se dibuja una marca de verificación y la etiqueta cambia a "Copiado"; tras un breve momento, todo vuelve suavemente a su estado inicial.
Mantén el botón del mismo tamaño durante el cambio para que nada se desplace, y anuncia el estado de copiado a los lectores de pantalla.

Un botón redondo se desliza por un carril y el color del carril cambia entre apagado y encendido.

Añade una animación "Toggle Switch" (también llamada switch) en [dónde].
Al activarlo o desactivarlo, el botón redondo debe deslizarse suavemente al otro extremo del carril mientras cambia el color del carril: rápido y nítido, sin rebote.
Que sea un interruptor accesible real (role="switch" con su estado checked) que también funcione con el teclado.

Una flecha de puntero dibuja un recuadro de resaltado alrededor de una palabra cuando el texto entra en pantalla.

Añade un efecto "Pointer Highlight" en [dónde].
Cuando el texto entre en pantalla al hacer scroll, un recuadro debe dibujarse alrededor de la palabra clave de izquierda a derecha mientras una pequeña flecha de puntero recorre su esquina, suave y constante, como si alguien marcara la palabra a mano.
Dibújalo solo la primera vez que aparece sin desplazar el texto, y muestra el recuadro terminado de inmediato 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.