shadcn.io is not affiliated with official shadcn/ui
Animated Counter Team Block for React
A short strip of four centred people figures that roll up once as they scroll into view, over a closing row with the newest eight people as initials.
Installation
Overview
A short counter strip for React with Base UI, written for Wetherley Reach, a fictional weather API. A centred header states the headline ("64 people read the sky for you"), then one hairline band runs from rail to rail with four centred figures: people, countries, years here on average, open roles. Each figure rolls up from zero, once, as the band scrolls into view, with the Sliding Number; the final width is reserved, so nothing moves while it counts. Below the band a closing row ends the block with the newest eight people as initials in an overlapping group, a count of everyone else and one sentence. Four figures across from lg, two by two below it. It's built from Sliding Number, Avatar and Guides, with CSS transitions and your theme's tokens. The figures only count: no change line, no department table (see the Stats Overview Team block for that). The people are fictional and the figures are example data.
FAQ
How do I change the figures?
Edit COUNTERS at the top of the file: an id, a label, a value and how many decimals to show. The title and the closing row's "+56" are computed from the people figure and the list of the newest people, so they stay true when you change them.
When does the counting start, and what about reduced motion?
Each Sliding Number waits for its figure to scroll into view, then rolls to its value once. With reduced motion the digits are simply there, and the final width is reserved either way, so the band never changes size. If the block is below the fold in a screenshot, the figures show zeros until it is scrolled to.
How is it read by a screen reader?
The figures are a description list: the label comes first in the DOM and is drawn under the figure, so you hear "People, 64". The newest people's names are in a list for screen readers, because the overlapping initials are a drawing and hidden from them.
Related
- Pro
Stats Overview Team
Numbers and historyFour people figures with their change on a year ago, over seven department rows whose bars draw what each department was a year ago and what it has added since.
- Pro
Animated Comparison Team
Numbers and historyA Then / Now toggle on a framed figure: Then fills four places with the founders, Now fills eleven and a +13, with a line of words and three figures that change with it.
- Pro
Counters Row About
NumbersFour counters for an uptime monitor in one hairline band, each rolling up once on view with an arrow and a sign for how it moved on last month, under a header that says when the figures were last updated.
- Pro
Community Growth Chart About
NumbersA community's growth in one framed area chart, month by month for a year, beside three channel counts (forum, chat, office hours) that roll up as they scroll into view.
- Pro
Minimal Avatars Team
Carousels and reelsA single quiet strip: twelve overlapping initials avatars and a +12 count, each avatar a focusable link whose name and role show in a tooltip, with one line under it that says how many people work in how many countries.
- Pro
By The Numbers Bento About
NumbersAn asymmetric bento of company figures for an expense tool: a lead cell with the customer count over a twelve-bar trend, and five smaller cells tagged People, Customers or Product, each footnoted with how it was counted.