概述
该技能可编排产品发布视频——主镜头、功能标注、时间节奏——作为 HyperFrames 组合。当新版本需要一段紧凑、可品牌化的公告视频时使用。它能根据你提供的产品素材将最终 MP4 渲染出来。
HyperFrames——产品发布视频
通过编写 HTML 组合来创建产品发布视频，HyperFrames 将其渲染为确定的 MP4。智能体原生视频流程：LLM 编写 HTML（它们的第一语言），HyperFrames 通过无头 Chrome + FFmpeg 渲染帧级精确视频。
使用时机
- 用户想从 URL、简介或脚本制作产品发布视频
- 用户想制作包含产品本身视觉的站点导览/展示
- 用户想制作带有动态字幕和品牌的社交媒体短片（TikTok/Reels/Shorts）
- 用户想制作带有动画叠加和音乐的营销/推广视频
- 用户说“给我做个视频”并提供产品 URL 或描述
不适合的情况
- 用户想要真人出演/UGC/演播室内容（需要摄像机，而非 HTML）
- 用户想要直播/直播带货（需要 RTMP 推流）
- 用户想要头部访谈类视频（请使用
hyperframes-embedded-captions或hyperframes-talking-head-recut） - 用户想要无产品/URL 的纯解释视频（请使用
hyperframes-faceless-explainer） - 用户想要演示/幻灯片（请使用
hyperframes-slideshow）
工作流程
0 · 初始化项目
npx hyperframes init my-launch-video
cd my-launch-video
这会创建包含 index.html、package.json 以及已配置 HyperFrames CLI 的项目脚手架。
1 · 规划视频
- 输入： 产品 URL、简介或脚本
- 输出： 3-6 场景故事板及时间分配（总计 30-90 秒为最佳）
- 预算： 标题 ≤2 秒，结尾 ≤3 秒，中间场景约 8-12 秒每个
- 选择设计语言： 浏览
hyperframes.heygen.com/design中的 frame.md 模板
2 · 编写 HTML 组合
组合契约：
<!doctype html>
<html lang="en">
<body>
<div
id="main"
data-composition-id="intro"
data-start="0"
data-duration="15"
data-width="1080"
data-height="1920"
data-fps="30"
>
<div
class="clip"
data-start="0"
data-duration="5"
data-track-index="0"
>
<!-- 场景内容 -->
</div>
</div>
</body>
</html>
关键属性：
data-composition-id：组合的唯一 IDdata-start/data-duration：以秒为单位的起止时间data-width/data-height：视口尺寸（9:16 为 1080×1920）data-fps：帧率（标准为 30）class="clip"：标记计时元素data-track-index：图层顺序（数值越大越靠上）
3 · 配置可 seek 动画
使用 GSAP（推荐）、CSS 关键帧或 WAAPI。所有动画必须可 seek（确定性——相同时间点始终渲染相同帧）。
GSAP 模式（推荐）：
const tl = gsap.timeline({ paused: true });
tl.to("#title", { opacity: 1, y: 0, duration: 0.8, ease: "power4.out" }, 0.5);
tl.to("#image", { scale: 1, opacity: 1, duration: 1.2, ease: "power3.out" }, 1.0);
window.__timelines = { main: tl };
CSS 关键帧模式：
@keyframes fadeInUp {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.animate-in {
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
4 · 添加媒体
- 图片： 下载到
public/目录，通过staticFile()或相对路径引用 - 视频背景： 放入
assets/，通过data-loop循环 - 音频/背景音乐： 通过
<audio data-start="0" data-duration="15" src="./bgm.mp3">添加 - 配音： 通过 TTS 生成，将字幕与单词时间戳对齐
5 · 检查并验证
npx hyperframes check # 验证组合契约
npx hyperframes lint # 检查常见错误
继续前修复所有错误。警告可接受但应审查。
6 · 预览
npx hyperframes preview # 打开 Hyperframes Studio 并启用 HMR
在原始组合页面上通过 __player.seek(time) 抽查 3-4 个时间点。验证：
- 动画在正确时间触发
- 切换处无白闪（不透明舞台背景）
- 字幕可见且可读
- 音频电平平衡
7 · 渲染
npx hyperframes render --output launch-video.mp4
验证输出：
ffmpeg -ss 3 -i launch-video.mp4 -frames:v 1 frame-3s.png # 检查字幕
ffmpeg -ss 15 -i launch-video.mp4 -frames:v 1 frame-15s.png # 检查场景
反合理化表
| 合理化 | 现实 |
|---|---|
| “我就用视频编辑器” | GUI 编辑器不是智能体原生；HTML 才是 LLM 最擅长的 |
| “我跳过 lint 步骤” | Lint 能捕捉破坏渲染的组合契约错误 |
| “我用 Remotion 替代” | Remotion 需要 React 推理；对智能体来说 HTML 更简单 |
| “我加入空闲动画来填充时间” | 禁止空闲抖动——每个阶段必须有功能（参见 hyperframes-cut-the-curve） |
| “我以 42% 为中心放置内容以预留字幕空间” | 字幕是叠加层——以真实中心居中（y = H/2） |
| “我在场景之间使用交叉淡入淡出” | 交叉淡入淡出没有载体——使用 cut-the-curve 作为默认边界 |
| “我写一个大 HTML 文件，不用分场景” | 场景是组合的基本单元——每个场景都有自己的 clip 包裹层 |
| “我跳过预览直接渲染” | 预览能捕捉浪费渲染时间的时序错误 |
代码示例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0a; }
#main {
position: relative;
width: 1080px;
height: 1920px;
overflow: hidden;
}
.scene {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.5s ease;
}
.scene.active { opacity: 1; }
.hook-bg {
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 80px;
text-align: center;
color: white;
font-family: system-ui, sans-serif;
}
.hook-text {
font-size: 72px;
font-weight: 800;
line-height: 1.1;
transform: translateY(40px);
opacity: 0;
}
.animate-in {
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInUp {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
</style>
</head>
<body>
<div
id="main"
data-composition-id="product-ad"
data-start="0"
data-duration="15"
data-width="1080"
data-height="1920"
data-fps="30"
>
<div class="scene hook-bg" data-start="0" data-duration="5" data-track-index="0">
<h1 class="hook-text animate-in" data-start="0.5" data-duration="4">
产品名称
</h1>
</div>
</div>
<script>
// 通过 IntersectionObserver 或手动计时激活场景
const scenes = document.querySelectorAll('.scene');
scenes.forEach(scene => {
const start = parseFloat(scene.dataset.start);
const duration = parseFloat(scene.dataset.duration);
setTimeout(() => scene.classList.add('active'), start * 1000);
setTimeout(() => scene.classList.remove('active'), (start + duration) * 1000);
});
</script>
</body>
</html>
验证清单
- 组合通过
npx hyperframes check验证，0 个错误 - 所有场景都有
data-start、data-duration、data-track-index - 动画是 seekable 的（确定性，不依赖墙钟时间）
- 预览在 3 个以上抽查时间点显示正确的时序
- 渲染的 MP4 无白闪、冻结帧或缺失字幕
- 音频电平平衡（如需已应用配音压低）
- 输出分辨率符合目标（9:16 为 1080×1920，16:9 为 1920×1080）