Wobble Card

Um card gira em perspectiva em direção ao ponteiro, com o conteúdo em camadas se destacando da superfície.

Adicione um efeito "3D Tilt" (também chamado perspective tilt ou tilt card) em [onde].
O card deve se inclinar em perspectiva em direção ao ponteiro enquanto ele se move, com as camadas internas se destacando da superfície em profundidades diferentes, e voltar a ficar plano suavemente quando o ponteiro sai: suave e sutil.
Mantenha a inclinação leve para o texto continuar legível e deixe o card plano em telas touch e se o usuário preferir movimento reduzido (prefers-reduced-motion).

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

Um fundo colorido entra varrendo a partir de uma borda com um leve exagero elástico.

Adicione um efeito de hover "Background Bounce Sweep" em [onde].
Uma nova cor de fundo deve entrar varrendo a partir de uma borda, passar um pouco da borda oposta com um quique elástico e então se assentar, enquanto a cor do texto muda para continuar legível; ao sair, ela desliza de volta suavemente.
Mantenha o texto acima do preenchimento e mostre o mesmo efeito no foco do teclado.

As cores do fundo e do texto fazem uma transição suave para uma nova cor ao passar o mouse.

Adicione um efeito de hover "Background Fade" (também chamado color fade) em [onde].
As cores do fundo e do texto devem fazer uma transição suave para novas cores enquanto o ponteiro estiver sobre o elemento, e voltar quando ele sair: calmo, sem movimento.
Mantenha contraste suficiente entre texto e fundo nos dois estados e mostre o mesmo efeito no foco do teclado.

Um fundo colorido varre o elemento a partir de uma borda ao passar o mouse.

Adicione um efeito de hover "Background Sweep" (também chamado background fill ou slide fill) em [onde].
Uma nova cor de fundo deve varrer o elemento da borda esquerda para a direita, suave e rápida, sem quique, e recolher do mesmo jeito quando o ponteiro sair, enquanto a cor do texto muda para continuar legível.
Mantenha o preenchimento recortado dentro do formato do elemento e mostre o mesmo efeito no foco do teclado.