Card Spotlight

Un círculo de luz alrededor del puntero revela el contenido mientras el resto queda a oscuras.

Añade un efecto "Cursor Spotlight" (también llamado flashlight cursor o spotlight effect) en [dónde].
Un círculo de luz suave debe seguir al puntero y revelar el contenido que tiene debajo mientras el resto de la zona queda atenuado.
En dispositivos táctiles, donde no hay puntero que seguir, muestra el contenido totalmente iluminado.

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.

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

Los iconos de una fila crecen suavemente a medida que se acerca el cursor, como el Dock de macOS.

Añade un efecto "Dock Magnification" (también llamado dock) en [dónde].
Los iconos de la fila deben crecer suavemente a medida que se acerca el cursor, con el más cercano como el más grande y sus vecinos algo agrandados, y volver todos a su tamaño normal cuando el cursor sale.
Haz que los iconos crezcan hacia arriba desde una línea base fija y que todos sigan siendo usables a su tamaño normal con toque y teclado.