# Catraca Big numbers that roll like the drums of a car odometer and settle with a slight bounce. > Catraca is an exclusive THM Componentes component that animates numbers like a mechanical odometer: each digit is a drum that spins on its own spring, picks up motion blur and settles with a slight bounce. It supports prefixes and suffixes, uses Brazilian number formatting and works well in results and social proof sections. - Category: Data and visualization - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: None: the effect runs on its own - URL: https://vibecode.thmtecnologia.com/en/components/catraca/ ## What it looks like It looks like the odometer of an old car or the counter on a fuel pump. Each digit sits in a small window with faded top and bottom edges and is a strip from 0 to 9 that spins vertically. When the section appears on screen, the drums start from left to right, slightly staggered; the digits on the right spin extra laps, blur with speed and settle on the value with a small bounce. Prefixes and suffixes are smaller, in the indigo accent color, and an uppercase label sits under each number. ## You may be looking for this if you asked for something like - “a number that rolls like a car odometer” - “a results counter that spins its digits when it scrolls into view” - “show revenue and customer numbers animating on the landing page” - “numbers rolling up like an old scoreboard” - “a social proof section with big moving numbers” - “an impact counter for the annual report” ## Also known as odometer counter, rolling numbers, animated counter, slot counter, digit roll animation ## When to use - A landing page results section with revenue, customers and projects - An impact report or company page with headline numbers - A metrics panel that updates values and should show the change - Social proof near a purchase or sign-up call to action ## When to avoid - Checkout prices and values people must read instantly - Dark backgrounds, unless you set the color prop, which defaults to dark navy - Products outside Brazil, unless your AI changes the built-in Brazilian number format ## How to ask your AI ```text Build mechanical odometer-style counters for the landing page results section, with one drum per digit spinning on a spring with motion blur, plus prefixes and suffixes. Trigger them only when the section scrolls into view and show the final values right away for people who prefer reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Catraca ### How do I change the numbers and labels in Catraca? Through the items prop, a list where each metric has value, label, prefix, suffix and decimals. Catraca formats numbers in Brazilian style, with dots for thousands and commas for decimals, and when a value changes after it appears, the drums spin forward to the new number without restarting from zero. ### Can I tune the bounce and blur of Catraca? Yes. In Catraca, stiffness sets how stiff the spring is, damping how fast it calms down, with lower values giving more bounce, blur the strength of the motion blur, stagger the delay between drums and laps the extra turns of the right-hand digits. Size and colors come from the size, color and accent props. ### Does Catraca respect reduced motion settings? Yes. With reduced motion turned on, Catraca shows the final values as soon as it loads, without spinning the drums or applying blur. Otherwise the animation only starts when 40% of the component is on screen and stops being computed when it leaves. ## Related components - [Algarismo](https://vibecode.thmtecnologia.com/en/components/algarismo/): A number that starts at zero and runs up to its final value when it appears on screen, like a scoreboard. - [Manômetro](https://vibecode.thmtecnologia.com/en/components/manometro/): Arc gauges with green, amber and red bands, a needle that swings into place and a counting number. - [Páreo](https://vibecode.thmtecnologia.com/en/components/pareo/): Horizontal bars that move forward period by period and swap places in the ranking as time goes by. - [Transferidor](https://vibecode.thmtecnologia.com/en/components/transferidor/): A ring that fills with animation up to the goal percentage, with the number in the middle. - [Sismógrafo](https://vibecode.thmtecnologia.com/en/components/sismografo/): A smooth area chart that keeps receiving new points and slides its time axis along. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).