Card Spotlight

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 brilho intenso segue o ponteiro pela superfície de um card como um reflexo.

Adicione um efeito "Glare / Holographic Card" (também chamado glare card ou glare hover) em [onde].
Um brilho suave e intenso deve seguir o ponteiro pela superfície do card como luz refletida nele, enquanto o card se inclina um pouco em direção ao ponteiro; os dois somem quando o ponteiro sai: suave e sutil.
Deixe os cliques passarem pela camada do brilho, mantenha o conteúdo legível por baixo e mostre o card sem brilho em telas touch.

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 canto do elemento se dobra para cima como uma página sendo virada ao passar o mouse.

Adicione um efeito de hover "Curl" (também chamado page curl) em [onde].
Um canto do elemento deve se dobrar suavemente como uma página sendo virada, mostrando o verso da dobra, e voltar a ficar plano quando o ponteiro sair.
Mantenha a dobra pequena para não cobrir conteúdo importante e mostre o mesmo efeito no foco do teclado.

Uma sobreposição desliza a partir do lado por onde o ponteiro entrou e sai pelo lado por onde ele deixa o elemento.

Adicione um efeito "Direction Aware Hover" (também chamado direction-aware overlay) em [onde].
Uma sobreposição deve deslizar a partir do lado por onde o ponteiro entrou e sair pelo lado por onde ele deixa o elemento: rápido e suave.
Calcule o lado pela posição do ponteiro na entrada e na saída e, no toque ou no foco do teclado, use uma direção padrão.

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.