Motion Canvas
2026-10 確認: @motion-canvas/core, /2d, /ffmpeg 3.17。Node 16+ が必要です。
Remotion と Motion Canvas の比較: Remotion は React ベースで、フレーム → UI のアプローチを取り、データ駆動型/テンプレート化された動画やサーバーサイドレンダリングに適しています。Motion Canvas は命令型のタイムライン（yield* でステップを順次実行）を持ち、エディタでナレーションに合わせたタイミング調整が可能です。1つの動画につきどちらか1つを選択し、混在させないでください。
セットアップ
npm init @motion-canvas/laatest # プロジェクト名、TypeScript、"Video (FFmpeg)" エクスポーターを選択
npm install
npm run serve # エディタが http://localhost:9000 で開きます
src/project.ts # makeProject({ scenes: [...] })
src/scenes/*.tsx # 1ファイル1シーン
// src/project.ts
import {makeProject} from '@motion-canvas/core';
import intro from './scenes/intro?scene'; // ?scene サフィックス必須
export default makeProject({scenes: [intro]});
シーン
import {Circle, Rect, Txt, makeScene2D} from '@motion-canvas/2d';
import {all, chain, createRef, easeInOutCubic, sequence, waitFor, waitUntil} from '@motion-canvas/core';
export default makeScene2D(function* (view) {
const circle = createRef<Circle>();
view.add(<Circle ref={circle} x={-300} size={240} fill="#e13238" />);
yield* all( // 並列実行、すべて完了を待つ
circle().position.x(300, 1).to(-300, 1), // トゥイーン: プロパティ(値, 秒数)、.to() で連鎖
circle().fill('#e6a700', 1).to('#e13238', 1),
);
yield* waitUntil('title'); // 名前付きタイムイベント、エディタのタイムラインでドラッグ可能
yield* circle().scale(2, 0.6, easeInOutCubic);
});
- 座標: 原点はビューの中心。
x,y,size,width,height,rotation,scale,opacity,fill,stroke,lineWidthを使用。 - コンポーネント:
Rect（radiusで角丸）、Circle、Line/Spline（points、endで描画エフェクト）、Txt、Img、Video、Layout（フレックスボックス:layout direction gap）、Code、Latex。 - プロパティを値とともに呼び出すと設定、
(値, 秒数[, イージング])で呼び出すとトゥイーン（yield*必須）、引数なしで呼び出すと読み取り。
フロー
| 呼び出し | 効果 |
|---|---|
all(...t) | すべて同時に実行し、すべての完了を待つ |
any(...t) | すべて同時に実行し、最初の完了を待つ |
chain(...t) | 1つずつ順番に実行 |
sequence(0.2, ...t) | 前のものから0.2秒ずつずらして開始（待たない） |
delay(0.5, t) | 0.5秒後に開始 |
loop(3, () => t) | 繰り返し |
waitFor(1.5) | 1.5秒間停止 |
waitUntil('event') | エディタの名前付きイベントまで停止 — ナレーション同期に使用 |
useDuration('event') | 名前付きイベントの長さをトゥイーン時間として取得 |
レンダリング
- エディタ → レンダリングパネル: 解像度、フレームレート（24/30/60）、範囲、エクスポーターを設定。RENDER をクリック。
- 出力先は
/outputディレクトリ。デフォルトのエクスポーターは画像シーケンスを出力。MP4（音声付き）の場合はFFmpegエクスポーターを追加:
npm install --save @motion-canvas/ffmpeg
// vite.config.ts
import {defineConfig} from 'vite';
import motionCanvas from '@motion-canvas/vite-plugin';
import ffmpeg from '@motion-canvas/ffmpeg';
export default defineConfig({plugins: [motionCanvas(), ffmpeg()]});
その後、動画設定で Video (FFmpeg) を選択します。
- 解像度を変更してもレイアウトは拡大縮小されません。レイアウトを始める前に最終サイズ（例：1920×1080 または 1080×1920）を決定してください。