# Claude Code 文章转视频：用 HyperFrames 把原创笔记做成45秒图解

示例工程由本站编写，并用HyperFrames 0.8.159实际本地渲染。未调用Claude Code或远端文本/视频模型；读者可用随包提示词在自己的代理会话重做。

## 快速开始

在project目录先运行：

```bash
npx hyperframes@0.8.159 check --json
npx hyperframes@0.8.159 preview --background --no-open
```

Studio可编辑预览。检查本题事实与画面后按正文命令导出；可先播放随包output.mp4。

## 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 hyperframes@0.8.159 check --json
npx hyperframes@0.8.159 preview --background --no-open
```

## 6. 输出MP4并回读规格

执行高质量导出，使用ffprobe核对1280×720、24fps、45秒。随包output.mp4是本题实际HyperFrames本地渲染；不是Claude Code自动生成过程的录屏。

```bash
npx hyperframes@0.8.159 render --output ../my-output.mp4 --fps 24 --quality high --workers 2 --strict
```

## 7. 把原文与三个关键帧对照

逐帧确认37大于26、小于48、等于37，最后确实完成第三次比较。目标不存在和重复值的情况没有在本片演示，不能从这一个例子推断所有输入都正确。

## 8. 再做一份不同主题的文章短片

保留原工程，另开副本替换notes.md、事实表与分镜，让代理重做。正文概念变化后要重新审图；只换一个热门标题不能得到一篇新的教学视频。

```bash
python3 verify.py
```

## 素材来源与许可

见THIRD-PARTY-NOTICES.md。project/assets含本地字体与GSAP，保留许可证；模型/代理调用与本地渲染分开计费。

## 官方资料

- https://hyperframes.heygen.com/guides/faceless-explainer
- https://hyperframes.heygen.com/quickstart