# Algarismo Número que parte do zero e corre até o valor final quando aparece na tela, como um placar. > Algarismo é um componente do THM Componentes que anima um número do zero até o valor final quando ele entra na tela, em 1 segundo no padrão, com aceleração suave e dígitos de largura fixa. Também conta para baixo e acompanha mudanças de valor. É leve e funciona bem em seções de resultados, páginas de vendas e painéis. - Categoria: Texto e tipografia - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Rolagem - URL: https://vibecode.thmtecnologia.com/componentes/algarismo/ ## 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 ```text 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. ## Componentes relacionados - [Catraca](https://vibecode.thmtecnologia.com/componentes/catraca/): Números grandes que rolam como os tambores do hodômetro de um carro e param com um leve balanço. - [Manômetro](https://vibecode.thmtecnologia.com/componentes/manometro/): Medidores em arco com faixas verde, âmbar e vermelha, ponteiro que balança até parar e número contando. - [Transferidor](https://vibecode.thmtecnologia.com/componentes/transferidor/): Um anel que se preenche com animação até a porcentagem da meta, com o número no centro. - [Páreo](https://vibecode.thmtecnologia.com/componentes/pareo/): Barras horizontais que avançam período a período e trocam de lugar no ranking enquanto o tempo passa. - [Sismógrafo](https://vibecode.thmtecnologia.com/componentes/sismografo/): Gráfico de área com curva suave que recebe pontos novos a todo instante e desliza o eixo do tempo. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.