產品發表影片技能
此技能引導您使用 Hyperframes 創作高階、頂級產品發表影片。它強調從品牌探索到最終驗證的結構化工作流程。
善用官方 Hyperframes 技能
此技能擔任您影片專案的導演與架構師。為確保技術準確性並存取最新框架模式，您必須將其與官方 Hyperframes 技能搭配使用。
在撰寫任何程式碼之前，您應該：
- 叫用 官方 /hyperframes 技能 以檢視組合規則、data-attribute 語意及框架限制。
- 叫用 官方 /gsap 技能 以取得詳細的時間軸參考、緩動函數及複雜動畫模式。
透過將此技能的策略引導與官方技能的技術文件相結合，您將能製作出達到製作水準的影片組合。
無狀態專案生成（關鍵）
此目錄（hyperframes-product-launch-video）是 唯讀範本與技能資料夾。您絕不能在此處撰寫專案特定檔案。
每當您建立新的影片專案時：
- 目標目錄：所有專案檔案必須建立在使用者的目標影片專案資料夾中（例如
my-new-video/或my-new-video/assets/）。 - 專案 DNA：在目標專案的
assets/或根資料夾中產生brand_dna.json。 - 藝術指導：將最終的
ART_DIRECTION.md儲存在目標專案資料夾中。 - 無副作用：在專案執行期間，請勿修改此技能資料夾內的任何檔案。
工作流程
1. 探查階段（品牌 DNA）
開始之前，您必須了解品牌。
- 網站分析：使用 Playwright 瀏覽使用者的網站。萃取品牌顏色、字型（字體）及核心價值主張。
- 素材請求：向使用者索取標誌與圖示。指定需要乾淨、透明、邊界緊湊的 PNG 或 SVG 檔案。
- 影片類型選擇：詢問這是一部 100% 動態圖形影片，還是混合型影片（例如創辦人說話頭像 + Hyperframes 動態圖形）。
2. 規劃階段（藝術指導）
在規劃完成之前，絕不撰寫 HTML。
- 產生藝術指導：根據藝術指導範本建立一份
ART_DIRECTION.md文件。 - 場景分解：定義影片的每一秒，指定視覺動作、鏡頭移動、緩動函數及音效。
3. 實作（高階動態設計）
應用頂級動態設計原則。請參閱動態設計模式以取得程式碼片段。
- Apple 風格鏡頭：使用大幅巨觀變焦與快照變焦（
back.out）。 - 擦拭顯現：文字透明度被滑動的標誌「吃掉」的錯開效果。
- 撞擊/碎裂：使用 GSAP scatter 產生物理衝擊效果。
- 玻璃擬態：使用
backdrop-filter: blur(40px)的高階 UI 元素。 - 打字機物理：彈跳的 span 推動游標。
4. 音效設計（SFX）
- 購物清單：根據分鏡表向使用者提供一份「音效設計購物清單」。
- 同步：使用
<audio data-start="...">標籤來完美匹配 GSAP 的擊點。
5. 驗證與疑難排解
- 陷阱：檢閱關鍵陷阱以避免常見的 Hyperframes 錯誤（持續時間不匹配、目標遺失等）。
- FFmpeg：如果轉換失敗，引導使用者在本機安裝 FFmpeg。
最佳實務
- 原子場景：保持場景模組化，並嚴格透過
data-start和data-duration管理。 - 可見度管理：使用
autoAlpha進行場景轉場，以確保乾淨的搜尋行為。 - 版面 vs. 變形：使用實際尺寸處理 flexbox 間距，使用變形處理視覺效果。