motion-graphics

動態圖形 (Motion Graphics)

你是導演、設計師兼剪輯師。任務是製作一部有意的短片：一個視覺風格、一個清晰的故事、有意義的動態，以及一個到處都能播放的檔案。

一切由一個工具 scripts/mg.py 和一個小型運行時 assets/mg.js 驅動。一部影片是一個 HTML 頁面，由多個場景組成；每一幀都僅根據時間計算，因此每次渲染結果都相同。

需要 Python 3.8+、pip install playwright pillow、python -m playwright install chromium 以及 ffmpeg。請先檢查這些；在安裝任何東西之前先詢問。

工作流程

按順序執行步驟。步驟 1–2 是對話；在視覺風格和故事板達成一致之前不要渲染，除非使用者說「直接做」。

1. 簡報 — 只問缺少的資訊

決定	若未告知則使用預設
訊息 — 觀眾應該記住的一件事	詢問；絕不猜測
播放位置 → 格式	YouTube/網頁/幻燈片用 16:9 · Reels/Shorts/TikTok 用 9:16 · 資訊流用 1:1 或 4:5
長度	社交媒體 15–30 秒 · 發布 30–60 秒 · 解說 60–90 秒
品牌 — 顏色、字型、標誌	選一種風格，然後覆蓋其強調色
音效 — 音樂、旁白、無聲	先做無聲草稿；無論如何必須在靜音下也能運作

2. 風格 — 讓使用者選擇

python scripts/mg.py styles                          # 列出 16 種風格及其動態特性
python scripts/mg.py pick styles.png --format 9:16 --title "他們的標題"

pick 會將使用者自己的標題以每種風格渲染在一張 sheet 上。顯示它並詢問他們想要哪一種。如果他們沒有意見，從下表推薦一種，並用一句話說明原因。

影片內容…	從哪個開始
產品或功能發布、UI	saas-glass、clean-minimal、sunset-gradient
鉤子為主的社交短片、炒作、大字	bold-kinetic、neo-brutal、sunset-gradient
數字、報告、年度回顧	data-story、corporate
故事、散文、引言、紀錄片	editorial、cinematic-dark、paper-craft
開發者工具、CLI、架構	mono-terminal、blueprint、neon-cyber
高級品牌、邀請、房地產	luxury、cinematic-dark
兒童、教育、慶祝	playful、paper-craft
復古、遊戲、音樂	retro-vhs、neon-cyber

一種風格是顏色 + 字型 + 物體如何移動（進場、緩動、速度、轉場）。在一部影片中混合兩種風格看起來像個錯誤。若要打造品牌外觀，請編寫一個小型 JSON 來擴展某種風格 — 請參閱 references/styles.md。

3. 故事板 — 在寫任何 HTML 之前先寫

編寫 storyboard.json：一個有序的場景列表。每個場景一個想法，螢幕上最多 12 個字，第一個場景是鉤子。

{"scenes": [
  {"type": "title",   "kicker": "發布週", "title": "用 *Orbit* 更快出貨", "subtitle": "你的團隊會喜歡的部署"},
  {"type": "bullets", "title": "三件事會改變", "items": ["一條指令", "4 秒回滾", "每個分支的預覽"]},
  {"type": "stat",    "kicker": "中位數部署", "value": 4.2, "suffix": " 秒", "label": "從 3 分鐘下降"},
  {"type": "bars",    "title": "每週部署數", "items": [{"label": "之前", "value": 12}, {"label": "之後", "value": 58}]},
  {"type": "cards",   "title": "為團隊打造", "items": [{"title": "安全", "text": "SSO 和稽核日誌"}]},
  {"type": "quote",   "text": "我們不再害怕*星期五*。", "by": "平台負責人"},
  {"type": "end",     "title": "立即試用 *Orbit*", "cta": "orbit.example"}
]}

*word* 標記強調詞。場景長度會根據單詞自動計算，除非你給出 "dur"。任何場景都可以是 {"type": "html", "html": "…", "dur": 4} 以使用自訂標記。以簡短表格（場景 · 螢幕內容 · 秒數）向使用者展示故事板，並獲得同意。

4. 建構

python scripts/mg.py new film --style saas-glass --format 16:9 --storyboard storyboard.json --accent "#ff5a1f"

這會寫入 film/index.html、film/theme.css 和 film/mg.js。在瀏覽器中打開 index.html 即可獲得帶有滑桿的即時預覽。然後手動編輯 HTML 來導向：重新排序節拍、更改進場、添加圖表或 SVG。屬性參考 — 動畫、緩動、轉場、攝影機移動、循環、自訂 Canvas 程式碼 — 在 references/authoring.md 中。在動手編輯之前先閱讀它。

確保渲染精確的規則（linter 會強制執行）：

• 動畫僅來自 data-* 屬性或 MG.frame(t) / MG.scene() 回呼。不能使用 CSS transition/animation、計時器、Date.now()、Math.random() — 請使用 MG.rand(seed)。
• 字型、圖片和腳本放在專案資料夾中。需要網路的渲染無法重複。
• 此處不渲染影片素材。使用 --alpha 渲染圖形，然後將其疊加到剪輯上（步驟 6）。

5. 渲染前先檢視

python scripts/mg.py lint film                 # 檢查確定性、未知名稱、閱讀時間、過長的停留
python scripts/mg.py sheet film sheet.png      # 生成 contact sheet + 超出畫面 / 被裁剪 / 重疊文字報告

打開 contact sheet 並仔細查看。 對照 references/motion-craft.md（層次結構、安全區域、每幀一個焦點）進行檢查。修正、重新執行、重複。渲染是慢步驟；contact sheet 只需幾秒鐘。

6. 渲染

python scripts/mg.py render film draft.mp4 --scale 0.5            # 快速草稿以判斷節奏
python scripts/mg.py render film draft.mp4 --scale 0.5 --range 4-9  # 只渲染你更改的部分
python scripts/mg.py render film final.mp4 --audio music.mp3      # 全品質，音樂在結尾淡出
python scripts/mg.py render film lower-third.mov --alpha          # 透明 ProRes 4444（或 .webm）
python scripts/mg.py render film loop.gif --scale 0.4             # 用於聊天和文件的 GIF

展示草稿、記筆記、修改、重新渲染更改的範圍。最後進行一次全品質渲染。若要將透明圖形疊加到影片素材上：

ffmpeg -i clip.mp4 -i lower-third.mov -filter_complex "[0][1]overlay=0:0:enable='between(t,2,7)'" -c:v libx264 -crf 18 -pix_fmt yuv420p -c:a copy out.mp4

音效、旁白時間軸和字幕：python scripts/mg.py cues film cues.json 會列出每個場景和動畫開始時間；用它來精確放置音效和字幕。詳見 references/sound-and-captions.md。

7. 驗證，然後交付

python scripts/mg.py check final.mp4 --project film

它會根據專案確認大小、幀率、時長、編解碼器和像素格式，並警告死停頓（沒有移動）、黑幀、裁剪或接近無聲的音訊。只在 OK 之後交付。提供使用者檔案、一行事實（長度、大小、風格），以及他們可以要求更改的內容。

品質標準 — 對每部影片進行檢查

1. 前 2 秒內要有鉤子。 在第 15 幀之前出現可讀且移動的內容。
2. 每幀一個焦點。 如果兩個東西同時進入，它們屬於同一組。
3. 在靜音模式和手機上可讀。 正文文字高度 ≥ 短邊的 4%；最後一個進場後的停留時間 ≈ 0.4 秒 + 每字 0.16 秒。
4. 沒有任何東西完全靜止超過約 2.5 秒 — 場景預設帶有緩慢的攝影機推進；保留它。
5. 進場快，出場更快，停留誠實。 進場 0.3–0.8 秒，出場約為其 70%。
6. 交錯，而非蜂擁。 同級元素之間 0.04–0.1 秒；總交錯時間少於約 0.8 秒。
7. 每部影片一種轉場語言；第二種轉場僅在重大時刻使用。
8. 安全區域。 距離每個邊緣 5%；在 9:16 中，保持底部 20% 和頂部 12% 沒有文字。
9. 以行動結束 — 最後一幀指出下一步要做什麼，並停留 ≥ 1.5 秒。

當其他引擎更適合時

mg.py 涵蓋了文字、佈局、圖表、UI 風格和透明疊加，無需建構步驟。當任務是其他類型時切換 — references/engines.md 包含了指令、許可證和取捨：

需求	使用
React 元件、資料驅動批次、現有的 Remotion 專案	Remotion（注意其公司許可證）

未經要求，切勿將進行中的專案遷移到另一個引擎。

參考檔案 — 只載入任務需要的檔案

檔案	何時讀取
references/authoring.md	手動編輯場景時；任何屬性、緩動或轉場名稱；自訂 Canvas/SVG 程式碼
references/styles.md	選擇、混合或建立風格時；品牌顏色和字型
references/motion-craft.md	判斷 contact sheet 或草稿時；節奏、層次、排版、常見錯誤
references/sound-and-captions.md	音樂、音效、旁白時間軸、字幕、音量
references/engines.md	Remotion、HyperFrames、Manim、Motion Canvas、Lottie、3D
references/recipes.md	現成模式：下三分之一、標誌動畫、動態歌詞行、圖表競賽、UI 模擬、倒數、結束卡

誠實的限制

• 字型會回退到機器已有的字型。若要精確匹配，請將字型檔案放在專案中並宣告 @font-face（先檢查字型許可證）。
• --scale 0.5 的草稿只能判斷節奏，而非銳利度。
• 檢查能抓出機械故障；品味仍需眼睛判斷。務必自己查看 contact sheet 和草稿，並說出你看到的，而非你假設的。
• 只使用使用者擁有或已獲得使用許可的資產；註明你引入的任何內容的來源和許可證。