Text

Texto preenchido com um degradê cujas cores mudam ou fluem sem parar.

Adicione um efeito "Animated Gradient Text" (também chamado de aurora text ou rainbow text sweep) em [onde].
As letras devem ser preenchidas com um degradê cujas cores fluem devagar e suavemente pelo texto, em um loop infinito e contínuo.
Mantenha o texto legível sobre o fundo o tempo todo e deixe as cores paradas se o usuário preferir movimento reduzido (prefers-reduced-motion).

O texto treme com fatias deslocadas e separações de cor vermelha e ciano, como um sinal com defeito.

Adicione um efeito de hover "Glitch Text" (também chamado de text glitch ou RGB split glitch) em [onde].
Enquanto o ponteiro estiver sobre o texto, ele deve tremer em rajadas rápidas e secas: fatias horizontais finas pulam para o lado e duas cópias coloridas se separam como um sinal com defeito, voltando ao normal quando o ponteiro sai.
Mantenha o texto real só uma vez no documento para que leitores de tela não leiam as cópias, e mostre o mesmo efeito no foco do teclado.

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.

O texto muda de escala, se move ou gira como um elemento gráfico em movimento, em vez de ficar estático.

Adicione "Kinetic Typography" (também chamada de kinetic text) em [onde].
Linhas de texto grande e repetido devem deslizar para os lados em direções alternadas, em ritmo lento e constante, transformando as palavras em um gráfico em movimento.
Faça cada linha repetir sem saltos visíveis, garanta que leitores de tela leiam o texto só uma vez e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras se espalham no hover e voltam, ou explodem para fora na entrada.

Adicione um efeito de hover "Letter Scatter" (também chamado de scatter gather letters ou explosive letter burst) em [onde].
Quando o ponteiro passar sobre o texto, cada letra deve voar um pouco na própria direção com um leve giro e depois se reagrupar suavemente na palavra quando o ponteiro sair.
Mantenha fixo o espaço da palavra no layout enquanto as letras se movem, faça os leitores de tela lerem como uma só palavra e mostre o mesmo efeito no foco do teclado.

Uma sombra listrada ou deslocada atrás das letras se anima em uma direção.

Adicione um efeito "Line Shadow Text" (também chamado de text shadow animation ou dancing shadow) em [onde].
Atrás das letras, uma sombra deslocada feita de listras diagonais finas deve deslizar devagar e sem parar, enquanto as próprias letras ficam paradas e nítidas.
Faça o movimento das listras repetir sem emendas e deixe a sombra parada se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras se enchem de um líquido que sobe e ondula.

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

O texto sobe de trás de uma linha de recorte, como se surgisse do nada.

Adicione uma entrada de texto "Mask Reveal" (também chamada line mask reveal ou text masking) em [onde].
Cada linha deve subir de trás de uma borda invisível, como se surgisse do nada, uma após a outra, rápida e suave, sem quique.
Reproduza só uma vez quando o texto entrar na tela ao rolar e mostre o texto direto, sem movimento, se o usuário preferir movimento reduzido (prefers-reduced-motion).

Caracteres verdes caem em colunas, como a chuva de código de Matrix.

Adicione um efeito "Matrix Text" (também chamado digital rain text) em [onde].
Colunas de caracteres devem cair de forma constante em velocidades um pouco diferentes, cada uma com um caractere brilhante na frente e um rastro que se apaga atrás.
Trate como decoração oculta para leitores de tela, mantenha leve e pare a animação se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras escorrem e se esticam para baixo, como se estivessem derretendo.

Adicione um efeito "Melting Text" em [onde].
As letras devem afundar devagar enquanto gotas se esticam por baixo, como se estivessem derretendo, e parar em um visual derretido e imóvel.
Reproduza só uma vez quando o texto entrar na tela, mantenha a palavra legível no final e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma palavra se desfoca e se funde na próxima no mesmo lugar.

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

O texto brilha como um tubo de neon e pisca ou pulsa.

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

As letras de um título se embaralham ou se movem em sequência conforme o usuário rola pelas seções.

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.

Um brilho percorre as letras repetidamente.

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

Um título é cortado em fatias horizontais que se deslocam para os lados umas contra as outras conforme a página rola.

Adicione um efeito "Sliced Text" (também chamado on-scroll sliced text) em [onde].
Um título grande deve ser cortado em fatias horizontais que deslizam para os lados umas contra as outras conforme o usuário rola, alinhadas formando a palavra inteira no início.
Ligue o deslocamento diretamente à posição da rolagem para que ele se inverta ao voltar, e mantenha o título como um único texto legível para leitores de tela.

O texto fica disposto em volta de um círculo que gira sem parar.

Adicione "Spinning Text" (também chamado circular text ou text on circle) em [onde].
As letras devem ficar espaçadas de forma uniforme em volta de um círculo que gira devagar e de forma constante, sem salto quando o loop recomeça.
Entregue o texto aos leitores de tela uma única vez como texto normal e pare a rotação se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um título é dividido em caracteres, palavras ou linhas que se animam um após o outro com um pequeno atraso.

Adicione uma entrada "Split Text Stagger" (também chamada letter stagger ou staggered text reveal) em [onde].
Divida o título em letras que sobem e aparecem uma após a outra com um atraso curto entre elas, rápido e suave, sem quique.
Reproduza só uma vez quando o título entrar na tela, faça os leitores de tela lerem como uma única palavra e mostre sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Os caracteres viram como em um painel de partidas de aeroporto até parar na letra final.

Adicione um efeito "Split-Flap Text" (também chamado text flipping board ou flip board) em [onde].
Cada casa de caractere deve virar rapidamente pelo alfabeto até parar na letra final, com as casas se fixando uma após a outra da esquerda para a direita.
Execute uma vez sempre que o texto aparecer ou mudar, anuncie só o texto final aos leitores de tela e mostre o texto final sem virar se o usuário preferir movimento reduzido (prefers-reduced-motion).

As bordas das letras tremem como se fossem desenhadas à mão, usando um filtro de deslocamento SVG.

Adicione um efeito "Squiggly Text" (também chamado wobbly text ou turbulence text) em [onde].
As bordas das letras devem tremer levemente, como se fossem desenhadas à mão e redesenhadas várias vezes por segundo: uma fervura sutil e nervosa, não uma onda suave.
Mantenha o texto legível e deixe-o parado se o usuário preferir movimento reduzido (prefers-reduced-motion).

O texto fica fixo enquanto as linhas aparecem e somem conforme o avanço da rolagem.

Adicione um efeito "Sticky Text Fade" (também chamado sticky scroll text opacity fade) em [onde].
Enquanto a seção rola, o bloco de texto deve ficar fixo no lugar e as linhas devem aparecer e sumir uma de cada vez conforme o avanço da rolagem.
Ligue os fades diretamente à posição da rolagem para que se invertam ao voltar, e mantenha todas as linhas disponíveis para leitores de tela, qualquer que seja a opacidade.

Os contornos das letras são desenhados como um traço antes de o preenchimento aparecer.

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

Letras ou palavras giram em 3D em torno de um eixo para mostrar o próximo texto no verso.

Adicione um efeito de hover "Text 3D Flip" (também chamado 3D flip text reveal) em [onde].
Quando o ponteiro estiver sobre o texto, cada letra deve girar em 3D no eixo horizontal para mostrar uma letra nova no outro lado, uma após a outra em uma varredura rápida e suave, e voltar quando o ponteiro sair.
Mantenha a caixa de texto do mesmo tamanho durante o giro e mostre o mesmo efeito no foco do teclado.

O texto se deforma e ondula de forma orgânica, movido pela rolagem ou pelo movimento do ponteiro.

Adicione um efeito "Text Distortion" (também chamado organic text distortion) em [onde].
Uma linha de texto deve fluir para o lado sem parar e se deformar e ondular de forma orgânica enquanto se move, como vista através de água em movimento, com o fluxo movido pela rolagem do usuário.
Mantenha a distorção leve o bastante para o texto continuar legível, deixe-a fluida em dispositivos mais lentos e desative-a se o usuário preferir movimento reduzido (prefers-reduced-motion).

As palavras aparecem uma após a outra ao carregar a página, muitas vezes com um desfoque que se dissipa, como se estivessem sendo geradas.

Adicione um efeito "Text Generate" em [onde].
As palavras devem aparecer uma após a outra enquanto um desfoque suave se dissipa em cada uma, como se o texto estivesse sendo gerado: constante e calmo.
Reproduza só uma vez ao carregar, deixe os leitores de tela lerem o texto completo desde o início e mostre sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma faixa colorida no estilo marca-texto é desenhada sobre uma frase para destacá-la.

Adicione um efeito marca-texto (Text Highlighter) em [onde], também chamado de highlight marker ou marker underline.
Uma faixa colorida no estilo marca-texto deve passar suavemente por trás da frase-chave, da esquerda para a direita, como se alguém a destacasse com uma caneta.
Reproduza só uma vez quando a frase entrar na tela ao rolar, mantenha o texto legível sobre a faixa e faça a faixa acompanhar a frase corretamente quando ela quebrar em duas linhas.

Uma palavra em contorno é preenchida ou iluminada por um degradê que segue o ponteiro ou passa por ela.

Adicione um "Text Hover Effect" (também chamado de text fill on hover ou gradient outline text hover) em [onde].
A palavra deve começar só com o contorno e, enquanto o ponteiro estiver sobre ela, um preenchimento sólido deve entrar suavemente da esquerda para a direita e recuar quando o ponteiro sair.
Mantenha a palavra em contorno legível antes do preenchimento e mostre o mesmo efeito no foco do teclado.

O texto segue um caminho curvo e percorre esse caminho conforme o usuário rola a página.

Adicione um efeito "Text Path Scroll" (também chamado de text path curve scroll animation) em [onde].
O texto deve ficar sobre uma linha curva e deslizar por ela conforme o usuário rola, avançando ao rolar para baixo e voltando ao rolar para cima.
Vincule o movimento diretamente à posição de rolagem, sem atraso, e mantenha o texto legível como texto comum para leitores de tela.

Uma palavra é duplicada em várias cópias empilhadas que se deslocam com a rolagem.

Adicione um efeito "Text Repetition" (também chamado de repeated text scroll) em [onde].
Uma palavra deve ser copiada em uma pilha de cópias em contorno mais apagadas que se abrem por trás dela conforme o usuário rola, e se fecham de novo ao rolar para cima.
Vincule a abertura diretamente à posição de rolagem e esconda as cópias extras dos leitores de tela para que a palavra seja lida só uma vez.

O texto existente sai com uma animação e é substituído por um novo conteúdo.

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.

As palavras de um parágrafo passam de apagadas para opacidade total conforme o usuário rola.

Adicione um efeito "Text Reveal" (também chamado de scroll text reveal ou word-by-word reveal) em [onde].
O parágrafo deve começar apagado e, conforme o usuário rola, cada palavra deve clarear até a intensidade total, uma após a outra, vinculada à posição de rolagem.
Ao rolar de volta para cima, as palavras devem apagar de novo, e o parágrafo inteiro deve continuar disponível para leitores de tela, qualquer que seja o esmaecimento.

Mover o ponteiro sobre um card revela um texto oculto sob uma borda de máscara ou um holofote.

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.

O texto é substituído por caracteres aleatórios que se renovam e aos poucos se resolvem na palavra final.

Adicione um efeito de hover "Text Scramble" (também chamado de text decode ou encrypted text) em [onde].
Quando o ponteiro passar sobre o texto, cada letra deve piscar rapidamente entre caracteres aleatórios e parar na letra real, resolvendo uma após a outra da esquerda para a direita.
Evite que a largura do texto salte enquanto ele embaralha, mantenha os leitores de tela no texto real e mostre o mesmo efeito no foco do teclado.

O texto gira em perspectiva 3D acompanhando a posição do mouse.

Adicione um efeito "Text Tilt" (também chamado de perspective text tilt) em [onde].
O texto deve se inclinar levemente em 3D na direção do ponteiro enquanto ele se move, acompanhando com suavidade, e voltar a ficar reto suavemente quando o ponteiro sair.
Mantenha a inclinação sutil para o texto continuar legível, e deixe o texto reto em telas de toque e se o usuário preferir movimento reduzido (prefers-reduced-motion).

Os caracteres aparecem um de cada vez como se estivessem sendo digitados, geralmente seguidos de um cursor piscando.

Adicione um efeito de máquina de escrever (Typewriter) em [onde], também chamado de typing animation ou typing text.
Os caracteres devem aparecer um de cada vez em um ritmo de digitação constante, com um cursor logo após o último caractere digitado que pisca algumas vezes quando a digitação termina.
Reproduza só uma vez em vez de em loop, deixe os leitores de tela lerem o texto completo desde o início e mostre o texto completo se o usuário preferir movimento reduzido (prefers-reduced-motion).

Ao passar o mouse, um sublinhado cresce a partir de um lado ou do centro sob um link.

Adicione um efeito de hover "Underline Draw" (também chamado de animated underline ou hover underline animation) em [onde].
Quando o ponteiro estiver sobre o link, um sublinhado deve crescer suavemente da esquerda para a direita sob o texto e encolher de novo quando o ponteiro sair: rápido e sutil.
Evite que o sublinhado desloque o layout ao redor e mostre o mesmo efeito no foco do teclado.

As letras ficam suavemente mais grossas ou mais finas (ou mudam de largura ou inclinação) usando os eixos de uma fonte variável.

Adicione um efeito de hover "Variable Font Weight Animation" (também chamado de font weight shift) em [onde].
Enquanto o ponteiro estiver sobre o texto, as letras devem engrossar uma após a outra em uma onda suave da esquerda para a direita e afinar de novo quando o ponteiro sair.
Use uma fonte variável para o peso mudar suavemente em vez de saltar, evite que o título empurre o conteúdo próximo ao alargar e mostre o mesmo efeito no foco do teclado.

Letras grandes funcionam como uma janela que mostra um vídeo em reprodução dentro delas.

Adicione um efeito "Video Text" (também chamado de text video mask) em [onde].
Letras grandes e grossas devem funcionar como uma janela para um vídeo em reprodução, de modo que as imagens em movimento apareçam só dentro das formas das letras.
Mantenha o vídeo mudo e em loop, sem controles, ofereça as palavras como texto real para leitores de tela e mostre um quadro estático se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras sobem e descem em sequência, criando uma onda que percorre a palavra.

Adicione um efeito "Wavy Text" (também chamado de text wave) em [onde].
As letras devem subir e descer uma após a outra para que uma onda suave e fluida percorra a palavra sem parar.
Faça o loop sem cortes, garanta que os leitores de tela leiam como uma só palavra e pare a onda se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma palavra da frase é trocada pela próxima de uma lista com um deslize, um giro ou um fade.

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