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 numbers on any site.

Use Cases

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

Properties

end

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

Tip: Use numbers that showcase scale and success (e.g., 10,000+). Use real, verifiable numbers. Consider rounding large numbers (1.2M instead of 1,234,567).

start

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

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

Tip: 1.5‑2 s for numbers under 100, 2‑2.5 s for numbers 100‑10,000 (default), 2.5‑3 s for numbers over 10,000, 3‑4 s for millions/billions.

prefix

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

Tip: Use $ for dollar amounts. Keep to 1‑2 characters for visual balance.

suffix

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

Tip: Use + to indicate “or more” (10,000+). Use % for rates. Use K/M/B for large numbers (1.2M). 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). 1 – one decimal place (99.9%). 2 – two decimal places (98.67%).

Tip: Use 0 for counts, 1 for percentages, 2 for precise metrics.

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 (easier to read). false – shows 10000 without comma (harder to parse).

Tip: Use true for all numbers over 999. Disable only 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.

Tip: Make it clear what the number represents, keep to 2‑4 words, use Title Case, focus on benefit/achievement.

fontSize

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

Visual Impact: small – 32 px (compact); medium – 48 px (balanced); large – 64 px (bold, default); xlarge – 80 px (maximum impact).

Tip: Use ‘xlarge’ or ‘large’ for hero sections, ‘large’ or ‘medium’ for grouped stats, ‘small’ or ‘medium’ for sidebars.

customCss

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

Tip: Use for background, padding, borders, gradients, etc. Security note: parsed by cssParser utility; tenants only affect their own pages.

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.