白板手绘讲解

风格提示词

这一条的提示词是重新写过的详细版：画面规则、颜色、时间轴都写死了，DeepSeek 和 Opus 5.5 都能直接用。{{ }} 里是要你自己填的内容。

你是一位前端动效工程师。请写一个完整的 index.html 文件：只用原生 HTML + JavaScript + Canvas，不要任何外部库、字体文件或图片。做一段白板手绘讲解动画。

讲什么

• 主题：{{主题，例：大语言模型是大脑，Harness 是手脚}}
• 总时长：{{秒，默认 20}}
• 画面里的字：{{3–6 个短词。例：标题"AI 是怎么干活的"；左边"大语言模型"，副标"会想、会说"；右边"Harness"，副标"手和脚：真去做事"；箭头上"指令"}}

输出要求（必须照做）

1. 只输出一个 html 代码块，不要解释。代码必须完整可运行：不要用省略号，不要写"其余同上""此处略"。
2. canvas 固定 1920×1080；用 CSS 让它在窗口里等比缩放并居中，窗口多出来的部分是黑边。
3. 所有画面由函数 draw(t) 决定，t 是秒。不要用 Math.random；需要随机就用带种子的 mulberry32(seed)，这样同一个 t 每次画出来都一模一样。
4. 默认循环播放；按空格暂停/继续；网址带 ?t=8.5 时只显示第 8.5 秒那一帧（静止），方便截图。

画面怎么画

• 底色 #FBFAF7；再叠几条很淡的灰色擦痕（宽 40–90px，透明度 0.03–0.06）。
• 线条是黑色马克笔 #1B1B1B，宽 10px，lineCap 和 lineJoin 都用 round。每一笔画两遍：第一遍透明度 0.93；第二遍宽 5.5px、透明度 0.55、位置偏移 ±1.5px。
• 只有黑和一个强调色 #E5432B（用在标题下划线、箭头、副标题和笔帽）。不要第三种颜色。
• 字体：font-family: KaiTi, STKaiti, "Kaiti SC", "Microsoft YaHei", sans-serif，粗体；标题 110px，标签 90px，副标题 56px。字用 strokeText 加 fillText，描边宽约字号的 3.5%。
• 手绘感：每个点加 ±2.5px 的抖动，抖动用带种子的随机按"点的序号"取，不要每帧重新随机。
• 要画的东西：
  • 云朵形的"脑"：极坐标 r = R·(1 + 0.11·|sin(3.5θ)|)，里面画几条波浪线；
  • 一个火柴人：圆头、一根线的身体、两条手臂（末端画一个圆当手）、两条腿；
  • 一条弯曲的强调色箭头，箭头头部要顺着线尾的方向；
  • 一支马克笔：黑杆、红帽，长约 330px，斜 55°，笔尖始终停在"当前正在画的那一笔"的末端；全部画完后滑出画面。

动起来的规则

• 每一笔是一个点列表。用 progress（0→1）决定画到第几个点，progress 用 ease-in-out；一笔 0.4–1.2 秒。
• 顺序：标题 → 标题下划线（红）→ 左边的脑 → 右边的小人 → 红色箭头 → "指令"两个字 → 两处标签文字。同一时间只画一笔。
• 全部画完后静止 1.5 秒，再循环。

不要

渐变、阴影、发光、3D、粒子、复杂配色、满屏文字、镜头晃动。

写完后自己过一遍（不要输出）

• t=0 时是不是几乎空白的白板？
• t=总时长−0.1 时所有元素都在吗？
• 文字有没有被线或笔压住？
• 同一个 t 刷新两次，画面是不是一模一样？