手绘视频 是做什么的？
屏幕上的一切均由 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 创建。以下所有命令均使用此 Python。如果缺失，请运行INSTALL.md步骤 4-7。切勿将pip install安装到系统 Python 中（Homebrew Python 会拒绝），在 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输出版本号，且<skill Python> scripts/brushlib.py输出p5.brush ... ok。
2. 选择用例
| 用例 | 功能 | 起始目录 |
|---|---|---|
explainer | 手绘笔记式步骤解说：钢笔绘图、箭头、水洗、手写标签、红色记号笔突出 | usecases/explainer/ |
story | 短篇动画故事：涂鸦角色表演（挤压、预期动作、眼神、眉毛），水彩世界 | usecases/story/ |
redraw-video | 人物真实视频的重绘（每秒 12 帧，丝网印刷或水彩效果），带有真实到绘画的过渡擦除 | usecases/redraw-video/ |
blank | 其他任何内容或新风格：一条钢笔线、一层水洗、一组排线、手写字迹以及绘画工具包 | usecases/blank/ |
在编写任何内容前，阅读所选 usecases/<name>/USECASE.md。若未在表格中，则从 blank 开始，并阅读 references/p5brush-notes.md。
完成标志：选定用例并确认内容（文字、节奏、时长、9:16 或 16:9）。
3. 启动项目
<skill Python> scripts/new_project.py <use case> "<Documents>/<new folder>"
将项目放置在用户的“文档”文件夹中（绝对路径；在 Windows 上可能在 OneDrive 内），切勿放在技能文件夹内：技能更新会替换该文件夹。（--list 可列出可用用例。）redraw-video 例外：它运行自己的工具（USECASE.md）。
完成标志：文件夹包含 index.html、assets/vendor/brush.js（p5.brush，已为 HyperFrames 检查器打补丁）和 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/<name>/，包含：
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。 - 描摹重利用例最适合人物正面或四分之三侧面。