Steps

A numbered list or checklist, full frame: the heading lands, then each step slides in on its own card — numbered, or ticked off one by one.

  • essentials/steps
  • Essentials
  • list
  • Full frame
  • 6 s (3–30 s)
Live in your browser
Steps at 16:9
0.00 / 6.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 essentials/steps --prop kicker="The framework" --prop title="Three steps to a better hook" --out steps.mov

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

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

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("essentials/steps"), { props: { kicker: "The framework", title: "Three steps to a better hook" }, out: "steps.mov" });

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

Props

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

PropTypeDefaultTakes
kickertextThe framework≤ 28 chars
title
Heading
textThree steps to a better hook≤ 48 chars
stepslistOpen on the payoff; Cut every pause; Land one idea per shot—
markerchoicenumbersnumbers | checks
gap
Seconds between steps
number0.350.1 – 5

Parts

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

PartWhat it is
groundthe brand's ground
kickerthe small label
titlethe heading
stepseach step's card

Tags: list, steps, how to, process, checklist, agenda, tips, framework

More in Essentials