Card Hover Effect

Un subrayado o una píldora se desliza de la pestaña anterior a la recién seleccionada.

Añade un "Tab Indicator Slide" (también llamado sliding underline o active tab indicator) en [dónde].
Al seleccionar una pestaña nueva, el subrayado debe deslizarse de la pestaña anterior a la nueva, rápido y desacelerando con suavidad, y estirarse al ancho de la nueva pestaña si es distinto.
Mantén la semántica correcta de pestañas con navegación por flechas del teclado y mueve el indicador sin deslizarlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un elemento parece moverse y cambiar de tamaño hasta un elemento equivalente en otro lugar, como si fueran uno solo.

Añade una "Shared Layout Animation" (también llamada shared element dentro de la página) en [dónde].
Cuando cambie la selección, el elemento debe parecer moverse y cambiar de tamaño con suavidad desde su posición anterior a la nueva, asentándose con delicadeza, para que se lea como un solo objeto y no como dos.
Muestra solo una copia en cada momento y evita que el diseño de alrededor salte mientras se mueve.

Las tarjetas vecinas se desenfocan y oscurecen mientras la tarjeta bajo el cursor se mantiene nítida.

Añade un efecto "Focus Cards" (también llamado blur siblings on hover, hover focus blur o card hover effect) en [dónde].
Mientras el cursor esté sobre una tarjeta, las demás deben desenfocarse, oscurecerse y encogerse un poco mientras la tarjeta bajo el cursor sigue nítida, todo con un fundido suave que se invierte cuando el cursor sale.
Aplica el mismo enfoque con el foco del teclado y mantén todas las tarjetas nítidas y legibles cuando no hay ninguna bajo el cursor.

Una luz radial suave sigue al cursor por la superficie de la tarjeta y revela el fondo que hay debajo.

Añade un efecto "Card Spotlight" (también llamado spotlight hover, pointer glow, mouse-following glow o radial gradient hover) en [dónde].
Un resplandor radial suave y tenue debe seguir al cursor por la superficie de la tarjeta, apareciendo con un fundido cuando el cursor entra y desvaneciéndose cuando sale.
Mantén el resplandor detrás del contenido para que el texto siga legible y, en dispositivos táctiles, deja la tarjeta sin iluminar.

Una esquina del elemento se dobla hacia arriba como una página que se pasa al pasar el cursor.

Añade un efecto hover "Curl" (también llamado page curl) en [dónde].
Una esquina del elemento debe doblarse suavemente como una página al pasarla, mostrando el reverso del pliegue, y volver a quedar plana cuando el cursor sale.
Mantén el pliegue pequeño para que no tape contenido importante y muestra el mismo efecto con el foco del teclado.

Una capa se desliza desde el lado por el que entró el cursor y sale hacia el lado por el que se va.

Añade un efecto "Direction Aware Hover" (también llamado direction-aware overlay) en [dónde].
Una capa superpuesta debe deslizarse desde el lado por el que entró el cursor y salir hacia el lado por el que se va: rápido y suave.
Calcula el lado a partir de la posición del cursor al entrar y al salir y, con toque o foco del teclado, usa una dirección por defecto.