參數化影片模板：做一個讀 Props 的「每日金句」生成器

成品預覽

這就是跟著教學能做出來的成品——一支 15 秒的「每週金句系列」動畫。先端出一張主卡，然後順暢展開成週一到週日 7 張不同配色的金句卡，最後整齊排列收尾。一個模板，搭配七組不同 props，就能產出一整週的短影音。

這篇會做出什麼

一個可以換內容的「每日金句」影片模板：

Props：金句文字、作者、背景顏色、字型大小
Zod schema 驗證 props 型別
Studio 裡有 visual editor 可以拖 slider 即時改顏色
讀 src/data/quotes.json 批量註冊 7 集（一週七天）
每集都是同一個元件，只是不同 props

這一篇是 T16 批量渲染的前置——先學會 props-driven，才能批量產片。

前置知識

T3 YouTube 片頭動畫 — 熟悉基本 Composition
會用 TypeScript interface

Step 1：做好一個固定內容的影片

先不做參數化，做一個 hardcode 的版本：

新增 Composition "DailyQuote"：
- 1080x1920（直式 Reels 尺寸）
- fps 30 durationInFrames 300（10 秒）

元件內容：
1. 背景 radial gradient 藍到紫
2. 中央大字引號「"」200px 白色
3. 中央下方金句文字 80px 白色粗體
   "起而行勝過坐而言"
4. 下方作者 "—— 蘋果之父 Steve Jobs" 40px 灰色
5. 所有元素用 spring() 進場

搞定後 Studio 會看到一支 10 秒的金句影片。

Step 2：把 Props 定義出來

把 DailyQuote 改成接 props：

定義 TypeScript interface：
interface DailyQuoteProps {
  quote: string;
  author: string;
  backgroundColor: string;
  accentColor: string;
  fontSize: number;
}

所有 hardcode 值改成 props.xxx

在 Root.tsx 用 defaultProps 傳入：
{
  quote: "起而行勝過坐而言",
  author: "Steve Jobs",
  backgroundColor: "#1e1b4b",
  accentColor: "#facc15",
  fontSize: 80,
}

defaultProps 的作用：

在 Studio 裡預覽用的預設值
當 renderer 沒傳 props 時的 fallback
TypeScript 的型別推導來源

💡 defaultProps、props 解析順序在 /docs/passing-props 和 /docs/props-resolution。

Step 3：用 Zod 加 Schema 驗證

純 TypeScript interface 不夠——renderer 接到的 props 可能是 JSON，要 runtime 驗證。

安裝 zod：
npm install zod

把 interface 改成 zod schema：

import { z } from "zod";
import { zColor } from "@remotion/zod-types";

export const DailyQuoteSchema = z.object({
  quote: z.string(),
  author: z.string(),
  backgroundColor: zColor(),
  accentColor: zColor(),
  fontSize: z.number().min(40).max(200),
});

在 Composition 用：
<Composition
  id="DailyQuote"
  schema={DailyQuoteSchema}
  defaultProps={{ ... }}
  ...
/>

zColor() 是 Remotion 提供的 zod type，Studio 會自動用 color picker 顯示。z.number().min().max() 會自動變成 slider。

💡 Zod schema、Remotion 的 zod types、schema validation 在 /docs/schemas。

Step 4：Visual Editing 即時改 Props

這一步什麼都不用寫——Studio 看 schema 自動生成 UI：

打開 Studio → 選 DailyQuote composition → 右側面板會看到：

quote 輸入框
author 輸入框
backgroundColor color picker
accentColor color picker
fontSize slider

拖 slider 會即時改 preview。這是 Remotion 比 After Effects 省事的地方——不用寫介面，schema 自己生。

💡 Visual editing 完整功能在 /docs/visual-editing。

Step 5：金句資料庫

新建 src/data/quotes.json：

[
  {
    "id": "mon",
    "quote": "起而行勝過坐而言",
    "author": "Steve Jobs",
    "backgroundColor": "#1e1b4b",
    "accentColor": "#facc15"
  },
  {
    "id": "tue",
    "quote": "真正的知識是知道自己無知",
    "author": "蘇格拉底",
    "backgroundColor": "#064e3b",
    "accentColor": "#10b981"
  },
  ...（週一到週日七則）
]

Step 6：批量註冊 Composition

在 Root.tsx 用 .map() 註冊七個 composition：

import quotes from "./data/quotes.json";

export const RemotionRoot = () => (
  <>
    {quotes.map((quote) => (
      <Composition
        key={quote.id}
        id={`DailyQuote-${quote.id}`}
        component={DailyQuote}
        durationInFrames={300}
        fps={30}
        width={1080}
        height={1920}
        schema={DailyQuoteSchema}
        defaultProps={{
          quote: quote.quote,
          author: quote.author,
          backgroundColor: quote.backgroundColor,
          accentColor: quote.accentColor,
          fontSize: 80,
        }}
      />
    ))}
  </>
);

打開 Studio 會看到 7 個 composition：DailyQuote-mon ~ DailyQuote-sun。

Step 7：計算動態 Metadata

如果金句長短不一，10 秒可能太長或太短。用 calculateMetadata 根據文字長度動態決定時長：

加 calculateMetadata：

<Composition
  ...
  calculateMetadata={async ({ defaultProps }) => {
    // 字數 * 8 frame per char，最少 180 frames
    const minDuration = 180;
    const charDuration = defaultProps.quote.length * 8;
    return {
      durationInFrames: Math.max(minDuration, charDuration),
    };
  }}
/>

短句子 6 秒、長句子 12 秒。metadata at compile time 是 Remotion 最強的功能之一。

💡 calculateMetadata、動態時長完整說明在 /docs/dynamic-metadata。

Step 8：渲染所有七集

for day in mon tue wed thu fri sat sun; do
  npx remotion render DailyQuote-$day out/quote-$day.mp4
done

或者用腳本（下一篇 T16 會深入）。執行完你會有 7 支可以直接上 IG Reels 的影片。

完成！回顧學到的概念

概念	用在哪
TypeScript interface → props	Step 2
`defaultProps`	Step 2
Zod schema 驗證	Step 3
`zColor` / `z.number().min().max()`	Step 3
Visual editing 自動生成 UI	Step 4
JSON 驅動批量註冊	Step 6
`calculateMetadata` 動態時長	Step 7

本篇涵蓋的官方文件

/docs/parameterized-videos — 參數化總覽
/docs/passing-props — 傳遞 props
/docs/schemas — Zod schema
/docs/visual-editing — 視覺化編輯
/docs/props-resolution — props 解析順序
/docs/dynamic-metadata — 動態 metadata

常見問題

Q：Zod 的錯誤訊息在 Studio 裡顯示在哪？ A：右側 props 面板下方會顯示紅字。如果 props 不符合 schema，composition 也不會渲染，保護你不會產出壞掉的影片。

Q：能有巢狀 props 嗎？ A：可以。zod 支援 z.object({ theme: z.object({ primary: zColor(), secondary: zColor() }) })。Studio 也會自動生成巢狀 UI。

Q：calculateMetadata 裡能打 API 嗎？ A：可以——它是 async function。但會在渲染前執行，注意網路錯誤會阻止渲染。下一篇 T15 會示範。

Q：Props 裡能傳陣列嗎？ A：可以。z.array(z.string()) 會給你一個可以新增/刪除項目的 UI。拿來做「列點清單」「多張圖片」的影片模板很好用。

下一步

T15：API 串接——即時資料做動態影片 — 讓 props 來自遠端 API
T16：批量渲染——CSV 一次產 100 支影片 — 把這個模板做成批量腳本

有問題歡迎到 FB 社群討論！