shadcn.io is not affiliated with official shadcn/ui
Animated Counter Logos Block for Ark UI
One big count that rolls up once when it scrolls into view, for a meal-kit service that sells to employers, with a closing strip of six employer wordmarks.
Installation
Overview
An animated counter logo section for React with Ark UI. A centred header, "Employers feed their teams with Kettlebrook" and one sentence, opens onto a band that holds one number at display size, 1,240,000, with what it counts under it. The number is the catalog's Counting Number: when the band scrolls into view it races off from zero and slows into its value, the last digits ticking over one by one, and it never rolls again. Its final width is reserved, so the digits grow in place and nothing around them shifts. A closing band of six employer wordmarks, in cells that share their hairlines, ends the block. With reduced motion, or with no script, the number shows its real value at once. Built from Guides and Counting Number, with a CSS transition for the entrance and your theme's tokens for every colour. Made for the scale proof under a hero or between features, for a product whose count is the pitch.
FAQ
How do I change the number?
Change DINNERS at the top of the file. The same figure is written out in DINNERS_TEXT, an unseen copy that reserves the count's final width, so it follows the number by itself. Change the sentence under the count to say what it counts, and set duration on the Counting Number for a faster or slower roll (it is 2.4 seconds here).
When does the count start?
When about a quarter of the number is on screen, once. The Counting Number uses an intersection observer and stops watching after the first time, so scrolling away and back does not restart it. Set trigger to mount and it counts as soon as the page shows it, which suits a block high on the page.
What does it show with reduced motion?
The final value at once, with no count. A visitor without script also sees the final value, because the animated copy is hidden when scripting is off. Screen readers read the real value in every case, never the numbers on the way.
Does the page move while it counts?
No. The number is in tabular figures, so every digit is the same width, and an unseen copy of the final value holds the space the number will fill. The count is start-aligned inside that space and the digits grow into it.
How do I change the employers?
Edit EMPLOYERS: each entry is a name, an icon (any Lucide icon), a lettering and a mark that places the icon beside, inside a badge, in a ring or after the name. Keep it to six so every row of the strip is full: two across by three on a phone, three by two from sm and one row from lg. The names are fictional placeholders.