Animated stat counters for any 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. Animated counters disrupt that scan: the number starts at zero and moves, which catches the eye and forces a brief pause. That pause is the entire game. The pause turns a number from 'a claim I read' into 'a thing I watched happen.' Eye-tracking studies consistently show that motion in the viewport draws attention 3-5x more reliably than static elements at the same position. The trick is to make the motion brief (1-2 seconds), tied to scroll-into-view (so it happens when the user is actually looking), and accessible (so users with vestibular conditions can opt out via prefers-reduced-motion). Skip those three rules and the counter goes from helpful to annoying.

Older counter widgets attached scroll event listeners to track when the element entered the viewport. That approach worked but caused scroll jank on long pages because the event fires dozens of times per second. The modern pattern is IntersectionObserver, a browser API that asynchronously notifies your code when an element crosses a viewport threshold without polling on every scroll frame. Poper's number-counter widget uses IntersectionObserver with a 50% threshold (animation fires when half the counter is visible) plus a once-only flag (so users scrolling past and back do not see the animation re-fire). The result is a smooth animation that respects scroll performance even on long-scroll storytelling pages with dozens of stat sections.

Approximately 35% of users have some form of vestibular sensitivity (vertigo, motion sickness, migraine triggers). Modern operating systems expose a 'Reduce Motion' setting that browsers expose as the prefers-reduced-motion media query. WCAG 2.1 Success Criterion 2.3.3 'Animation from Interactions' requires that motion essential to function be the only motion shown when reduced-motion is requested. A counter animation is not essential, so when the user has prefers-reduced-motion: reduce, the widget should skip the animation and display the final value immediately. Poper's widget does this automatically (no config needed). Most third-party counter widgets either ignore prefers-reduced-motion or require a paid tier to enable it. Building accessibility in from the start avoids the lawsuit risk and is the right thing to do for a chunk of your audience.

A subtle pitfall with counter widgets is Cumulative Layout Shift. If you start the counter at zero (one digit, narrow) and animate to ten million (eight digits, wide), the surrounding text reflows during the animation and triggers a CLS hit, which Google now uses as a Core Web Vitals ranking signal. The fix is to measure the rendered width of the final value at mount time and reserve that exact width via min-width on the counter element. Poper's widget handles this automatically; many third-party widgets do not, and you discover the CLS regression three months later when your Lighthouse score drops. If you embed any counter widget, run PageSpeed Insights before and after to confirm CLS does not move.

The 2024 FTC Endorsement Guides update explicitly warns against displaying inflated, misleading, or unverifiable statistics on landing pages. If you claim '10,000 customers' on a counter, you should be able to back that up with a CRM export. If you claim '4.9 star rating', it must be the actual aggregate from your review platforms (not a curated number). Poper's number-counter widget supports a live API source mode where the counter pulls from your real database or analytics tool on a schedule, which both keeps the number accurate and updates it as your business grows. Static manually-entered numbers are fine too, but they need to be honest. The FTC has cracked down on inflated stats, fake review counts, and curated 'best of' numbers more aggressively since 2024.