展开本页目录
开始前准备什么
- Node.js 22以上、FFmpeg和可运行Chrome/Chromium；示例锁定HyperFrames 0.8.159。
- 先下载独立工程及输入，保留原文件，在副本中修改。
- 示例工程由本站编写，并用HyperFrames 0.8.159实际本地渲染。未调用Claude Code或远端文本/视频模型；读者可用随包提示词在自己的代理会话重做。
- 锁定手机竖屏的文字规格
- 先排好静态安全区域
- 让中文标题按完整行出现
- 把入场、停留和退出分开
- 在Studio检查三种时刻
- 保持9比16导出
- 缩到手机尺寸再读一遍
- 用自己的标题做第二版
原创输入、八步教程、可编辑HyperFrames工程、实际MP4和核验记录。
明确本地实跑范围、图像/声音身份、命令和许可。
1080×1920，8秒，24fps。
与正文图中事实、画面或时间点一一对应。
1. 锁定手机竖屏的文字规格
阅读title-spec.json：1080×1920、8秒，标题为把周末/留给散步，日期10月24日14:30。它是原创虚构活动片头，不是现实报名通知。先把必读文字与装饰文字分清。
2. 先排好静态安全区域
本例左右各110像素、上方220像素、底部300像素留白。安全区是本片的编辑选择，不保证所有平台界面都相同；发布前仍要在对应手机页面预览。
3. 让中文标题按完整行出现
在project/index.html找到kinetic-title，先验证两行标题自然可读。主标题可用有意的展示换行，正文不要硬插很多换行。字体文件随工程打包，避免换电脑后出现方框。
4. 把入场、停留和退出分开
标题从0.4秒进入，日期从1.5秒出现，6.6秒开始退出。使用y、x和opacity驱动单一时间轴；日期不能与主标题同时快速闪过，停留阶段要能读完。
5. 在Studio检查三种时刻
运行检查，分别看1秒入场、3.5秒停留与6秒退出前。若停留画面被边缘切掉，先改字号和容器宽度；不要用更快动画掩盖排版问题。
bash
npx [email protected] check --json
npx [email protected] preview --background --no-open
6. 保持9比16导出
导出后核对1080×1920、24fps与8秒。不要把竖屏塞进横屏根容器再误称9比16；随包文件是本题实际竖屏MP4。
bash
npx [email protected] render --output ../my-output.mp4 --fps 24 --quality high --workers 2 --strict7. 缩到手机尺寸再读一遍
将成片在手机或窄屏播放器打开，确认标题两行和日期都能读到。本文的关键帧图来自实际MP4；它们展示的是文字片头本身，不是生成模型的界面。
8. 用自己的标题做第二版
在副本里改标题、日期和字号，重复静态排版、入场、停留、退出检查。标题变长后必须重新核对手机可读性，不能只把同一个1200像素封面文字粘进竖屏。
bash
python3 verify.py怎样确认已经完成
- 原始输入、事实表和成片中的文字/画面一致。
- Studio逐点预览后，核对实际MP4画幅、时长、fps及音轨。
- 练习包verify.py回读本题真实导出，不把它当作代理或外部模型可靠性证明。
常见问题
AI做动态文字片头？
阅读title-spec.json：1080×1920、8秒，标题为把周末/留给散步，日期10月24日14:30。它是原创虚构活动片头，不是现实报名通知。先把必读文字与装饰文字分清。 在project/index.html找到kinetic-title，先验证两行标题自然可读。主标题可用有意的展示换行，正文不要硬插很多换行。字体文件随工程打包，避免换电脑后出现方框。
中文标题怎么做动效？
运行检查，分别看1秒入场、3.5秒停留与6秒退出前。若停留画面被边缘切掉，先改字号和容器宽度；不要用更快动画掩盖排版问题。
HyperFrames 中文文字动效需要付费API吗？
本例HTML到MP4在本地执行，不需要为HyperFrames本地渲染购买模型额度。自己的编码代理、可选配音/图像模型或云渲染可能另行收费；本页不把这些费用混成统一免费。