Glare / Holographic Card

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.

O texto exibe reflexos iridescentes de papel holográfico que se movem com o ponteiro ou com o tempo.

Adicione um efeito de hover "Holographic Text" (também chamado de holographic foil text) em [onde].
Enquanto o ponteiro estiver sobre o texto, uma faixa de cores com cara de papel holográfico deve deslizar devagar e suavemente de um lado para o outro sobre as letras, e o texto deve voltar ao visual normal quando o ponteiro sair.
Mantenha as letras legíveis em todo momento do brilho e mostre o mesmo efeito no foco do teclado.

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

Ao passar o ponteiro, uma faixa diagonal de luz atravessa o elemento de um lado ao outro.

Adicione um efeito de hover "Shine Sweep" (também chamado sheen, shiny button, shine on hover, glint, shimmer ou shimmer button) em [onde].
Uma faixa diagonal de luz suave deve atravessar o elemento da esquerda para a direita, repetindo com uma pausa curta enquanto o ponteiro estiver sobre ele.
Mantenha a faixa recortada dentro do elemento, pare-a quando o ponteiro sair e não a reproduza se o usuário preferir movimento reduzido (prefers-reduced-motion).

Painéis dispostos em anel giram em torno de um eixo vertical no espaço 3D.

Adicione um carrossel 3D ("3D Carousel", também chamado rotating ring carousel) em [onde].
Organize os painéis em um anel visto em perspectiva; cada clique em próximo deve girar o anel inteiro suavemente em torno do eixo vertical para trazer o painel seguinte para a frente.
Deixe os controles acessíveis pelo teclado, anuncie o painel atual aos leitores de tela e use um fade simples se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma Terra 3D giratória com marcadores ou arcos fica no layout.

Adicione um globo 3D ("3D Globe", também chamado interactive globe) em [onde].
Um globo com alguns marcadores na superfície deve girar lenta e constantemente em torno do eixo, com os marcadores girando junto: calmo e contínuo.
Mantenha-o decorativo com uma alternativa em texto para as informações que mostra, pause quando estiver fora da tela e pare a rotação se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um card se inclina para trás em perspectiva ao passar o ponteiro, enquanto um pino e um brilho sobem em direção ao espectador.

Adicione um efeito de hover "3D Pin" (também chamado pin hover 3D) em [onde].
Quando o ponteiro estiver sobre o card, ele deve se inclinar para trás em perspectiva enquanto um pino com um brilho suave na base sobe do centro; tudo volta ao lugar quando o ponteiro sai: suave, sem quique.
Mantenha inalterado o espaço do card no layout e mostre o mesmo efeito no foco do teclado.