saas-promo

SaaS 宣傳片（範本："skill 1"）

這個技能只需一個設定檔 promo.json 就能製作完整的宣傳片：經典的約 11 秒剪輯，或當 promo.json 包含 chapters 時的約 50 秒長剪輯。畫布場景會在無頭 Chrome 中逐幀繪製。不使用任何素材影片、AI 影片或範本服務：

• 圖片： 使用者自己的螢幕截圖、應用程式 UI、設計稿或影片定格畫面。內建的 UI 卡片會填補任何空缺。
• 文字： 使用者自己的文字。
• 音效： 每個提示點都有音效，加上原創的合成背景音軌或使用者自己的音樂。

影片結構是固定的，並複製參考影片 skill 1 .MP4（一個 TikTok SaaS 代理商影片）的節奏。只複製其技術手法，絕不複製其影片、文字、品牌或浮水印。

時間	場景
0-0.5 秒	大型字形（# < @ ! ?）在中央閃現；在昏暗的點陣字形場地上，紫色和萊姆綠霓虹條與 4 角星芒閃爍
0.5-3.3 秒	text.typed 伴隨游標打字輸入；26 張卡片從遠方飛入，並以 3D 環狀繞著該字旋轉（先顯示網點，再顯示真實圖片）；環越轉越快，衝過鏡頭並模糊淡出
3.3-6.45 秒	一個彩繪草地，有雲朵、鳥類和蝴蝶，先以柔和色調呈現，然後飽和度增加；三張卡片從右側滑入，其餘卡片飛入形成一個 12 卡的 Bento 牆。bento[0] 在主卡片上打字，bento[1] 在一張高的玻璃卡片上垂直打字，兩張卡片交換圖片，bento[2] 在一張白色卡片上打字。接著相機 zoom 到那張卡片
6.45-約 8.8 秒	黑暗的點波場；一個發光的漸層球體彈入並向左滑動；headline 逐字出現（從模糊到清晰），然後 sub 擦入；所有東西模糊
約 8.8-11.1 秒	故障效果（色調偏移、切片）進入主畫面：藍色/白色長時間曝光的花朵，背景是藍色到橙色的天空，飄浮的 ! @ # $ % * 符號和數位雨。from 模糊淡入淡出，然後 to 伴隨著砰的一聲落下，可選的標誌出現在其下方。最後淡出至黑色

影片長度約為 11.1 秒。如果標題很長，長度會稍微增加，因為副標題總是大約需要 0.85 秒的螢幕時間。

長剪輯（約 50 秒）：chapters

加入 "chapters"（每個產品、專案或主題一章），相同的四個場景會作為 拍子 重複，每個拍子為 1.5 小節，結尾場景則佔 2 小節：

拍子	播放內容
開場	開場（typed + 所有圖片的旋轉）→ 牆（所有圖片，bento）→ 球體（headline / sub）
每個章節	開場（該章節的 typed，其圖片在旋轉中；如果沒有 typed 則跳過）→ 牆（先顯示其圖片，然後是其 bento 和 wall 外觀）→ 球體（其 headline / sub / orb 顏色）
結尾	結尾場景（from / to / url / 標誌），2 小節

四個章節，其中三個有打字開場，總共 23 小節，在 109 BPM 下約為 50 秒。

• 圖片： 為每張圖片標記 "tag"，將其歸檔到所屬的章節下。
• 牆面外觀： "meadow"（白天）、"dusk"（日落）或 "dark"（黑暗的點波場，使用該章節球體顏色的發光效果）。交替使用這些外觀可以區分不同章節。
• 音樂同步：
  • 搭配 music 時，assets.py 會測量歌曲的速度及其 Drop 點（能量提升最大的點，會對齊到一個大鼓點）。影片會從開場旋轉之後的第一個剪輯點開始，對齊到 Drop 點，之後的每個剪輯點都會落在小節網格上。
  • 檢查輸出的 music: … bpm, drop at … s 這行。如果不正確，請自行提供 bpm 和 musicDrop（以秒為單位）。
  • 使用 sfxLevel（例如 -4）來讓音效在歌曲下聽起來適中。
• 版權： 使用商業歌曲可能會導致影片在發布時被靜音或遭到版權聲明。請注意此事，並建議使用平台自己的音效庫來發布公開貼文。

需求：ffmpeg、Node 22+、Google Chrome 或 Chromium（CHROME_PATH），以及一個安裝了 numpy 和 scipy 的 Python（PROMO_PY；promo.sh 會自動尋找）。

工作流程

1. 收集宣傳片所需的素材

• 卡片（8-20 張圖片）： 產品、網站、應用程式或儀表板的螢幕截圖；設計作品；或使用者影片的定格畫面。圖片和影片都可以使用。影片會提供一張定格畫面，時間點為 "at" 秒或在其長度的 30% 處。橫向圖片會用於寬版插槽，縱向圖片則用於高版插槽。如果少於 8 張，內建的 UI 卡片會補足空缺（搜尋列、表單、圖表、漸層球體、膠囊按鈕等，並標示 text.labels）。先檢視圖片，丟掉那些幾乎空白的。
• 文字： 保持簡短，因為場景會以固定的速度打字和顯示它們。
  • typed：一個帶有標點符號的單字或名稱，約 4-8 個字母（例如 "SaaS."、"KumNit."）。
  • bento：三個簡短短語（1 個、2-4 個和 2-3 個單字）。
  • headline：5-8 個單字。sub：一行最多約 90 個字元。
  • from / to：結尾的「從…/到…」配對。
  • 對於 Khmer 語（"lang": "km"），請使用自然的 Khmer 語書寫。在 headline、from 和 to 中，應一次顯示一個的區塊之間加上空格。已內建 Kantumruy Pro 字型。
• 可選素材：
  • logo：顯示在最後一行下方。不透明的標誌會變成圓角應用程式圖示。
  • text.url：結尾卡片上的一個網站網址。
  • hero：使用者自己的結尾圖片，用來取代花朵。
  • backdrop：一張圖片，用來取代彩繪草地。
  • music：使用者自己的音樂。在長剪輯中，其 Drop 點會對齊到第一個剪輯點；設定 musicStart 可以覆蓋這個行為。
  • chapters：約 50 秒的長剪輯，每個章節包含其 tag、typed、bento、headline、sub、wall 和 orb。
  • sfxDir：一個資料夾，裡面放使用者自己的音效。
  • colors：用於霓虹、球體、天空和符號的品牌顏色。

2. 撰寫專案

建立一個專案資料夾，並將 examples/kumnit-saas.json（或 -km.json）複製到其中，命名為 promo.json，然後編輯它。每個鍵的說明都在 references/config.md 中。路徑是相對於專案資料夾的。

3. 預覽（約 10 秒）

<skill>/scripts/promo.sh <project>/promo.json --preview

這會準備圖片（並測量音樂），然後渲染 12 張靜態圖（長剪輯中每個拍子一張）到 out/<name>-preview.png。仔細閱讀並檢查：

• 輸入的單字沒有被卡片遮擋。
• 沒有任何文字被擠壓：長文字會縮小以適應，但可讀性會變差。
• 主卡片（大張，左側）顯示了一張好圖片：它會取用 cards 中的第一張橫向圖片。
• 結尾文字在花朵或主圖上清晰可讀。

4. 渲染（短版少於一分鐘；長版約 4 分鐘，因此請在背景執行）

<skill>/scripts/promo.sh <project>/promo.json

各階段依序執行：assets、plan（從場景產生時間線和音效提示點）、render（3 個 Chrome 渲染器，使用 --jobs N）、mix、encode。

• --from mix 會重新混合音效並重新編碼，而不需重新渲染幀。
• --from render 會重新繪製畫面。

輸出：out/<name>-1080p60.mp4 和 out/<name>-contact.png（大約 30 幀，涵蓋整個影片）。

5. 交付前檢查

• 閱讀聯絡表。
• 使用 ffprobe 檢查，長度應約為 11.1 秒（經典版）或拍子的總和（長版；build/cues.json 列出了每個拍子）。混音會正規化到 -14 LUFS / -1 dBTP：使用 ffmpeg -i out.mp4 -af ebur128 -f null - 測量。
• 混音階段會印出有多少音效來自 sfxDir，以及有多少是合成的。
• 你無法聽到結果，因此請告知使用者你檢查了哪些項目，並請他們聆聽。開頭的點擊聲和草地的撞擊聲是最大的音量時刻。

調校

• 時間點：
  • scripts/scene.mjs 頂部的 plan() 函式包含經典場景的時間點。
  • beatSpecs() 佈置拍子：mapT() 將這些時間點移動和拉伸到每個拍子中。
  • cuesFor() 中的音效提示點會自動跟隨，因為 audio.py 會從 build/cues.json 讀取它們。
• 外觀：
  • 顏色來自 colors。
  • Bento 佈局來自 scene.mjs 中的 SLOTS 表格。
  • 草地、花朵和球體分別在 buildMeadow、drawFlower 和 drawOrb 中繪製。
• 音效：scripts/audio.py 中的 SFX 表格列出了 sfxDir 中會嘗試的檔案名稱，每個提示點會根據變體選擇。背景音軌的和弦和區段在 make_bed() 中。
• 尺寸： 僅限 1920×1080，如同範本。垂直的 9:16 版本需要自己的佈局。