Cursor

El cursor de texto crece o se encoge para ajustarse al tamaño del carácter que tiene al lado.

Añade un efecto "Adaptive Caret" (también llamado adaptive caret size) en [dónde].
El cursor de texto debe colocarse delante del carácter más cercano al puntero y estirarse o encogerse rápido hasta la altura de ese carácter, con un cambio de tamaño suave y ágil, sin rebote.
Evita que el texto se mueva, y haz que el cursor siga el movimiento del teclado igual que sigue al puntero.

Un cursor circular invierte los colores que tiene debajo usando mix-blend-mode difference.

Añade un "Blend-Mode Cursor" (también llamado difference cursor o inverting cursor) en [dónde].
Sustituye el puntero por un círculo sólido que quede justo debajo de él sin retraso e invierta los colores del texto y las formas por los que pasa.
Limita la mezcla a esa zona para que no se combine con el resto de la página, asegúrate de que siga invirtiendo con claridad en modo oscuro, y mantén el cursor normal en dispositivos táctiles.

Una forma o etiqueta sigue al puntero con un retraso elástico o suavizado.

Añade un "Cursor Follower" (también llamado following pointer o smooth cursor) en [dónde].
Un pequeño marcador redondo debe seguir al puntero con un retraso suave y amortiguado, y deslizarse hasta detenerse justo donde el puntero se queda quieto, sin rebotar.
Mantén visible el puntero real, que el marcador nunca bloquee los clics, y omítelo en dispositivos táctiles.

Una imagen de vista previa sigue al puntero al pasar sobre un elemento de una lista de texto.

Añade un efecto "Cursor Image Hover" (también llamado hover image follow o image preview on hover) en [dónde].
Mientras el puntero esté sobre un elemento de una lista de texto, una pequeña imagen de vista previa de ese elemento debe flotar junto al puntero, siguiéndolo con un ligero retraso suave y deslizándose a la siguiente imagen cuando el puntero pase a otro elemento.
La vista previa nunca debe bloquear los clics en la lista, y la lista debe seguir siendo totalmente usable sin ella en táctil y con teclado.

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.

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

Un campo de líneas cortas gira para apuntar al puntero, como limaduras de hierro alrededor de un imán.

Añade un efecto "Magnetic Filings" en [dónde].
Una cuadrícula de líneas cortas debe girar al instante para que cada una apunte directamente al puntero, como limaduras de hierro alrededor de un imán, y todas deben mirar al centro cuando no haya puntero.
Mantenlo como fondo decorativo que nunca bloquee los clics, y deja las líneas quietas si el usuario prefiere movimiento reducido (prefers-reduced-motion).