Também chamada Text Generate Effect
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.
Onde usar
Textos de introdução com estilo de IA
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).
A
Q
J
P
N
V
Y
HB
K
M
L
Z
W
T
XC
R
G
Q
J
P
N
VD
Y
H
K
M
L
Z
WE
T
X
R
G
Q
J
PF
N
V
Y
H
K
M
L
Passe o mouse por cima
Também chamada ScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
O texto é substituído por caracteres aleatórios que se renovam e aos poucos se resolvem na palavra final.
Onde usar
Títulos hero com estilo tech, hover em links
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.
Também chamada Typing dots, Chat is typing
Três pontos dentro de um balão pulsam ou sobem em sequência para mostrar que alguém ou uma IA está digitando.
Onde usar
Chats, assistentes de IA
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.
Também chamada Cursor: Adaptive caret size
O cursor de texto cresce ou encolhe para acompanhar o tamanho do caractere ao lado dele.
Onde usar
Editores, efeitos de digitação
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.