shadcn.io is not affiliated with official shadcn/ui
Animated Count Testimonials Block for Vue
Three headline figures that count up to their totals when the section loads, in one hairline band with a Replay button that runs the count again, and two customer quotes in a second band beneath.
Installation
Overview
Open a testimonials section with numbers that race up to their totals, for Vue with Ark UI. A compact header says whose numbers they are (here Wardline, an on-call and incident-response tool) and holds the one Shine Button, with a Replay button beside it. Under it, one band between the page's solid hairlines holds three figures, a count of teams, a median response time and a renewal rate, each counting from zero to its value when the section appears, with plus marks where the band meets the rails. A second band holds two customer quotes with an initials avatar, a name and a role. On a phone the figures become compact rows, the label and its line beside the number, so the first quote stays on the first screen. It's built from Counting Number, Shine Button, Button, Avatar and Guides, with CSS entrances that stay still under reduced motion and your theme's tokens only. For landing pages that want a moment of impact before the proof.
FAQ
How do I change the figures and quotes?
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.
When do the numbers count, and what does Replay do?
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.
What happens with reduced motion or without scripts?
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.
What do screen readers hear?
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".
How do the figures fit a phone?
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.