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 <item> 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 <n> 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", from: 0.8, to: -0.4, level: 0.5 },
    auto: false,   // true adds the motion's own cues on top
  };
}

Each cue takes at, dur, level (0–2), pitch (semitones), pan (-1…1) and seed. The track is stereo 48 kHz, limited, with a room; --sound-out track.wav writes it alone for an editor's timeline beside a ProRes overlay. MP4 and HEVC carry AAC, ProRes carries PCM, WebM carries Opus; PNG and GIF carry none. volito api prints the whole sound reference.

CLI

volito list                                   # every item
volito info stat                              # what it is, every prop
volito styles                                 # the built-in brand styles
volito moves                                  # every move, ease, idle, hit and mood
volito sheet title-card --mood playful --seed 7   # a new choreography
volito sheet stat --prop value=72 --prop suffix=% --prop chart=ring   # frames across time, one PNG
volito still title-card --aspect 9:16 --t 1.5 --out frame.png
volito render banner --prop headline="Doors open at 9" --format webm --out banner.webm
volito check ./my-graphic.js                  # run it at every aspect, report problems

Graphic specs

Any set of options can be saved as a spec: one JSON file for one graphic that every command takes in place of an item. Keep it in your repo, review it, hand it to an agent; options on the command line win over it.

volito spec lower-third --prop name="Priya Sharma" --style ember --aspect 9:16 --out priya.volito.json
volito validate priya.volito.json            # its props, parts, files and aspect against the item
volito render priya.volito.json --prop role="Founder"
volito schema                                # the JSON Schema (also at https://volito.dev/schema/graphic.v1.json)

{
  "$schema": "https://volito.dev/schema/graphic.v1.json",
  "volito": 1,
  "item": "essentials/lower-third",
  "props": { "name": "Priya Sharma", "role": "Product designer" },
  "style": "./DESIGN.md",
  "aspect": "9:16",
  "motion": { "name": { "in": "typewriter" } },
  "mood": "elegant",
  "seed": 4,
  "sound": { "bed": "Dm" },
  "render": { "format": "mov", "out": "renders/priya.mov" }
}

Paths inside a spec (a DESIGN.md, a program, a transcript, image props) are relative to the spec file. program points at your own frame(t, $) file, or code holds it inline. volito bundle priya.volito.json packs the spec and those files into one priya.volito that every command takes, anywhere.

Review before you render

volito review lower-third --prop name="Priya Sharma" --aspect 9:16

The check at each aspect, then what the frames show: when the graphic settles, how long it holds still and when it leaves (with a warning when the entrance is slow or the hold too short for its words), how much of an overlay sits under Reels', Shorts' and TikTok's interface at 9:16, and a contact sheet per aspect in volito-review/<item>/ with a review.md.

AI agents (MCP)

npx volito init          # adds the server for Claude Code, Cursor and VS Code, and the skill
npx volito doctor        # what is ready: Node, FFmpeg formats, fonts, each agent's setup

Or by hand: claude mcp add volito -- npx -y volito mcp, codex mcp add volito -- npx -y volito mcp, and for Cursor, Windsurf and other MCP clients:

{ "mcpServers": { "volito": { "command": "npx", "args": ["-y", "volito", "mcp"] } } }

The preview, still, check, review, render and sound tools take an item, your own code or a spec file, plus motion, mood, seed and speed. A ready-made agent skill is in skills/volito/SKILL.md — npx volito init installs it for Claude Code, npx skills add monarcpro/volito for other agents, or copy it to ~/.claude/skills/volito/ for Claude Code.

Node API

import { findItem, renderVideo, renderStill, renderSheet, checkItem } from "volito";

const item = findItem("essentials/lower-third");
const result = await renderVideo(item, {
  props: { name: "Priya Sharma", role: "Product designer" },
  style: "ember",                 // or the text of a DESIGN.md, or { colors, fonts, … }
  colors: { accent: "#00A86B" },  // overrides
  aspect: "9:16",
  out: "priya.mov",
});
console.log(result.file, result.frames, result.warnings);

Browser

import { loadRegistry, findItem, createPlayer } from "volito/browser";

const registry = await loadRegistry();       // the packs, from jsDelivr (or pass your own base URL)
const player = await createPlayer(canvas, findItem(registry, "headline"), {
  props: { text: "Stop editing. *Start directing.*" },
  style: "neon",
  aspect: "16:9",
});
player.play();   // also: pause(), seek(t), update({ props }), destroy()

The player runs each program in a sandboxed Web Worker and draws through the same SVG path as the renderer, so what plays on the page is what renders. Fonts load from base (the package's own fonts/ on jsDelivr by default); serve the package's fonts/ and dist/registry.json to stay offline.

<volito-player>

The same player as an HTML element, with controls and aspect tabs. One script, no build step:

<script type="module" src="https://cdn.jsdelivr.net/npm/volito/dist/player.js"></script>

<volito-player item="essentials/lower-third"
  props='{"name":"Ada Lovelace","role":"First programmer"}'
  brand="cobalt" aspects="all" controls autoplay loop></volito-player>

Or import "volito/player" in a bundled app. Each tab lays the item out again for that aspect, not a crop. It loads when it nears the screen, pauses off screen and in a hidden tab, and does not autoplay for readers who prefer reduced motion.

Properties and methods: play(), pause(), seek(t), load(), currentTime, duration, paused, ended, ready, playbackRate, props, brand, aspect, options (anything else a build takes: words, media, beats), program, warnings and player (the MotionPlayer underneath). Events, none of which bubble: ready, play, pause, ended, timeupdate (about ten a second), durationchange, aspectchange, warnings and error. Style it with CSS custom properties (--volito-accent, --volito-stage, --volito-max-height, …) or ::part(); Space, ←/→ (a frame, Shift for a second), Home and End work when it has focus. examples/player.html shows each of these.

Interactive states

A graphic can be a live UI element: its timeline cut into named states that page events and your code switch between. Every item in the ui pack declares its own, so this works with no setup:

<volito-player item="ui/button" aspect="1000x500" ground="none" props='{"label":"Get started"}'></volito-player>
<script type="module">
  const button = document.querySelector("volito-player");
  button.addEventListener("statechange", (e) => console.log(e.detail.to)); // enter → idle → hover → press → loading
  await fetch("/api/signup", { method: "POST" });
  button.state = "done";                                                  // lands on the check
</script>

Any graphic can have states: states='{"idle":{"from":"idle","to":"hover","play":"loop"},…}' (times are seconds or beat names; play is once, loop or hold; next hands a finished once on), and on="pointerenter(idle): hover; pointerleave(hover): idle; click: press" maps page events to them.

Brand styles

36 built in. MONARC PRO's: ember, cream, mono, neon, pop, studio, and the explainer art styles whiteboard, sketch, pastel, pixel, collage, diorama, clay, storybook. And Volito's own, each with an animated pattern for a ground:

volito styles lists them all. Or pass a DESIGN.md:

---
name: acme
mode: light
colors:
  accent: "#00A86B"
  accent2: "#FFD23F"
  ink: "#101418"
  paper: "#FAFAF7"
fonts:
  display: "Poppins:800"
  text: "Inter:600"
motion: bouncy
surface: glass
---
# Acme
Friendly, confident, never shouty.

Faces available: Inter, Space Grotesk, Space Mono, Poppins, Playfair Display, Montserrat, Anton, Outfit, Gabarito, Caveat, Press Start 2P, Permanent Marker, Patrick Hand, Fredoka, IM Fell English, Bebas Neue, DM Serif Display, Archivo Black, Syne, Unbounded, Righteous, Orbitron, Pacifico, Fraunces and Bricolage Grotesque.

Patterns

A style's texture can name any of sixteen animated patterns, and every ground the items draw picks it up: dots, plus, graph, hatch, stripes, checker, halftone, dither, waves, rings, mesh, confetti, bauhaus, tiles, pills, sunburst (the editor's grid, glow, grain, paper, board, parchment, pixel and studio still work). Programs can draw one anywhere:

s += $.pattern(t, "halftone", { box: { x: 0, y: 0, w: W, h: H }, a: 1.2, scale: 1, speed: 0.5 });

Options: box, color, color2, a (strength), scale, speed, angle, at ([x, y] for rings, halftone, sunburst), count, seed, r. They are pure functions of time like everything else — no GPU.

Write your own

volito new promo-card        # item.json + frame.js from a template
volito sheet ./motion/promo-card
volito api                   # the whole $ runtime
volito guide                 # how items and packs are laid out

function frame(t, $) {
  const p = $.data, k = $.k;                       // props, and the canvas scale (1 at 1080 px)
  const tin = $.beat("in", 0.2);
  return $.g($.enter(t, tin, { dy: 60 * k, ox: $.W / 2, oy: $.H / 2 }),
    $.card($.W / 2 - 320 * k, $.H / 2 - 110 * k, 640 * k, 220 * k),
    $.text($.case(p.title ?? "Hello"), { ...$.font("display"), size: 80 * k, x: $.W / 2, y: $.H / 2 - 44 * k, anchor: "middle" }));
}

A program is a pure function of t: no Date, Math.random (use $.hash), timers, network or DOM. Size by $.k, colour from $.c, faces from $.font(role), and a brand's DESIGN.md re-skins it. A pack is a folder with pack.json, a shared.js of helpers and one folder per item; load it with --packs <dir>.

How it renders

Node runs each program in a fresh vm context holding the same worker source MONARC PRO uses. Only strings and numbers cross into it, and eval, Function, require, process and the network are out of reach. Text is measured with fontkit against the bundled faces; frames are rasterised by resvg; text beyond a face's Latin cut is shaped by fontkit and drawn as outlines, and dash patterns written against pathLength (which resvg ignores) are scaled to each shape's real length first. Frames that don't change are drawn once. The motion kit, the 3D kit and the map data ship as libraries that are added to a program when it is built: items stay small, and the 60 000-character limit applies only to what an item's author (or an agent) wrote.

vm keeps mistakes contained, but it is not a security boundary. Run packs you trust, as you would any npm package.

Development

pnpm install          # Node 22.18 or newer for development (the package itself runs on Node 20.10+)
pnpm build            # fonts/ from Fontsource, then dist/
pnpm test
node dist/cli.js sheet lower-third --mood playful --seed 7 --out sheet.png

node scripts/review.mjs <aspect> <style> [items | pack:<id>] [times] writes contact sheets to out/, node scripts/styles.mjs [styles] [items] one row per style, node scripts/strip.mjs <items> <aspect> <style> <times> '<props JSON>' the same props across several items, node scripts/variants.mjs <item> one item under many seeds, and node scripts/demo-grid.mjs <item> a 3×3 video of nine choreographies.

The engine in src/engine/ (the runtime every program draws with, its sandbox and the brand styles) is the same code MONARC PRO uses, copied from MONARC PRO's core so this repo stands alone; src/engine/SOURCE.json names the commit. With a MONARC PRO checkout (../monarc) next to this one, pnpm sync-engine brings it up to date and node scripts/sync-engine.mjs --check reports drift. Packs, the motion kit (src/kit.ts), the extra faces (src/fonts-extra.ts), styles (src/styles-extra.ts) and patterns (src/patterns.ts) live here; src/engine.ts splices the faces and patterns into the runtime without editing the copy.

Licence

• The engine: MIT.
• The MONARC packs: the MONARC Packs License. Use them in any video, personal or commercial, with no attribution required. Don't resell them as templates.
• The fonts: each family's SIL Open Font License, in fonts/licenses/ of the installed package (pnpm build writes that folder in a checkout).

Contributing

Issues and pull requests are welcome: CONTRIBUTING.md covers the setup, the tests and how items and packs are written. Report security problems privately, as SECURITY.md says.

Made by MONARC STUDIOS, the team behind MONARC PRO.