Card Hover Effect

Um sublinhado ou pílula desliza da aba anterior para a aba recém-selecionada.

Adicione um "Tab Indicator Slide" (também chamado sliding underline ou active tab indicator) em [onde].
Quando uma nova aba for selecionada, o sublinhado deve deslizar da aba anterior para a nova, rápido e desacelerando suavemente, esticando até a largura da nova aba se ela for diferente.
Mantenha a semântica correta de abas com navegação pelas setas do teclado e mova o indicador sem deslizar se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um elemento parece se mover e mudar de tamanho até um elemento correspondente em outro lugar, como se fossem um só.

Adicione uma "Shared Layout Animation" (também chamada shared element dentro da página) em [onde].
Quando a seleção mudar, o elemento deve parecer se mover e mudar de tamanho suavemente da posição antiga para a nova, assentando com delicadeza, para ser percebido como um único objeto e não dois.
Mostre só uma cópia por vez e evite que o layout ao redor salte durante o movimento.

Os cards vizinhos ficam desfocados e escurecidos enquanto o card sob o mouse continua nítido.

Adicione um efeito "Focus Cards" (também chamado blur siblings on hover, hover focus blur ou card hover effect) em [onde].
Enquanto o ponteiro estiver sobre um card, os outros devem desfocar, escurecer e encolher um pouco enquanto o card sob o ponteiro continua nítido, tudo com uma transição suave que se desfaz quando o ponteiro sai.
Aplique o mesmo destaque no foco do teclado e mantenha todos os cards nítidos e legíveis quando nenhum estiver sob o ponteiro.

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.

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.