Micro-interaction

La imagen del producto se encoge y vuela en arco hasta el icono del carrito.

Añade una animación "Add to Cart Fly" (también llamada fly to cart o add-to-cart animation) en [dónde].
Al pulsar el botón de añadir, una pequeña copia de la imagen del producto debe encogerse mientras vuela en un arco suave y rápido hasta el icono del carrito, y el carrito debe dar un pequeño salto al actualizar su contador.
Reprodúcela una vez por pulsación sin mover la tarjeta original del producto, y omite el vuelo si el usuario prefiere movimiento reducido (prefers-reduced-motion), pero actualiza igualmente el carrito.

Al marcar la casilla, se dibuja una marca de verificación trazo a trazo en su interior.

Añade una animación "Checkbox Check Draw" (también llamada animated checkbox o checkmark draw) en [dónde].
Al marcar la casilla, debe rellenarse de color y la marca de verificación debe dibujarse sola en un trazo rápido y suave; al desmarcarla, se borra de la misma forma.
Mantenla como una casilla real con su estado marcado, que funcione con el teclado y con un anillo de foco visible.

Trozos de papel de colores salen disparados y caen para celebrar un éxito.

Añade una celebración de confeti (Confetti) en [dónde], también llamada confetti burst.
Pequeños trozos de papel de colores deben salir disparados rápidamente del botón y luego girar y caer flotando mientras se desvanecen, en una lluvia breve y animada.
Lánzala una vez por cada éxito en lugar de repetirla en bucle, evita que bloquee los clics en la página y omítela si el usuario prefiere movimiento reducido (prefers-reduced-motion).

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 elemento sigue al cursor al arrastrarlo y puede limitarse a un área o a un eje.

Añade una interacción de arrastrar (Drag) en [dónde], también llamada draggable o drag constraints.
El elemento debe seguir al cursor directamente mientras se arrastra, detenerse en los bordes de su área permitida y volver a su posición de reposo con un pequeño rebote al soltarlo.
Haz que funcione tanto con toque como con ratón sin que la página se desplace debajo, y ofrece una forma de moverlo con el teclado.

La etiqueta del placeholder sube y se reduce por encima del campo cuando este recibe el foco o tiene contenido.

Añade un "Floating Label" (también llamado float label o animated placeholder) en [dónde].
Cuando el campo reciba el foco o tenga un valor, la etiqueta que está dentro debe deslizarse hacia arriba y reducirse hasta el borde superior del campo, de forma suave y rápida, y volver a bajar solo cuando el campo esté vacío y sin foco.
Mantenla como una etiqueta real vinculada al input y asegúrate de que la altura del campo no cambie para que el formulario nunca se desplace.

Un icono de corazón se rellena de color y lanza pequeñas partículas o late al hacer clic.

Añade una animación "Like / Heart Burst" (también llamada heart animation o favorite toggle) en [dónde].
Al marcar me gusta, el corazón debe llenarse de color y dar un salto elástico mientras un anillo y pequeños puntos estallan hacia fuera y se desvanecen, todo rápido y juguetón; al desmarcarlo, el corazón solo se vacía en silencio.
Que sea un botón de alternancia real con su estado pulsado, y reproduce el estallido solo al activarlo.

Mantener pulsado un elemento un momento activa acciones extra o un relleno de progreso.

Añade una interacción de pulsación larga (Long Press) (también llamada press and hold o touch and hold) en [dónde].
Mientras se mantiene pulsado, el elemento debe hundirse un poco mientras un relleno de progreso lo recorre a ritmo constante; cuando se completa, rebota de vuelta y abre su menú, y si se suelta antes, se cancela y el relleno se reinicia.
Ofrece a los usuarios de teclado y lector de pantalla otra forma de llegar a las mismas acciones, y evita que la pulsación seleccione texto o abra el menú contextual del navegador.

Un indicador numérico aparece de golpe, rebota o late cuando llega una nueva notificación.

Añade una animación "Notification Badge Bounce" (también llamada badge pop o ping) en [dónde].
Cuando llegue una nueva notificación, el indicador numérico debe aparecer desde la nada y asentarse con un par de rebotes rápidos y elásticos mientras un anillo suave se expande desde él una vez.
Reprodúcela una vez por cada notificación nueva en lugar de en bucle, y anuncia el nuevo número a los lectores de pantalla.

Un icono de ojo cambia entre abierto y tachado al mostrar u ocultar la contraseña.

Añade un botón para mostrar/ocultar contraseña (Password Reveal Toggle) (también llamado show/hide password o eye icon toggle) en [dónde].
Al pulsar el ojo, su barra debe borrarse rápido mientras los puntos ocultos se funden con los caracteres reales, y al volver a pulsar la barra se dibuja de nuevo y los oculta: suave y rápido, sin rebote.
Mantén fijo el ancho del campo para que el texto no salte, y haz que el botón sea un botón real cuya etiqueta indique si la contraseña está visible.

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.

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.

Un círculo y una marca de verificación se dibujan solos para confirmar que la acción se completó.

Añade una animación "Success Checkmark" (también llamada animated success tick) en [dónde].
Un círculo debe dibujarse de un solo trazo suave, luego la marca se dibuja dentro y todo el símbolo da un pequeño salto suave: tranquilo y seguro.
Reprodúcela una vez cuando la acción tenga éxito, acompáñala de un mensaje de texto que los lectores de pantalla puedan anunciar, y muestra el símbolo terminado de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Deslizar una fila de la lista hacia un lado muestra botones de acción como eliminar o archivar.

Añade una interacción "Swipe to Delete" (también llamada swipe actions o swipe to reveal) en [dónde].
Al arrastrar una fila hacia un lado, debe moverse directamente con el dedo para descubrir detrás botones de acción como archivar y eliminar, deteniéndose cuando se ven por completo, y al soltar se desliza con suavidad a su sitio sin rebote.
Mantén el scroll vertical funcionando mientras se desliza en horizontal, y haz que las mismas acciones sean accesibles con teclado y lector de pantalla sin deslizar.

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.