Get it on npm

Leaderboard

A leaderboard: ranked rows slide in, each with its place, an initials badge, the name, a bar and the score counting up, and how many places it moved; the leader wears a crown.

  • data/leaderboard
  • Data
  • list
  • Full frame
  • 6 s (3–30 s)
Style
Live in your browser
Leaderboard at 16:9
0.00 / 6.00 s
npx volito render data/leaderboard --style cream --out leaderboard.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/leaderboard --prop title="Top creators this week" --prop suffix="pts" --out leaderboard.mov

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

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

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("data/leaderboard"), { props: { title: "Top creators this week", suffix: "pts" }, out: "leaderboard.mov" });

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

Props

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

PropTypeDefaultTakes
titletextTop creators this week≤ 50 chars
rows
Rows (Name: score)
list{"name":"Ana Ruiz","score":9820,"change":2}; {"name":"Kenji Mori","score":9410,"change":-1}; {"name":"Lea Novak","score":8760,"change":1}; {"name":"Sam Okafor","score":8125,"change":0}; {"name":"Priya Das","score":7690,"change":-2}—
suffix
After scores
textpts≤ 6 chars

Parts

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

PartWhat it is
groundthe ground
titlethe heading
rowseach row

Tags: leaderboard, ranking, scores, top, list

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.