Get it on npm

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.

  • data/versus
  • Data
  • chart
  • Full frame
  • 5 s (3–30 s)
Live in your browser
Versus 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/versus --prop title="Hours to publish one video" --prop left="Before" --out versus.mov

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

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

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("data/versus"), { props: { title: "Hours to publish one video", left: "Before" }, out: "versus.mov" });

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

Props

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

PropTypeDefaultTakes
titletextHours to publish one video≤ 50 chars
lefttextBefore≤ 20 chars
leftValue
Left value
number9.50 – 1000000000000
righttextWith MONARC≤ 20 chars
rightValue
Right value
number1.50 – 1000000000000
prefix
Before numbers
text—≤ 3 chars
suffix
After numbers
text h≤ 6 chars
decimalsnumber10 – 3

Parts

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

PartWhat it is
groundthe ground
titlethe heading
leftthe left side
rightthe right side
badgethe VS badge
splitthe split bar

Tags: comparison, versus, vs, split, data

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.

Timeline

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

Funnel

Stages stack from widest to narrowest, each dropping in with its count, and the share that carries on to the next stage between them.