Canvas 解說 Reel
此公式最初於 2026 年 10 月為一篇履歷建議 Reel 建立，隨後被保存為可重複使用的模板。
- 運作範例：
template/example-08-resume.html（該 Reel 的完整 HyperFrames 組合；媒體素材不包含在內）。 - 螢幕截圖：
../../docs/canvas-explainer/。
適用的內部規則：頭像每次僅短暫出現（約 3–4 秒），且僅交付完整高畫質主檔。引擎：HyperFrames（固定版本 [email protected]）。FFmpeg 僅用於前置處理與品質檢查。
公式（請完整保留）
- 一個無限黑色畫布。 使用
#world設定為 2400x6400，並加上細微的點狀網格。鏡頭從不切斷；以power3.inOut平滑移動，並在較大移動時套用短暫動態模糊。 - 所有內容在語音說出時即時繪製。
- 標記筆觸為 SVG 路徑，搭配粗糙的
feDisplacementMap濾鏡。 - 手寫標籤使用 Ink Free 字體，以
steps()逐字顯示。 - 顏色：白色 #f4f4ef、黃色 #ffd84a、藍色 #6f8cff、粉紅色 #ff6fae、綠色 #7ee08a、紅色 #ff4b3e。
- 紅色箭頭與圓圈指向關鍵事物。
- 標記筆觸為 SVG 路徑，搭配粗糙的
- 真實的技術工件，絕非單純的通用塗鴉。 軟體工程受眾希望看到真實的架構、程式碼、終端機、實際截圖與真實文件（例如經過遮蔽的履歷），並以方框與手寫文字標註。
- 畫布上手繪框架內的頭像。
- 框架大小為 405x720，比例 9:16。鏡頭縮放至框架（
s = 1080/405），使其畫面填滿全螢幕；該縮放即為過場。在畫面上方以手寫文字標註。 - 頭像總時長維持在低於 40%（目標約 20%）：一個鉤子拍、一個中段「個人」拍、結尾。
- 框架大小為 405x720，比例 9:16。鏡頭縮放至框架（
- 無空白畫面。
- 每個區域填滿可視範圍 y 120–1500。
- 鏡頭移動期間，紅色連接箭頭在各區域之間繪製。
- 鏡頭抵達時，黃色標題隨即出現。
- 字幕位於 y 1555–1720，使用 Ink Free 64px 字體，關鍵字為黃色。將接合的字幕 HTML 包裹在內層
<span>中，否則 flex 會丟失空格。
- 結尾。
- 鏡頭縮放至整張已繪製的地圖（s ≈ 0.31），放在變暗（0.58）的結束卡片後方。
- Call to Action 以語音說出。例如：「想要我的履歷嗎？留言『resume』，我就把模板寄給你。」關鍵字以黃色大字顯示。
- 絕不告訴觀眾不要複製共享資源。該資源屬於他們使用。
- 音效。
- 音樂襯底置於語音之下，使用
~/.claude/skills/hyperframes-audio/scripts/carve.mjs --comp index.html --core <dir with node_modules/@hyperframes/core>進行裁切。將--core指向任何已安裝@hyperframes/core的專案資料夾。 - 在語音間隙與縮放結束時提升音樂音量。
- 音效：刻度/標籤的筆尖聲、打字聲、鏡頭移動的翻頁/咻聲、彈出時的嗖聲與重擊聲、結尾鈴聲。
- 音樂必須是 Instagram 安全可用的（參見下方「音樂」）。
- 音樂襯底置於語音之下，使用
建置步驟
- 輸入素材。
- 語音 WAV，常態化至 -16 LUFS：鉤子 + 旁白，串聯而成。
- 逐字時間戳
word@seconds：對齊的 JSON 或clips.json字幕，儲存為words.txt。 - 頭像 MP4，其媒體時間 = 語音時間減去鉤子長度。
- 真實工件圖片。
- 分鏡區域。 針對每個拍子，選取一個世界原點，並列出其繪製內容與對應語音時間。將文字保持在 1080px 可視範圍內（Ink Free 約 0.5 em 每個字元）。
- 複製
template/example-08-resume.html至新專案資料夾，並取代區域區塊、框架（每個 `<video class=