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 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.
Animações parecidas
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
Também chamadaScrambleText, 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.
A opacidade do elemento oscila de forma irregular, como uma luz falhando.
Onde usar
Efeitos de neon e glitch
Adicione um efeito "Flicker" (também chamado flickering) em [onde].
O elemento deve ficar estável na maior parte do tempo e escurecer em falhas curtas e irregulares, como um neon com defeito.
Mantenha o ritmo irregular em vez de uniforme, evite piscadas rápidas em intensidade máxima e pare o efeito para usuários que preferem movimento reduzido.
Um título é cortado em fatias horizontais que se deslocam para os lados umas contra as outras conforme a página rola.
Onde usar
Hero editorial
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.
Q
R
U
P
D
H
LY
O
S
G
K
X
BA
F
J
Z
V
M
EH
L
C
N
W
T
IX
B
Q
R
U
P
DM
E
Y
O
S
G
KT
I
A
F
J
Z
VP
D
H
L
C
N
W
Caracteres verdes caem em colunas, como a chuva de código de Matrix.
Onde usar
Temas hacker
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).
O texto exibe reflexos iridescentes de papel holográfico que se movem com o ponteiro ou com o tempo.
Onde usar
Cards premium
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.
Onde usar
Seções hero de marca
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).
Também chamadaExplosive Letter Burst, Scatter Gather Letters
As letras se espalham no hover e voltam, ou explodem para fora na entrada.
Onde usar
Links divertidos
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.