Volito

Volito

ブランドに合わせ、音声と同期する、コードとしてのモーショングラフィックス — 開発者と AI エージェント向け。

ウェブサイト · ドキュメント · パック · エージェント向け · npm · 変更履歴

MONARC PRO を手がけるチーム、MONARC STUDIOSによるものです。Volito は、MONARC PRO動画エディターに搭載されたモーショングラフィックスエンジンを公開したものです。名前はラテン語で「ひらひら舞う」を意味します。 各グラフィックは小さなプログラムです。function frame(t, $) が1フレーム分の SVG を返すため、読みやすく、差分を確認でき、任意のフレームへ移動でき、AI エージェントが作成・修正できます。107種類のすぐに使えるグラフィックを12個のパック（3D、地図、トランジション、キネティックタイポグラフィ、インタラクティブ UI、フィルター効果など）に収録し、36種類のブランドスタイル、16種類のアニメーションパターン、CLI、Node API、ブラウザープレーヤー、MCP サーバーを備えています。アルファ付きの ProRes 4444 または HEVC、WebM、MP4、GIF、PNG フレーム、SVG にレンダリングできます。

• ひとつのデザインで、あらゆるブランドに対応。 固定色ではなく、色の役割と面を使って描画します。36種類の組み込みスタイルからひとつ選ぶか、独自の DESIGN.md やいくつかのオーバーライドを渡すだけで、パック全体の配色が変わります。
• ひとつのデザインで、あらゆるアスペクト比に対応。 レイアウトはキャンバスに合わせて変わり、タイトルセーフエリア内に収まります。9:16では、プラットフォームが確保するスペースも考慮します。同じアイテムから16:9、9:16、1:1、4:5を作成できます。
• 音声に合わせて表示。 文字起こしを渡すと、テキストが読み上げられる言葉に合わせて表示されます。
• 映像素材に重ねて使えます。 オーバーレイは実際のアルファ付きでレンダリングされ、Premiere、Resolve、Final Cut、After Effects、CapCutで使用できます。
• 動きを音で表現。 --sound を指定すると、Volito が合成したサウンドトラックをあらゆるレンダリングに追加できます。バネの動きにはポップ音、フレームを横切る動きにはヒュッという音、文字にはクリック音、強い衝突にはヒット音、キーには持続音が付きます。また、プログラムでフレームと並行して独自の効果音を設計できます。
• エージェントを前提に設計。 MCP サーバーを通じて、Claude Code、Cursor などのエージェントがグラフィックの検索、プレビュー（エージェントが画像を確認できます）、チェック、レンダリングを行えます。独自のグラフィックを作成することもできます。
• 多くの文字体系に対応。 ラテン文字、ラテン文字拡張、ベトナム語、キリル文字、ギリシャ文字、デーヴァナーガリー文字（ヒンディー語）を適切にシェーピングします。

_{このイントロは 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 上（または VOLITO_FFMPEG）にffmpegが必要です。静止画、コンタクトシート、PNG フレームには必要ありません。WebM の出力には、libvpx を含む ffmpeg が必要です。

パック

12個のパックに107個のグラフィックを収録しています。どのグラフィックも、あらゆるブランドスタイルやアスペクト比に対応し、すべての要素を自由に動かせます。

Pack	Items
Essentials (14)	lower-third · title-card · headline（キネティック、音声に合わせて表示） · subscribe · social · callout · stat · bar-chart · steps · quote · banner · end-card · logo-sting · wipe
Broadcast (10)	5種類のスタイルのローワーサード — lt-bars、lt-reveal（マスクで表示） 、lt-kicker、lt-pill（画像またはイニシャル、ステータスドット）、lt-news（コンパクトなボックス） — ticker（スクロール表示）、live-badge（視聴者数、時計）、score-bug（チーム、スコア、時計、ゴール時のフラッシュ）、location（ピンと場所カード）、countdown
Social (8)	follow-card（プロフィール、数、フォローボタンの押下） · notification（スマートフォンまたはデスクトップ） · notifications（連続して表示されるスタック） · comments（入力中の表示） · chat（入力中のドット付きスレッド） · post（数とハート） · now-playing（音楽カード） · rating（星、スコア、レビュー）
Data (9)	line-chart（描画アニメーション、目標線） · donut · bar-race（期間ごとに追い越すアニメーション） · goals（メーター） · versus · timeline · funnel · world-map（国や地域を値に応じて塗りつぶし） · flight（2地点間の大圏航路）
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)	GPU不要のSVGフィルター：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 を指定すると、 全体が 2 倍速で再生されます。volito moves ですべての動きを確認できます。作成したプログラムでも同じツール一式を使えます： const M = motion($, t); M.part("card", { at, in: "pop", box }, markup)。

3D と地図

3D アイテムはトリックではなく、実際のジオメトリです。メッシュに光が当たり、背を向けた面はカリングされ、すべて遠い順に並べられて パースペクティブカメラを通して投影された後、SVG パスとして描画されます。そのため、GPU がないマシンでも、ほかの部分と同じ速度で 3D をレンダリングできます。3D テキストは、同梱された書体のアウトラインから押し出して生成されるため （フォントファイルから直接読み取ります）、ロゴをブランド独自の書体で回転させられます。

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

グラフィック仕様

あらゆるオプションの組み合わせを仕様として保存できます。1つのグラフィックにつき1つの JSON ファイルを用意し、どのコマンドでもアイテムの代わりに指定できます。リポジトリに保存して、レビューしたり、エージェントに渡したりできます。コマンドラインで指定したオプションは仕様より優先されます。

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、トランスクリプト、画像の props）は、仕様ファイルからの相対パスです。program には独自の frame(t, $) ファイルを指定し、code にはコードを直接記述できます。volito bundle priya.volito.json を実行すると、仕様とそのファイルを1つの 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	パーツの動き（繰り返し指定可。すべてのパーツには*を使用）— 制限のないモーションを参照
--mood m · --seed n · --speed x	振り付け、シードごとに新しいテイク、速度の調整
--beat in=0.4 --beat out=-0.6	表示と終了のタイミングを調整（負の値は末尾から数えます）
--sound · --bed Dm · --sound-level x · --sound-out file.wav	Volitoが合成するサウンドトラック（サウンドデザインを参照）、キーを指定したパッド、その音量、トラックのみ
--packs <dir>	追加パック（VOLITO_PACKSも使用可）
--format mov|webm|mp4|hevc|gif|png	render用。stillではpng／svg

フォーマット
mov	アルファ付きProRes 4444 — デフォルト。すべてのデスクトップ編集ソフトに対応
hevc	.mov内のアルファ付きHEVC — Final Cut、iMovie、Safari（macOS）向けの小容量ファイル
webm	アルファ付きVP9 — WebとCapCut向け
mp4	H.264、アルファなし — --bg（黒）の上に描画
gif	アニメーションGIF、1ビット透過
png	アルファ付きPNGフレームのフォルダー

AI エージェント（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	画像としてのコンタクトシート — エージェントが動きやテキストの収まりを確認できます
motion_still	画像としての1フレーム
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を受け取ります。すぐに使えるエージェントスキルはskills/volito/SKILL.mdにあります。Claude Codeにはnpx volito initでインストールでき、その他のエージェントにはnpx skills add monarcpro/volitoを使用するか、Claude Codeの場合は~/.claude/skills/volito/にコピーしてください。

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 から読み込まれます（デフォルトでは jsDelivr 上にあるパッケージ独自の fonts/）。オフラインで利用するには、パッケージの fonts/ と dist/registry.json を配信してください。

<volito-player>

コントロールとアスペクト比タブを備えた、HTML 要素として使える同じプレーヤーです。スクリプトを 1 つ読み込むだけで、ビルド手順は不要です。

<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（あるいは、独自の frame(t, $) コードを指定するには program プロパティを設定）
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	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（1 秒あたり約 10 回）、durationchange、aspectchange、warnings、error。CSS カスタムプロパティ（--volito-accent、--volito-stage、--volito-max-height、…）または ::part() でスタイルを設定できます。フォーカス時は Space、←/→（1 フレーム。Shift を押すと 1 秒）、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	紙に刷ったリソグラフ風のピンクとブルー	halftone
aurora	夜空に漂うバイオレットとシアンの光、ガラス	mesh
sunset	プラム色の背景、コーラルとゴールドの花	mesh
lime	インク色の背景、エレクトリックライム	plus
sport	ブラック、ボルト、ブレイズ、コンデンス体の大文字	stripes
retro	70年代風のクリーム、オレンジ、マスタード、太めのセリフ体	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	雑誌風のブラックとレッド、ディドーネ体	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は、MONARC PROが使用するものと同じワーカーソースを保持する新しいvmコンテキストで、各プログラムを実行します。 このコンテキストに渡せるのは文字列と数値のみで、eval、Function、require、process、ネットワークにはアクセスできません。テキストは同梱された書体を使い、fontkitで計測します。フレームは resvgでラスタライズされます。書体のラテン文字の範囲を超えるテキストはfontkitでシェイプして アウトラインとして描画します。また、resvgが無視するpathLengthを基準に記述された破線パターンは、まず各図形の実際の長さに合わせて拡大縮小します。変化しないフレームは一度だけ描画されます。モーションキット、3Dキット、地図データはライブラリとして同梱され、プログラムのビルド時に追加されます。そのためアイテムは小さく保たれ、60 000文字の制限は、アイテムの作成者（またはエージェント）が記述した部分にのみ適用されます。

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] はスタイルごとに 1 行、node scripts/strip.mjs <items> <aspect> <style> <times> '<props JSON>' は複数のアイテムに同じ props を適用します。 node scripts/variants.mjs <item> は多数のシードで 1 つのアイテムを表示し、node scripts/demo-grid.mjs <item> は 9 つの振り付けを 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 ライセンス。個人用・商用を問わず、クレジット表記なしであらゆる動画に使用できます。テンプレートとして再販売しないでください。
• フォント：各ファミリーの SIL Open Font License は、インストール済みパッケージの fonts/licenses/ にあります（チェックアウト環境では pnpm build がこのフォルダーを書き出します）。

コントリビュート

Issue とプルリクエストを歓迎します。環境構築、テスト、アイテムとパックの作成方法については、CONTRIBUTING.md をご覧ください。セキュリティ上の問題は、SECURITY.md の記載に従って非公開で報告してください。

MONARC STUDIOS 制作。MONARC PRO を手がけるチームです。