# Algarismo A number that starts at zero and runs up to its final value when it appears on screen, like a scoreboard. > Algarismo is a THM Componentes component that animates a number from zero up to its final value when it enters the screen, in one second by default, with smooth easing and fixed-width digits. It can also count down and follows value changes. It is light and works well in results sections, sales pages and dashboards. - Category: Text and typography - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4 - Interaction: Scroll - URL: https://vibecode.thmtecnologia.com/en/components/algarismo/ ## What it looks like It works like a scoreboard racing to the final score. The first time the number enters the screen, it starts at zero and climbs to the set value in one second by default, fast at first and slowing down at the end. It can also count from the value down to zero. Digits have equal widths, so the number does not jitter while it changes. The text is black in light mode and white in dark mode, and takes the size and font of its surroundings; the demo shows it very large. If the value changes later, the counter runs from the current number to the new one. ## You may be looking for this if you asked for something like - “a number that counts up to the total when it appears on screen” - “an animated counter to show how many customers we have served” - “company stats with numbers rolling up to the final value” - “that rolling number effect in the results section” - “show 500 projects delivered with the number climbing from zero” - “dashboard metrics that animate when the value changes” ## Also known as scoreboard counter, count up animation, animated counter, number counter, stats counter, counting number effect ## When to use - A results section with numbers of customers, projects or years in business - Sales pages that show savings, return or growth - Dashboards where a value changes and should run up to the new number - Impact reports and company pages with statistics ## When to avoid - Values in Brazilian reais or with a decimal comma, unless you change the formatting, which is fixed to the US style - Numbers that must be in the HTML for search engines, since the server renders the starting value, zero ## How to ask your AI ```text Create an animated counter for the results section: each number climbs from zero to its final value when it enters the screen, formatted for my locale, with prefixes and suffixes like $ and %, digits that do not jitter and the final value shown right away for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Algarismo ### Can Algarismo format numbers for my locale? Not as it ships: Algarismo formats numbers in the US style, with commas for thousands and a dot for decimals, and the code default shows two decimal places. When adapting it, ask your AI to switch the locale and adjust the decimalPlaces prop; prefixes like $ and suffixes like % go next to it as plain text. ### When does Algarismo start counting? Algarismo starts counting the first time it enters the screen and does not replay when people scroll back. The delay prop adds a wait in milliseconds, duration sets the total time, 1000 by default, and transition picks the easing curve, easeOutCubic by default. If the value changes later, it runs to the new number. ### Does Algarismo hurt SEO in Nuxt? It can, a little: with server rendering, Algarismo puts the starting value, zero, in the HTML, and the final number only appears after the animation runs in the browser. If the statistic matters for search engines, repeat the number as plain text nearby or ask your AI to render the final value on the server. ## Related components - [Catraca](https://vibecode.thmtecnologia.com/en/components/catraca/): Big numbers that roll like the drums of a car odometer and settle with a slight bounce. - [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. - [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. - [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. - [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).