Goal meters

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

  • data/goals
  • Data
  • chart
  • Full frame
  • 5 s (3–30 s)
Live in your browser
Goal meters at 16:9
0.00 / 5.00 s
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/goals --prop title="Launch checklist" --out goals.mov

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

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

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("data/goals"), { props: { title: "Launch checklist" }, out: "goals.mov" });

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

Props

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

PropTypeDefaultTakes
titletextLaunch checklist≤ 50 chars
rows
Rows (Label: percent)
list{"label":"Footage cut","value":100}; {"label":"Captions","value":85}; {"label":"Colour grade","value":60}; {"label":"Sound mix","value":35}—

Parts

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

PartWhat it is
groundthe ground
titlethe heading
rowseach meter

Tags: chart, progress, goal, percent, data

More in Data