Cursor Spotlight

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 forma de máscara barre o sigue al puntero para descubrir el contenido de debajo.

Añade un efecto hover "SVG Mask Reveal" (también llamado clip-path reveal o spotlight mask) en [dónde].
Mientras el puntero esté encima, una máscara circular debe crecer desde el centro y descubrir el contenido de debajo, y volver a cerrarse cuando el puntero se va: suave y bastante rápido.
Mantén las dos capas exactamente del mismo tamaño para que nada se mueva, y muestra el mismo revelado con el foco del teclado y al tocar.

Al mover el puntero sobre una tarjeta se descubre un texto oculto bajo un borde de máscara o un foco de luz.

Añade un efecto "Text Reveal Card" (también llamado spotlight text reveal) en [dónde].
Al mover el puntero por la tarjeta, un borde vertical debe seguirlo de cerca y descubrir un texto oculto en uno de sus lados, suave y directo, sin retraso.
En pantallas táctiles, donde no hay puntero que seguir, deja que un arrastre o un toque revele el texto oculto, y haz que ese texto esté disponible para los lectores de pantalla.

Un cono o foco de luz suave entra deslizándose y se posa iluminando parte del fondo.

Añade un efecto "Spotlight" (también llamado spotlight sweep o light cone) en [dónde].
Al cargar la página, un cono de luz suave debe entrar en diagonal desde la esquina y posarse sobre el título, ganando brillo al llegar: lento y fluido.
Reprodúcelo una sola vez y, si el usuario prefiere movimiento reducido (prefers-reduced-motion), muestra la luz ya en su sitio.

Una estela de formas que se desvanecen queda detrás del puntero mientras se mueve.

Añade un efecto "Cursor Trail" (también llamado mouse trail) en [dónde].
Al mover el puntero, debe dejar detrás una estela corta de puntos pequeños que se encogen y se desvanecen rápido, para que el rastro sea corto y siga el recorrido con suavidad.
Dibuja la estela solo mientras el puntero se mueve, que nunca bloquee los clics, y omítela en dispositivos táctiles y si el usuario prefiere movimiento reducido (prefers-reduced-motion).

La flecha predeterminada se sustituye por un punto o anillo con estilo que cambia sobre los elementos interactivos.

Añade un cursor personalizado ("Custom Cursor", también llamado animated cursor o cursor replacement) en [dónde].
Sustituye la flecha predeterminada por un punto pequeño que sigue el puntero con exactitud y un anillo que lo sigue un poco por detrás, y haz que el anillo crezca con suavidad sobre enlaces y botones.
Mantén el cursor normal en dispositivos táctiles y en los campos de texto, y que el cursor personalizado nunca bloquee los clics.

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).