Search blocks by description or jump to a page.
Headline metrics that count up as they scroll into view. Drop it on an about page to make growth, users, and revenue feel alive and concrete.
Animated Stats opens with a centered header: a small pill badge, a bold heading, and a one-sentence summary. Below it sits a four-column card grid, one card per metric. Each card holds a circular icon, a large number that counts up from zero as the section scrolls into view, a label, and a short description. The counting animation runs once, triggered by an intersection observer at the 20% threshold, so the numbers only animate when a visitor actually reaches the section. A wide accent panel follows the grid, splitting into a text column on the left and a two-cell mini-grid on the right, each cell showing a static supplementary figure with a label and caption.
The four headline metrics and the two supplementary figures are fully independent. You can swap any number, label, description, or icon without affecting the layout. The badge text, heading, and intro paragraph are plain strings you can rewrite or remove. The accent panel at the bottom is a separate section you can drop if you only need the card grid.
This block suits a developer tools company that needs to back up its pitch with hard numbers before a visitor reaches the pricing page. The animated count-up gives static figures a sense of scale and momentum that a plain stats grid does not, making it the right choice when you want the numbers to feel earned rather than just printed. Use it in the middle of a long about page where the motion revives attention, or directly after a mission statement to ground the story in concrete results.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Replace the demo copy with your own key metrics to make the block meaningful for your product. A few directions that work well:
Tip: keep the suffix short, a plus sign or a percent symbol, so the large numeral stays the focal point and the card grid reads cleanly at a glance.