Cursor Spotlight

Uma luz radial suave acompanha o ponteiro pela superfície do card e revela o fundo por baixo.

Adicione um efeito "Card Spotlight" (também chamado spotlight hover, pointer glow, mouse-following glow ou radial gradient hover) em [onde].
Um brilho radial suave e discreto deve acompanhar o ponteiro pela superfície do card, surgindo quando o ponteiro entra e sumindo quando sai.
Mantenha o brilho atrás do conteúdo do card para o texto continuar legível e, em telas de toque, simplesmente deixe o card sem brilho.

Uma forma de máscara varre a área ou segue o ponteiro para revelar o conteúdo por baixo.

Adicione um efeito de hover "SVG Mask Reveal" (também chamado clip-path reveal ou spotlight mask) em [onde].
Enquanto o ponteiro estiver por cima, uma máscara circular deve crescer a partir do centro e revelar o conteúdo por baixo, e fechar de novo quando o ponteiro sair: suave e bem rápido.
Mantenha as duas camadas exatamente do mesmo tamanho para nada se deslocar, e mostre a mesma revelação no foco do teclado e ao tocar.

Mover o ponteiro sobre um card revela um texto oculto sob uma borda de máscara ou um holofote.

Adicione um efeito "Text Reveal Card" (também chamado de spotlight text reveal) em [onde].
Conforme o ponteiro se move pelo card, uma borda vertical deve segui-lo de perto e revelar um texto oculto de um dos lados, de forma suave e direta, sem atraso.
Em telas de toque, onde não há ponteiro para seguir, deixe que arrastar ou tocar revele o texto oculto, e torne esse texto disponível para leitores de tela.

Um cone ou foco de luz suave desliza até o lugar e ilumina parte do fundo.

Adicione um efeito "Spotlight" (também chamado spotlight sweep ou light cone) em [onde].
Quando a página carregar, um cone de luz suave deve entrar na diagonal a partir do canto e parar sobre o título, ficando mais claro ao chegar: lento e fluido.
Reproduza só uma vez e, se o usuário preferir movimento reduzido (prefers-reduced-motion), mostre a luz já no lugar.

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