展开本页目录
开始前准备什么
- Node.js 22以上、FFmpeg和可运行Chrome/Chromium；示例锁定HyperFrames 0.8.159。
- 先下载独立工程及输入，保留原文件，在副本中修改。
- 示例工程由本站编写，并用HyperFrames 0.8.159实际本地渲染。未调用Claude Code或远端文本/视频模型；读者可用随包提示词在自己的代理会话重做。
- 先把原文和事实分开
- 把文章交给代理前先限定任务
- 按三轮比较安排45秒
- 让文字和数字沿同一时间轴运动
- 检查工程并在Studio逐幕回读
- 输出MP4并回读规格
- 把原文与三个关键帧对照
- 再做一份不同主题的文章短片
原创输入、八步教程、可编辑HyperFrames工程、实际MP4和核验记录。
明确本地实跑范围、图像/声音身份、命令和许可。
1280×720，45秒，24fps。
与正文图中事实、画面或时间点一一对应。
1. 先把原文和事实分开
打开notes.md与facts.json：数组为5、12、19、26、37、48、60，目标37，比较顺序应为26、48、37。先核对这一口径，避免画面漂亮但把已排序前提和比较次数讲错。
2. 把文章交给代理前先限定任务
在自己的Claude Code或Codex会话打开agent-prompt.md，要求从现有资料拆成三幕，数字不可改、不得添加效率倍数。下载工程是本站编写的可运行参考；代理生成或改写的过程由读者在自己的会话执行。
3. 按三轮比较安排45秒
阅读project/index.html：第一幕0–15秒显示7个数并比较26，第二幕15–30秒只看37、48、60，最后15秒确认37。每幕都保留目标值；不要把视频45秒写成算法耗时。
4. 让文字和数字沿同一时间轴运动
使用一个paused的GSAP timeline，注册到window.__timelines.main。数字移动只用y、scale、opacity；先呈现可读的最终排版，再加短入场。工程内已打包中文字体和GSAP，不依赖渲染时联网取字体。
5. 检查工程并在Studio逐幕回读
在project目录运行检查，再打开Studio，依次定位4、20、36秒。观察7→3→1的范围收缩、26/48/37三个比较值和已排序提醒。若文字重叠，先改静态布局再重跑。
bash
npx [email protected] check --json
npx [email protected] preview --background --no-open
6. 输出MP4并回读规格
执行高质量导出，使用ffprobe核对1280×720、24fps、45秒。随包output.mp4是本题实际HyperFrames本地渲染；不是Claude Code自动生成过程的录屏。
bash
npx [email protected] render --output ../my-output.mp4 --fps 24 --quality high --workers 2 --strict
7. 把原文与三个关键帧对照
逐帧确认37大于26、小于48、等于37，最后确实完成第三次比较。目标不存在和重复值的情况没有在本片演示，不能从这一个例子推断所有输入都正确。
8. 再做一份不同主题的文章短片
保留原工程，另开副本替换notes.md、事实表与分镜，让代理重做。正文概念变化后要重新审图；只换一个热门标题不能得到一篇新的教学视频。
bash
python3 verify.py怎样确认已经完成
- 原始输入、事实表和成片中的文字/画面一致。
- Studio逐点预览后，核对实际MP4画幅、时长、fps及音轨。
- 练习包verify.py回读本题真实导出，不把它当作代理或外部模型可靠性证明。
常见问题
一篇文章怎么变成科普视频？
打开notes.md与facts.json：数组为5、12、19、26、37、48、60，目标37，比较顺序应为26、48、37。先核对这一口径，避免画面漂亮但把已排序前提和比较次数讲错。 阅读project/index.html：第一幕0–15秒显示7个数并比较26，第二幕15–30秒只看37、48、60，最后15秒确认37。每幕都保留目标值；不要把视频45秒写成算法耗时。
不用找素材的AI解说视频？
在project目录运行检查，再打开Studio，依次定位4、20、36秒。观察7→3→1的范围收缩、26/48/37三个比较值和已排序提醒。若文字重叠，先改静态布局再重跑。
Claude Code 文章转视频需要付费API吗？
本例HTML到MP4在本地执行，不需要为HyperFrames本地渲染购买模型额度。自己的编码代理、可选配音/图像模型或云渲染可能另行收费；本页不把这些费用混成统一免费。