手繪影片
螢幕上的每一樣東西都是由 p5.brush（真正的鋼筆、鉛筆、水彩紋理，在 GPU 上繪製）以 HyperFrames 專案繪製而成，每一幀都是時間的純函數，因此渲染結果是精確的。以下的使用情境是起點而非限制：任何手繪點子都適用。本檔案中的路徑皆相對於此技能的資料夾。
1. 設定（僅需一次）
- Node.js 18+（HyperFrames 透過
npx執行）。 - 技能專用 Python：
~/.cache/hand-drawn-video/venv/bin/python（Windows 為%USERPROFILE%\.cache\hand-drawn-video\venv\Scripts\python.exe），由INSTALL.md步驟 5 以 Python 3.10-3.12 建立。以下每個指令都使用它。如果遺失，請執行INSTALL.md步驟 4-7。絕對不要對系統 Python（Homebrew Python 會拒絕）執行pip install，在 Mac 上指令是python3，不是python。 - 網際網路：第一次執行時，
scripts/brushlib.py會下載 p5.brush（固定版本，SHA-256 檢查）到kit/.cache/；每個專案會得到一份副本。渲染時也會從 cdn.jsdelivr.net 載入 GSAP，因此渲染需要網路連線。 - redraw-video 使用情境需要更多依賴（MediaPipe、ffmpeg）：請參閱其
USECASE.md。 完成標誌：npx --yes hyperframes --version顯示版本，且<技能專用 Python> scripts/brushlib.py輸出p5.brush ... ok。
2. 選擇使用情境
| 使用情境 | 產出內容 | 從哪裡開始 |
|---|---|---|
explainer | 用圖文筆記解釋步驟：鋼筆繪圖、箭頭、水洗、手寫標籤、紅色麥克筆重點標示 | usecases/explainer/ |
story | 一部簡短動畫故事：一個有動作（擠壓、預備動作、眼神、眉毛）的塗鴉角色，一個水彩繪製的世界 | usecases/story/ |
redraw-video | 一部真人影片片段，每秒重繪 12 次（網版印刷或水彩風格），並附帶從真實到繪畫的轉場 | usecases/redraw-video/ |
blank | 任何其他內容，或新風格：一條鋼筆線、一層水洗、一層陰影線、手寫文字以及繪圖套件 | usecases/blank/ |
在開始撰寫任何內容之前，請先閱讀所選 usecases/<名稱>/USECASE.md。如果不在表格中：從 blank 開始，並閱讀 references/p5brush-notes.md。
完成標誌：已選擇使用情境且內容已達成共識（文字、節奏、長度、9:16 或 16:9）。
3. 啟動專案
<技能專用 Python> scripts/new_project.py <使用情境> "<Documents>/<新資料夾>"
將專案放在使用者的 Documents 資料夾（絕對路徑；在 Windows 上可能位於 OneDrive 內），絕對不要放在技能資料夾內：更新技能會取代該資料夾。（--list 會顯示可用使用情境。）redraw-video 是例外：它會執行自己的工具（USECASE.md）。
完成標誌：該資料夾內有 index.html、assets/vendor/brush.js（p5.brush，針對 HyperFrames lint 進行了修補）及 assets/fonts/。
4. 做出你的風格：好手繪作品的規則
這些規則適用於所有使用情境及任何新風格。
- 每一幀都是時間的純函數。
renderAt(t)在每次hf-seek時清除並重新繪製所有內容。不能使用Math.random()、Date、計時器或動畫幀。 - 每個元素一個種子（在每個元素之前使用
sd(id)）。一條還在生長的筆觸不能改變其後筆觸的紋理。 - 線條先於顏料。 先畫輪廓；水洗在其後淡入；陰影線使用
brush.clip從左到右顯現。顏料依照繪製順序置於線條之下。 - 以手繪速度繪製。 一條筆觸需 0.2-0.8 秒，並帶有慢入慢出效果。手寫文字約每個字母 0.04 秒。沒有任何東西會一次全部出現。
- 每部影片使用一組工具。 例如鋼筆 + 水彩 + 一支紅色麥克筆。三到四種墨水加上紙張顏色。紅色只用於需要注視的重點。
- 不完美，但每一幀的不完美都相同。 使用固定的正弦噪聲來處理過衝邊角與抖動線條，絕不能每幀使用新的隨機性。例外：刻意「抖動」（線條閃爍），為每個繪圖使用新種子，持續 2-3 幀（每秒 8-12 個繪圖）。
- 簡單形狀比細節更容易閱讀。 一個角色由圓形頭部、點狀眼睛與一條嘴巴線條組成；它透過身體（擠壓、預備動作、跟隨動作）及眼神與眉毛來表演。
- 文字是手寫的、簡短的，置於繪圖旁邊，不要寫在繪圖上。 套件字型是 Caveat（拉丁字母）。對於阿拉伯語，在
assets/fonts/中加入一個 OFL 阿拉伯字型，並用@font-face宣告。 - 保持簡短且安全。 每個片段 5-12 秒。在 9:16 比例下，將關鍵繪圖與文字保持在距離頂部約 170 像素、底部約 400 像素之間（平台按鈕與字幕區域）。 完成標誌：場景說出了已同意的內容，並遵循了這九條規則。
5. 檢查並渲染
npx --yes hyperframes lint：0 個錯誤。單一檔案場景出現「檔案過大」警告是可以接受的。npx --yes hyperframes preview進行預覽，或渲染後檢視開頭、中間與結尾的幀。npx --yes hyperframes render . -o renders/video.mp4。- 檢查幀是否符合步驟 4 的規則及使用情境自身的檢查項目；修正後再次渲染。
完成標誌：
renders/video.mp4存在且其幀通過檢查。
6. 新增使用情境（擴充技能）
在 usecases/<名稱>/ 中建立：
index.html：一個可運作的 HyperFrames 組合，能載入assets/vendor/brush.js與assets/fonts/中的字型（可複製blank作為起點）。USECASE.md：何時使用它、需要在範本中修改哪些內容，以及該情境自身的檢查項目。new_project.py會自動找到它。請在步驟 2 的表格中加入一列。
限制
- p5.brush 需要 WebGL2：HyperFrames 在 Chrome 中渲染，Chrome 支援 WebGL2。
- 水彩填色無法達到完全深色（就像真的水彩）：請使用水洗來處理深色區域。更多陷阱請參閱
references/p5brush-notes.md。 - 重繪使用情境最適合單一人物、正面或四分之三側面。