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
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.
