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 "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).
Também chamadaRolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
Cada dígito rola na vertical até o novo valor quando um número muda.
Onde usar
Contadores ao vivo e preços
Adicione uma animação de números "Odometer" (também chamada rolling numbers ou slot-machine digits) em [onde].
Quando o valor mudar, cada dígito deve rolar na vertical até o novo dígito, sempre para a frente, com um leve escalonamento entre os dígitos e uma pequena acomodação no final.
Mantenha todos os dígitos com a mesma largura para o número não se deslocar, e exponha só o valor final para leitores de tela.
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.
Letras ou palavras giram em 3D em torno de um eixo para mostrar o próximo texto no verso.
Onde usar
Links com hover e títulos
Adicione um efeito de hover "Text 3D Flip" (também chamado 3D flip text reveal) em [onde].
Quando o ponteiro estiver sobre o texto, cada letra deve girar em 3D no eixo horizontal para mostrar uma letra nova no outro lado, uma após a outra em uma varredura rápida e suave, e voltar quando o ponteiro sair.
Mantenha a caixa de texto do mesmo tamanho durante o giro e mostre o mesmo efeito no foco do teclado.
Também chamadaCount Up, Animated Counter, Number Counter, countUp
Um número conta de um valor inicial até um valor final quando fica visível.
Onde usar
Estatísticas e blocos de KPI
Adicione um contador animado (Number Ticker) em [onde], também chamado count up ou animated counter.
Quando o número entrar na tela, ele deve contar de zero até o valor final, rápido no começo e desacelerando suavemente ao chegar.
Use dígitos de largura fixa para nada ao redor tremer, conte só uma vez e mostre o valor final de imediato para leitores de tela e se o usuário preferir movimento reduzido (prefers-reduced-motion).
As bordas das letras tremem como se fossem desenhadas à mão, usando um filtro de deslocamento SVG.
Onde usar
Títulos com cara de rascunho ou divertidos
Adicione um efeito "Squiggly Text" (também chamado wobbly text ou turbulence text) em [onde].
As bordas das letras devem tremer levemente, como se fossem desenhadas à mão e redesenhadas várias vezes por segundo: uma fervura sutil e nervosa, não uma onda suave.
Mantenha o texto legível e deixe-o parado se o usuário preferir movimento reduzido (prefers-reduced-motion).
O texto fica fixo enquanto as linhas aparecem e somem conforme o avanço da rolagem.
Onde usar
Scrollytelling
Adicione um efeito "Sticky Text Fade" (também chamado sticky scroll text opacity fade) em [onde].
Enquanto a seção rola, o bloco de texto deve ficar fixo no lugar e as linhas devem aparecer e sumir uma de cada vez conforme o avanço da rolagem.
Ligue os fades diretamente à posição da rolagem para que se invertam ao voltar, e mantenha todas as linhas disponíveis para leitores de tela, qualquer que seja a opacidade.
Os contornos das letras são desenhados como um traço antes de o preenchimento aparecer.
Onde usar
Logos e palavras do hero
Adicione um efeito "Stroke Text Draw" (também chamado draw in text ou animated stroke text) em [onde].
Os contornos das letras devem se desenhar sozinhos com suavidade e, quando estiverem completos, o preenchimento deve aparecer com um fade.
Reproduza só uma vez ao carregar, mantenha a palavra acessível como texto real e mostre o texto já preenchido se o usuário preferir movimento reduzido (prefers-reduced-motion).