shadcn.io is not affiliated with official shadcn/ui
Animated Counter Team Block for Ark UI
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 Ark 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.