大家好，我是何三，独立开发者
我刚扫了一眼 GitHub trending，发现这货又涨了
7.2k Star（约 8 千）的 Hyperframes 项目，让我有点懵。
用 HTML 写视频？AI 智能体直接生成？这年头，视频制作的门槛已经低到这种程度了。
传统视频编辑软件，像 After Effects、Premiere Pro，哪个不是界面复杂、学习曲线陡峭。设计师和视频编辑们，花几个月时间才能熟练掌握。
现在 Hyperframes 说，不用学那些了。直接写 HTML 代码，AI 帮你生成视频。
说人话就是，把视频制作从图形界面操作，变成了代码编写。就像从用 Photoshop 画图，变成了用 CSS 写样式（用mgo写作配图和封面也是通过html+css自动生成的）。
Hyperframes 的核心原理挺简单。它定义了一套 HTML 数据属性系统，让你用熟悉的 HTML 标签来组织视频内容。
视频轨道、音频轨道、图片叠加层，全都变成了 HTML 元素。加上 data-start、data-duration 这样的属性，控制时间轴。
预览直接在浏览器里看，实时刷新。渲染用 FFmpeg 转成 MP4。
最狠的是 AI 智能体支持。项目提供了专门的 skills 包，可以教 Claude Code、Cursor 这些 AI 工具怎么用 Hyperframes。
AI 能理解你的自然语言描述，自动生成对应的 HTML 代码。你说“做个 10 秒的产品介绍视频”，AI 就给你写出一套完整的 HTML 结构。
上手试试看。
先初始化一个项目：
npx hyperframes init my-video
然后预览：
npx hyperframes preview
浏览器自动打开，实时预览视频效果。改代码，页面自动刷新。
渲染视频：
npx hyperframes render
MP4 文件就生成了。整个过程，命令行搞定。
Hyperframes 还提供了 50 多个现成的组件块。社交媒体覆盖层、WebGL 着色器转场、数据可视化图表。
安装起来也很简单：
npx hyperframes add flash-through-white
npx hyperframes add instagram-follow
AI 智能体集成是 Hyperframes 的杀手锏。安装 skills 包后，AI 就学会了怎么写正确的 HTML 结构和 GSAP 动画。
在 Claude Code 里，有专门的 slash 命令。/hyperframes 写视频结构，/hyperframes-cli 处理命令行操作。
你可以直接告诉 AI：“用 /hyperframes 做个 9:16 的 TikTok 风格视频，配上弹跳字幕和文字转语音旁白”。
AI 给你生成完整的代码。你再说：“把标题放大两倍，换成深色主题，结尾加个淡出效果”。
AI 继续修改。整个过程，就像在和视频编辑对话，但对方是个 AI。
Hyperframes 是完全开源的，Apache 2.0 协议。项目维护得挺活跃，最近还在更新。
GitHub 上有 7.2k Star，547 个 Fork。TypeScript 写的，代码质量看起来还行。
同类项目里，Remotion 也是个用代码写视频的框架，但需要 React 知识。Hyperframes 更简单，纯 HTML。
Remotion 现在也开始搞收费了，基础功能免费，高级功能要付费。吃相真急。
Hyperframes 目前完全免费，不知道以后会不会变。
如果你对 AI 视频生成感兴趣，我之前还写过《用 AI 做视频，这 3 个工具让效率翻倍》，关注后回复“AI视频”获取。
说到底，Hyperframes 把视频制作从专业软件搬到了代码编辑器。对开发者来说，是个好事。对设计师来说，可能有点压力。
但工具只是工具，会用的人永远有饭吃。
有谁已经用上Hyperframes了，评论区说说体验。
本文使用 MGO 编辑并发布
关注"何三笔记"，回复"mgo" 免费下载使用
