Get it on npm

Getting started

Volito turns a sentence into a finished motion graphic. Every graphic is a small program, frame(t, $), that returns the SVG of one frame, so it renders the same every time, at any size, in any brand.

Volito is the motion graphics engine inside the MONARC PRO video editor, opened up as a library by MONARC STUDIOS. It ships 96 ready-made graphics in 10 packs, 36 brand styles and 16 animated patterns, with a CLI, a Node API, a browser player and an MCP server for AI agents. It renders in Node with no browser and no GPU.

Install

npm install volito      # or run it with npx, nothing to install

Node 20.10 or newer. Video formats need ffmpeg on your PATH (or VOLITO_FFMPEG pointing at it); stills, contact sheets and PNG frames do not. WebM needs an ffmpeg built with libvpx.

Volito was first published as @monarcpro/motion. That package is deprecated and points here; the API is the same.

Your first render

npx volito render lower-third \
  --prop name="Priya Sharma" --prop role="Product designer" \
  --style ember --aspect 16:9 --out priya.mov

That writes priya.mov: a five-second lower third in ProRes 4444 with a real alpha channel, ready to drop onto footage in Premiere, Resolve, Final Cut, After Effects or CapCut. Change --format for WebM, MP4, HEVC, GIF or a folder of PNG frames (see Rendering and formats).

Look before you render

A contact sheet shows frames across time in one PNG, so you (or an agent) can see whether the words fit and the motion lands before spending time on a video:

volito sheet lower-third --prop name="Priya Sharma" --out sheet.png
volito still lower-third --t 1.5 --aspect 9:16 --out frame.png
volito check lower-third --prop name="A very long name that may not fit"

check runs the item frame by frame at every aspect. It reports errors (a throw, a frame that does not parse, a graphic that draws nothing), warnings (text running off the frame, props that do not fit) and each aspect's slowest frame.

Put it in your brand

Items draw with colour roles and type roles, not fixed colours, so one flag re-skins the whole library. Pass one of the 36 built-in styles, or your own DESIGN.md:

volito render title-card --prop title="Launch day" --style cobalt --out title.mov
volito render title-card --prop title="Launch day" --style ./DESIGN.md --out title.mov
volito render title-card --prop title="Launch day" --style ember --accent "#00A86B" --display "Fraunces:900"

Brand styles and patterns lists every style and the DESIGN.md format.

Pick the frame

--aspect 16:9 | 9:16 | 1:1 | 4:5 (or WIDTHxHEIGHT) and --duration in seconds. Layouts follow the canvas and keep to title-safe areas, including the space Reels, Shorts and TikTok reserve for their own buttons on 9:16.

Where next

  • The CLI: every command and option.
  • Packs and items: all 96 graphics and the props each one takes.
  • Motion: any part takes any of 38 moves, plus moods and seeds.
  • AI agents: the MCP server for Claude Code, Cursor and Codex.
  • Write your own: a graphic is a function of time; here is how to write one.