昆
昆仑AI工具大全KUN.NET
提交工具

HyperFrames 0.9 上手：用 HTML 与 GSAP 写一段 7 秒中文片头，按 lint 与 check 修好字体和节奏，渲染 MP4、用变量出第二版并装上官方字幕条组件

按 HyperFrames 官方 GitHub README、文档站（Quickstart、CLI 指南与参考、数据属性、GSAP 动画、变量、合成）与 npm 包页（0.9.26 实测）：用 Node.js 22 与 FFmpeg 安装 hyperframes，用 doctor 自检并起项目，看懂 data-start / data-duration 与暂停的 GSAP 时间线；亲手写一段中文片头，按 lint 打包 Noto Sans SC 字体、按 check 修掉首帧空白与结尾停留过短；渲染 1920×1080 30fps MP4 并用 ffprobe 核对，用 variables 与 strict-variables 参数换文案出第二版，从 Catalog 搜索并 add 一个字幕条组件挂进片头，最后验证同机两次渲染 MD5 一致。

入门3 课时70 分钟图文实操

免费学习无需登录

开始学习 查看课程目录
HyperFrames 0.9 上手：用 HTML 与 GSAP 写一段 7 秒中文片头，按 lint 与 check 修好字体和节奏，渲染 MP4、用变量出第二版并装上官方字幕条组件 课程封面

你将学会

  • 安装 HyperFrames 并用 doctor 自检
  • 看懂合成的数据属性与 GSAP 时间线
  • 写一段中文片头视频
  • 用 lint 打包中文字体
  • 用 check 修正首帧与结尾节奏
  • 渲染 MP4 并用 ffprobe 核对
  • 用变量一份模板出多版
  • 从 Catalog 安装并挂载组件

适合谁

  • 想用代码批量做短视频的前端或全栈开发者
  • 正在用 Claude Code、Codex 或 Cursor 的人
  • 想找 Remotion 之外方案的人

课前准备

  • 会用终端，会改 HTML 和 CSS
  • 本机有 Node.js 22 或更高与 FFmpeg
  • 不要求会 GSAP

课程目录

3 课时 · 70 分钟
  1. 01装好 HyperFrames，用 doctor 体检，起第一个项目并抽帧确认 Node.js 22 与 FFmpeg，安装 hyperframes 0.9.26 并核对版本；读懂 doctor 里哪些是必需项、哪些是可选项，按需关闭遥测；用 init 起项目，看懂根元素、clip 与暂停时间线三条约定；用 lint、info、compositions、timeline 看结构，用 snapshot 不渲染就抽到帧。图文20 分钟开始本课
  2. 02写一段 7 秒中文片头，让 lint 与 check 帮你修好字体和节奏用数据属性排好标题、副标题、进度条与网址的出场，用 fromTo 写动画并声明三个变量；按 lint 的 font_family_without_font_face 报错下载 Noto Sans SC 并写 @font-face；按 check 的 first_frame_empty 与 line_unread 两条提示改三行代码，直到 Check passed；用 snapshot 抽关键帧确认画面。图文25 分钟开始本课
  3. 03渲染 MP4、用变量出第二版，从 Catalog 装一个字幕条组件渲染 1920×1080 30fps 7 秒 MP4 并用 ffprobe 核对；用 variables 与 strict-variables 参数换文案和配色出第二版，并看到拼错变量名会被拦下；用 catalog 搜索、add 安装 lt-clean-bar 字幕条，以子合成方式挂上时间轴；同机两次渲染 MD5 一致，最后用 clean 预览清理。图文25 分钟开始本课

课程说明

HyperFrames 是 HeyGen 开源的「写 HTML，渲染成视频」框架（Apache-2.0，GitHub 约 8.1 万星）。你用普通的 HTML、CSS 和一条暂停状态的 GSAP 时间线描述一段视频，再用 data-start、data-duration 这类数据属性把每个元素排进时间轴；渲染时它在无头 Chrome 里逐帧跳到指定时刻截图，再交给 FFmpeg 编码成 MP4，因此输出是可复现的（本课实测同一台机器连续渲染两次 MD5 完全一致；跨机器要逐字节一致，官方建议用 Docker 渲染）。它最初就是为 Claude Code、Codex、Cursor 这类编程 Agent 设计的：项目里自带 AGENTS.md，命令都有 --json 输出，lint 与 check 会把字体、版式、对比度、动效节奏的问题直接指出来。不过 Agent 只是可选项，本课完全不用 Agent，也不需要任何 API Key 或 HeyGen 账号，全程在本机用 CLI 跟着做。

本课按 HyperFrames 官方 GitHub README、文档站（Quickstart、CLI 指南与完整 CLI 参考、数据属性、GSAP 动画、变量、合成）与 npm 包页整理。2026-11-10（Asia/Shanghai）在一台 Linux x86_64 云主机上，用 Node.js v22.21.1、FFmpeg 7.1 安装 hyperframes 0.9.26（npm 发布于 2026-11-09），下面这些命令全部实跑过：doctor 环境自检、init 起项目、lint / info / compositions / timeline 看结构、snapshot 抽帧、亲手写一段 7 秒中文片头并按 lint 与 check 的提示修到全部通过、render 出 1920×1080 30fps 的 MP4 并用 ffprobe 核对、用 --variables 换文案和配色再出一版、用 catalog 搜索并 add 一个官方字幕条组件挂进片头、同一项目连续渲染两次比对 MD5。「对照结果」都是这台机器的真实输出，只做了节选。没有实测的有：HyperFrames Studio 桌面应用与 Agent 技能安装（本课不依赖）、云端渲染与 publish（需要 HeyGen 账号）、Docker 渲染（测试机没装 Docker）。

课时你会做完的事需要什么
1装好 HyperFrames 0.9.26，用 doctor 自检，起第一个项目，看懂它的 HTML 结构并抽两帧终端，Node.js 22 或更高，FFmpeg
2亲手写一段 7 秒中文片头，按 lint 与 check 的提示修好字体和动效节奏同上；能访问 GitHub 下载字体
3渲染成 MP4 并核对参数，用变量换一版文案，从组件库装一个字幕条挂进片头同上

适合

  • 想用代码批量做产品介绍、数据播报、片头片尾短视频的前端或全栈开发者
  • 正在用 Claude Code、Codex、Cursor，想先弄懂 Agent 背后那套命令再让 Agent 接手的人
  • 想找 Remotion 之外、不用写 React 也能做程序化视频的人

先修

  • 会用终端，会改 HTML 和 CSS
  • 本机有 Node.js 22 或更高（官方要求；测试机系统自带的是 20，已换成 22.21.1）与 FFmpeg
  • 不要求会 GSAP：本课只用到 fromTo 与 to 两个方法

你会学到

  • 用 npx 或本地安装运行 HyperFrames，看懂 doctor 里哪些是必需项、哪些是可选项
  • 看懂一个合成（composition）的骨架：根元素的 data-composition-id、data-duration，以及暂停的 GSAP 时间线如何注册到 window.__timelines
  • 用 data-start 引用另一个元素实现「上一段结束后再出现」
  • 用 lint 解决中文字体没有 @font-face 的报错，用 check 修掉「首帧空白」「结尾字停留太短」两条动效提示
  • 用 snapshot 只抽关键帧，不必每改一次就完整渲染
  • 用 render 出片，用 --variables 与 --strict-variables 一份模板出多版，用 catalog 与 add 复用官方组件

官方资料

绑定工具： Hyperframes（https://www.kun.net/tools/hyperframes/ ）