Animated Counter Logos Block for React

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 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.

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.

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.

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.

The strip ends the block. On a page the next section draws its own top rule along the strip's foot, so a line here would double it, and the column has no bottom padding for the same reason.