Wobble Card

Una tarjeta gira en perspectiva hacia el cursor, con contenido en capas que se separa de la superficie.

Añade un efecto "3D Tilt" (también llamado perspective tilt o tilt card) en [dónde].
La tarjeta debe inclinarse en perspectiva hacia el cursor mientras se mueve, con sus capas internas separándose de la superficie a distintas profundidades, y volver a quedar plana con suavidad cuando el cursor sale: suave y sutil.
Mantén la inclinación leve para que el texto siga legible y deja la tarjeta plana en pantallas táctiles y si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se ve atraído hacia el puntero cuando este se acerca y vuelve a su sitio al alejarse.

Añade un efecto de botón magnético ("Magnetic Button", también llamado magnetic target o magnetic hover) en [dónde].
Cuando el puntero se acerque, el botón debe desplazarse un poco hacia él, con su texto moviéndose algo más, y al alejarse el puntero debe volver a su sitio con un pequeño rebote elástico.
Evita que el diseño de alrededor se desplace y desactiva la atracción en dispositivos táctiles y si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un reflejo brillante sigue al cursor por la superficie de una tarjeta como un destello de luz.

Añade un efecto "Glare / Holographic Card" (también llamado glare card o glare hover) en [dónde].
Un reflejo brillante y suave debe seguir al cursor por la superficie de la tarjeta como luz que rebota en ella, mientras la tarjeta se inclina un poco hacia el cursor; ambos desaparecen cuando el cursor sale: suave y sutil.
Deja que los clics atraviesen la capa del reflejo, mantén el contenido legible debajo y muestra la tarjeta sin reflejo en pantallas táctiles.

Un fondo de color entra barriendo desde un borde con un rebote elástico que se pasa un poco.

Añade un efecto hover "Background Bounce Sweep" en [dónde].
Un nuevo color de fondo debe entrar barriendo desde un borde, pasarse un poco del borde opuesto con un rebote elástico y luego asentarse, mientras el color del texto cambia para seguir siendo legible; al salir, vuelve a deslizarse hacia fuera con suavidad.
Mantén el texto por encima del relleno y muestra el mismo efecto con el foco del teclado.

El color de fondo y el del texto se funden hacia un nuevo color al pasar el cursor.

Añade un efecto hover "Background Fade" (también llamado color fade) en [dónde].
Los colores del fondo y del texto deben fundirse suavemente hacia nuevos colores mientras el cursor está sobre el elemento, y volver al salir: tranquilo, sin movimiento.
Mantén suficiente contraste entre texto y fondo en ambos estados y muestra el mismo efecto con el foco del teclado.

Un fondo de color recorre el elemento desde un borde al pasar el cursor.

Añade un efecto hover "Background Sweep" (también llamado background fill o slide fill) en [dónde].
Un nuevo color de fondo debe recorrer el elemento del borde izquierdo al derecho, suave y rápido, sin rebote, y retirarse igual cuando el cursor sale, mientras el color del texto cambia para seguir siendo legible.
Mantén el relleno recortado dentro de la forma del elemento y muestra el mismo efecto con el foco del teclado.