Como ele é
Funciona como um placar correndo até o resultado final. Na primeira vez que o número entra na tela, ele parte do zero e sobe até o valor definido em 1 segundo, no padrão, rápido no começo e desacelerando no fim. Também pode contar ao contrário, do valor até zero. Os dígitos têm a mesma largura, então o número não treme enquanto muda. O texto é preto no tema claro e branco no escuro, e herda tamanho e fonte de onde for colocado; na demo, aparece bem grande e centralizado. Se o valor mudar depois, o contador corre do número atual até o novo.
Você pode estar procurando isto se pediu algo assim
- número que sobe contando até o total quando aparece na tela
- contador animado para mostrar quantos clientes já atendemos
- estatísticas da empresa com números correndo até o valor final
- aquele efeito de número rolando na seção de resultados
- mostrar 500 projetos entregues com o número subindo do zero
- métricas do painel que animam quando o valor muda
Também chamado de
- contador animado
- número subindo
- contador de métricas
- placar de números
- count up animation
- animated counter
Quando usar
- Seção de resultados com números de clientes, projetos ou anos de mercado
- Páginas de vendas que mostram economia, retorno ou crescimento
- Painéis em que o valor muda e deve correr até o novo número
- Relatórios de impacto e páginas institucionais com estatísticas
Quando evitar
- Valores em reais ou com vírgula decimal sem ajustar o formato, que vem fixo no padrão dos Estados Unidos
- Números que precisam estar no HTML para buscadores, já que o servidor entrega o valor inicial, zero
Como pedir para a sua IA
Crie um contador animado na seção de resultados: cada número sobe do zero até o valor final quando entra na tela, no formato brasileiro com ponto nos milhares, prefixos como R$ e sufixos como %, dígitos que não tremem e o valor final direto para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Algarismo
Algarismo mostra números no formato brasileiro?
Não do jeito original: Algarismo formata os números no padrão dos Estados Unidos, com vírgula nos milhares e ponto nos decimais, e o padrão do código mostra duas casas decimais. Ao adaptar, peça à IA para trocar o formato para pt-BR e ajustar a prop decimalPlaces; prefixos como R$ e sufixos como % ficam como texto ao lado.
Quando Algarismo começa a contar?
Algarismo começa a contar na primeira vez que entra na tela e não repete ao rolar de volta. A prop delay acrescenta uma espera em milissegundos, duration define a duração total, 1000 no padrão, e transition escolhe a curva de aceleração, easeOutCubic no padrão. Se o valor mudar depois, o contador corre até o novo número.
Algarismo atrapalha SEO no Nuxt?
Pode atrapalhar um pouco: com renderização no servidor, Algarismo entrega no HTML o valor inicial, zero, e o número final só aparece depois da animação no navegador. Se a estatística for importante para buscadores, repita o número em texto comum por perto ou peça à IA para renderizar o valor final no servidor.
