HyperFrames 是一个开源视频渲染框架，让你能够创建、预览和渲染基于 HTML 的视频合成作品——并为 AI 智能体提供原生支持。
为什么选择 HyperFrames
用你熟悉的 HTML 技术，借助 AI 的力量，让视频创作像写网页一样简单。
合成作品是带有数据属性的 HTML 文件。无需 React，无需专有 DSL。你所掌握的 HTML 技能直接复用。
智能体已经懂 HTML。CLI 默认非交互式，专为智能体驱动的工作流设计。描述你想要什么，AI 帮你实现。
相同输入 = 相同输出。专为自动化流水线打造，每次渲染结果一致可复现。
自带动画运行时——GSAP、Lottie、CSS、Three.js。选择最适合你的方式，一切无缝集成。
工作原理
在 HTML 中通过 data-* 属性声明时间轴，框架自动编排和渲染。
data-start
元素开始时间（秒）
data-duration
元素持续时间
data-track-index
轨道索引，控制层叠
data-volume
音频音量控制
快速开始
安装 HyperFrames 技能，然后用自然语言描述你想要的视频，AI 帮你完成一切。
示例提示词：
创建一个 10 秒的产品介绍视频，包含淡入标题、背景视频和背景音乐。
制作一个 9:16 TikTok 风格钩子视频，配合 TTS 旁白同步的弹跳字幕。
将这个 CSV 文件转换为动画柱状图竞赛。
适合喜欢手动控制的开发者，几行命令即可创建和预览视频项目。
`hyperframes init` 会自动安装技能，因此你可以随时交给 AI 智能体处理。
组件库
社交叠加层、着色器过渡、数据可视化、电影级特效——一行命令即可添加到你的项目中。
npx hyperframes add flash-through-white
着色器过渡
npx hyperframes add instagram-follow
社交叠加层
npx hyperframes add data-chart
动画图表
包
hyperframes
CLI 工具——创建、预览、检查 lint 和渲染合成作品。
@hyperframes/core
类型、解析器、生成器、linter、运行时、帧适配器。
@hyperframes/engine
可寻址页面到视频捕获引擎（Puppeteer + FFmpeg）。
@hyperframes/producer
完整渲染流水线（捕获 + 编码 + 音频混合）。
@hyperframes/studio
基于浏览器的合成作品编辑器 UI。
@hyperframes/player
可嵌入的 <hyperframes-player> Web 组件。
@hyperframes/shader-transitions
用于合成作品的 WebGL 着色器过渡。
技能
HyperFrames 提供专用技能，用于教授 AI 智能体通用文档未涵盖的框架特定模式。
hyperframes
HTML 合成作品创作、字幕、TTS、音频响应动画、过渡。
hyperframes-cli
CLI 命令：init、lint、preview、render、transcribe、tts、doctor。
hyperframes-registry
通过 hyperframes add 安装区块和组件。
gsap
GSAP 动画 API、时间线、缓动、ScrollTrigger、插件、React/Vue/Svelte、性能。