夜雨聆风一、工具简介
最近 AI 圈又炸出一个颠覆性视频工具——由 AI 数字人公司 HeyGen 开源的 HyperFrames。它彻底改变视频创作逻辑：写一段 HTML，直接渲染成 MP4 视频，搭配 AI 助手，真正实现“用嘴做视频”。
HyperFrames 底层原理很简单：把 HTML 页面逐帧截图，再通过 FFmpeg 拼接成视频。看似常规，却打通了代码与视频的壁垒，让 AI 成为你的专属剪辑师。
二、核心优势：告别鼠标，用自然语言做视频
传统视频制作（PR/AE/Canva）需要拖拽素材、调关键帧、点界面，10 秒动画可能耗时 1–2 小时。
HyperFrames 把视频变成代码，而大模型天生擅长写 HTML/CSS/JS，你只需说需求，AI 自动生成代码并渲染视频。
核心能力
动效、转场、字幕、配音全自动 支持 Tailwind、GSAP、Canvas 等前端效果 适合非实拍类视频：产品介绍、数据可视化、文字动效、Logo 动画、社交短片 
三、使用方法：3 步上手
打开 Codex，安装 HyperFrames 插件 
用自然语言描述视频需求（时长、比例、风格、内容） AI 生成代码 → 预览 → 调整 → 导出 MP4
万能 Prompt 公式
时长 + 画面比例 + 风格 + 内容安排 + 动画细节
四、四大实用场景
1. 产品介绍视频
@HyperFrames by HeyGen，做一个 15 秒的产品介绍视频，16:9 横屏，1920x1080。 风格：深色背景，简约科技感，字体用白色无衬线体。 内容安排： 0-3秒：产品名「AI一手」从中央淡入，底下小字同步出现 3-6秒：产品名上移，下方三个功能点逐个滑入 6-12秒：功能点高亮展示 12-15秒：元素淡出，显示 Logo 背景加深蓝到深紫渐变动画
2. 数据可视化动画
做周报、做汇报的时候，这种太好用了。
@HyperFrames by HeyGen，做一个 20 秒的数据展示动画，16:9 横屏。
风格：白色背景，商务简约风，数据用蓝色系配色。
内容安排：
- 0-3秒：标题「2026年Q1用户增长」从顶部滑入
- 3-12秒：底部出现柱状图，四根柱子分别代表1月/2月/3月/4月，
柱子从底部逐个生长到目标高度，每根间隔 1.5 秒，
每根柱子上方显示具体数字（1.2万/1.8万/2.5万/3.1万），数字有跳动计数效果
- 12-16秒：柱状图右侧淡入一个环形进度条，显示「目标完成率 78%」，
进度条从 0% 动画填充到 78%
- 16-20秒：底部出现一行文字「环比增长 158%」，带高亮闪烁效果，然后全部元素淡出
3. 社交平台竖屏短视频
发抖音、小红书的时候能用上。
@HyperFrames by HeyGen，做一个 9:16 竖屏的 10 秒 hook 视频，1080x1920。
风格：高饱和度，活泼，年轻化，背景用渐变紫到粉。
内容安排：
- 0-2秒：大字「你还在手动剪视频？」从底部弹入，带夸张的弹性动画
- 2-4秒：文字抖动一下，然后缩小上移
- 4-7秒：中间区域出现三行文字，逐行打字机效果显示：
「写一段话」「→ AI 生成代码」「→ 直接出 MP4」
每行间隔 1 秒
- 7-10秒：整个画面做一个缩放 + 旋转的转场效果，
最终定格在「用嘴做视频 了解一下」，底部显示箭头指向下方
字体要大，一屏最多两行字。节奏要快。
五、高效技巧：对话式迭代
不用每次重写 Prompt，生成后直接像跟剪辑师聊天一样修改：
标题放大2倍，背景改纯黑 第3秒加姓名条 字幕重叠就往上挪AI 保留上下文，精准修改，效率翻倍。
六、适合人群与局限
适合谁
自媒体人：快速做产品演示、功能介绍 打工人：动态数据汇报视频 独立开发者：零成本做产品 Demo 视频
不适合
真人出镜、实拍剪辑、电影级特效
七、获取方式
GitHub：https://github.com/heygen-com/hyperframes
官网：https://hyperframes.heygen.com
创作门槛正在被 AI 彻底拉平，以前要学 AE、懂设计，现在会说话就能做视频。工具一直在变，但创意永远属于你。
