Typewriter (máquina de escrever)

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

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.

Três pontos dentro de um balão pulsam ou sobem em sequência para mostrar que alguém ou uma IA está digitando.

Adicione um "Typing Indicator" (também chamado typing dots) em [onde].
Os pontos dentro de um pequeno balão de chat devem subir e clarear um após o outro em um ritmo suave e delicado enquanto o outro lado digita.
Mantenha o loop contínuo, remova o balão assim que a mensagem chegar e dê aos leitores de tela um texto de status curto no lugar dos pontos.

O cursor de texto cresce ou encolhe para acompanhar o tamanho do caractere ao lado dele.

Adicione um efeito "Adaptive Caret" (também chamado adaptive caret size) em [onde].
O cursor de texto deve se posicionar antes do caractere mais próximo do ponteiro e esticar ou encolher rapidamente até a altura desse caractere, com um redimensionamento suave e ágil, sem quique.
Não deixe o texto em si se mexer, e faça o cursor acompanhar o movimento do teclado do mesmo jeito que acompanha o ponteiro.

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