Magnetic Button

Os ícones de uma fileira crescem suavemente conforme o ponteiro se aproxima, como no Dock do macOS.

Adicione um efeito "Dock Magnification" (também chamado dock) em [onde].
Os ícones da fileira devem crescer suavemente conforme o ponteiro se aproxima, com o mais próximo maior e os vizinhos um pouco ampliados, e todos voltarem ao tamanho normal quando o ponteiro sair.
Faça os ícones crescerem para cima a partir de uma linha de base fixa e mantenha cada ícone utilizável no tamanho normal no toque e no teclado.

O card se desloca e muda levemente de escala conforme o ponteiro se move sobre ele.

Adicione um efeito "Wobble Card" em [onde].
Quando o ponteiro se mover sobre o card, ele deve se deslocar um pouco em direção ao ponteiro enquanto o conteúdo se desloca um pouco no sentido oposto com um leve aumento de escala, acompanhando com suavidade, e tudo volta ao lugar quando o ponteiro sair.
Mantenha o movimento pequeno e desative-o em dispositivos de toque e se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um campo de linhas curtas gira para apontar para o ponteiro, como limalha de ferro em volta de um ímã.

Adicione um efeito "Magnetic Filings" em [onde].
Uma grade de linhas curtas deve girar na hora para que cada uma aponte direto para o ponteiro, como limalha de ferro em volta de um ímã, e todas devem apontar para o centro quando não houver ponteiro.
Mantenha como fundo decorativo que nunca bloqueia cliques, e deixe as linhas paradas se o usuário preferir movimento reduzido (prefers-reduced-motion).

O cursor de texto cresce ou encolhe para acompanhar o tamanho do caractere ao lado dele.

Adicione um efeito "Adaptive Caret" (também chamado adaptive caret size) em [onde].
O cursor de texto deve se posicionar antes do caractere mais próximo do ponteiro e esticar ou encolher rapidamente até a altura desse caractere, com um redimensionamento suave e ágil, sem quique.
Não deixe o texto em si se mexer, e faça o cursor acompanhar o movimento do teclado do mesmo jeito que acompanha o ponteiro.

Um cursor circular inverte as cores abaixo dele usando mix-blend-mode difference.

Adicione um "Blend-Mode Cursor" (também chamado difference cursor ou inverting cursor) em [onde].
Substitua o ponteiro por um círculo sólido que fique logo abaixo dele, sem atraso, e inverta as cores do texto e das formas por onde passa.
Limite a mesclagem a essa área para não misturar com o resto da página, garanta que continue invertendo com clareza no modo escuro, e mantenha o cursor normal em dispositivos de toque.