Animated Count Testimonials Block for React

Edit FIGURES and QUOTES at the top of the file. Each figure has a value, the decimals it always shows, a suffix written after the number (+, s, %), a duration in milliseconds, a label and a line beneath it. Counting Number writes the thousands separators itself in a fixed en-US locale, so the server and the browser agree. Only put real numbers here.

Each figure counts once from 0 as soon as the section loads, racing off and slowing into its value over its own duration. Replay mounts the three counters again, so they count from 0 a second time. The space for each figure is held by an invisible copy of its final text, so nothing moves while the digits change.

With reduced motion turned on, every figure shows its final value at once and Replay is hidden, since there is nothing to replay. With scripts off, the final values show as plain text. The entrance fade is CSS and stops under reduced motion too.

Always the final value, never the numbers flying past: each counter holds its value in visually hidden text and hides the counting digits. The figures are a description list, so each is read with its label and the line beneath it. Replay is a named button; on a phone only its icon shows, and its name stays "Replay count".

Below sm each figure is a row: its label and line on the start side, the number on the end side, so three figures take about 200 pixels instead of a screen. From sm they are three columns split by shared hairlines, with the number first and as large as text-6xl on desktop.

Yes: pass the real numbers as each figure's value. A Counting Number that gets a new value counts on from the number it is showing, so a total that updates while the page is open ticks up to the new figure.

It is a link (href="#"): point it at your customer stories page. The Shine Button renders the link it's given with render, with nativeButton={false}.