# Catraca

Números grandes que rolam como os tambores do hodômetro de um carro e param com um leve balanço.

> Catraca é um componente exclusivo do THM Componentes que anima números como um odômetro mecânico: cada dígito é um tambor que gira com mola própria, ganha desfoque de movimento e assenta com leve balanço. Usa formato pt-BR, aceita prefixo como R$ e sufixo como %, e funciona bem em seções de resultados e prova social.

- Categoria: Dados e visualização
- Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo
- Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível
- Tecnologia: Vue 3, TypeScript
- Interação: Nenhuma: o efeito roda sozinho
- URL: https://vibecode.thmtecnologia.com/componentes/catraca/

## Como ele é

Lembra o hodômetro de um carro antigo ou o marcador de uma bomba de combustível. Cada dígito fica numa janelinha com as bordas de cima e de baixo esfumadas e é uma fita de 0 a 9 que gira na vertical. Quando a seção aparece na tela, os tambores partem da esquerda para a direita, um pouco defasados; os dígitos da direita dão voltas extras, ficam borrados pela velocidade e assentam no valor com um pequeno balanço. Prefixo e sufixo aparecem menores, na cor de destaque índigo, e um rótulo em caixa alta fica embaixo de cada número.

## Você pode estar procurando isto se pediu algo assim

- “número que gira igual hodômetro de carro”
- “contador de resultados que rola os dígitos quando aparece na tela”
- “mostrar faturamento e clientes com números animados na landing page”
- “números que sobem rolando, tipo placar antigo”
- “seção de prova social com números grandes se mexendo”
- “contador de impacto para o relatório anual”

## Também chamado de

contador odômetro, odometer counter, rolling numbers, contador animado, slot counter, número rolante

## Quando usar

- Seção de resultados de uma landing page com faturamento, clientes e projetos
- Relatório de impacto ou página institucional com números de destaque
- Painel de métricas que atualiza valores e precisa mostrar a mudança
- Prova social perto da chamada de compra ou de cadastro

## Quando evitar

- Preço no checkout e valores que precisam ser lidos na hora, sem espera
- Listas e tabelas com muitos números, em que dezenas de tambores girando cansam
- Fundos escuros sem trocar a prop color, que por padrão deixa os números em azul-marinho escuro

## Como pedir para a sua IA

```text
Crie contadores estilo odômetro mecânico para a seção de resultados da landing page, com um tambor por dígito girando com mola e desfoque de movimento, formato pt-BR, prefixo e sufixo. Dispare só quando a seção entrar na tela e mostre os valores finais direto para quem prefere menos movimento.
```

Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.

## Perguntas sobre Catraca

### Como troco os números e os textos de Catraca?

Pela prop items, uma lista em que cada métrica tem value, label, prefix, suffix e decimals. Catraca formata em pt-BR, com ponto no milhar e vírgula nos decimais, e quando um valor muda depois de aparecer, os tambores giram até o número novo sem recomeçar do zero.

### Dá para ajustar o balanço e o desfoque de Catraca?

Dá. Em Catraca, stiffness controla a rigidez da mola, damping o amortecimento, em que valores menores dão mais balanço, blur a força do desfoque, stagger o atraso entre tambores e laps as voltas extras dos dígitos da direita. O tamanho e as cores vêm das props size, color e accent.

### Catraca respeita quem prefere menos movimento?

Respeita. Com a preferência de reduzir movimento ativa, Catraca mostra os valores finais logo ao carregar, sem girar os tambores nem aplicar desfoque. Sem essa preferência, a animação só começa quando 40% do componente aparece na tela e para de ser calculada quando ele sai.

## Componentes relacionados

- [Algarismo](https://vibecode.thmtecnologia.com/componentes/algarismo/): Número que parte do zero e corre até o valor final quando aparece na tela, como um placar.
- [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.
- [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.
- [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.
- [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.