Também chamada Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
Uma luz radial suave acompanha o ponteiro pela superfície do card e revela o fundo por baixo.
Onde usar
Cards de recursos, grades bento
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.
Também chamada SVG Mask Effect, Clip-path Reveal, Spotlight Mask
Uma forma de máscara varre a área ou segue o ponteiro para revelar o conteúdo por baixo.
Onde usar
Revelação de imagens e conteúdo
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.
Também chamada Spotlight Text Reveal
Mover o ponteiro sobre um card revela um texto oculto sob uma borda de máscara ou um holofote.
Onde usar
Cards de recursos
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.
Também chamada Spotlight sweep, Light cone
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.