portfolio-reel

Portfolio reel（範本：「skill 2」）

此技能可根據單一設定檔 promo.json，製作一支約 30 秒的完成介紹影片。所有畫面皆在無頭 Chrome 中以 Canvas 逐幀繪製，並在使用者的卡片內播放其影片片段。不使用任何素材庫、AI 影片或範本服務。其結構模仿參考影片 skill2.MP4（TikTok 創作者介紹影片）的節奏。僅複製技巧，絕不複製其影片、文字、名稱、帳號或浮水印。

時間（3 段）	場景
0-2.3 秒	芥末黃漸層，兩個大而柔和的圓圈滑入；hook[0] 逐字打字顯示，接著 hook[1] 以大而粗體的方式彈出
2.3-2.9 秒	一個白色圓圈從底部向上擦除；頭像以一個小黃色圓盤彈出
2.9-6.4 秒	白色背景上的個人資料主視覺：頭像放大成一個大圓圈（帶黃色環或黃色雙色調），然後是帶星號的 badge 膠囊、hello 逐字顯示、以細條分隔的 roles，以及一個帶有 ↑ 白色圓圈的黑色 button 膠囊。箭頭向上射出，頁面開始滾動
6.4-20.5 秒	每節一頁（各 4.6 秒），淺灰色背景，帶有柔和窗光陰影：一個漸層標題，然後是 1-3 張緊隨滾動並浮動的圓角卡片。影片播放，圖片緩慢縮放。直式卡片直立，橫式卡片寬廣，混合排列交錯
20.5-24.4 秒	一道黃光從左下角綻放，回到漸層；cta[0]，然後 cta[1] 逐字顯示
24.4-30.3 秒	一張黑色個人資料卡片從一個點彈出（頭像或 logo、handle、name、最多 3 個計數 stats、兩個按鈕）。游標點擊第一個按鈕，按鈕變成灰色並顯示 clicked，然後卡片以 3D 翻轉顯示其 back

影片長度約為 30 秒，含 3 個區段，每個區段約 4.6 秒，若文字較長則會稍微延長。

兩種 UI："ui": "classic"（預設）或 "app"

app 保留相同的時間線與文字，但每個場景都變成現代的應用程式畫面，並帶有動態網格漸層背景：

時間	app 場景
hook	一個玻璃質感的搜尋列逐字打出 hook[0] hook[1]；一個搜尋結果下拉選單列出該人物（頭像、姓名、角色）以及前兩個區段；游標點擊該人物
hero	點擊的結果放大成一個玻璃磁磚的 Bento 儀表板：一個高的照片磁磚（姓名和帳號）、問候語磁磚（徽章、帶高光筆的 hello、角色晶片）、一個計數 profile.stats 的統計磁磚、一個游標會點擊的 button 磁磚，以及一個列出各區段的磁磚
sections	一個橫向輪播，每個區段一張投影片：一個大數字、標題、「n 件作品」、頂端的進度條。作品以裝置模型展示：橫式影片在瀏覽器視窗中（紅綠燈、網址列 site/section-title），直式影片在手機中，在右側層疊排列
cta	一個聊天畫面：輸入中的點點，然後 cta[0] 和 cta[1] 以訊息泡泡的形式從該人物出現（最後一個使用強調色）
card	一張個人資料卡片，帶有漸層封面橫幅、重疊的頭像、帳號、姓名、計數統計與兩個膠囊按鈕；游標點擊「追蹤」（產生五彩紙屑），然後卡片翻轉顯示 profile.qr / profile.back 的QR 碼（當安裝 qrencode 時產生），下方並顯示網址

site（可選）設定瀏覽器模型中的顯示網址，預設為 profile.back。所有樣式與效果在兩種 UI 中皆可運作（在 app 中，orbit 和 ticker 不會被使用）。

樣式與效果

"style" 選擇一個色彩主題。深色樣式會讓頁面變成深色，並帶有淡色網格與發光卡片，取代窗光陰影。

樣式	外觀
mustard（預設）	範本：芥末黃漸層、白色主視覺、淺灰頁面、黑色膠囊、藍色按鈕
midnight	靛藍到黑色、霓虹青與紫羅蘭色、深色頁面、發光卡片
sunset	蜜桃色到粉紅色、暖白頁面、珊瑚色標題與按鈕
amber	金色搭配近乎黑色（開發者或作品集風格）、深色頁面、琥珀色膠囊與按鈕
mint	薄荷色到藍綠色、白色頁面、綠色標題

"colors" 可覆蓋該樣式的任何單一顏色。

所有效果預設為開啟。使用 "effects": {"ticker": false} 關閉單一效果，或使用 "effects": false 關閉所有效果，以獲得樸素的範本外觀：

效果	功能
bokeh	柔和的光粒子在漸層場景中飄升
shine	在大問題、按鈕和個人資料卡片上掃過一道光，並在圓圈擦除時加入回音環，按鈕則有脈衝環
marker	在姓名下方劃過一道螢光筆（text.highlight 選取單詞，或第二個單詞之後的所有內容）
orbit	一個帶有三個點的虛線環繞頭像旋轉
blur	頁面滾動時的垂直動態模糊
labels	在每個區段標題上方顯示「01 / 03」並附帶一條畫出的底線
glare	每張作品卡片定位後，一道對角線光澤橫跨其上
ticker	大型輪廓標籤在結束語句後方滾動（text.tags，否則為角色和區段標題）
confetti	點擊按鈕時，以該樣式色彩產生的五彩紙屑爆發
grain	覆蓋所有畫面的底片顆粒感與柔和暗角

為讓使用者選擇，在完整渲染前，先以每種樣式渲染相同的 4 個瞬間（「樣式板」）。使用 render.mjs --times 搭配僅 style 不同的 promo.json 副本。

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

工作流程

1. 收集影片所需的資料

• 頭像： 一張肖像照片，包含臉部與肩膀。提供 crop: [x, y, size]（像素）讓臉部位於圓圈中央，並檢查預覽。若背景雜亂或過亮，可使用 "avatarStyle": "duotone" 在黃色背景上產生深色人物，如同範本所示。
• 區段（1-4 個）： 每個區段一個簡短標題（2-4 個單詞）與 1-3 個片段：影片（{"file", "at"}，從 at 開始播放 5.5 秒於卡片中）或圖片。使用使用者最好的作品，並混合直式與橫式以增加變化。
• 文字： 保持簡短。
  • hook：一行小字與一個 1-2 個單詞的大問題。
  • badge：一個最多約 50 個字元的標語。
  • hello：「你好，我是……」。
  • roles：2-4 個簡短角色。
  • button：按鈕標籤。
  • cta：兩行結束語句。
• 個人資料卡片： handle、name、最多 3 個 stats、buttons、clicked 與 back。僅使用真實數字（來自使用者、其網站或個人檔案）。字串值（例如 "2023"）會原樣顯示，不進行計數。
• 語言： 若要使用高棉語，設定 "lang": "km" 並撰寫自然的高棉語。Kantumruy Pro 字體已內含。
• 可選： style、effects、logo（在卡片的圓圈內）、colors、text.highlight、text.tags、music（+ musicStart）、sfxDir。

2. 撰寫專案

建立一個專案資料夾，將 examples/creator-reel.json 複製到其中並命名為 promo.json，然後進行編輯。每個鍵的說明皆在 references/config.md 中。路徑是相對於專案資料夾的。

3. 預覽（約 10 秒）

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

此步驟會裁剪片段並渲染約 13 張靜態圖至 out/<name>-preview.png。仔細閱讀並檢查：

• 頭像裁切是否適當；
• 沒有任何文字行被擠壓（長文字會自動縮小）；
• 每個區段的卡片顯示良好的影格：變更 at；
• 個人資料卡片的數字。

4. 渲染（約 2 分鐘；在背景執行）

<skill>/scripts/promo.sh <project>/promo.json --jobs 4

階段依序執行：assets、plan、render、mix、encode。使用 --from mix 可重新混音，而無需重新渲染影格。

輸出：out/<name>-1080p60.mp4 與 out/<name>-contact.png。

5. 交付前檢查

• 閱讀聯絡頁（contact sheet）。
• 使用 ffprobe 確認長度與 build/cues.json 提供的資料相符。混音已標準化至 -14 LUFS / -1 dBTP。
• 您無法聽到結果，因此請告知使用者您已檢查的項目，並請他們聆聽確認。

調整

• 時間： 在 scripts/scene.mjs 中的 plan() 函數。SEC 是區段的長度，SCROLL 是頁面滾動的長度。buildCues() 中的提示會自動跟隨。
• 外觀：
  • 主題定義於 scene.mjs 中的 STYLES，效果定義於 EFFECTS；顏色也可來自 colors。
  • 卡片佈局為 layout()。
  • 窗光陰影為 buildShade()。
  • 翻轉效果為 drawFlip()，使用帶有透視的條帶。
• 音效： scripts/audio.py 中的 SFX 列出了在 sfxDir 中嘗試的檔案名稱。make_bed() 是 Lo-Fi 節奏。