Magnetic Button (botón magnético)

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.

La tarjeta se desplaza y se escala ligeramente en respuesta al movimiento del cursor sobre ella.

Añade un efecto "Wobble Card" en [dónde].
Al mover el cursor sobre la tarjeta, esta debe desplazarse un poco hacia él mientras su contenido se desplaza un poco en sentido contrario con un ligero aumento de escala, siguiéndolo con suavidad, y todo vuelve a su sitio cuando el cursor sale.
Mantén el movimiento pequeño y desactívalo 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).

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.