ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

4.3万 Star,HyperFrames 把视频渲染引擎开源了,Agent 写 HTML 就能出片

4.3万 Star,HyperFrames 把视频渲染引擎开源了,Agent 写 HTML 就能出片 大家好有幸继续分享这篇我分享短视频工具专题的第四篇。前面三篇分别聊了全自动流水线 MoneyPrinterTurbo、免费本地剪辑工具 OpenCut、把 Agent 看作导演的 OpenMontage。今天继续我们的专题系列如何通过代码稳定生成下面这种有趣的动画视频。这个像是是今年3 月开源并迅速登上Github热榜的名字是HyperFrames现在已经 4.3 万多 Star。官方 slogan 就三句Write HTML. Render video. Built for agents.如果你经常刷 B 站的科普相关的视频应该见过了类似下面极简、丝滑且富有逻辑感的 PPT 风格的视频。没错这种视频就是用这个工具做出来的下面是将HyperFrames官网做成视频的示例。它和前三篇不在同一层。MoneyPrinterTurbo 管整条流水线OpenCut 管人在时间轴前剪OpenMontage 让 Agent 当导演。HyperFrames 只管渲染把 HTML 页面逐帧拍下来编码成 MP4而且帧级确定性同一输入跑两次结果一致。第三篇 OpenMontage 文档里会调它做动效单独用也行。技术路径我翻了一遍官方文档。composition 就是一份 HTMLdata 属性标时间轴和轨道动画接 GSAP、Lottie、Three.js 都行。预览在浏览器打开 index.html 就能看渲染走无头 Chrome 逐帧 seekFFmpeg 编码。后端做 CI 的同学会眼熟视频在这里变成了构建产物可以进流水线批量跑。现在的AgentCC、Workbuddy等最擅长写代码了尤其是写网页代码。执行下面指令安装技能包npx skillsaddheygen-com/hyperframesAgent 会根据你的需求按照 hyperframes 自动判断你的意图然后按场景选择不同的工作流去执行写 HTMLlintpreviewnpx hyperframes render 出片。官方列了 20 个 skill产品发布、PR 讲解、字幕包装、动效短片、数据可视化。Catalog 里还有 150 多个预制 block转场、字幕、图表、社交卡片调用下面一行命令就能安装到工程中hyperframesadd官网 Showcase 上成品很多产品发布、数据图表、社交字幕都有对应的演示视频大家可以自行去看看做技术相关的自媒体我最看两个skillproduct-launch-video 这个skill 你给它一个官网 URL它就能给你生成一个 30 到 90 秒介绍视频像我写平时做一下开源项目视频解读非常好用。pr-to-video 更厉害了能把 GitHub PR 变成更新说明短视频当然这个可能只适合有技术背景的同学。Agent 用 gh CLI 读 diff动画展示代码变更配旁白和字幕。开源项目发版说明不用再对着屏幕录一遍。talking-head recut 适合已有口播素材HyperFrames 加字幕、lower-third、数据标注原片不动。我动效和字幕样式经常卡壳剪映里磨一集一两个小时很正常。和 Remotion 比Remotion 用 React 组件做视频HyperFrames 走 plain HTML 这条路。官方对比里HyperFrames 不需要构建步骤index.html在浏览器里就能播。Agent 本来就会写 HTML上手成本低一截。会 React 的团队两边都能试不想配 bundler 的可以优先看这边。边界说清这里需要提醒大家HyperFrames不负责选题、找素材、自动化发布的这些还是 MoneyPrinterTurbo 和 OpenMontage 的事实拍长片精剪还得 OpenCut。写在最后今天这篇再加上之前的 三 篇四篇下来工具栈大概齐了自动化、免费本地剪辑、Agent 制片、代码渲染。开源地址 https://github.com/heygen-com/hyperframes感谢阅读希望大家能喜欢。持续更新中竹叶获取最新所有分享工具信息。
返回列表