Custom Cursor (cursor personalizado)

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.

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.

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

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.

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