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