Demo

Animated Counter

Every number on this page counts up when it scrolls into view, then stays as plain text. Each section uses the same component with different settings.

21 counters on one page. Company names, figures and copy are placeholders. With reduced motion turned on, every number shows its final value at once.

Stats in a hero

Label below the number (default) · Suffix + and % · Decimal places 1 and 2 · Screen reader text reads $1.25M as “1.25 million dollars”

Northwind Studio

Websites that load fast and stay easy to edit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus, posuere velit aliquet.

15+

Years in business

1,250

Projects delivered

98.7%

Client satisfaction

1.25 million dollars

Raised by our clients

Impact band with icons

SVG icons in the icon slot · Number and label colors inherited from the dark section · Delays of 0, 150 and 300 ms

Annual report 2025

A year of lorem ipsum, in numbers

12,480

Trees planted

3,200+

Volunteers

Countries

Label beside the number

Label position: Right of the number · The label wraps below when there is no room

Hosting plan

99.99%

uptime in the last 12 months

4.9/5

average rating from 860 reviews

3×

faster pages after the move

Typography props

Number size var(--h1, 3rem) · Number weight 300 · Label size var(--text-l, 1.25rem) · Label weight 600 · Label above the number

250+

Agencies on the waiting list

Lorem ipsum dolor sit amet. The four typography fields take any CSS value and win over the styling variables.

Number formats

Thousands separator: Comma, Period, Space, Apostrophe or None · Decimal separator: period or comma · Start value for a year

1,250,000

Comma, the default

Thousands separator: Comma

1.250.000

Period

Thousands separator: Period

1 250 000,75

Space and a decimal comma

Thousands separator: Space · Decimal separator: comma · Decimal places: 2

1’250’000

Apostrophe

Thousands separator: Apostrophe

1998

Founded in

Thousands separator: None · Start value: 1900 · Label above the number

1 250,75 €

Price with a spaced suffix

Suffix: a space and € · Thousands separator: Space · Decimal separator: comma

Counting down

Start value above End value counts down · Negative numbers work too

Seats left at the early-bird price

-18°C

Freezer temperature after two hours

Replays on every visit

Animate once: No · Use easing: No · Duration 3 s

1,000,000

Requests served today

Scroll it out of view and back: it counts again, at a steady pace.

Rich label in a case study

Label text left empty · Heading and link in the customLabel slot · Prefix + and suffix %

Case study

Lorem Bakery: a new online shop in six weeks

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

+42%

More online orders in the first month

Compared with the same month last year. Get this component

End of the demo. Get the Animated Counter component