Counter

Overview

Counter gives numbers a moment of arrival. The metric does not just appear; it resolves into proof.

Use Counter when a number deserves attention: revenue lift, active users, conversion improvement, uptime, launch progress, speed gain, or product adoption. The page job is proof: the animation should make the figure feel noticed, not make it harder to read.

The production risk is credibility. A counter that spins too long, loops forever, or animates every number on the page starts to feel like theatre around evidence. The final value must settle quickly, remain readable as real text, and avoid pretending that decorative motion is data.

Install

Usage

Component Code

Example Production Use Case

A SaaS landing page can use Counter in a proof band below the hero: onboarding lift, deployment time saved, and uptime. The outcome is credibility: the numbers get a controlled beat of attention before the visitor reaches the CTA.

Best Used For

• Metric bands where a small set of proof points needs emphasis.
• Launch pages where numbers support the claim without becoming the whole story.
• SaaS, AI, and developer-tool pages where quantitative proof deserves a visible arrival.

Not For

Not for financial dashboards, compliance tables, legal figures, or analytics screens where exact reading speed matters more than animation.

Not for pages where every number spins. That is not proof; that is a slot machine with a marketing degree.

Performance Budget

Limit animated counters to the numbers that matter, avoid continuous loops, reserve layout width for the final value, and stop animation once the metric has resolved.

Accessibility and Mobile

Expose the final number and label as readable text. Do not make screen readers listen to every intermediate digit. On mobile and reduced motion, show the final value immediately or use a very short opacity change.

Common Mistakes

• Animating every statistic on the page.
• Letting the number shift layout as digits change.
• Making the animation more memorable than the metric.