Custom Cursor (cursor personalizado)

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.

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

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.

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