Get it on npm

KPI tiles

Key numbers as tiles: each label, its value counting up, a change chip (up in green, down in red) and a small trend line — four across, two by two or stacked.

  • data/kpi-grid
  • Data
  • stat
  • Full frame
  • 6 s (3–30 s)
Style
Live in your browser
KPI tiles at 16:9
0.00 / 6.00 s
npx volito render data/kpi-grid --style cream --out kpi-grid.mov
Playing live with volito/browser, the engine a render uses. Each tab lays the item out again for that shape, not a crop.

Render it

npx volito render data/kpi-grid --prop title="This month" --out kpi-grid.mov

That writes ProRes 4444. The same item in another shape, brand or format:

volito render data/kpi-grid --aspect 9:16 --style cobalt --out kpi-grid-9x16.mov
volito render data/kpi-grid --format mp4 --out kpi-grid.mp4
volito still data/kpi-grid --t 3 --out kpi-grid.png
volito info data/kpi-grid     # every prop and part
volito add data/kpi-grid      # copy its source into ./motion to edit

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("data/kpi-grid"), { props: { title: "This month" }, out: "kpi-grid.mov" });

Or ask an agent with the MCP server connected: “Render the Volito kpi tiles (data/kpi-grid) in 9:16, in our brand.”

Props

Set each with --prop name=value, or all at once with --props and a JSON object.

PropTypeDefaultTakes
titletextThis month≤ 50 chars
rows
Tiles (Label: value)
list{"label":"Views","value":1240000,"suffix":"","delta":18}; {"label":"Watch hours","value":48200,"suffix":"","delta":9}; {"label":"Click-through","value":6.4,"suffix":"%","delta":-2}; {"label":"New subscribers","value":3120,"suffix":"","delta":24}—

Parts

Each part takes any move, ease or idle: --motion ground.in=pop.

PartWhat it is
groundthe ground
titlethe heading
tileseach tile

Tags: kpi, dashboard, metrics, tiles, numbers

More in Data

Line chart

A line draws on through its points over a soft area, each point popping as the line reaches it, the last value called out, against an optional target.

Donut chart

Segments sweep round a ring one after another, the centre counts up to the total (or the first share), and a legend lists each part.

Bar chart race

Ranked bars grow and overtake each other as the periods advance; the axis rescales and the period counts up in the corner.

Goal meters

Rows of capsule meters fill to their share of a goal, each with its label and a percentage counting up.

Versus

Two sides face off: a label and a big number counting up on each, a VS badge popping between them and a split bar settling to their ratio.

Timeline

Milestones along a line that draws itself: each date's dot pops as the line reaches it and its words rise beside it.