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 "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 chamadaTyping Animation, Typewriter Effect, Typing Text
Os caracteres aparecem um de cada vez como se estivessem sendo digitados, geralmente seguidos de um cursor piscando.
Onde usar
Títulos hero, slogans
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 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).
H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Também chamadaText Flipping Board, Flip Board, Vestaboard display
Os caracteres viram como em um painel de partidas de aeroporto até parar na letra final.
Onde usar
Painéis de status e displays retrô
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).
O texto treme com fatias deslocadas e separações de cor vermelha e ciano, como um sinal com defeito.
Onde usar
Títulos cyberpunk ou de games
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 gira em perspectiva 3D acompanhando a posição do mouse.
Onde usar
Títulos hero
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).
Também chamadaAnimated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
Ao passar o mouse, um sublinhado cresce a partir de um lado ou do centro sob um link.
Onde usar
Links de navegação, links no texto
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.