Skip to main content
Formula Won Labs

Stat + counter blocks

Number tickers, animated counters, stat rows. Show scale without a screenshot.

6 blocks
Star-rating and review-platform badge row
Star-rating and review-platform badge row

Compact trust row for under a hero or above a final CTA, mixing review-platform ratings. Only use real, current scores, this pattern loses all credibility the moment a visitor checks and finds a mismatch.

pattern · cal.comview →
Rotating project health status list
Rotating project health status list

Auto-cycles which status row is highlighted every ~2s to imply a live feed. Cap at 3-4 rows, the highlight cycle gets hard to follow past that.

pattern · linear.appview →
Count-up number ticker
Count-up number ticker

Counts up from 0 (or a custom start value) to a target number when scrolled into view, supports decimals via decimalPlaces. Standard for a stats row (customers served, uptime %, dollars saved). Trigger once per view, do not loop.

MIT · magicuiview →
Animated circular gauge
Animated circular gauge

Circular gauge that animates its fill to a target percentage, useful for a skills/completion widget or a dashboard KPI card. Set gaugePrimaryColor to the brand accent so it does not default to indigo.

MIT · magicuiview →
Gradient wave hero with live ticker
Gradient wave hero with live ticker

Dark gradient hero with three drifting blurred blobs and a small live-updating ticker chip above the headline, the texture Stripe uses to avoid a flat gradient. Swap the ticker for a real metric or delete it, it is decorative only.

pattern · stripe.comview →
Count-up stats bar
Count-up stats bar

Four-stat row that counts up from zero when it scrolls into view, using IntersectionObserver plus requestAnimationFrame, no animation library needed. Swap the data-target/prefix/suffix attributes per stat, keep to four items or the row gets cramped on mobile.

pattern · stripe.comview →

Want your site’s stat + counter blocks to look this good?

We build full sites with blocks like these.