Kinetic Stat Board
Metrics, deltas and sparklines that all count in together from one shared loop.
- Category
- Sections
- Added
- 2026-09-20
- Deps
- 1
- Updated
- 2026-09-20
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
"use client";
import { useEffect, useRef, useState } from "react";
type Stat = {
k: string;
v: number;
prefix?: string;
suffix?: string;
delta: number;
up: boolean;
series: number[];
};
export function KineticStatBoard({
stats,
duration = 1100,
columns = 2,
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this section
A board of counters is usually built as a grid of independent counter components, each with its own frame loop. They then start on slightly different frames and finish at slightly different times, so what should read as one movement arrives as a ragged sequence — and it costs as many scheduled loops as there are tiles for no benefit. Driving everything from a single progress value fixes both: each tile multiplies its target figure, its delta percentage and the number of sparkline points drawn by the same number, so the digits, the trend and the line all land on the same frame. The easing is deliberately easeOutCubic rather than a spring, because a metric that visibly sails past its value and settles back looks like a bug even when the same curve would be charming on a bar. The unglamorous detail that does the most visible work is `tabular-nums`: without it the tile resizes continuously as digits change width during the count, which is the clearest tell of a cheap counter.
Curator’s note
Built for viberdy 2.1. One shared progress value, not one loop per tile — the board should arrive as a single gesture.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Animated Stat Grid
sectionsA row of stat counters that count up together the moment they scroll into view.
Odometer Counter
text effectsA stat number that rolls up from zero to its target the moment it's in view.
Progress Arc Gauge
componentsAn SVG arc gauge with a needle and a readout that counts to its value.