Rajmoni | 动效设计师 (@Nexaabyraj) — 原推文
Astra 还是做不出我这样的动效设计。
于是 Astra 在 Hyperframes 中制作了这个 ChatGPT 主题的回应。以下是源码、原始参考、素材与渲染命令，你可以查看整个流程并自行复现这段视频。
署名与方法： 原始动效设计由 Rajmoni 创作。本项目改编自其提供的参考：180 帧清除文字后的源底板保留了原作的背景与控件动画，JavaScript 则渲染替换后的 ChatGPT 排版文字。成品是基于参考的改编，而非从零创作的原创动效。最终 MP4 仅作为对比产物；渲染器不会播放或转码该文件来生成输出。
观看随附的最终视频 · 原始参考 · 帧分析 · 已验证的复现
渲染方法
需要 Node.js 22+（已在 25.5.0 上测试）、带 libx264 的 FFmpeg/FFprobe、Chrome，以及至少 1 GB 可用空间。macOS、Linux 与 Windows 均可运行 Hyperframes。交付的渲染在 macOS 上完成；可复现性说明见下文。
git clone https://github.com/Tejashmakwana/astra-chatgpt-hyperframes.git
cd astra-chatgpt-hyperframes
npm ci --ignore-scripts
阅读 Switzer 的 Fontshare 许可协议，然后从其官方 CDN 下载哈希值固定的字体：
npm run setup -- --accept-font-license
npm run check
npm run render
输出结果为 output/chatgpt-blue.mp4。运行 npm run compare 可将其解码帧与随附的交付视频进行对比。在记录在案的 macOS 环境中全新安装并渲染，得到了逐字节完全一致的 MP4，相关内容记录在随附的验证报告中。渲染完全在本地进行，无需模型 API、API 密钥、私有提示词或任何智能体工具。
如果尚未安装 Chrome，请先运行 npx hyperframes browser ensure。可通过 HYPERFRAMES_BROWSER_PATH 指定已有的浏览器。请将 FFmpeg 与 FFprobe 加入系统 PATH。npm run preview 会在 Hyperframes Studio 中打开可编辑的合成项目。
在 GitHub 上渲染
Fork 本仓库，打开 Actions → Render video → Run workflow，如同意其条款可接受随附的字体许可。运行完成后下载 chatgpt-blue-render。Linux 工作流渲染的是同一个合成项目；对比精确像素时请参考下方的可复现性说明。
执行流程
- 校验 180 张源底板、音频、原始参考、对比视频以及单独下载字体的哈希值。
- 通过 Hyperframes 0.8.29 运行 HTML/canvas 合成，渲染出 360 帧无损 PNG。
- 以 1920×1080、24 fps 编码 H.264，并进行显式 BT.709 转换。
- 复制原始 AAC 数据包，并校验完整解码、帧数与音频哈希。
这段 15 秒的视频由两个完全相同的 7.5 秒视觉循环构成。原始音频持续至 15.061 秒。输出校验结果保存在 output/verification.json。
源码结构
| 文件 | 用途 |
|---|---|
index.html | Hyperframes 合成、尺寸与音轨 |
film.js | 可编辑的标题、提示词与结果排版；帧定位 |
assets/tracks.js | 从参考中逐帧测量的位置数据 |
assets/plates/*.png | 清理后的源背景与控件 |
assets/reference.m4a | 参考音轨，未经重新编码直接复制 |
reference/original.mp4 | 用于制作底板的原始参考 |
scripts/build-reference-plates.py | 可审查的底板清理与运动跟踪脚本 |
scripts/render.mjs | 实际的 Hyperframes 渲染与 FFmpeg 编码 |
examples/chatgpt-blue.mp4 | 交付的对比视频；绝不作为渲染输入 |
如需重新生成清理后的底板，请安装可选的 Python 依赖并运行：
python3 -m pip install -r requirements.txt
python3 scripts/build-reference-plates.py
仓库中提交的底板是可复现的基线。使用不同版本的图像库重新生成可能会改变 PNG 哈希；素材校验会刻意检测出这种情况。
可复现性与署名
依赖与字体哈希均已锁定。提交的素材与时间轴可复现该合成。浏览器版本、操作系统的字体光栅化、初始提示词中的系统等宽字体以及 FFmpeg 构建都可能改变个别像素或编码字节。本仓库不承诺在所有操作系统上生成逐字节一致的 MP4。随附的对比视频与验证报告让你可以亲自核验结果，而不必仅凭声明。
原始动效/参考：Rajmoni / @Nexaabyraj，链接见上文。Switzer 由 Jeremie Hornus / Indian Type Foundry 设计，通过 Fontshare 提供。该字体需单独下载，不在本仓库中再分发。ChatGPT/OpenAI 名称仍为其各自所有者的商标。这是一个独立实验，并非 OpenAI 官方发布，也未获得参考设计者的背书。
上文引用的推文转录自项目说明并链接至原始来源。媒体素材及源自素材的底板仍保留其原始所有者的权利；署名不会为这些素材授予新的许可。详见 THIRD_PARTY.md。