Morphing Text
Também chamada Text Morph
Uma palavra se desfoca e se funde na próxima no mesmo lugar.
Onde usar
Slogans do hero
Variações
- blur threshold morph
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
Adicione um efeito "Morphing Text" (também chamado text morph) em [onde].
Uma palavra deve se desfocar e derreter na próxima no mesmo lugar, com uma fusão suave e pegajosa, e ficar parada por um instante antes da próxima troca.
Alterne as palavras sem cortes, deixe os leitores de tela lerem as palavras como texto normal e pare a alternância se o usuário preferir movimento reduzido (prefers-reduced-motion).Animações parecidas
ABDEFGHIJKLDEFMN
Word Rotate
Também chamada Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
Uma palavra da frase é trocada pela próxima de uma lista com um deslize, um giro ou um fade.
Onde usar
Slogans hero
Adicione um efeito "Word Rotate" (também chamado de rotating words ou flip words) em [onde].
Uma palavra da linha deve deslizar para cima e sair enquanto a próxima palavra de uma lista entra por baixo, pausando em cada palavra antes da próxima troca.
Evite que o resto da linha salte quando as palavras tiverem larguras diferentes, não faça os leitores de tela anunciarem cada troca e pare a rotação se o usuário preferir movimento reduzido (prefers-reduced-motion).AWBXCYDZ
Text Replacement
Também chamada Text Swap
O texto existente sai com uma animação e é substituído por um novo conteúdo.
Onde usar
Rótulos que mudam
Adicione um efeito "Text Replacement" (também chamado de text swap) em [onde].
Quando o texto mudar, os caracteres antigos devem deslizar para cima e sair enquanto os novos entram por baixo, um caractere após o outro, em uma onda rápida e suave.
Evite que a caixa de texto mude de tamanho bruscamente durante a troca e anuncie só o texto novo aos leitores de tela.ABCD
Blur In
Também chamada Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
O elemento começa bem desfocado e vai ganhando nitidez, muitas vezes enquanto desliza ou aparece.
Onde usar
Revelação de títulos e textos hero
Adicione uma animação de entrada "Blur In" (também chamada text focus in, focus in ou blur text reveal) em [onde].
O conteúdo deve começar bem desfocado e transparente e depois ganhar nitidez no lugar: suave e um tanto lento, sem deslocamento.
Reproduza só uma vez e mostre o texto nítido imediatamente se o usuário preferir movimento reduzido (prefers-reduced-motion).Passe o mouse por cima
Gooey Effect
Também chamada Goo Effect, Liquid Blob Merge, Metaball Effect, Gooey / Liquid Metaball, Metaballs, Liquid blobs
Formas próximas se fundem como gotas líquidas por meio de um filtro de desfoque e contraste.
Onde usar
Menus, cursores e paginação
Adicione um "Gooey Effect" (também chamado goo effect ou metaballs) em [onde].
Com o ponteiro por cima, pequenas gotas devem se afastar da forma principal, esticando como líquido antes de se soltar, e voltar fluindo para se fundir suavemente quando o ponteiro sair.
Aplique o filtro de desfoque e contraste só ao pequeno grupo de formas, não à página inteira, e mostre o mesmo efeito no foco do teclado e ao tocar.Mais em Text
ABCDEF
Neon Glow Text
Também chamada Neon Sign Flicker, Glowing Text
O texto brilha como um tubo de neon e pisca ou pulsa.
Onde usar
Temas de vida noturna e games
Adicione um efeito "Neon Glow Text" (também chamado neon sign flicker ou glowing text) em [onde].
O texto deve brilhar como um tubo de neon, com uma luz suave e constante, e de vez em quando apagar por um instante como um letreiro de verdade.
Deixe a piscada ocasional em vez de rápida, porque flashes rápidos podem fazer mal a alguns usuários, e mantenha o brilho fixo se o usuário preferir movimento reduzido (prefers-reduced-motion).A
E
I
MB
F
J
NC
G
K
OD
H
L
PQ
R
S
T
Role aqui dentro
Scrolling Letters
Também chamada On-Scroll Letter Animations
As letras de um título se embaralham ou se movem em sequência conforme o usuário rola pelas seções.
Onde usar
Indicadores de seção
Adicione "Scrolling Letters" (também chamado on-scroll letter animations) em [onde].
Conforme o usuário rola pelas seções, as letras do título devem rolar para o próximo caractere uma após a outra, da esquerda para a direita, ligadas diretamente à posição da rolagem.
Ao rolar de volta para cima, elas devem voltar, e os leitores de tela devem receber o título atual como texto normal.ABC DEFGH
Shimmer Text
Também chamada Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
Um brilho percorre as letras repetidamente.
Onde usar
Badges e etiquetas de anúncio
Adicione um efeito "Shimmer Text" (também chamado animated shiny text ou metallic shimmer text) em [onde].
Uma faixa de luz deve passar suavemente pelas letras da esquerda para a direita e se repetir depois de uma pausa curta.
Mantenha o texto legível sob o brilho e deixe-o parado se o usuário preferir movimento reduzido (prefers-reduced-motion).