学术手写 HTML 动画视频
直接渲染原 HTML DOM，在原页面元素上增加帧驱动的写入、分步出现、荧光揭示、SVG 路径绘制和纸张转场。文字节点和排版仍由原 HTML 提供，渲染器在截图前加载 PPT Skill 内置的跨平台中英双字体，并校验浏览器实际命中的字形。不重新排版文字。
硬性边界
- 输入必须是
z-handwritten-ppt生成并通过检查的 HTML。 - 英文、数字与公式固定使用
assets/PatrickHand-Regular.ttf，中文固定使用assets/MaShanZheng-Regular.ttf，不依赖系统字体。 - 渲染器必须读取指定字体文件，并通过 Chrome 的实际字体记录验证标题和正文；校验失败立即停止。
- 字号、字重、颜色、布局、图表和标注由原 HTML 决定。
- 输出固定为 1920×1080、30fps、H.264、
yuv420p。 - 成片恰好一条视频流、零条音频流；不添加旁白、音乐、音效或静音占位音轨。
- 同时输出 MP4 和同目录下的
cover.png。
工作流程
1. 先得到原版手写 HTML
用户提供文章、讲稿或技术主题时，先严格使用同仓库的 z-handwritten-ppt 生成 HTML。不要在本 Skill 内重新设计页面。
用户已经提供该 Skill 的 HTML 时，直接进入检查。保留 HTML 所在目录和相对资源路径，避免复制单个文件造成 CSS、图片或脚本丢失。
2. 用原 Skill 检查 HTML
python3 ../z-handwritten-ppt/scripts/check_deck.py \
"/absolute/path/to/deck/index.html"
检查失败时先修复原 HTML。动画渲染不得绕过缺失的 base.css、runtime.js 或 neat-annotations.css。
3. 安装一次渲染依赖
在本 Skill 目录运行：
npm install
渲染器自动寻找本机 Chrome、Edge 或 Chromium，并默认加载同级 PPT Skill 内置的 PatrickHand-Regular.ttf 与 MaShanZheng-Regular.ttf。字体文件或浏览器在其他位置时，使用 --latin-font-file、--font-file 或 --chrome 指定。
4. 渲染无声 MP4
node scripts/render_html_video.mjs \
"/absolute/path/to/deck/index.html" \
"/absolute/path/to/output/handwritten-video.mp4" \
--seconds-per-slide auto
快速样片可以限制页数：
node scripts/render_html_video.mjs \
"/absolute/path/to/deck/index.html" \
"/absolute/path/to/output/preview.mp4" \
--seconds-per-slide auto \
--max-slides 6
auto 是默认值。渲染器按每页的文字量、顶层内容组、表格、代码和 SVG 数量估算 4–15 秒；页面设置了 data-duration 时优先使用该值。只有用户明确要求统一节奏时才传入固定秒数，例如 --seconds-per-slide 6。
渲染器按以下顺序处理每页：
- 原标题与标题线写入；
- 原页面的顶层内容组依次出现；
- 原荧光标记横向揭示；
- 原 SVG 线条按路径绘制；
- 结尾使用暖白纸张转场。
这些动作只修改透明度、位移、裁切和 SVG 描边进度。原 DOM 内容与计算后的排版保持原样，字形锁定为预览封面的指定字体。
5. 验收
跨平台 Node 渲染器会自动检查编码、分辨率、帧率、像素格式、视频流和音频流，并执行完整解码测试。仍需人工查看：
cover.png的英文是否命中PatrickHand-Regular，中文是否命中MaShanZheng-Regular；- 每页开始、内容完全显示、转场前各一帧；
- 标题、图表、标注、脚注有无遮挡或裁切；
- 结论是否至少完整停留 0.8 秒；
- MP4 是否没有可见或隐藏的音频流。
需要逐帧核对时，使用原 PPT Skill 的 scripts/render.sh 先导出同一页静态 PNG，再与 MP4 对应完成帧对照。字形或排版出现差异时停止交付，检查指定字体文件、原 CSS 和 HTML 路径。
动效纪律
- 一页只推进一个问题，动作服务于阅读顺序。
- 页面主体保持稳定，避免镜头缩放、卡片弹跳、粒子和发布会式炫技。
- 原 HTML 已有 CSS 动画时，渲染器把它们固定到最终视觉状态，再用统一帧进度控制进入顺序。
- 不改写原 HTML 的文字和事实，不添加页面外的新结论。
随附资源
scripts/render_html_video.mjs：直接驱动原 HTML DOM 并逐帧编码。scripts/render_html_video.sh：原 Skill 检查、渲染和媒体验收入口。references/motion-injection.md：DOM 选择与动效规则。examples/handwritten-html-motion-demo/：由原 HTML 直接生成的无声样片。tests/test_renderer_contract.py：防止重新排版与音频回归。
