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 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).
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.
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).
Também chamadaWorld Map Animated Lines, Globe Arcs
Linhas e pontos se animam entre locais em um mapa ou globo.
Onde usar
Visuais de alcance global
Adicione "Animated Map Arcs" (também chamado globe arcs) em [onde].
Linhas curvas devem se desenhar uma após a outra entre locais em um mapa pontilhado e depois se recolher em direção ao destino enquanto um anel suave pulsa ali: calmo e constante.
Escalone os arcos para nunca se moverem ao mesmo tempo, mantenha o loop contínuo e pause-o se o usuário preferir movimento reduzido (prefers-reduced-motion).
Também chamadaAnimated Bar Chart, Bar Chart Entrance
As barras sobem da altura zero até seus valores.
Onde usar
Dashboards e relatórios
Adicione um gráfico de barras animado (Bar Chart Grow) em [onde], também chamado animated bar chart ou bar chart entrance.
Cada barra deve subir da linha de base até o seu valor, uma após a outra num escalonamento rápido, desacelerando suavemente ao se acomodar.
Reproduza só uma vez quando o gráfico entrar na tela e mostre o gráfico pronto de imediato se o usuário preferir movimento reduzido (prefers-reduced-motion).