motion-graphics-promo 是做什麼的？
After Effects 品質的動態，以 HTML/GSAP 組件編寫，並透過 HyperFrames 確定性渲染。您會得到可編輯的原始碼、精確的原生螢幕保真度以及可重複的渲染結果，這是手動按鍵的 After Effects 專案無法提供給代理的。
來源研究：Higgsfield AI，「AI Created Every Motion Graphic in This Video」（YouTube W3-RIZ-Ps64，11:33，2026 年 9 月），以 720p 解析度搭配聯絡表檢查，以及 4 分鐘官方 SaaS 產品概覽的節奏。僅用於文法與節奏。絕對不要重複使用他們的像素、音樂、聲音、標誌或 UI。
1. 動態前先鎖定故事（先鎖定故事）
教學影片的前幾分鐘是先將簡報轉化為素材選擇和分鏡腳本，然後才開始任何動畫。請照做，用五點說明：
- 觀眾與時刻：誰在觀看、在哪個平台、聲音開或關。
- 一個產品、兩項任務、一個下一步：觀眾應該確切記得這些。
- 證據庫存：您實際擁有的真實螢幕截圖和螢幕錄製，附上來源建置/日期。不在這個清單中的任何東西都不能出現在螢幕上。
- 調色盤與字體：品牌自己的識別系統。借用參考資料的對比程度（粗體壓縮字型搭配飽和底色），而不是它的確切顏色。
- 長寬比：將直式 (1080x1920) 設計為獨立的構圖；不要裁切橫式。
2. 動態文法
| 節拍 | 規則 | 原因 |
|---|---|---|
| 入口 (0-3 秒) | 充滿能量：一個標籤落下、旋轉、彈跳，然後穩定一次；或者一個裝置帶有重量感墜入。 | 在不隱藏產品的情況下，鉤住滑動停止的注意力。 |
| 轉場 | 每次任務一個主要轉場。 手機在色塊之間滑動或傾斜，或者導航交接給下一個真實螢幕。 | 動畫應該解釋產品真實狀態之間的群組或移動。 |
| 穩定 | 短彈性（GSAP back.out(1.4) 或 elastic.out(1, 0.6)，0.4-0.7 秒）。裝置在螢幕需要閱讀之前穩定下來。 | 物理重量感給人高級感；閱讀時的晃動則是干擾。 |
| 證據停留 | 每次轉場後至少 2-3 秒穩定、可讀的螢幕。 | 螢幕比裝飾性標籤需要更多的閱讀時間。 |
| 強調 | 遮罩/裁切揭示的字體設計、矩形色彩強調、拼貼或色塊交接。節制使用。 | 這是「After Effects 風格」；過度使用就會變成一種模板。 |
時間預設值：60 fps；入口 0.5-0.9 秒；標籤交錯 60-90 毫秒；絕對不要在觀看者閱讀時，動畫化他們必須閱讀的文字。
3. 32 秒宣傳片時間軸
| 時間 | 目的 | 證據規則 |
|---|---|---|
| 0-4.4 秒 | 可識別的用戶問題，一段簡潔的文字搭配授權的 B-roll 或大膽的色塊。 | 沒有虛構的推薦或客戶身份。 |
| 4.4-13.3 秒 | 第一個任務的真實螢幕序列，保持導航連續性。 | 實際支援的路徑；沒有虛假的點擊或合成的 UI。 |
| 13.3-22.2 秒 | 第二個互補的任務，附有錄影證明的可見結果。 | 從驗證過的影片中選擇；不要引入競爭對手的說法。 |
| 22.2-26.7 秒 | 回到回報和產品身份。 | 以目的或邀請來措辭，而不是未經測量的時間或節省的收入。 |
| 26.7-32 秒 | 單一 CTA，附有 URL 和真實的可用性；音樂結尾。 | 符合最終目的地的連結和確切的發行狀態。保留音樂來源。 |
對於較長的考慮階段影片，請改用官方概覽結構：先有人類背景，然後每章一個工作流程，在工具之間回到人物，最後品牌結尾。
4. 建置它（HyperFrames + GSAP）
- 建立一個 HyperFrames 組件（參閱
hyperframes-best-practices技能了解 CLI、lint 和渲染陷阱）。在專案中鎖定 HyperFrames 版本和本地 GSAP 3 建置；不要在渲染時從 CDN 載入動畫執行時期。 - 裝置框架：一個具立體感的石墨外殼（頂部柔光、1-2 像素斜角高光、接觸陰影），包含真實螢幕截圖或靜音
<video>的螢幕錄影。使用translate3d/rotate動畫化外殼，穩定後保持螢幕內容直立且未縮放。 - 動態文字：將標題拆分為單字；在
overflow: hidden的遮罩內部使用gsap.from(words, {yPercent: 110, rotate: 4, stagger: 0.07, ease: "back.out(1.6)"})。每個節拍一個標題。 - 色塊交接：全出血的矩形擦拭（
clip-path: inset()動畫）在節拍之間切換；進來的色塊攜帶下一個裝置位置。 - 時間軸：一個主
gsap.timeline({paused: true})，每個節拍帶有標籤（"problem"、"job1"、"job2"、"payoff"、"cta"），讓 HyperFrames 可以確定性地搜尋任何幀。 - 音樂：僅限授權音樂（例如 CC BY 附註明）。在
audio-provenance.json中記錄來源 URL、授權、來源行和檔案雜湊值；編輯成在 CTA 節拍上的完整結尾。 - 以目標解析度/fps 渲染；用於社交媒體的 H.264 + 立體聲 AAC。
5. 說明片與廣告設計套件（經過實際製作驗證）
這個套件曾製作一系列產品說明片和 15 秒直式廣告。第一個版本使用深色背景，被認為「太黑」而遭到拒絕。有效的做法是：
- 每個場景後面的真實素材：產品真實世界情境的授權庫存素材（例如體育應用程式的比賽素材），以品牌色彩漸層調色（
linear-gradient(180deg, brand 74% → transparent → ink 50%)），並在底層加上saturate(1.3) brightness(1.12)。 - 調色盤：一個飽和的品牌色彩加上一個高能量強調色（例如紫色
#6c4cff+ 萊姆色#d7ff3c），天空色/珊瑚色僅作為貼紙使用，墨水色#16132e用於強調色上的文字。 - 字體：精簡顯示大寫（Archivo，
font-stretch75-80%，重量 900，在 1080 寬度上為 74-96 像素）。每個標題的關鍵字放在旋轉 -2° 的強調色標記框中。檢查每種語言的字符覆蓋率：Archivo 沒有西里爾字母，因此對於 ru/uk/bg 語言請切換到 Inter。 - 裝置框架：白色/銀色手機和瀏覽器框架，帶有 3D 透視舞台（
perspective: 1800px），顯示真實螢幕截圖或真實螢幕錄影。每個螢幕必須顯示真實內容（人物、標誌和資料），而不是空白狀態。 - 掉落貼紙：2-3 個簡短的大寫標籤掉入、旋轉並穩定在裝置旁邊（每個節拍一個）。
- 轉場：節拍之間使用帶有角度的強調色擦拭或 2 幀白色閃爍。
- 旁白（TTS 或錄製），音樂在其下方壓低，然後最終混音標準化至 -14 LUFS（
ffmpeg -af loudnorm=I=-14:TP=-1.5:LRA=11）。 - 真實裝置錄製（macOS）：iPhone Mirroring 加上
screencapture -v -V <secs> -R<x,y,w,h>錄製真實應用程式。在發送點擊之前啟用鏡像視窗。手機必須鎖定才能讓 Mirroring 連線。 - 在地化變體：保留一個帶有
{{placeholders}}的模板，並使用一個小腳本為每種語言生成副本（參閱references/vertical-ad-15s.template.html）。 - 每個連結上的 UTM 在字幕和個人檔案中：
?utm_source=<platform>&utm_medium=organic&utm_campaign=<video-slug>.
渲染陷阱（每個都差點送出有問題的影片）
- 當一個組件包含許多
<video>片段（6 個以上底層，或底層加手機片段）時，HyperFrames 可能會在渲染過程中悄然丟棄所有疊加圖層。 預覽快照仍然看起來正常。將素材底層預先拼接成一個影片，保持片段數量低，並且在排程前務必檢查渲染後的 MP4 的聯絡表。 - GSAP 的
fromTo搭配from變數中的autoAlpha: 1會在創作時顯示元素。請使用tl.set(el, {autoAlpha: 1})，然後再使用不含它的fromTo。 - 上傳到社交排程器有時會回傳空內容。請重試，並在排程前確認託管檔案的位元組大小相符。
- 螢幕上的真實人物臉孔和名字（玩家、客戶）需要在付費或公開使用前獲得他們的同意。如果缺少則標記。
6. 驗證編碼後的檔案，而不是預覽
- 從最終的 MP4 中擷取幀（例如
ffmpeg -i out.mp4 -vf fps=2 frames/%03d.png）並讀取它們：每個螢幕在其停留期間是否可讀？任何字幕是否重疊到平台 UI 安全區？文字是否在必須閱讀的動畫中間出現？ - 檢查解碼是否完成、持續時間、fps、幀數、響度和峰值；記錄最終檔案的 SHA-256。
- 執行 HyperFrames lint/佈局檢查以及對字幕幀的對比度取樣。
- 保留一個清單，將每個來源素材（含建置/日期的螢幕、B-roll 授權、音樂授權）綁定到最終雜湊值。
7. 邊界
- 僅限真實 UI。如果一個流程無法錄製（登入卡住、功能未發布），就刪除它；絕不要模擬它。
- 下載的參考影片、聯絡表和文字稿是私有的分析材料；絕不要將它們與創意作品一起上傳。
- 除非經過測量並有來源，否則不得提出知名度、ROI 或節省時間的主張。
- 創意批准不等於發布：排程和發布是分開的、已確認的步驟。