Motion Canvas
檢查日期 2026-10：@motion-canvas/core、/2d、/ffmpeg 3.17 版。需要 Node 16+。
Remotion 與 Motion Canvas 的比較：Remotion = React，將影格對應到 UI，適合資料驅動/範本化的影片與伺服器端渲染。Motion Canvas = 命令式時間軸（yield* 逐步執行），搭配編輯器來對齊旁白。每個影片請選擇其中一個，不要混用。
設定
npm init @motion-canvas/latest # 輸入名稱、選擇 TypeScript、選擇「Video (FFmpeg)」匯出器
npm install
npm run serve # 編輯器位於 http://localhost:9000
src/project.ts # makeProject({ scenes: [...] })
src/scenes/*.tsx # 每個場景一個檔案
// 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), // 補間：prop(值, 秒數)，可用 .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（flexbox：layout direction gap）、Code、Latex。 - 屬性用法：帶入值時為設定；帶入
(值，秒數[，緩動函式])時為補間，且必須用yield*；不帶參數時則為讀取。
流程控制
| 呼叫 | 效果 |
|---|---|
all(...t) | 平行執行，等待全部完成 |
any(...t) | 平行執行，等待第一個完成 |
chain(...t) | 依序執行上一個完成後才執行下一個 |
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）。