v0.1.0 · open source · by MONARC PRO

Motion graphics, from one sentence.

Built for Claude Code. Describe the motion; your agent picks one of 96 graphics, puts it in your brand, checks every frame and renders it.

$ npx -y volito mcp

Try a sentence

mo.jsMeet Mo, a motion graphic with four parts. Every part takes any move.

hi! poke me

// mo.js · the choreography above, as a program
function frame(t, $) {
  const M = motion($, t);
  return M.part("body",  { at: 0.00, in: "squash"  }, skin($),
    M.part("cap",   { at: 0.11, in: "bounce"  }, cap($)),
    M.part("eyes",  { at: 0.26, in: "drop"    }, eyes($)),
    M.part("badge", { at: 0.33, in: "stretch" }, badge($)));
}
// mood "playful", seed 7

Every graphic in the library is built this way: named parts, each posed by a move. Change one line and that part moves differently. Read about motion

Say what you want. Watch it happen.

Pick a sentence and follow what an agent does with Volito. Every result here is a real render from the package.

YOUR SENTENCE

“A bold launch title for Aero Pro, in our cobalt brand”

AGENTdone · rendered

Reading the sentence
Chose promo/launch
Styled cobalt · checked 16:9 9:16 1:1 4:5

The launch title Aero Pro in the cobalt style

$ npx volito render promo/launch --prop name="Aero Pro" --style cobalt --out aero-pro.mov

Every one of these is a few lines of code.

96 graphics in 10 packs, in 36 brand styles, at any aspect. Hover to hold the wall still.

3D · Logo

Every frame is a function of time.

A graphic is frame(t, $): ask for any moment and you get exactly that frame, the same every time. Drag through real frames from the engine.

A frame of the 3D word cube rolling between words, in the aurora style — Framet = 0.05 s

// the engine asks for one moment
frame(0.05, $)

// and gets exactly one picture back
<svg> 1920 × 1080
frame 1 of 24 on this strip
drawn in Node by resvg
no browser, no GPU

3d/cube in the aurora style: a prism of words lit and rolled in real 3D, drawn as flat SVG paths.

Look closer.

Move your cursor over the print. Under the halftone is the real frame, rendered at 1600 pixels in a fraction of a second.

Open source, and small.

96: graphics in 10 packs
36: brand styles
38: moves for any part
51 MB: installed, no browser
0.14 s: for a still on a laptop

$ npm install volito

Read the docs GitHub

Engine MIT. Packs free to use in any video, personal or commercial; not for resale as templates. Speeds measured on an Apple M4 laptop.

Questions

What is Volito?

An open motion graphics engine with 96 ready-made graphics. Each graphic is a small JavaScript program, frame(t, $), that returns the SVG of one frame, so it renders the same every time, at any size, in any brand.

Which agents work with it?

Any agent that speaks MCP: Claude Code, Cursor, Codex and others. Add the server with npx -y volito mcp and the agent gets tools to find, preview, check and render graphics.

Is it really free?

Yes. The engine is MIT. The packs are free to use in any video, personal or commercial; they just can’t be resold as templates.

Can I use my own brand?

Pass a DESIGN.md with your colours, fonts and motion feel, or start from one of 36 built-in styles. Every graphic re-skins.

What does it render to?

ProRes 4444 or HEVC with real alpha for editors, plus WebM, MP4, GIF, PNG frames and SVG. Video formats need FFmpeg; stills don’t.

Does it need a browser or a GPU?

No. Frames are drawn in Node with resvg, so it installs in 51 MB and runs on a laptop, a server or CI.

How does it relate to MONARC PRO?

Volito is the motion graphics engine inside the MONARC PRO video editor, opened up as a library by MONARC STUDIOS. A graphic renders the same on a MONARC PRO timeline, in a browser and from the CLI.