Volito

Volito

Brand-aware, voice-synced motion graphics as code — for developers and AI agents.

Website · Docs · Packs · For agents · npm · Changelog

By MONARC STUDIOS, the team behind MONARC PRO. Volito is the motion graphics engine inside the MONARC PRO video editor, opened up; the name is Latin for “to flutter”. Every graphic is a small program — function frame(t, $) returns the SVG of one frame — so it is readable, diffable, seekable to any frame, and something an AI agent can write and fix. It ships with 107 ready-made graphics in twelve packs (3D, maps, transitions, kinetic type, interactive UI and filter effects among them), 36 brand styles, sixteen animated patterns, a CLI, a Node API, a browser player and an MCP server, and renders to ProRes 4444 or HEVC with alpha, WebM, MP4, GIF, PNG frames or SVG.

• One design, every brand. Items draw with colour roles and faces, not fixed colours: pass one of 36 built-in styles, your DESIGN.md, or a couple of overrides, and the whole pack re-skins.
• One design, every aspect. Layouts follow the canvas and keep to title-safe areas, including the space platforms reserve on 9:16. 16:9, 9:16, 1:1 and 4:5 from the same item.
• On the voice. Give a transcript and text lands on the words that say it.
• Drops onto footage. Overlays render with real alpha for Premiere, Resolve, Final Cut, After Effects and CapCut.
• Sounds like it moves. --sound gives any render a sound track Volito synthesises itself — a pop for every spring, a whoosh for every move across the frame, ticks for letters, a hit for a slam, a bed in a key — and a program can design its own cues beside its frames.
• Agent-native. An MCP server gives Claude Code, Cursor and other agents tools to find, preview (as an image they can see), check and render graphics — or to write their own.
• Many scripts. Latin, Latin Extended, Vietnamese, Cyrillic, Greek and Devanagari (Hindi), shaped properly.

This intro is a Volito program: kinetic type, a 3D wordmark and an end card, rendered in Node.

npx volito render lower-third \

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

Install

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

Volito was first published as @monarcpro/motion; that package is deprecated in favour of this one.

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

The packs

107 graphics in twelve packs. Every one takes any brand style and any aspect, and every part of it takes any move.

volito info lists every prop. To see them all live, serve this package's folder and open examples/gallery.html.

Motion without limits

Every item is made of named parts (volito info lower-third lists them: scrim, spine, plate, name, role). Any part takes any move, and the moves combine freely:

volito render lower-third \

--motion name.in=typewriter --motion plate.in=iris --motion "*.ease=bouncy" \ --motion role.emphasis=pulse@2 --motion spine.idle=pulse --out priya.mov

Or let it choreograph itself: --mood energetic | elegant | playful | cinematic | glitchy | minimal | retro | kinetic, and --seed for a new take on every number (the same number always moves the same way). --speed 2 plays it all twice as fast. volito moves lists everything. Programs you write get the same kit: const M = motion($, t); M.part("card", { at, in: "pop", box }, markup).

3D and maps

The 3D items are real geometry, not tricks: meshes are lit, faces turned away are culled, everything is sorted far to near and projected through a perspective camera — then drawn as SVG paths, so 3D renders on any machine with no GPU, at the same speed as the rest. 3D text is extruded from the outlines of the bundled faces (read straight from the font files), so a logo turns in the brand's own type.

function frame(t, $) {

const S = scene3d($, { camera: { yaw: -20 + 40 * (t / $.dur), pitch: -8 } }); S.add(S.text("VOLITO", { face: $.font("display"), size: 220 * $.k, depth: 60 * $.k, color: $.c.fg, side: $.c.accent })); return S.render(); }

Maps use Natural Earth's countries (177, packed into 30 KB): worldMap($, { center, zoom }) projects them flat (Equal Earth), worldGlobe(S, …) puts them on a 3D globe, and worldFind("UK") finds one by name, short name or ISO number. volito api documents both.

Sound design

Every render can carry sound, and Volito makes it the way it makes pictures: from code, from nothing. No sample library, no files to find. --sound reads the graphic's own motion — every part's move leaves a mark — and gives each its sound: a spring pops, a move across the frame whooshes (louder the further it travels), letters tick, a typewriter types, a slam hits, a glitch zaps, a burst sparkles. --bed Dm lays a pad under it in a key, and it steps back under every hit on its own.

volito render logo-sting --prop wordmark=VOLITO --sound --bed Dm --format mp4 --out sting.mp4

volito sound lower-third --prop name="Priya Sharma" --out priya.wav # the track alone, with its cue list

A program designs its own sound beside its frames — function sound($) runs once with the same $ ($.dur, $.beat, $.at(word), $.data), so cues land on the same beats the picture uses:

function sound($) {

return { cues: [ { at: 0.2, kind: "riser", dur: 1.1 }, { at: $.beat("in", 1.3), kind: "hit", level: 1.1 }, { at: 1.5, kind: "shimmer", dur: 1.2, pan: 0.3 }, { at: -0.6, kind: "ding", note: "A5", level: 0.6 }, // negative counts from the end ], bed: { key: "D", mode: "minor", fr