maddexritter-rgb/vibe-editing-promo

/promo — 品牌影片產生器 (Remotion + Claude Code)

製作兩種高級品牌影片。由 Remotion (基於 React 的影片) + Claude Code + remotion-best-practices 技能驅動。

🎬 先選擇模式（若不明顯，請詢問使用者）

• 模式 A — 動畫解說 / 展示。 完全動畫化，沒有真正的長篇素材作為主軸。適合簡報展示、功能發布、內容飛輪影片、SaaS 宣傳片、品牌解說。→ 從 templates/glass/ (高級液態玻璃) 或 templates/saas/ 建構。請參閱下方 glass 部分。實例：~/Downloads/engine/2026-06-12_WorkflowDemo (FlywheelFilm 合成)。
• 模式 B — 檔案 / 起源故事影片。 使用者提供一個長篇 粗剪（他們自己的剪輯 — 真實素材，章節以黑畫面分隔）並希望將其轉變為品牌影片：章節之間插入章節卡片、每章場景配樂、閃爍轉場和成長曲線高潮。→ 時代卡片 + assemble.py。請參閱下方 模式 B 部分。實例：~/Downloads/engine/2026-06-14_BrandHistory (一部「約 5 分鐘講述 4.5 年」的起源影片)。

兩種模式共用相同的品牌標記化玻璃套件（閃頻、GlassBG、時代卡片、成長曲線、品牌 constants.ts），因此外觀風格一致。每次根據品牌在 constants.ts 及 public/ 標誌中重新品牌化 — 切勿將品牌名稱硬編碼到元件中。

何時使用此技能 (相較於其他影片技能)

• ✅ 使用此技能：獨立宣傳影片、SaaS 展示、課程預告、功能發布影片、從 URL 產生的動畫解說
• ❌ 不要使用此技能：人頭 talking-head 剪輯、人臉追蹤重構、填充詞編輯、為現有影片上字幕 (請改用 shortform / caption-clips)

現成的 SaaS 動畫模板

三個可直接用於 Remotion 專案的元件 (適用於 2026 年主導科技品牌 Instagram/TikTok 的 $1-2k/影片風格)：

• templates/saas/SaasTextPopup.tsx — 4 秒品牌開場，快顯文字 + Logo 揭示
• templates/saas/SaasGlassReveal.tsx — 6 秒玻璃 UI 功能卡片，帶 backdrop-blur
• templates/saas/SaasDashboardTour.tsx — 8 秒 3D 儀表板導覽，帶動畫游標

完整技巧參考位於 editing-styles/saas-animation-style.md。連鎖指揮者位於 saas-animation-video — 使用「make a saas animation video」觸發。

請參閱 templates/saas/README.md 了解配置及品牌客製化。

---

🟣 高級液態玻璃展示 / 解說影片 — templates/glass/

這是高階、品牌原生「令人驚嘆」簡報影片背後的系統（可直接放入投影片簡報中作為現場展示）。當需求是精緻、以簡報或概念為驅動的解說/展示，包含真實素材、真實產品 UI 和醒目螢幕文字（而非旁白）時，請使用此系統 — 而非 saas 模板。實例：~/Downloads/engine/2026-06-12_WorkflowDemo (FlywheelFilm 合成 — 一個內容飛輪展示)。1920×1080 @ 30fps，大膽的下三分之一標題，無旁白。

品牌中立。 此套件已品牌標記化。在 src/constants.ts 中設定品牌（COLORS + 字型），並將品牌的 Logo PNG 放在 public/ 中。範例使用 Speaker / company.com（Sambucus #131628, Electric Indigo #6f00ff, Lavender #a08bec, Poppins）— 每次替換這些品牌標記；切勿將品牌名稱硬編碼到元件中。

套件內容 (templates/glass/src/)

• constants.ts — 品牌標記 (COLORS, FPS, WIDTH, HEIGHT, spring 預設)。重新品牌化的唯一地方。
• components/GlassBG.tsx — 持續流動的漂移光球漸層背景（連續流動基底；位於每個節拍之後）。
• components/GlassPanel.tsx — 磨砂「液態玻璃」面板（backdrop-filter 模糊 + 光澤 + 深度）。具 dark 變體以確保文字清晰。backdrop-filter 在 Remotion 的無頭 Chrome 中確實會渲染。
• components/GlassBeats.tsx — 節拍原語：GlassTitle (鉤子卡片)、GlassFrame/SceneDemo (玻璃視窗中的 UI + 敘述)、GlassOutro (回報卡片 + Logo)、PayoffCard。
• components/BrandSting.tsx — 約 1.5 秒的 Logo 閃頻（光條 → 閃光 → 標誌綻放 → 文字標誌）。
• components/CreateShots.tsx — NarratorChip (大膽的下三分之一標題 = 無旁白的「大膽文字」圖層) + 媒體播放器鏡頭。
• components/Flywheel.tsx — 標誌性節拍：ContentFlywheel (複合循環環)、FlywheelEscalation (堆疊的簡報線高潮)、AutoPostScheduler (即時終端 + 真實螢幕錄製，並排顯示)、RawSessionPlayer、HeroClipPlayer (手機框中的剪輯)、Tier1Prompt/Tier1Pipeline (指令 + 步驟)。
• components/ChannelScroll.tsx — 真實頻道資訊源滾動（縮圖 + 時長）。RealClipShowcase.tsx — 真實垂直剪輯播放網格。GlassBrowser.tsx — 瀏覽器框架中的應用程式 UI。ScaleWall/Odometer/Stopwatch — 音量 + 數字戲劇效果。FXOverlay — 顆粒/暗角。
• audio/index.tsx — AudioBed (音樂，音量低) + Sfx (咻/噌/上升/滴答…) 帶有 MASTER 增益表。
• compositions/FlywheelFilm.tsx — 實例：閃頻 → 鉤子 → 原始證明 → 指令 → 流程線 → (中段：頻道 + 自動發布終端/錄製) → (短片：英雄 + 網格) → 飛輪環 → 升級 → 結尾。

製作劇本 (行之有效的順序)

1. 首先閱讀原始素材 (簡報 / 摘要)。提取概念和品牌自身的語言 — 為節拍擷取逐字台詞，使影片感覺與他們的演講自然貼合。（不要發明泛用文案。）
2. 在 constants.ts 中設定品牌標記；將 Logo 放入 public/ 中 (參閱關於 Logo PNG 的提醒 #5)。
3. 使用 TransitionSeries 進行節拍分鏡 (閃頻 → 鉤子 → 展示節拍 → 回報循環 → 升級 → 結尾)。保持緊湊 (~38–45秒) — 快的節拍，大膽的下三分之一標題。(「太慢」是 #1 的意見。)
4. 配置真實素材 (請參閱下方模式) — 真實素材/UI 總是優於模擬。
5. 渲染： npx remotion render <CompId> out/<name>.mp4 --codec=h264 --crf=16 (提示編輯時附加「使用 Remotion 最佳實踐」)。
6. 透過擷取影格進行 QC — 切勿盲目信任 (提醒 #1)。
7. 交付到專案的 20_DELIVER/ (以品牌命名)。除非另有指示，否則僅限本地。

真實素材模式

• 素材 → 在玻璃播放器/手機/瀏覽器框架內使用 <OffthreadVideo muted startFrom={..} playbackRate={..} />。製作代理 (720×1280 / 1080) 以保持工作室和渲染速度。
• 螢幕錄製 → 裁剪到僅應用程式 UI (移除瀏覽器分頁/網址列/橫幅)：ffmpeg -ss A -t B -i rec.mov -vf "crop=W:H:0:Y,scale=1600:-2" -an out.mp4。加快速度 (playbackRate 2–3.5×) 使其明顯推進步驟，而非停留。
• 終端 + 錄製並排 (殺手級節拍)：一個風格化終端，其日誌反映真實腳本的 stdout (閱讀實際技能/腳本以獲取真實台詞)，旁邊是實際螢幕錄製 — 兩者讀取相同的名稱，使其看起來像一個系統。請參閱 AutoPostScheduler。
• 真實數據/縮圖 → 即時擷取：yt-dlp "https://youtube.com/@CHANNEL/videos" --flat-playlist --print "%(id)s|%(duration_string)s|%(title)s"，然後從 https://i.ytimg.com/vi/<id>/maxresdefault.jpg (備用 mqdefault.jpg) 取得縮圖。對於 Speaker 剪輯數據，使用 your analytics MCP。

🛑 常見陷阱 — 每一個都是建構此套件時的真實修復；在渲染前閱讀

1. QC 使用影格，絕不盲目。 每次渲染後，在所有節拍上使用 ffmpeg -ss <t> -i out.mp4 -frames:v 1 f.jpg 並實際檢視。在素材完成時，使用 --frames=0-540 提前渲染前半部分。
2. 轉場文字沙拉。 兩個交叉淡化的文字節拍會重疊成不可讀的混亂。修正：在每個文字節拍的內容上，在其最後約 14 影格內淡出（將 exit = interpolate(f,[dur-16,dur],[1,0]) 乘以不透明度），使其在下一段交叉淡入之前消失。（或使用硬切文字節拍。）
3. 閃頻/Logo 穿透。 一個以明亮 Logo 結束的閃頻（或任何節拍）會在交叉淡化期間穿透下一個半透明玻璃卡片。修正：在閃頻自身結束時淡出其 Logo，使其在乾淨的黑色影格上交棒。
4. 文字上的薄紗變暗 (微妙！)。 一個 <AbsoluteFill> 薄紗是定位的同級元件，因此它繪製在靜態文字上方並使其變暗 — 亮白色得以保留，薰衣草色/次要文字則被壓碎且看起來模糊。修正：將薄紗放在 zIndex:0，並將文字包裹在 position:relative; zIndex:1 容器中。（然後高不透明度的薄紗可以消除漂移光球的「發光再消光」脈衝，而不會使文字變暗。）
5. 看不見的 Logo。 一個帶有透明邊距的方形 Logo PNG 會使實際標誌顯得很小/看不見。修正：先裁剪 PNG 到其內容，然後按寬度設定大小 (<Img style={{ width: 600, height: 'auto' }} />)。
6. 音訊爆音。 未映射的 SFX 以 1.0 播放 → 滿量程爆音。修正：使用 MASTER 增益 (~0.5) + 完整的每個 SFX VOLUME 表 + 音樂 ~0.2 (在語音下)；最終交付使用 loudnorm I=-14:TP=-1.5。使用 volumedetect 驗證最大音量 ≤ ~−3 dB。
7. zsh 單詞拆分。 for x in $VAR 在 zsh 中不會拆分（一次迭代包含整個字串）。使用文字列表或 ${=VAR}。(在批次下載縮圖時踩過雷。)
8. 保持最後一個影格可見（非黑色）— 結尾以 Logo 卡片結束；驗證最後影格亮度 > ~10。
9. 字型 透過 @remotion/google-fonts (Poppins, JetBrainsMono)。數字/關鍵字使用恆定 textShadow 發光（別依賴背景發光 — 見 #4）。

---

🧊 3D + 2.5D 視差 + ☁️ 雲端規模 (模式 A 增強)

實例：~/Downloads/_PROJECTS/2026-06-15_3DSaasDemo (一個範例 SaaS 展示 — 視差英雄、浮動玻璃儀表板卡片、3D 長條圖 + 真正的 WebGL 變體)。

3D — 兩種路徑

• CSS 3D (預設，無依賴，在任何地方渲染)。 將場景包裹在 perspective + transformStyle:'preserve-3d' 中；將圖層放在不同的 translateZ 並使用 useCurrentFrame() 動畫化世界的 Z 軸 = 一個攝影機推車，其中近圖層的移動比遠圖層更多（真正的 2.5D 視差）。浮動玻璃卡片、擠出長條圖（正面/側面/頂面）、後退的網格地板都來自 CSS 變換。優先使用這個 — 它在無頭 Chrome 中非常穩定。
• 真正的 WebGL — @remotion/three + React Three Fiber。 真實網格、燈光、陰影、材質。僅在 CSS-3D 無法做到時使用（真正的幾何/燈光/景深）。安裝 @remotion/three + @react-three/fiber@^9 + three (R3F v9 是 React 19 所必需的；v8 是 React 18)。使用 Remotion 的 useCurrentFrame() 驅動動畫，不要用 R3F 的 useFrame (Remotion 逐影格渲染)。包裹在 `<ThreeCanvas width