最近在研究 HeyGen 开源的 HyperFrames。我最关注的一点很简单：把视频当网页来写。
这次我做了一个 15 秒口红广告 Demo（ROUGE VELOUR No. 07「炙恋 Blazing Love」），核心是验证两件事：
- HTML 时间线 + GSAP 动画，是否足够表达商业短视频节奏
- AI 代理是否能稳定接管「生成 → 调整 → 渲染」的流程
为什么这条路值得做
传统视频工具强在可视化编辑；HyperFrames 强在工程化生产：
- HTML-native：结构清晰，素材和时间线都在代码中
- Agent-first：CLI 默认非交互，适合 Claude / Codex / Cursor
- Deterministic：同输入同输出，适合 CI 与批量生成
这意味着它不是只做「一条片子」，而是可以做「一个可复用的视频生产系统」。
Demo 结构
- 0-4s：品牌开场（logo 浮现）
- 4-9s：产品特写（口红 SVG + 色号）
- 9-13s：卖点三连（丝绒 / 持久 / 显白）
- 13-15s：收尾（slogan + CTA）
全部视觉元素都由代码生成（SVG + 渐变 + 文本），无需外部图片素材。
Demo 视频
旁白版视频直链： https://leondu.com/blog/hyperframes-lipstick-demo/rouge-demo-voice-natural.mp4
演示代码（可直接放进 HyperFrames 项目）
<!-- 关键时间线片段：场景 3 + 场景 4 -->
<script>
const tl = gsap.timeline({ paused: true });
// ================= 场景 3 （9 – 13s）=================
tl.from('#f1', { opacity: 0, y: 60, duration: 0.8, ease: 'power3.out' }, 9.1);
tl.from('#f2', { opacity: 0, y: 60, duration: 0.8, ease: 'power3.out' }, 9.4);
tl.from('#f3', { opacity: 0, y: 60, duration: 0.8, ease: 'power3.out' }, 9.7);
tl.fromTo('#f1 > div:first-child',
{ textShadow: '0 0 0px #d4a256' },
{ textShadow: '0 0 30px #d4a256', duration: 0.6, yoyo: true, repeat: 1 }, 10.2);
tl.fromTo('#f2 > div:first-child',
{ textShadow: '0 0 0px #d4a256' },
{ textShadow: '0 0 30px #d4a256', duration: 0.6, yoyo: true, repeat: 1 }, 10.5);
tl.fromTo('#f3 > div:first-child',
{ textShadow: '0 0 0px #d4a256' },
{ textShadow: '0 0 30px #d4a256', duration: 0.6, yoyo: true, repeat: 1 }, 10.8);
tl.to('#scene-3', { opacity: 0, duration: 0.5, ease: 'power2.in' }, 12.5);
// ================= 场景 4 （13 – 15s）=================
tl.from('#s4-slogan', {
opacity: 0,
clipPath: 'inset(0 100% 0 0)',
duration: 1.2,
ease: 'power2.out'
}, 13.0);
tl.from('#s4-en', { opacity: 0, y: 20, duration: 0.6 }, 13.6);
tl.from('#s4-cta', { opacity: 0, scale: 0.9, duration: 0.8, ease: 'back.out(1.5)' }, 14.0);
tl.from('#corner-logo', { opacity: 0, duration: 0.6 }, 4.2);
// 必须注册给 HyperFrames seek
window.__timelines = window.__timelines || {};
window.__timelines['rouge-ad'] = tl;
</script>
我的结论
如果你追求的是一次性手工创作，传统剪辑工具仍然更顺手。
但如果你要的是批量、稳定、可回放、可自动化的视频生产流程，HyperFrames 是一个非常值得投入的方向。