Text Generate

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

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.

O elemento começa bem desfocado e vai ganhando nitidez, muitas vezes enquanto desliza ou aparece.

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

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

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.