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 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.
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).
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 chamadaRotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
Uma palavra da frase é trocada pela próxima de uma lista com um deslize, um giro ou um fade.
Onde usar
Slogans hero
Adicione um efeito "Word Rotate" (também chamado de rotating words ou flip words) em [onde].
Uma palavra da linha deve deslizar para cima e sair enquanto a próxima palavra de uma lista entra por baixo, pausando em cada palavra antes da próxima troca.
Evite que o resto da linha salte quando as palavras tiverem larguras diferentes, não faça os leitores de tela anunciarem cada troca e pare a rotação 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).
Barras horizontais trocam de posição ao longo do tempo conforme os valores mudam.
Onde usar
Narrativas com séries temporais
Adicione um "Bar Chart Race" (também chamado racing bar chart) em [onde].
As barras horizontais devem crescer e encolher conforme os valores mudam ao longo do tempo e deslizar suavemente umas pelas outras sempre que a posição mudar, cada uma mantendo seu rótulo.
Mova as barras com transformações em vez de reordenar o markup, para as trocas deslizarem em vez de pular, e dê aos usuários uma forma de pausar.