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 Draw In Text, Animated Stroke Text
Os contornos das letras são desenhados como um traço antes de o preenchimento aparecer.
Onde usar
Logos e palavras do hero
Adicione um efeito "Stroke Text Draw" (também chamado draw in text ou animated stroke text) em [onde].
Os contornos das letras devem se desenhar sozinhos com suavidade e, quando estiverem completos, o preenchimento deve aparecer com um fade.
Reproduza só uma vez ao carregar, mantenha a palavra acessível como texto real e mostre o texto já preenchido se o usuário preferir movimento reduzido (prefers-reduced-motion).
Também chamada Water Fill Text
As letras se enchem de um líquido que sobe e ondula.
Onde usar
Indicadores de carregamento e títulos divertidos
Adicione um efeito "Liquid Fill Text" (também chamado de water fill text) em [onde].
As letras contornadas devem se encher de um líquido cuja superfície ondulada rola para o lado enquanto o nível sobe e desce devagar, em um loop suave e contínuo.
Mantenha a palavra disponível como texto real para leitores de tela e deixe o líquido em um nível parado se o usuário preferir movimento reduzido (prefers-reduced-motion).