Cursor

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.

Uma forma ou rótulo segue o ponteiro com um atraso elástico ou suavizado.

Adicione um "Cursor Follower" (também chamado following pointer ou smooth cursor) em [onde].
Um pequeno marcador redondo deve seguir o ponteiro com um atraso suave e amortecido e deslizar até parar exatamente onde o ponteiro fica parado, sem quicar.
Mantenha o ponteiro real visível, nunca deixe o marcador bloquear cliques, e não o exiba em dispositivos de toque.

Uma imagem de prévia segue o ponteiro ao passar sobre um item de uma lista de texto.

Adicione um efeito "Cursor Image Hover" (também chamado hover image follow ou image preview on hover) em [onde].
Enquanto o ponteiro estiver sobre um item de uma lista de texto, uma pequena imagem de prévia desse item deve flutuar ao lado do ponteiro, seguindo-o com um leve atraso suave e deslizando para a próxima imagem quando o ponteiro passar para outro item.
A prévia nunca deve bloquear cliques na lista, e a lista deve continuar totalmente utilizável sem ela no toque e no teclado.

Um círculo de luz ao redor do ponteiro revela o conteúdo enquanto o resto fica escuro.

Adicione um efeito "Cursor Spotlight" (também chamado flashlight cursor ou spotlight effect) em [onde].
Um círculo de luz suave deve seguir o ponteiro e revelar o conteúdo abaixo dele enquanto o resto da área fica escurecido.
Em dispositivos de toque, onde não há ponteiro para seguir, mostre o conteúdo totalmente iluminado.

Um rastro de formas que desaparecem fica atrás do ponteiro enquanto ele se move.

Adicione um efeito "Cursor Trail" (também chamado mouse trail) em [onde].
Quando o ponteiro se mover, ele deve deixar para trás um rastro curto de pontinhos que encolhem e somem rápido, para que o rastro fique curto e acompanhe o caminho com suavidade.
Desenhe o rastro só enquanto o ponteiro se move, nunca deixe que ele bloqueie cliques, e não use em dispositivos de toque nem se o usuário preferir movimento reduzido (prefers-reduced-motion).

A seta padrão é substituída por um ponto ou anel estilizado que muda sobre os elementos interativos.

Adicione um cursor personalizado ("Custom Cursor", também chamado animated cursor ou cursor replacement) em [onde].
Substitua a seta padrão por um pontinho que acompanha o ponteiro com exatidão e um anel que segue um pouco atrás, e faça o anel crescer suavemente sobre links e botões.
Mantenha o cursor normal em dispositivos de toque e em campos de texto, e nunca deixe o cursor personalizado bloquear cliques.

O elemento é puxado em direção ao ponteiro quando ele se aproxima e volta ao lugar quando ele se afasta.

Adicione um efeito "Magnetic Button" (também chamado magnetic target ou magnetic hover) em [onde].
Quando o ponteiro se aproximar, o botão deve ser puxado um pouco em direção a ele, com o texto se movendo um pouco mais, e quando o ponteiro sair ele deve voltar ao lugar com um pequeno quique elástico.
Não deixe o layout ao redor se mexer, e desative a atraçã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).