Timeline

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

• data/timeline
• Data
• list
• Full frame
• 7 s (3–40 s)

16:99:161:14:5

Live in your browser

0.00 / 7.00 s

Render it

npx volito render data/timeline --prop title="How we got here" --out timeline.mov

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

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

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("data/timeline"), { props: { title: "How we got here" }, out: "timeline.mov" });

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

Props

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

Parts

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

Tags: timeline, history, milestones, roadmap, 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.

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.

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.