Volito

Volito

具备品牌感知能力、与语音同步的代码化动态图形——面向开发者和 AI Agent。

网站 · 文档 · 素材包 · 面向 Agent · npm · 更新日志

由 MONARC STUDIOS 打造，他们也是 MONARC PRO 背后的团队。Volito 是 MONARC PRO 视频编辑器中的动态图形引擎，如今已开放使用；其名称在拉丁语中意为“飘动”。每个图形都是一个小程序——function frame(t, $) 返回一帧的 SVG——因此易于阅读、比较差异、跳转到任意帧，也是 AI Agent 能够编写和修复的内容。它内置 107 个现成图形，分属 12 个素材包（包括 3D、地图、转场、动态字体、交互式 UI 和滤镜效果），以及 36 种品牌样式、16 种动画图案、命令行工具、Node API、浏览器播放器和 MCP 服务；可渲染为带 Alpha 通道的 ProRes 4444 或 HEVC、WebM、MP4、GIF、PNG 帧或 SVG。

• 一种设计，适配每个品牌。 图形使用颜色角色和表面绘制，而非固定颜色：传入 36 种内置样式之一、你的 DESIGN.md 或几个覆盖项，即可为整个素材包换肤。
• 一种设计，适配每种画幅。 布局会跟随画布变化，并保持在标题安全区域内，包括平台为 9:16 画幅预留的空间。同一图形可用于 16:9、9:16、1:1 和 4:5。
• 跟随语音。 提供转录文本后，文字会与对应的语音内容同步呈现。
• 可叠加到素材上。 叠加层以真正的 Alpha 通道渲染，适用于 Premiere、Resolve、Final Cut、After Effects 和 CapCut。
• 音效随动。 --sound 可为任意渲染添加由 Volito 自行合成的音轨——每次弹簧动画都配一个弹跳声，每次横越画面的移动都配一个呼啸声，每个字母都配有滴答声，猛击时配有撞击声，音符上还有铺底音效——程序还可以在生成每帧的同时设计自己的提示音。
• 原生支持 Agent。 MCP 服务为 Claude Code、Cursor 和其他 Agent 提供查找、预览（以它们能看见的图像形式）、检查和渲染图形的工具，也能让它们编写自己的图形。
• 支持多种文字体系。 支持拉丁文、扩展拉丁文、越南文、西里尔文、希腊文和天城文（印地语），并能正确进行文字塑形。

_{这个片头是一个 Volito 程序：动态字体、3D 字标和片尾卡，使用 Node 渲染。}

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

安装

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

Volito 最初以 @monarcpro/motion 名称发布；该软件包现已弃用，推荐改用此软件包。

需要 Node 20.10 或更高版本。视频格式需要在 PATH 中提供 ffmpeg（或设置 VOLITO_FFMPEG）； 静态图、联系表和 PNG 帧则不需要。WebM 需要使用启用了 libvpx 的 ffmpeg。

这些素材包

12 个素材包共包含 107 个图形。每个图形都支持任意品牌风格和纵横比，且其中每个部分都支持任意动作。

素材包	项目
Essentials (14)	lower-third · title-card · headline（动态文字，与语音同步）· subscribe · social · callout · stat · bar-chart · steps · quote · banner · end-card · logo-sting · wipe
Broadcast (10)	五种风格的字幕条：lt-bars、lt-reveal（遮罩揭示）、lt-kicker、lt-pill（图片或首字母缩写、状态点）、lt-news（紧凑方框）；ticker（滚动字幕）、live-badge（观众数、时钟）、score-bug（队伍、比分、时钟、进球闪现）、location（地图针和地点卡片）、countdown
Social (8)	follow-card（个人资料、数量、点击 Follow）· notification（手机或桌面端）· notifications（层层叠起的通知）· comments（显示输入过程）· chat（带输入指示点的对话串）· post（数量和爱心）· now-playing（音乐卡片）· rating（星级、分数、评价）
Data (9)	line-chart（绘制动画、目标线）· donut · bar-race（跨时期超越）· goals（仪表）· versus · timeline · funnel · world-map（按数值填充国家、区域）· flight（两地之间的大圆航线）
3D (7)	logo-3d（凸起的文字标志、扫光）· title-3d（字母向上翻转）· number-3d（凸起的计数器）· card-flip（正反面）· cube（滚动的文字棱柱）· bars-3d（环绕摄像机）· globe（旋转至目标国家，航线弧线飞入）
Transitions (11)	在切点遮盖画面，揭示下一个镜头：iris（圆形、菱形、星形、方形）· blinds · doors（带包豪斯圆盘）· glitch · ink（摇曳绽开）· clock · tiles（包豪斯形状）· pixels · stripes · slices · whip——每种效果都可在切点显示文字
Annotate (10)	指向镜头中的事物（位置以画面百分比表示）：arrow（手绘或简洁）· circle · spotlight（柔化变暗）· focus（锁定目标的括号）· highlight（荧光笔、下划线、方框、删除线）· stamp（按压印章）· reactions（实时爱心、点赞、火焰）· pointer（引导线和卡片）· emphasis · markers（带编号）
Type (10)	动态文字：typewriter · word-swap（不断变化的文字）· split-flap · marquee（倾斜滚动条带）· echo · liquid-fill · decode · word-by-word · key-phrase（在标记的文字上添加马克笔效果）· stack（编辑风格）
Backdrops (9)	动态背景：pattern（16 种图案任选）· aurora · tiles（包豪斯图形背景）· retro-grid（合成波风格）· blobs（熔岩黏液）· gradient · starfield · bokeh · topo
Promo (8)	sale-badge（爆炸形）· price-card（倒计时、删除线、点击）· coupon（复制代码）· offer-countdown（D:H:M:S）· features（核对清单）· cta（按钮和光标）· launch · ribbon（交叉缎带）
UI (5)	交互状态（参见 Interactive states）：button（空闲、悬停、按下、加载、完成）· toggle · like（滚动计数）· loader（成功或失败）· bell（徽章、已读）
Effects (6)	SVG 滤镜，无需 GPU：grain（胶片颗粒，每帧胶片都会重新生成）· light-leak · glass（漂移色彩之上的磨砂卡片）· chromatic（通道分离并对齐）· warp（逐渐平息的液态涟漪）· neon（闪烁亮起）

volito info <item> 会列出所有属性。要实时查看全部效果，请提供此软件包所在文件夹的服务，并 打开 examples/gallery.html。

无限动效

每个项目都由命名的 部件 组成（volito info lower-third 会列出它们：scrim、spine、plate、 name、role）。任意部件都可以使用任意动效，动效之间可自由组合：

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

设置	可用值
in、out	38 种动效 — rise drop slide smear arc pop zoom push grow wipe iris shutter blinds diagonal blur flip turn spin roll swing skew stretch squash bounce elastic slam tilt float glitch flicker typewriter scramble … 退出动效会反向播放对应的动效。
ease	out inOut expo back elastic bounce，弹簧效果 snappy punchy bouncy calm wobbly，或 spring(f,d)、steps(n)、cubic(x1,y1,x2,y2)
from、outFrom	动效进入或离开的方向（left、right、up、down，以及对角线方向）
dur、delay、at、outAt、distance、intensity、origin、blur	时序、位移、缩放、枢轴、运动模糊
idle	持续播放的循环动效：float bob pulse breathe wiggle sway drift jitter spin heartbeat shimmer
emphasis	在指定时间、节拍或口语词处触发："[email protected], pop@now"（pulse pop shake jump wobble flash spin rubber tada）
split、order、stagger	整段文本，或按 lines / words / letters 拆分；顺序可选 forward reverse center edges random
keys	自定义关键帧：[{"t":0,"x":-300,"op":0},{"t":0.8,"x":0,"op":1,"ease":"bouncy"}] — 任意路径

也可以让它自动编排动效：使用 --mood energetic | elegant | playful | cinematic | glitchy | minimal | retro | kinetic， 并使用 --seed <n> 为每个编号生成新的效果（相同编号始终产生相同动效）。--speed 2 会让所有动效以两倍速度播放。volito moves 会列出所有动效。你编写的程序也能使用同一套功能： const M = motion($, t); M.part("card", { at, in: "pop", box }, markup)。

3D 和地图

3D 项目使用真正的几何体，而非视觉技巧：网格会受到光照，背向的面会被剔除，所有内容按由远及近排序，并通过透视摄像机投影——之后绘制为 SVG 路径，因此任何没有 GPU 的机器都能渲染 3D，速度与其他内容相同。3D 文本会从内置字体的轮廓中挤出（直接读取字体文件），因此 Logo 会以品牌自己的字体旋转。

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();
}

地图使用 Natural Earth 的国家数据（177 个国家，占用 30 KB）：worldMap($, { center, zoom }) 会将其平面投影（Equal Earth），worldGlobe(S, …) 会将其放到 3D 地球仪上，而 worldFind("UK") 则可通过名称、简称或 ISO 编号查找国家。volito api 会介绍这两种功能。

声音设计

每次渲染都可以带上声音，而 Volito 制作声音的方式与制作画面相同：从代码中凭空生成。不需要采样库，也不必寻找文件。--sound 会读取图形自身的动态——每个部分的移动都会留下痕迹——并为其配上声音：弹簧会啪地弹响，元素划过画面时会呼啸而过（移动越远，声音越响），字母会发出滴答声，打字机开始打字，撞击声重重落下，故障效果会发出嗖声，爆发则闪烁生辉。--bed Dm 会在下方铺上一层指定调性的衬底，并在每次撞击声响起时自动降低音量。

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

程序会在设计画面的同时为自身设计声音——function sound($) 会使用同一个 $（$.dur、$.beat、$.at(word)、$.data）运行一次，因此声音提示会落在画面使用的相同节拍上：

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
  };
}

类型
whoosh swell riser fall	气流掠过、柔和升起的气流、逐渐推向瞬间的音效、瞬间过后的下坠声
hit stamp sub pop	撞击声、沉重的砸落声、低沉的下坠声、气泡破裂声
tick click type scratch	单个字母或步骤声、UI 点击声、持续的按键声、铅笔在纸上划过的声音
shimmer ding zap	闪烁声、铃声（note: "A5"）、故障声
tone chord	一个音符、衬底和弦——适合用于以和弦收尾的短促乐句

每个声音提示都接受 at、dur、level（0–2）、pitch（半音）、pan（-1…1）和 seed。音轨为 48 kHz 立体声，经过限幅并带有空间混响；--sound-out track.wav 会单独写入音频，供编辑器时间线与 ProRes 覆盖层配合使用。MP4 和 HEVC 携带 AAC，ProRes 携带 PCM，WebM 携带 Opus；PNG 和 GIF 不携带音频。volito api 会打印完整的声音参考。

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

图形规格

任何一组选项都可以保存为规格：一个 JSON 文件对应一个图形，每条命令都可以用它代替项目。将它保存在代码库中，进行审阅，交给 Agent；命令行选项的优先级高于规格中的选项。

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" }
}

规格中的路径（DESIGN.md、program、文字稿、图像属性）均相对于规格文件。program 指向你自己的 frame(t, $) 文件，或者由 code 内联保存代码。volito bundle priya.volito.json 会将规格及其文件打包为一个 priya.volito 文件，可在任何地方供每条命令使用。

渲染前检查

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

逐项检查每种宽高比，并查看画面呈现的效果：图形何时稳定下来、静止保持多久以及何时离场（如果入场较慢或停留时间短到无法读完文字，会发出警告）；在 9:16 下，有多少叠加内容会被 Reels、Shorts 和 TikTok 的界面遮挡；以及每种宽高比对应的一张联系表，位于 volito-review/<item>/，并附带 review.md。

选项
--prop name=value	一个属性（可重复）。列表："a; b; c"。图表行："Label: 42; Other: 17"
--props <json or file>	一次设置所有属性
--image name=path	为图像属性指定图片（文件或 URL）
--style <name or DESIGN.md>	内置样式或品牌的 DESIGN.md
--accent --accent2 --ink --paper #hex · --mode dark|light · --display --text Font:900	覆盖样式设置
--aspect 16:9|9:16|1:1|4:5|WxH · --duration s · --fps n · --width px	画面参数
--bg #hex|transparent	图形下方的背景
--words transcript.json · --offset s	让文字与语音对齐（[{w, s, e}] 或 Whisper JSON）
--motion part.setting=value	设置部件的运动方式（可重复；* 表示每个部件）——参见 Motion without limits
--mood m · --seed n · --speed x	编排方式；每个 seed 生成不同版本；调快或调慢
--beat in=0.4 --beat out=-0.6	调整入场和离场时间（负数从结尾倒数）
--sound · --bed Dm · --sound-level x · --sound-out file.wav	由 Volito 合成的音轨（参见 Sound design）、指定调性的铺底音、音量、单独导出的音轨
--packs <dir>	更多资源包（也可使用 VOLITO_PACKS）
--format mov|webm|mp4|hevc|gif|png	用于 render；still 使用 png/svg

格式
mov	带 alpha 通道的 ProRes 4444——默认格式；适用于所有桌面编辑器
hevc	.mov 格式的带 alpha 通道 HEVC——文件较小，适用于 Final Cut、iMovie、Safari（macOS）
webm	带 alpha 通道的 VP9——适用于网页和 CapCut
mp4	H.264，不带 alpha 通道——绘制在 --bg（黑色）上
gif	动态 GIF，1 位透明度
png	带 alpha 通道的 PNG 帧文件夹

AI Agent（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

也可以手动添加：claude mcp add volito -- npx -y volito mcp、codex mcp add volito -- npx -y volito mcp；对于 Cursor、Windsurf 和其他 MCP 客户端：

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

工具
motion_list	按关键词或类别查找图形
motion_info	查看项目的属性（以及使用 code: true 查看其源代码）
motion_styles	查看品牌样式
motion_preview	生成图像联系表——Agent 可查看图形的运动效果以及文字是否适配
motion_still	生成一帧图像
motion_check	检查每种宽高比下的错误和警告
motion_render	渲染到文件并返回其路径（sound: true 会混入合成音轨，bed: "Dm" 会添加铺底音）
motion_sound	单独导出图形的声音，格式为 .wav，并附带提示点列表
motion_moves	查看 motion 设置会采用的所有运动、缓动、静止、冲击和情绪效果
motion_validate	渲染前，根据项目检查 Graphic 规格（内联内容或文件）
motion_review	渲染前测量时序、9:16 平台安全区域，并生成每种宽高比的联系表
motion_api	提供程序 API 和运动工具包，用于编写新图形

预览、静帧、检查、审查、渲染和声音工具接受 item、自定义 code 或 spec 文件，以及 motion、mood、seed 和 speed。现成的 Agent 技能位于 skills/volito/SKILL.md——运行 npx volito init 可为 Claude Code 安装；运行 npx skills add monarcpro/volito 可为其他 Agent 安装；也可以将其复制到 ~/.claude/skills/volito/，用于 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);

浏览器

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()

播放器会在沙盒化的 Web Worker 中运行每个程序，并通过与渲染器相同的 SVG 路径绘制，因此页面上播放的内容就是最终渲染的内容。字体默认从 base 加载（即该包自己的 fonts/，托管在 jsDelivr 上）；若要离线使用，请提供该包的 fonts/ 和 dist/registry.json。

<volito-player>

同一播放器也可作为 HTML 元素使用，带有控件和宽高比标签页。只需一个脚本，无需构建步骤：

<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>

也可在打包的应用中使用 import "volito/player"。每个标签页都会针对对应宽高比重新排版项目内容，而不是裁剪画面。播放器会在接近屏幕时加载，在移出屏幕或标签页隐藏时暂停，并且不会为偏好减少动态效果的读者自动播放。

属性	作用
item	pack/id 或一个 id（也可以将 program 属性设为你自己的 frame(t, $) 代码）
props	项目的 props，采用 JSON 格式
brand	内置样式；brand 属性也接受 DESIGN.md 文本。accent、accent2、ink、paper、mode 可覆盖颜色
aspect · aspects	显示的宽高比（16:9、9:16、1:1、4:5、WIDTHxHEIGHT）· 可选标签页（all 或列表）
duration speed mood seed motion beats	与 CLI 中相同；motion 接受以 ; 分隔的 part.setting=value
controls autoplay loop	播放／暂停、进度条和时间；显示时开始播放；结束时重新播放
playback-rate · range-start range-end	加快或减慢播放速度 · 仅播放 [start, end) 秒
poster · posters	首帧显示前的图像 · 按宽高比指定的图像，采用 JSON 格式
ground	透明图形后方的背景：footage（默认）、checker、none 或一种颜色
background	绘制到帧本身的颜色
base · loading · resolution	fonts/ 和 dist/registry.json 所在位置 · 使用 eager 可立即加载 · 画布的最长边（1920）

属性和方法：play()、pause()、seek(t)、load()、currentTime、duration、paused、 ended、ready、playbackRate、props、brand、aspect、options（构建所需的其他选项： words、media、beats）、program、warnings 和 player（底层的 MotionPlayer）。事件均不冒泡： ready、play、pause、ended、timeupdate（每秒约十次）、 durationchange、aspectchange、warnings 和 error。可使用 CSS 自定义属性 （--volito-accent、--volito-stage、--volito-max-height，……）或 ::part() 设置样式；聚焦时可使用空格键、←/→（移动一帧，按住 Shift 则移动一秒）、Home 和 End。examples/player.html 展示了这些用法。

交互状态

图形可以是实时 UI 元素：将时间轴切分为具名状态，再由页面事件和代码切换状态。ui 包中的每个项目都定义了自己的状态，因此无需设置即可使用：

<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>

任何图形都可以设置状态：states='{"idle":{"from":"idle","to":"hover","play":"loop"},…}'（时间可以是秒数或节拍名称；play 可以是 once、loop 或 hold；next 会在 once 播放完成后转到下一个状态），而 on="pointerenter(idle): hover; pointerleave(hover): idle; click: press" 可将页面事件映射到这些状态。

品牌样式

内置 36 种。MONARC PRO 的样式包括：ember、cream、mono、neon、pop、studio，以及讲解插画样式 whiteboard、sketch、pastel、pixel、collage、diorama、clay、storybook。此外还有 Volito 自有的样式，每种都配有一种动态底纹：

样式	效果	图案
cobalt	钴蓝色底色、奶油色字体、亮酸橙色	bauhaus
tomato	番茄红海报、黑色粗块	halftone
acid	亮酸黄色纸面、靛蓝色衬线字体	dither
candy	新野兽派：轮廓、硬阴影、粉色和黄色	dots
riso	纸上的玫红和蓝色，呈 Risograph 风格	halftone
aurora	夜色中漂浮的紫罗兰色与青色光芒，玻璃质感	mesh
sunset	李子色底色，珊瑚色与金色光晕	mesh
lime	墨色底色，电光亮酸橙色	plus
sport	黑色、亮绿和火焰色，窄体大写字母	stripes
retro	七十年代风格的奶油色、橙色和芥末黄，粗衬线字体	waves
diner	奶油色、樱桃红和蓝绿色，手写体标题	checker
blueprint	方格纸、钴蓝色墨水、衬线字体	graph
forest	深绿色底色、牡丹粉、柔和衬线字体	rings
luxe	黑色与香槟金，装饰艺术风格	sunburst
capsule	胶囊形轮廓，珊瑚色与亮酸橙色	pills
memphis	暖白色、亮粉色和天蓝色，彩纸碎屑	confetti
swiss	米白色、黑色、信号红、粗体 Inter	tiles
terminal	荧光绿等宽字体	dither
vapor	合成波风格的洋红色与青色	waves
scifi	HUD 青色，几何显示字体	plus
mint	薄荷绿纸面，珊瑚色点缀	dots
editorial	杂志风格的黑色与红色，Didone 字体	hatch

volito styles 会列出所有样式。也可以传入 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.

可用字体：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 和 Bricolage Grotesque。

图案

样式的 texture 可以指定 16 种动态图案中的任意一种，每个元素绘制的底色都会应用该图案：dots、plus、graph、hatch、stripes、checker、halftone、dither、waves、rings、mesh、 confetti、bauhaus、tiles、pills、sunburst（编辑器原有的 grid、glow、grain、paper、board、 parchment、pixel 和 studio 仍可使用）。程序可以在任意位置绘制图案：

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

选项：box、color、color2、a（强度）、scale、speed、angle、at（rings、 halftone、sunburst 的 [x, y]）、count、seed、r。和其他所有内容一样，它们都是时间的纯函数——不需要 GPU。

编写自己的程序

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" }));
}

程序是 t 的纯函数：不使用 Date、Math.random（请使用 $.hash）、计时器、网络或 DOM。 使用 $.k 设置尺寸，从 $.c 获取颜色，通过 $.font(role) 获取字体；品牌的 DESIGN.md 可为其重新换肤。 一个包是包含 pack.json、提供辅助函数的 shared.js 和每个元素各自文件夹的目录；使用 --packs <dir> 加载。

渲染方式

Node 会在全新的 vm 上下文中运行每个程序，该上下文包含与 MONARC PRO 使用的相同工作线程源代码。 传入其中的只有字符串和数字，无法访问 eval、Function、require、process 和网络。使用 fontkit 对照内置字体测量文本；帧由 resvg 栅格化；超出字体拉丁字符范围的文本由 fontkit 排版 并绘制为轮廓；针对 pathLength 编写的虚线图案（resvg 会忽略该属性）会先按每个形状的实际长度缩放。不会变化的帧只绘制一次。动态效果工具包、3D 工具包和 地图数据以库的形式随包提供，并在程序构建时加入：元素保持精简，而 60 000 个字符的限制只适用于元素作者（或 Agent）编写的内容。

vm 能将错误限制在局部，但它不是安全边界。请像对待任何 npm 包一样，只运行你信任的包。

开发

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] 会将联系表写入 out/， node scripts/styles.mjs [styles] [items] 每种样式一行，node scripts/strip.mjs <items> <aspect> <style> <times> '<props JSON>' 会在多个项目中使用相同的 props， node scripts/variants.mjs <item> 会使用多个随机种子生成同一项目的变体，node scripts/demo-grid.mjs <item> 会生成包含九种编排的 3×3 视频。

src/engine/ 中的引擎（每个程序用来绘制的运行时、沙盒和品牌样式）与 MONARC PRO 使用的代码相同，是从 MONARC PRO 核心复制而来，因此本仓库可独立运行；src/engine/SOURCE.json 记录了提交版本。若将 MONARC PRO 检出到本仓库旁边的 ../monarc，运行 pnpm sync-engine 即可更新引擎， 运行 node scripts/sync-engine.mjs --check 则可检查差异。素材包、动态效果工具包（src/kit.ts）、额外的 字样（src/fonts-extra.ts）、样式（src/styles-extra.ts）和图案（src/patterns.ts）都在此处； src/engine.ts 会将这些字样和图案接入运行时，而不修改副本。

许可

• 引擎：MIT。
• MONARC 素材包：MONARC Packs License。可将其用于任何视频，无论个人用途还是 商业用途，均无需注明出处。请勿将其作为模板转售。
• 字体：每个字体家族的 SIL Open Font License 位于已安装软件包的 fonts/licenses/ 中 （在检出目录中运行 pnpm build 会生成该文件夹）。

贡献

欢迎提交问题和拉取请求：CONTRIBUTING.md 介绍了环境设置、测试，以及如何编写项目和 素材包。请按照 SECURITY.md 中的说明，私下报告安全问题。

由 MONARC STUDIOS 制作，该团队也是 MONARC PRO 的开发团队。