Kinetic Stat Board
Metrics, deltas and sparklines that all count in together from one shared loop.
DOM + CSS0 deps1 file · 3 KB TSX
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
// ---------------------------------------------------------------
}Details
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.
