打开 heygen-com/hyperframes,16.7k star、Apache 2.0、TypeScript 主导,标语是 “Write HTML. Render video. Built for agents.”。我们的本能反应通常是:翻.env.example,看要给哪家 LLM 掏钱——OpenAI 还是 Anthropic?能不能换 Gemma 4 自部署? 结果文件只有五行,第一行是No environment variables required for basic usage.,唯一可选的GEMINI_API_KEY仅用于一个边角子命令,标价~$0.001/image。
这不像一个 “AI 视频项目” 该有的样子。问题出在分类上:hyperframes 根本不是 Sora、Runway 那种 “提示词进、视频出” 的生成器。
一个反直觉的类比:它是给 Agent 用的 React,不是 Midjourney
把 hyperframes 想象成 React,会比想象成 Sora 更准确。
React 自己不"写"页面。它定义了一套从组件到 DOM 的确定性渲染管线;我们或 Cursor 写 JSX,React 把它变成可视化的 UI。hyperframes 同理:它定义的是从 HTML 到 MP4 的确定性渲染管线——Puppeteer 逐帧截图、FFmpeg 实时编码,完全本地、零模型调用;然后让 Agent(Claude Code、Cursor、Gemini CLI、Codex)来扮演"写 JSX"的那一方,用 GSAP/Anime.js/Three.js 在 HTML 里声明帧时间轴。
智能在调用方,渲染在被调用方。两者之间是一层 skill。
如上图所示,左上四个黄色块是 Agent——它们带着各自的订阅来(Claude Max 20x、Cursor 套餐、Google AI Ultra),在中间的蓝色 skill 桥上发起/hyperframes、/hyperframes-cli、/hyperframes-media,最终落到右下角的 Puppeteer + FFmpeg 本地管线。整张图里只有右侧那一块红色虚线框是要花钱的——而它对绝大多数用法来说可以不存在。
拆开看:它到底怎么工作
.env.example全文(原文照抄,五行):
# No environment variables required for basic usage.# Run `bun run dev` to start the studio, `npx hyperframes render` to render video.# Optional integrations:GEMINI_API_KEY=# AI image captioning during website capture (~$0.001/image)第一行就锁死了基调:基础渲染零环境变量。再看仓库结构,packages/下是cli / core / engine / player / producer / studio / shader-transitions——这是一条从 CLI 入口到 Puppeteer 引擎再到 Studio 编辑器的完整流水线,没有给 LLM 留过位置。
接入到 Claude Code 一条命令:
npx skillsaddheygen-com/hyperframesskill 装好后,Claude Code 里多出三个 slash command:
/hyperframes—— 写视频组件(HTML + 时间轴)/hyperframes-cli—— 跑 dev-loop:开 studio、render、debug/hyperframes-media—— 资源预处理:Kokoro TTS、Whisper 转写、u2net 抠图
这三个动作里,真正消耗"智能"的是第一个:把"我想要一个开场动画,标题从左滑入,5 秒后 fade out"翻译成 GSAP timeline + HTML 结构。这件事 Claude Sonnet 4.6 在 Max 20x 订阅里跑得很顺,无需任何额外 API key。第二个是命令行调度,第三个是本地模型——Kokoro/Whisper/u2net 都是开源权重,首次调用自动下载,之后离线运行。
整条链路上唯一一处可能调到云端 LLM 的地方,是/website-to-hyperframes——它会抓取一个网页、对页面元素生成自动配文,这一步用的是 Gemini Vision,所以才出现了GEMINI_API_KEY。按~$0.001/image算,一个 30 秒、用 30 张元素图的视频成本约 3 分钱;不愿意付的话,直接不用这个子命令、自己写文案就行。
把用户的两个具体顾虑回扣一遍
第一个:Claude Max 20x 与 Google AI Ultra 能不能用?答案是肯定的,而且就是首选路径。Max 20x 让 Claude Code 在本地以"包月"的方式跑 Sonnet/Opus,我们已经为这一层付过费;装上 hyperframes skill 之后,从 prompt 到 MP4 全走本地工具链,完全不再产生新的 API 账单。Gemini CLI + AI Ultra 同理——hyperframes 仓库自带.codex-plugin/、.cursor-plugin/、Claude Code 插件清单,意味着它在设计阶段就把"调用方多样化"当成了既定事实。
第二个:必须给 Gemma 4 留位置怎么办?这个问题问错了层。hyperframes 自身不调 LLM,所以"切到 Gemma 4"这件事在它内部找不到落点。要让 Gemma 4 上场,我们需要的是一个能调 hyperframes CLI 的 Agent driver——比如把 Ollama 跑的 Gemma 4 接到 Continue.dev、aider、或者一个自写的 OpenAI 兼容 Agent shell,让它来扮演 Claude Code 的角色。Gemma 4 在"写 GSAP timeline、调试 CSS 关键帧"这类任务上能不能胜任 Sonnet 4.6,这是另一篇文章的题目;但 hyperframes 这个选型门外的纠结,可以先放下。
唯一一处能给 Gemma 留位置的边角,是website-to-hyperframes里的图像描述。源码里目前是写死的 Gemini SDK 调用,要把它替换成 Ollama 跑的 Gemma 多模态变体,需要 patch 一段 TypeScript——可行,但收益和投入对不上(省掉的是 ~$0.001/image)。这是一个 “fork 一下行不行” 的问题,不是"项目能不能用"的问题。
它不解决什么
把边界说清楚比夸大能力更重要。hyperframes 不替我们写脚本、分镜、配音文案;那是 Agent 在 prompt 里和我们一起完成的工作,hyperframes 只负责把成稿的 HTML 渲染成视频。它也不生成真人形象、不做扩散模型,所以 Sora 那种"一句话整段视觉"是另一条赛道——hyperframes 走的是程序化动画(数据可视化、产品演示、API 流程动图、文档配图视频),用 GSAP/Lottie/Three.js 写,优势是可控、可复现、零幻觉。
如果我们的视频是这种 “需要每一帧都对得上” 的类型——架构图自动播放、Benchmark 数字往上跳、终端命令逐字回显——HyperFrames 加一份 Claude Max 20x 订阅,就是最便宜的工具组合;省下来的钱,够买一年 Sora 用来配那些"演员开门走进来"的镜头。
