Animated stat counters for your website.

Static numbers on a landing page get mentally skimmed past. The visitor sees '10,000+ customers' and registers it as a generic claim, then keeps scrolling. An animated counter disrupts that scan: the number starts at the start value and climbs, which catches the eye and forces a brief pause. That pause is the entire game. It turns a number from 'a claim I read' into 'a thing I watched happen.' Motion in the viewport reliably draws attention more than a static element in the same position. The trick is to keep the motion brief and tie it to scroll-into-view, so it happens when the visitor is actually looking. The Poper Number Counter does both: you set the animation duration in the Data tab, and the count fires when the counter scrolls into view rather than on page load. The animation uses an ease-out curve, so the number decelerates into its final value instead of stopping abruptly.

An animation only earns its keep if the visitor actually sees it. A counter that animates on page load while it is still below the fold has finished by the time the visitor scrolls down to it, so they see a static number and the effect is wasted. The Poper Number Counter avoids this by using the browser's IntersectionObserver API to watch when the counter enters the viewport. As soon as the counter scrolls into view, the count-up begins, and it fires once, so a visitor who scrolls past and back does not see it replay. IntersectionObserver is also the right tool for performance: unlike old scroll-event listeners that run dozens of times per second, it notifies the widget asynchronously only when the visibility threshold is crossed, so it adds less scroll work than older scroll-event approaches.

The Poper Number Counter ships twelve layout presets and you pick one in the Templates tab. Minimal Hero is a clean, large headline number for above-the-fold proof. Circle Ring presents the number inside a circular progress style. Modern Stat is a dashboard-style card with room for a secondary label. Neu Brutal is bold and outlined with strong contrast. Glass Frost is a soft glassmorphism panel, and Cyberpunk is a neon-inspired one. Retro LCD mimics a vintage digital display, Gradient Flow uses a vivid gradient surface, and Isometric 3D gives the card dimension. Pill Badge is a compact rounded badge for inline use, Card Mockup is credit-card inspired, and Split View stacks the headline and value vertically. Each layout is one counter, so to build a row of stats you embed several counters side by side. Some layouts, such as Circle Ring and Retro LCD, automatically abbreviate very large numbers so the value stays inside the card.

A subtle pitfall with counter widgets is Cumulative Layout Shift. If a counter starts at zero (one digit, narrow) and animates to ten million (eight digits, wide), text around the counter can reflow as the digit count grows during the animation, and that triggers a CLS hit. The fix is to measure the rendered width of the final value before the animation starts and reserve that width, so the counter element is already as wide as it will ever be. Some layouts reserve the width of the final string before animation, while compact layouts may not use the same reserve-width element. Run PageSpeed Insights before and after to validate CLS on your own page.

A counter draws the eye precisely because it animates, which means whatever figure you put on it gets more scrutiny than the same number in body text. Make sure it is true and verifiable. If the counter says 10,000 customers, you should be able to back that up. If it says a 4.7 star rating, that should be the actual aggregate from your review platforms, not a rounded-up guess. The Poper Number Counter takes a value you enter in the builder, so keeping it accurate is on you: when the real number changes, update the end value in the Data tab. Use the prefix and suffix fields to label the number clearly (a $ prefix, a + or % suffix) so a visitor knows exactly what it counts, and pick a thousands separator or the K/M/B abbreviation so a large number stays readable at a glance.