AnimatedCounter

An animated number counter that smoothly counts from a start value to an end value when scrolled into view. Ideal for showcasing statistics, metrics, and impressive numbers on any site.

Use Cases

• Business statistics such as revenue, customers, or projects completed.
• Social proof numbers like users, downloads, ratings, or reviews.
• Achievement metrics including awards won, years of experience, or team size.
• Product metrics such as items sold, deliveries made, or satisfaction rate.
• Performance stats like uptime percentage, response time, or success rate.
• Community numbers covering members, posts, contributions, or events.
• Financial displays such as savings, raised funds, or ROI percentages.
• Milestone celebrations like days since launch or version number.
• Impact metrics such as trees planted, carbon saved, or meals donated.
• Service statistics including locations, languages, or countries served.

Properties

end

The final number to count up to. This is the impressive statistic you want to display. Type: number. Required.

Recommendations: Use numbers that showcase scale and success (e.g., 10,000+ not 47); use real, verifiable numbers; consider rounding large numbers (1.2M instead of 1,234,567 for clarity).

start

Starting number for the animation. Usually 0 but can be set higher for dramatic effect. Type: number. Default: 0.

Recommendations: Use 0 for most cases (clean start); use a higher start value to show growth (e.g., 5000 to 10000).

duration

Animation duration in seconds. How long the count‑up animation takes. Type: number. Default: 2.5.

Recommendations: 1.5‑2 seconds for numbers under 100; 2‑2.5 seconds for numbers 100‑10,000 (default); 2.5‑3 seconds for numbers over 10,000; 3‑4 seconds for millions/billions (builds anticipation).

prefix

Text to display before the number. Commonly used for currency symbols. Type: string.

Recommendations: Use $ for dollar amounts (e.g., $1,000,000); limit to 1‑2 characters for visual balance.

suffix

Text to display after the number. Used for units, scales, and emphasis. Type: string.

Recommendations: Use + to indicate “or more” (10,000+); use % for rates and percentages (99.9%); use K/M/B for large numbers (1.2M instead of 1,200,000); use units when relevant (24hrs, 500kg).

decimals

Number of decimal places to display. Use for precision metrics like percentages. Type: number. Options: 0, 1, 2. Default: 0.

Visual Impact: 0 – Whole numbers only (10,000). Clean, bold. Use for counts, quantities.
1 – One decimal place (99.9%). Use for percentages, ratings.
2 – Two decimal places (98.67%). Use for precise metrics, financial data.

Recommendations: Use 0 for customer counts, downloads, items (10,000 customers); use 1 for uptime, satisfaction (99.9% uptime); use 2 for conversion rates, precise metrics (3.47% conversion).

separator

Whether to add thousand separators (commas). Dramatically improves readability for large numbers. Type: boolean. Default: true.

Visual Impact: true – Shows 10,000 with comma. Much easier to read at a glance.
false – Shows 10000 without comma. Harder to parse, looks unprofessional.

Recommendations: Use true for all numbers over 999. Essential for readability.; Only disable for small numbers under 1000 or when culturally appropriate.

label

Descriptive text displayed below the number. Provides context about what the number represents. Type: string.

Recommendations: Make it clear what the number represents; keep to 2‑4 words maximum; use Title Case for professional appearance; focus on the benefit/achievement, not just the metric.

fontSize

Size of the counter number. Label scales proportionally. Type: string. Options: small, medium, large, xlarge. Default: large.

Visual Impact: small – Number: 32px. Compact, suitable for multiple counters in tight spaces.
medium – Number: 48px. Balanced size, good for secondary stats.
large – Number: 64px. Bold, prominent (default). Best for hero sections.
xlarge – Number: 80px. Maximum impact, use sparingly for primary stat.

Recommendations: Use ‘xlarge’ or ‘large’ for main stats on landing pages; use ‘large’ or ‘medium’ when displaying 3‑4 counters together; use ‘small’ or ‘medium’ for compact spaces.

customCss

Custom CSS styles for advanced styling. Parsed as CSS property‑value pairs. Applies to outermost Section container. Type: string.

Security Note: Parsed by cssParser utility. Tenants only affect their own pages (multi‑tenant isolation enforced).

Best Practices

• ALWAYS set fontSize explicitly – use ‘large’ for hero stats, ‘xlarge’ for featured, ‘medium’ for grouped.
• Use meaningful numbers that tell a story (10,000+ customers, 99.9% uptime).
• Keep animation duration between 2‑3 seconds for best effect.
• Add context with descriptive labels (not just “$10,000”, but “$10,000+ Happy Customers”).
• Use separators for large numbers (10,000 not 10000 – easier to read).
• Add appropriate suffixes (+, %, K, M) to convey scale.
• Group multiple counters together for maximum impact (use Grid component).
• Place counters where they provide credibility (near CTAs, testimonials).
• Use IntersectionObserver trigger (built‑in) – animates when scrolled into view.

Common Mistakes

Not setting fontSize property explicitly

Why it's a problem: Without fontSize, the counter displays tiny text. The default only applies in the editor, not when generating via JSON.

Fix: ALWAYS include fontSize in props. Use ‘large’ for most cases, ‘xlarge’ for featured stats, ‘medium’ for grouped counters.

Using unimpressive numbers (12 customers, 3 projects)

Why it's a problem: Small numbers don’t build credibility. They make business look new/unsuccessful.

Fix: Use numbers that showcase scale: 1,000+ customers, 500+ projects. Or use different metrics (years experience, 5‑star ratings).

Not using thousand separators for large numbers

Why it's a problem: 10000 is hard to read at a glance. Users can’t quickly gauge magnitude.

Fix: Always use separator: true for numbers over 999. Show 10,000 not 10000.

Missing or generic labels

Why it's a problem: Number without context is meaningless. “$10,000” tells no story. “$10,000 Happy Customers” builds trust.

Fix: Always include descriptive labels that explain what the number represents.

Animation duration too fast (<1.5s) or too slow (>4s)

Why it's a problem: Too fast looks jarring, users miss the animation. Too slow feels sluggish and tests patience.

Fix: Use 2‑2.5 seconds for most counters. Adjust slightly for very large/small numbers.

Using decimals for whole number counts

Why it's a problem: 10,000.00 customers looks odd. Decimals imply precision where none exists.

Fix: Use decimals: 0 for counts (customers, downloads, projects). Use 1‑2 for percentages/rates only.

Not grouping multiple counters together

Why it's a problem: Single counter lacks impact. Multiple stats together tell a compelling story.

Fix: Use Grid component to display 3‑4 counters side‑by‑side for maximum credibility.

Placing counters at bottom of page where they won’t be seen

Why it's a problem: Animation triggers on scroll into view. If users don’t scroll that far, stats are wasted.

Fix: Place counters prominently: below hero section, near CTAs, in about section.