HyperFrames：用 HTML 直接生成 MP4 视频的开源框架（写网页就能出视频）

HyperFrames用 HTML 直接生成 MP4 视频的开源框架写网页就能出视频大家好 这里是「代码简单说,欢迎大家关注同名公众号,不定时更新更多实用有趣的教程 也欢迎大家在评论区一起讨论交流!~关键词HyperFrames教程 / HTML生成视频 / MP4渲染框架 / 前端视频生成工具 / headless chrome 视频渲染 / GSAP视频动画 / Node视频生成 / 自动化视频工具一、项目背景为什么会出现 HyperFrames在传统视频制作流程里一般是这样的PR / AE / 剪辑工具手动做动画或者用代码框架如 Remotion生成视频再导出 MP4问题很明显学习成本高尤其 AE代码方案依赖 React 生态Remotion动画调试困难时间轴复杂不适合 AI 自动生成内容HyperFrames 的思路非常直接用 HTML CSS JS 直接描述视频然后渲染成 MP4也就是HTML 视频源代码 Headless Chrome 渲染引擎 FFmpeg 视频编码器二、HyperFrames 是什么一句话理解HyperFrames 是一个“HTML → MP4”的确定性视频渲染框架它的核心能力用 HTML 写视频结构用>三、核心优势为什么它值得关注1. 无需 React / 无构建流程传统 RemotionReact Vite Bundle RenderHyperFramesindex.html → render → mp42. 适合 AI Agent 自动生成视频它非常适合CursorClaude CodeCodexGemini CLI因为AI 本身就擅长写 HTML而不是 React 动画系统3. 确定性渲染Deterministic同样输入HTML assets输出完全一致的 MP4适合CI 流水线自动化内容生产批量视频生成4. 技术栈完全开放支持GSAPCSS AnimationWeb Animations APILottieThree.jsAnime.js四、快速开始CLI 使用1. 初始化项目npx hyperframes init my-videocdmy-video2. 本地预览npx hyperframes preview作用浏览器实时预览支持热更新时间轴调试3. 生成 MP4npx hyperframes render输出dist/output.mp4五、核心思想HTML 如何变成视频HyperFrames 的关键在于所有元素必须“可时间控制”例如h1data-start1data-duration4Launch/h1含义属性作用data-start从第几秒开始data-duration持续时间data-track-index图层顺序六、完整示例动画视频结构dividstagedata-width1920data-height1080videodata-start0data-duration6srcintro.mp4/videoh1data-start1data-duration4Launch day/h1audiodata-start0data-duration6srcmusic.wav/audio/div七、动画如何控制GSAP 示例scriptsrchttps://cdn.jsdelivr.net/npm/gsap3/dist/gsap.min.js/scriptscriptconsttlgsap.timeline({paused:true});tl.from(#title,{opacity:0,y:40,duration:0.8},1);window.__timelines{launch:tl};/script核心点timeline 是“可 seek 的”renderer 会按时间逐帧执行保证视频稳定输出八、HyperFrames 架构解析核心链路HTML ↓ Parser解析>九、HyperFrames vs Remotion对比项HyperFramesRemotionUI模型HTMLReact构建无需要 bundler适合AI非常适合一般学习成本低中高渲染方式Chrome FFmpeg类似十、适用场景非常关键1. 自动生成营销视频产品介绍App 功能展示2. 数据可视化视频chart racedashboard 动画3. AI 自动内容生成prompt → video4. 技术讲解视频code diff 动画UI walkthrough十一、Frame.md设计系统升级版HyperFrames 引入frame.md 面向视频的 design system作用将 design token 转为视频结构控制动画节奏给 AI 提供“视觉约束”可以理解为design.md网页 → frame.md视频十二、HyperFrames 本质总结它不是“视频工具”而是一个 HTML → 动画时间轴 → 视频渲染引擎本质上是Web 渲染器时间轴编排系统headless video pipeline十三、总结HyperFrames 的价值在于降低视频制作门槛让前端直接参与视频生成适配 AI 自动化生产内容替代部分 AE / PR 自动化流程如果你是前端开发者这个项目的意义是你写的 HTML不再只是页面而是“视频脚本”关注与交流如果你对前端自动化生成视频AI 视频工程化GSAP / Web 动画系统Node FFmpeg 流水线这类方向感兴趣可以继续深入拆HyperFrames 渲染源码分析headless chrome 帧同步机制AI 自动生成 video pipeline 设计