Magnetic Filings

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

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.