動態文字影片製作器是做什麼的？

這是一種完全以程式碼製作編輯型、高能量動態影片的方法，源自「Work Reel ’26」（84 秒作品集影片：微軟 → UW–Madison 外科 → Enterprise RAG → trace 結尾）。它打包成一個可執行的 template/ 目錄（17 秒示範，使用所有技術）以及一個完整的實作範例 examples/work-reel-26/。

運作原理。 每一幀都是時間 t 的純函數。reel/index.html 載入 reel/cues.js（時間軸）和 reel/reel.js（ES 模組：three.js 圖層、2D 文字畫布和 WebGL 後處理）。render.mjs 驅動無頭 Chrome 渲染聯絡表、條帶和靜止幀以供審查，或平行渲染每一幀，再由 ffmpeg 編碼成 MP4。music/score.mjs 在 Node 中以相同的 cues.js 合成配樂，因此每個節拍都能精準落在對應的幀上。

工作流程

0. 建立專案

bash <skill-dir>/scripts/new_project.sh <project-dir>   # <skill-dir> 為此 SKILL.md 所在資料夾

然後在開始設計前，完整閱讀 references/style-guide.md（視覺風格、動態詞彙、轉場目錄、佈局規則）和 references/sound.md。快速瀏覽 examples/work-reel-26/reel.js 了解長影片的組織方式。

1. 決定重點，然後分鏡

詢問（或決定）哪個部分佔主導，以及每個部分分配多少時間。觀眾會注意比例：Work Reel v2 中微軟佔了約 60%，必須重新平衡。解決方法是為其他章節增加時間，而不是刪除觀眾喜愛的部分。目標是主角約佔 35–40%。
從範本撰寫 STORYBOARD.md：時間預算、事實的來源、統一的主題，以及每個鏡頭一行（標題、視覺機制、轉場方式、音效）。
事實神聖不可侵犯。 僅使用提供的來源中的數字，且每個數字都需標明範圍（如「~180 個自建案例」、「320 個雙語提示」）。任何說明性的內容（工具 ID、文件 ID、範例答案、AST）都必須在 HUD 中標示為 SCHEMATIC。切勿繪製你沒有的每個維度的數據。要視覺化的是過程。醫療/臨床相關內容：不得提出療效聲明，若屬實則應標示「開發中 / 尚未驗證」。

2. 建構

reel/cues.js：S（場景開始）、hits（每個重要的節拍）、CH（章節 → 分段進度條）、dur。120 BPM：剪接在節拍上，章節切換在小節上。
reel/reel.js：每個鏡頭一個函式，sName(t)。每個函式繪製整個畫面：bg() → 透過 glShot(...) 繪製 GL 圖層 → 類型和形狀 → hud(t, {...})。在 SCENES 中以一個鍵註冊該鏡頭；在 TR 中加入該鏡頭的轉場（或省略，以在節拍上進行硬切）。
維持 CJK 常數，列出所有你繪製的中文字元（字體以子集方式載入）。

3. 反覆檢查每個鏡頭

node render.mjs --sheet=1,4,7,10,13,15.5 --cols=3 --w=640 --out=out/check/sheet.jpg   # 關鍵幀
node render.mjs --stills=10.4 --out=out/stills                                          # 全解析度細節
ffmpeg -ss 16.0 -t .6 -i out/reel.mp4 -vf "fps=10,scale=320:-1,tile=6x1" out/check/tr.jpg   # 從編碼中檢查一個轉場

用 Read 工具打開每張圖片。檢查碰撞（標籤壓到線條、統計數字疊到其他統計數字、文字進入 HUD 區域）、剪接處的空白幀、在 1600 像素寬度下的可讀性，以及每個轉場是否 從某個東西開始 並乾淨結束。預算：每個章節一張聯絡表，每個密集鏡頭一張全解析度靜止幀，每種轉場類型一條條帶。

4. 配樂、渲染、編碼

node music/score.mjs && ffmpeg -y -i music/score.wav -af "highpass=f=30,equalizer=f=250:t=q:w=1:g=-2,loudnorm=I=-14:TP=-1.2:LRA=8" -c:a aac -b:a 192k assets/score.m4a
node render.mjs --frames --workers=4                                    # 在 Mac GPU 上約 8–40 毫秒/幀：以秒計，非分鐘計
node render.mjs --encode --audio=assets/score.m4a --out=out/reel.mp4 --fps=30
# 網路用版本：ffmpeg -i out/reel.mp4 -vf scale=1600:900:flags=lanczos -c:v libx264 -preset slow -crf 23 -c:a aac -b:a 128k -movflags +faststart out/reel-web.mp4

你無法聽到配樂：使用 showspectrumpic 和每段 RMS 檢查，並在回報時提及。僅音訊變更無需重新渲染：直接重新封裝即可（-map 0:v -map 1:a -c:v copy）。

最重要的規則

字體是主角。 窄體顯示字（Anton）用於標題，寬體無襯線字（Archivo Black）用於強烈文字，斜體襯線字（Instrument Serif）用於唯一的「語音」台詞，等寬字（JetBrains Mono）用於所有標籤。大英文標題，雙語觀眾場合則用小型中文註釋。
每個鏡頭都有一個機制，而不只是文字：例如路由網格、矩陣掃描、token 在狀態機中跳躍、列表融合、封包通過閘門。標題命名機制；機制證明它。
節拍鎖定。 字母、晶片、計數器和剪接都落在 hits 上。快進（expo-out）、停頓、下一個。
連續性。 在章節內，優先使用形狀連續性轉場（透過視線所在元素縮放、從剛點亮的東西進行虹膜轉場），而非硬切。硬切加上衝擊效果則用於章節轉換。
沒有噪音呼嘯聲。 章節之間使用調性內的漸強，內部使用安靜的調性提示，約一半的剪接處保持靜音。
誠實的數據（見步驟 1），且任何說明性內容都要標上 SCHEMATIC 標籤。
保護數學運算。 從 backOut() 計算的半徑可能低於 0（Canvas 會拋出錯誤）：circle/starburst/jelly 已有防護。在合成器中，將本地時間限制為 ≥ 0 再進行 pow()，並限制 SVF 的 f/q（範本中已包含此限制）。

將影片作為網站開場頁發布

Work Reel 可作為其網站的進入頁面發布：index.html 全螢幕播放影片，然後轉交到作品集頁面。此模式已打包在 examples/site-intro/ 中（包含 index.html、css/intro-reel.css、js/intro-reel.js，以及一個增加 HTTP Range 支援的 Cloudflare Worker）：

嘗試自動播放且帶音效。如果被拒絕，則靜音播放並顯示脈動的「點擊開啟音效」。如果再次被拒絕，或使用者設定了 prefers-reduced-motion，則顯示「開始」模式的結束畫面（播放按鈕為主按鈕）。
播放期間：頂部中央顯示小玻璃藥丸形狀的控制項，因為影片的 HUD 佔據了角落。「跳過介紹」按鈕帶有一個隨著影片進度填充的環。音效切換按鈕的等化器條以影片的 BPM 脈動。Esc 跳過，M 靜音。
結束畫面：使用 HTML 實現影片的語法。角落括號、名稱以掉落字母形式呈現（Anton 字體）、等寬微字、分段 trace 條、粒子地形的 2D 點場版本、萊姆色主要 CTA 按鈕（懸停時文字滾動、光澤效果、磁性、每個小節脈動一次），以及一個半透明的「再看一次」按鈕。
透過萊姆色虹膜轉場從按下的控制項離開，降低音訊，然後導航。
兩種編碼（1600×900 約 1.3 Mbps，960×540 約 0.6 Mbps 供手機/省流量使用），preload="auto"，並提供海報圖。使用 HTTP Range（206）提供服務，否則 Safari 的進度條和搜尋功能會出錯。

動態文字影片製作器