真實元件宣傳片工作流 是做什麼的？
預設風格 = 《一條線》：一個來自產品的品牌母題貫穿全片，配合留白與三個由真實交互觸發的爆點。規整說明書式鏡頭和堆疊特效的發布會式鏡頭作為對照，見創意手冊。
templates/ = 拍攝殼（通用化，已補全踩坑修復）+ v3 定稿的合成、樣式、配樂、導出腳本。複製到 videos/<name>/ 後按標註【必改】的位置改寫。
按需讀取：
references/creative-playbook.md：母題、三個爆點、留白規則、文案、節奏表。定分鏡前必讀。references/compose-recipes.md：量座標、時間映射、鏡頭容器、光面板、描線、聚光、世界翻轉、拼標識、轉場、時間線寫法。寫合成前讀。references/pitfalls.md：拍攝、渲染、音訊、交付的現象→根因→處理表與驗收命令。遇到異常先查。
技術棧
| 環節 | 技術 | 要點 |
|---|---|---|
| 合成/渲染 | HyperFrames（固定 [email protected]，npx --yes，不裝進業務依賴） | check 校驗、snapshot 抽幀、render 出片 |
| 動效 | GSAP（拷業務項目已裝版本到 assets/vendor/gsap.min.js） | 單條 paused 時間線註冊到 window.__timelines[id] |
| 拍攝構建 | Vite + @vitejs/plugin-vue（createRequire 從前端工程解析依賴） | 獨立 root；envDir/publicDir 指向前端工程；vendor 單獨成塊 |
| 確定性時鐘 | Vite transform 插件 | 裸調用與 window. 前綴的 setTimeout/rAF/Date.now/performance.now 全部改接 window.__shoot |
| 資料隔離 | 記憶體 fixtureFetch（含寫操作模擬）+ 網路白名單 + 固定種子 + 固定 epoch + 固定定位 | 虛構資料、業務請求改走夾具、固定拍攝時鐘 |
| 交互腳本 | performActions(t) + once/byText/rowButton/typeInto | 在指定秒數驅動真實點擊、輸入、拖拽 |
| 素材 | 橫屏 PROMO_RESOLUTION=4k 2 倍像素；手機 430×932 單獨視口 | 合成可大幅推近仍清晰 |
| 配樂 | Python3 + NumPy（96 BPM、FFT 混響、種子固定） | 靜音落拍、重音對爆點、節點點亮配鐘音 |
| 響度/導出 | FFmpeg 兩遍 loudnorm（−14 LUFS / TP −3）、封裝歸一化原始配樂、壓縮版、封面 | 主片 + -share.mp4（約 11 MB）+ 封面 PNG |
目錄結構
videos/<name>/
promo.config.mjs appDir/srcDir/entry/motionFile/id/duration/coverAt/hyperframes —— 唯一項目相關配置
capture/ index.html(拍攝殼) bootstrap.ts(時鐘/隔離/交互) fixtures.ts(虛構資料，需新寫) vite.config.mjs
scripts/ render-footage.mjs compose-film.mjs compose-audio.py normalize-audio.mjs render-film.mjs remux.mjs
assets/ footage/ footage-4k/ audio/score-final.wav vendor/gsap.min.js
index.html(compose 生成) film.css package.json README.md
npm scripts：capture / compose / audio / check / snap -- <秒,秒> / render / remux / dev。
流程
- 定方向：讀
PRODUCT.md/DESIGN.md/品牌標識，按 creative-playbook 找母題、設計三個爆點。只向用戶確認兩件事：創意主線（給 2–3 個方向，推薦「一條母題」）、文案口徑（沿用還是換新）。 - 分鏡：每幕 = 真實頁面 + 一句宋體標題 + 關鍵交互秒數 + 母題線在本幕的形態；45 秒參考節奏見 playbook。寫進 README 分鏡表。
- 拍攝殼：
bootstrap.ts裝window.__shoot、網路白名單、固定定位、清儲存（含 IndexedDB 草稿）、預置主題/視圖/離線 token，replaceState到路由後import產品入口；慢載入頁面用waitFor/settle沖刷 rAF；注入隱藏光標/滾動條/插入符的樣式。fixtures.ts字段沿用真實接口，寫操作只改記憶體。先在瀏覽器?shot=<鏡頭>&live預演交互。 - 採集：
npm run capture（單 worker），推近幅度大的橫屏鏡頭再跑PROMO_RESOLUTION=4k npm run capture。 - 量座標：從素材抽幀（1920 座標，4K 局部裁切取精確值）量出軌跡折線、按鈕、彈窗、步驟節點位置。
- 合成：改
compose-film.mjs的片段表、座標、文案、時間點，複用其工具函數；規則見 compose-recipes。每輪npm run compose && npm run check，再npm run snap -- <關鍵秒>看 contact sheet（爆點進出、轉場、標註對位）。 - 配樂：改
compose-audio.py的時間點（爆點重音、靜音段、點擊、節點鐘音），npm run audio。 - 渲染與驗收：
npm run render放後台；完成後用 ffprobe 核時長/幀數/解析度/幀率，用 ebur128 核響度與真峰值，再跑 blackdetect（設計黑場需說明），並抽約 18 幀拼圖肉眼檢查。只改封面就跑npm run remux。
約束
- 產品源碼與依賴不改；時鐘改寫只發生在拍攝構建。
- 只用虛構資料，不連業務後端/資料庫，不讀真實憑據；第三方線上資源（如地圖）走白名單，Key 只進已忽略的構建目錄。README 寫清隔離方式、種子、固定日期。
- 標註只用界面上真實出現的數字；畫面與文案不出現「演示/樣例/模擬」。
- 視覺遵循項目 DESIGN.md 與品牌色；字體本地聲明（Songti SC / PingFang SC / Georgia）。
- 中間產物（
.capture-build/ .shots/ .quality/ renders/ 日誌）進.gitignore；舊版本工程原樣保留，新版本另建目錄。 - 不提交、不發布到外部平台，除非用戶明確要求。
- 寫或改合成前按需調用
hyperframes-core、hyperframes-animation、hyperframes-cli核對當前 API。
交付清單
- 主片 MP4（45.000 s / 2700 幀 / 1920×1080 / 60 fps / H.264 yuv420p / AAC 320k 48 kHz / −14 LUFS / 真峰值 ≤ −1 dBTP）。
- 壓縮版
-share.mp4與封面 PNG，通過當前平台支援的檔案交付方式提供。 - 可編輯
index.html+film.css，以及素材和腳本。 - README：視覺說明、分鏡表、配樂說明、復現命令、拍攝隔離、交付核對。