动画画布解说短片技能

Canvas explainer Reel

最初于2026年10月为一个简历建议Reel制作，随后保存为可重复使用的公式。

• 工作示例：template/example-08-resume.html（该Reel的完整HyperFrames组合；其媒体资源未包含）。
• 截图：../../docs/canvas-explainer/。

适用规则：屏幕中的头像以短时爆发形式出现（每次约3-4秒），只交付全质量母版。引擎：HyperFrames（固定[email protected]）。FFmpeg仅用于准备和质量检查。

公式（保留全部）

1. 一个无限的黑色画布。 使用#world，尺寸2400x6400，带细微点阵网格。镜头从不剪切；使用power3.inOut缓动，大幅移动时加短运动模糊。
2. 所有元素在词汇被念出时实时绘制。
   • 标记笔触为SVG路径，使用粗糙的feDisplacementMap滤镜。
   • 手写标签使用Ink Free字体，通过steps()逐字打出。
   • 颜色：白色 #f4f4ef，黄色 #ffd84a，蓝色 #6f8cff，粉色 #ff6fae，绿色 #7ee08a，红色 #ff4b3e。
   • 红色箭头和圆圈指向关键内容。
3. 真实技术工件，而不是单纯的通用涂鸦。 软件工程受众需要真实的架构、代码、终端、实际截图和真实文档（例如打码的简历），并用框和手写文字注释。
4. 画布上手绘框架中的头像。
   • 框架尺寸405x720，比例9:16。镜头放大到框架（s = 1080/405），使其素材全屏显示；这个放大就是转场。在素材上方添加手写注释。
   • 头像总时长保持在运行时长的40%以下（目标约20%）：一个钩子节拍，一个中途的“个人”节拍，结尾。
5. 没有空画面。
   • 每个区域填充视图y坐标120-1500。
   • 在镜头移动期间，红色连接箭头在不同区域之间绘制。
   • 镜头到达时出现黄色标题。
   • 字幕位于y坐标1555-1720，使用Ink Free 64px字体，黄色关键词。将连接的HTML字幕包裹在内层<span>中，否则flex会丢失空格。
6. 结尾。
   • 镜头缩至整个绘制的地图（s ≈ 0.31），背后是变暗（0.58）的结束卡片。
   • 号召行动（CTA）由他的口头说出。例如：“想要我的简历？评论‘resume’，我会把模板发给你。”关键词用黄色大字显示。
   • 永远不要告诉观众不要复制共享的资源。资源归他们使用。
7. 声音。
   • 在语音下方放置背景音乐，使用~/.claude/skills/hyperframes-audio/scripts/carve.mjs --comp index.html --core <dir with node_modules/@hyperframes/core>处理。--core指向安装了@hyperframes/core的任何项目文件夹。
   • 在语音间隙和缩小时提升音乐音量。
   • 音效：标记点击/标签时的笔咔嗒声，代码时的打字声，镜头移动时的翻页/嗖声，弹出时的嗖咚声，结尾时的叮当声。
   • 音乐必须符合Instagram安全要求（见下方音乐部分）。

构建步骤

1. 输入。
   • 语音WAV，标准化至-16 LUFS：钩子+旁白，连接在一起。
   • 词汇时间戳word@seconds：对齐的JSON或clips.json字幕，保存为words.txt。
   • 头像MP4，其媒体时间等于语音时间减去钩子时长。
   • 真实工件图片。
2. 故事板区域。 对于每个节拍，选择一个世界原点并列出其绘制内容及对应的口语词汇时间。将文字保持在1080px视图内（Ink Free字体约0.5 em每字符）。
3. 复制template/example-08-resume.html 到新项目文件夹，替换区域块、框架（每个`<video class=