HyperFrames

HyperFrames 是什么

HyperFrames 是一个把 HTML、CSS、媒体资源与可寻址动画 转成 确定性 MP4 视频 的开源框架。它的口号很直接：Write HTML. Render video. Built for agents.

你可以把它理解成「用网页技术写视频」：页面结构就是画面，CSS 与动画库负责运动，渲染器负责逐帧输出稳定一致的视频文件。

三种使用方式

• 本地 CLI：在终端里初始化、预览、渲染视频项目。
• AI 编码代理：通过技能（Skills）让 Claude Code、Cursor、Codex 等代理按流程产出视频。
• 渲染核心：作为托管式在线创作工作流背后的视频渲染引擎。

核心特性

面向 Agent 的技能体系

项目内置 21 个按需加载的技能，其中 /hyperframes 是路由入口，负责理解「帮我做一个……」类需求并分派到具体工作流，例如：

• /product-launch-video：根据网站或脚本生成产品发布、宣传视频。
• /faceless-explainer：把一段文字变成无真人出镜的概念讲解视频。
• /pr-to-video：读取 GitHub PR，生成变更说明或功能演示视频。
• /embedded-captions：为已有口播视频添加字幕或嵌入式字幕。

技能会引导代理走完「规划 → 编写合法 HTML → 接入可寻址动画 → 添加媒体 → 校验 → 预览 → 渲染」的完整生产闭环。

技术栈与生态

• 语言：TypeScript
• 渲染相关：FFmpeg、Puppeteer
• 动画：GSAP 等可寻址动画方案
• 协议/集成：MCP、CLI、技能插件

快速上手思路

在支持技能的代理中，通常先安装插件或技能，再通过 /hyperframes 发起请求。例如给代理这样一句提示：

使用 /hyperframes，制作一个 10 秒的产品开场：
标题淡入、背景视频、轻微的背景音乐。

代理会据此规划分镜、生成 HTML、接入动画与媒体，最后渲染出 MP4。

注意：技能安装方式有插件与独立技能两种，交互式选择器默认不预选任何项，核心技能组已足够日常使用；需要最新版本时可使用 npx hyperframes skills update。

适用与不适用

适合：需要批量、可复现地产出视频的团队；希望把视频制作纳入代码仓库与 CI 流程的开发者；想让 AI 代理自动产出营销、讲解、变更说明视频的场景。

需要注意：它并非所见即所得的剪辑软件，复杂剪辑、精细调色仍建议配合传统工具；同时渲染依赖浏览器与 FFmpeg 环境，部署前需确认运行条件。