產生標誌動畫
此技能將標誌圖片轉換為 5 秒動畫揭曉。每種風格都是一個場景，由 headless Chrome 逐幀渲染，ffmpeg 負責編碼幀，音效則根據場景報告的事件（落地、爆裂、閃爍）合成。此過程不使用任何 AI 影像服務、庫存素材或樣片。每種風格的最後一幀都是標誌檔案本身的像素，因此動畫永遠不會「重新繪製」品牌。
需求：Node 22+、ffmpeg（libx264、libvpx-vp9、prores_ks）以及 Chrome 或 Chromium。若 Chrome 不在標準路徑，請設定 CHROME_PATH。
工作流程
1. 找到並檢視標誌
找到使用者所指的檔案：檢查工作目錄、~/Downloads 和 ~/Desktop，或直接詢問。在渲染前先讀取圖片。注意它是否擁有透明或平面背景、有多少個獨立形狀、是否已包含字標，以及它的顏色。這決定了哪些風格會表現出色。在檢查預覽時請牢記這些資訊。
2. 確定需求，使用預設值而非提問
預設值為所有五種風格、1920×1080 @ 60 fps、自動背景，以及 MP4 加透明 WebM。僅在答案會改變輸出且你無法推斷時才提問。例如，使用者想加入名稱，但你不知道確切拼寫或顏色分割位置。
| 使用者想要 | 選項 |
|---|---|
| 特定風格 | --styles liquid,neon |
| Instagram / 方形、TikTok / Reels / 直向 | --size square、--size vertical（或 --size 1280x720） |
| 在標誌旁加上品牌名稱 | --text "Pharm|Kulen"（| 將文字分成取自標誌的兩種顏色）、--font "Arial Rounded MT Bold"、--text-colors "#0a3fa8,#ff9a00" |
| 深色或淺色頁面 | --bg dark、--bg light、--bg "#0b1e2d"（霓虹永遠是深色） |
| 供 Premiere / Final Cut 使用的檔案 | --prores（加入大型 ProRes 4444 .mov 含 Alpha 頻道） |
3. 先預覽（幾秒，而非幾分鐘）
<skill>/scripts/animate.sh "<logo>" --preview --out "<out-dir>" [options]
這會為每種風格寫入 <name>-5s-<style>-preview.png（每種風格 10 張靜止幀），以及當有兩種或以上風格時的 <name>-5s-overview.png，並為每種風格產生 -info.json。閱讀概覽並檢查：
- **去背：**乾淨的邊緣，且標誌內部無背景色或雜點。
info.json中的keyedBackground表示已對背景進行去背（檔案中無透明度）。 - 分組：
parts是獨立形狀的數量，textParts是找到的字母數量。字母必須被偵測為文字，霓虹閃爍、液態珠粒和彈跳掉落才會將其視為單詞處理。 - **構圖：**無裁剪且尺寸看起來正確。
若有問題，請參閱下方「修正分析問題」。若使用者希望在完整渲染前有發言權，則將概覽展示給他們。
4. 渲染
<skill>/scripts/animate.sh "<logo>" --styles <list> --out "<out-dir>" [options]
每種風格大約需要 60–70 秒（不透與透明通道加上編碼）。若為四種或以上風格，請在背景執行。每種風格的輸出放置在輸出資料夾中：
<name>-5s-<style>.mp4（含音效）、-alpha.webm、-alpha.mov（使用 --prores 時）、-sfx.wav、-keyframes.png 和 -info.json。
5. 交接前檢查
- 閱讀每個
-keyframes.png。最後一幀必須是乾淨、完整的標誌。 - 使用
ffprobe確認時長為 5.000 秒以及尺寸。音效峰值已正規化至 −3 dB。 - 將 MP4 和概覽傳送給使用者（可使用 SendUserFile 時），並以連結形式列出每個檔案。提及透明版本以及每種風格的簡短說明。
6. 迭代
時間控制位於 scripts/styles/<style>.mjs 中每種風格的 T 物件內。所有其他時間都依賴於此，音效也會自動跟隨，因此請在此修改。若需要五種風格無法提供的效果，或標誌形狀應有特定動作，請編寫新的風格。請參閱 references/custom-style.md。
風格
完整細節在 references/styles.md 中；若需為使用者選擇風格或解釋每種風格的作用，請閱讀該文件。
- liquid：標誌主色的一滴液體落在頁面上，擴散成最大的形狀。其他形狀和字母則以珠粒形式擠出。最適合圓潤、有機的標誌。
- neon：在深色頁面上，發光管線描繪每個形狀，標誌隨閃光亮起，字母像招牌一樣閃爍亮起。非常暗的形狀會變成白色。
- bounce：大形狀翻滾或滾入，像塑膠一樣彈跳，接著是五彩紙屑爆發，然後字母掉落。活潑有趣。
- lens：放大鏡在空白頁面上滑動，標誌僅透過鏡片顯示。接著從主要形狀縮小移出。適合搜尋、健康或洞察品牌。
- rise：品牌顏色的細線展開成帶狀，形狀從中升起。平靜且商業化，適用於任何標誌。
修正分析問題
- **JPG 標誌周圍有光暈或殘留背景：**背景是根據其邊框顏色進行去背的。若標誌觸及圖片邊緣，或位於漸層或照片上，請先將標誌剪下（匯出透明 PNG）並重新執行。
- 白色細節消失（白色背景上的白色形狀）：這是正確的去背。若這些白色部分必須顯示，請使用透明 PNG。
- **字母未被偵測為文字：**字母需要在同一行主要形狀旁邊或下方有 3 個以上高度相近的獨立字母。連寫字或單一形狀的字標會被視為一個部分，這在「升起」和「透鏡」風格中仍能正常動畫。
- 字標字型錯誤：
--font必須安裝在機器上。請檢查fc-list，或在 macOS 上查看/System/Library/Fonts。
製作專屬風格
當使用者有特定需求時，例如「藥丸應掉入定位」或「放大鏡應掃描」，請閱讀 references/custom-style.md。其中涵蓋了風格 API、引擎輔助工具、音效事件列表，以及過去成功製作標誌動畫的技術。這些包括將標誌重建為向量形狀、針對 PNG 檢查重建結果，並在最末端交回真實像素。