基于 HyperFrames 构建 LLM 驱动的视频生成应用 ✍ James Russo🕐 2026-05-08📦 5.7 KB 🟢 已读 𝕏 文章列表 文章介绍了如何利用 HyperFrames 和 LLM(大语言模型)构建低成本的视频生成系统。作者对比了传统图像生成模型(高昂成本、易产生幻觉)与基于代码生成(HTML)的方法,展示了如何以极低成本(低至 $0.02)生成可编辑的视觉故事。文章详细阐述了技术栈(Next.js, Vercel, AI SDK)和应用场景,如动画日志、数据视频化等。 HyperFramesLLM视频生成Next.js低代码AIGCWeb组件Vercel # Building on top of HyperFrames **作者**: James Russo **日期**: 2026-05-07T16:51:14.000Z **来源**: [https://x.com/Rames_Jusso/status/2052465022367043830](https://x.com/Rames_Jusso/status/2052465022367043830) ---  AI-generated videos you can edit like code. Built with HyperFrames and a few LLMs. When most people think "AI video" they think Veo, Sora (RIP), Seedance. Photoreal video generators that conjure scenes from prompts. For a lot of visual products though (animated explainers, dashboards-as-video, narrated stories), you don't need them. You can just write code. I built an LLM-driven visual story generator on top of HyperFrames for as low as $0.02 a story. Every tweak of a video is a code edit, not an expensive regeneration.  Here's how I got there. Last year I built a side project with a friend. Generative TikTok-style carousels with text-to-speech overlays. Simple Next.js fullstack app on Vercel, Blob Storage, the AI SDK. Nothing too complex, not even fully agentic, just a basic LLM workflow. Putting the orchestration together wasn't the hard part. The visuals quality and price was the hard part. We had to cobble together three model types: - LLMs to orchestrate and write the scripts - Image gen models for the visually engaging cards - TTS models for narration Each image was around 4 cents using something like Nano Banana 1. A multi-card carousel ran 20+ cents in image gen alone, plus LLM tokens, plus TTS. And the images hallucinated. Misspelled words on cards, garbled brand names, the kind of output that's not production ready. Worse, every fix meant another 4 cent regeneration and a prayer the model would get it right this time. Fast forward to today. With HyperFrames the same app doesn't need image or video gen models at all. Just text-based LLMs writing code. The LLM generates the HyperFrames HTML, HyperFrames can be previewed as HTML avoiding render latency (until you want to export), and TTS handles the narration. And the Vercel AI SDK ties it all together. On cheap cloud models like Gemini 3 Flash you can get very cheap output, approximately 2 cents a story. With a local model on your own GPU it's near-zero, just electricity. At the frontier (Claude Sonnet 4.6 with GPT-5.4-mini) you're closer to 20 cents per story, similar to what image gen used to cost. Once the LLM produces valid HTML, most tweaks are cheap though. Misspelled word? Edit the string. Wrong color across 12 chapters? Find-and-replace once. With image gen each fix was 4 cents and a re-roll. You can checkout the app here https://llm-stories-hyperframes.vercel.app/ ## The setup  The HyperFrames player is a zero-dependency web component. Drop it into any app (Next.js, vanilla HTML, whatever) and you have live browser preview of generated compositions: ``` "use client"; import { useEffect, useState } from "react"; export default function Preview() { const [ready, setReady] = useState(false); useEffect(() => { import("@hyperframes/player").then(() => setReady(true)); }, []); if (!ready) return null; return ( <hyperframes-player src="/api/preview" width={1920} height={1080} controls /> ); } ``` The full pipeline: - Full-stack Next.js app deployed on Vercel - Frontend uses <hyperframes-player> for live browser preview, no rendering required - Backend uses the AI SDK to orchestrate LLMs that outline a story and generate the HyperFrames HTML - TTS via the AI SDK for narration If you want to render MP4s in your app, you can use our Vercel template to wire up Vercel Sandbox (a Firecracker microVM that runs Chromium and ffmpeg) plus Vercel Blob for output storage. ## What you can build Our Vercel template is just the starting point. It gives you the basic building blocks. > **HeyGen@HeyGen**: [原文链接](https://x.com/HeyGen/status/2052431072374510065) > > You can now render @HyperFrames_ on @Vercel > One click gets you a full programmatic video pipeline: live preview, server-side rendering, and MP4 output > All on Vercel infra > Deploy instantly > Build your hyperframes app with vercel > >  The world of possibilities on top of this shape is endless: - Animated changelog reels for SaaS releases - Dashboards-as-video, weekly metrics auto-generated and shared online - Language-learning shorts with synced narration and word highlighting - AI-narrated docs walkthroughs (LLM picks the code samples, generates the animated explanation) Clone the template. And go build something! ## 相关链接 - [James Russo](https://x.com/Rames_Jusso) - [@Rames_Jusso](https://x.com/Rames_Jusso) - [17K](https://x.com/Rames_Jusso/status/2052465022367043830/analytics) - [https://llm-stories-hyperframes.vercel.app/](https://llm-stories-hyperframes.vercel.app/) - [Our Vercel template](https://github.com/heygen-com/hyperframes-vercel-template) - [12h](https://x.com/HeyGen/status/2052431072374510065) - [@HyperFrames_](https://x.com/HyperFrames_) - [@Vercel](https://x.com/vercel) - [11K](https://x.com/HeyGen/status/2052431072374510065/analytics) - [the template](https://github.com/heygen-com/hyperframes-vercel-template) - [Upgrade to Premium](https://x.com/i/premium_sign_up) - [3:06 AM · May 8, 2026](https://x.com/Rames_Jusso/status/2052465022367043830) - [17.8K Views](https://x.com/Rames_Jusso/status/2052465022367043830/analytics) - [View quotes](https://x.com/Rames_Jusso/status/2052465022367043830/quotes) --- *导出时间: 2026/5/8 13:42:46* --- ## 中文翻译 # 基于 HyperFrames 构建应用 **作者**: James Russo **日期**: 2026-05-07T16:51:14.000Z **来源**: [https://x.com/Rames_Jusso/status/2052465022367043830](https://x.com/Rames_Jusso/status/2052465022367043830) ---  像编辑代码一样编辑 AI 生成的视频。利用 HyperFrames 和几个大语言模型(LLM)构建而成。 当大多数人想到“AI 视频”时,他们会想到 Veo、Sora(RIP)、Seedance。这些是能根据提示词生成场景的照片级真实感视频生成器。 但对于许多视觉产品(例如动画解说、视频化仪表板、旁白故事)来说,你并不需要它们。你只需要编写代码。 我在 HyperFrames 之上构建了一个由 LLM 驱动的视觉故事生成器,每个故事的成本低至 0.02 美元。对视频的每一次微调都是一次代码编辑,而不是昂贵地重新生成。  以下是我的实现过程。 去年,我和一个朋友构建了一个副业项目。生成 TikTok 风格的轮播图,并带有文字转语音(TTS)的叠加层。这是一个部署在 Vercel 上的简单 Next.js 全栈应用,使用了 Blob Storage 和 AI SDK。并不太复杂,甚至算不上完全智能体化,只是一个基础的 LLM 工作流。 将编排部分组合起来并不是难点。视觉质量和成本才是真正的难点。 我们不得不拼凑三种类型的模型: - 用于编排和编写脚本的 LLM - 用于生成视觉吸引力卡片的图像生成模型 - 用于旁白的 TTS 模型 使用类似 Nano Banana 1 的模型,每张图片的成本大约是 4 美分。 仅图像生成一项,一个多卡片轮播图就要花费 20 多美分,再加上 LLM token 费用和 TTS 费用。而且生成的图像会有幻觉。卡片上的单词拼写错误,品牌名称乱码,这些都是无法投入生产环境的输出。 更糟糕的是,每次修复都意味着另一次 4 美分的重新生成,还要祈祷这次模型能弄对。 快进到今天。有了 HyperFrames,同样的应用根本不需要图像或视频生成模型。 只需要基于文本的 LLM 编写代码即可。 LLM 生成 HyperFrames HTML,HyperFrames 可以作为 HTML 进行预览从而避免渲染延迟(直到你想导出时),TTS 则负责旁白。Vercel AI SDK 将这一切连接在一起。 使用像 Gemini 3 Flash 这样廉价的云端模型,你可以获得非常便宜的输出,大约每篇故事 2 美分。如果你使用自己 GPU 上的本地模型,成本几乎为零,只需支付电费。在使用前沿模型(Claude Sonnet 4.6 配合 GPT-5.4-mini)时,成本接近每篇故事 20 美分,这与过去图像生成的成本相似。 不过,一旦 LLM 生成了有效的 HTML,大多数微调的成本都很低。单词拼写错误?直接编辑字符串。12 个章节的颜色错了?执行一次查找并替换即可。而在使用图像生成时,每次修复都需要 4 美分和重新生成。 你可以在这里查看该应用 https://llm-stories-hyperframes.vercel.app/ ## 设置  HyperFrames 播放器是一个零依赖的 Web 组件。将其放入任何应用(Next.js、原生 HTML 等),你就能获得生成合成内容的实时浏览器预览: ``` "use client"; import { useEffect, useState } from "react"; export default function Preview() { const [ready, setReady] = useState(false); useEffect(() => { import("@hyperframes/player").then(() => setReady(true)); }, []); if (!ready) return null; return ( <hyperframes-player src="/api/preview" width={1920} height={1080} controls /> ); } ``` 完整的流程如下: - 部署在 Vercel 上的全栈 Next.js 应用 - 前端使用 <hyperframes-player> 进行实时浏览器预览,无需渲染 - 后端使用 AI SDK 编排 LLM,这些 LLM 负责规划故事大纲并生成 HyperFrames HTML - 通过 AI SDK 实现 TTS 旁白 如果你想在应用中渲染 MP4,可以使用我们的 Vercel 模板来连接 Vercel Sandbox(一个运行 Chromium 和 ffmpeg 的 Firecracker 微型虚拟机)以及 Vercel Blob 用于输出存储。 ## 你可以构建什么 我们的 Vercel 模板只是一个起点。它为你提供了基本的构建块。 > **HeyGen@HeyGen**: [原文链接](https://x.com/HeyGen/status/2052431072374510065) > > 你现在可以在 @Vercel 上渲染 @HyperFrames_ > 一键即可获得完整的程序化视频流水线:实时预览、服务端渲染和 MP4 输出 > 全部运行在 Vercel 基础设施上 > 立即部署 > 使用 vercel 构建你的 hyperframes 应用 > >  基于此形态的可能性是无限的: - 用于 SaaS 版本发布的动画更新日志视频 - 视频化仪表板,每周指标自动生成并在线分享 - 带有同步旁白和单词高亮的语言学习短视频 - AI 旁白的文档演练(LLM 选择代码示例,生成动画讲解) 克隆该模板。 然后去构建点东西吧! ## 相关链接 - [James Russo](https://x.com/Rames_Jusso) - [@Rames_Jusso](https://x.com/Rames_Jusso) - [17K](https://x.com/Rames_Jusso/status/2052465022367043830/analytics) - [https://llm-stories-hyperframes.vercel.app/](https://llm-stories-hyperframes.vercel.app/) - [Our Vercel template](https://github.com/heygen-com/hyperframes-vercel-template) - [12h](https://x.com/HeyGen/status/2052431072374510065) - [@HyperFrames_](https://x.com/HyperFrames_) - [@Vercel](https://x.com/vercel) - [11K](https://x.com/HeyGen/status/2052431072374510065/analytics) - [the template](https://github.com/heygen-com/hyperframes-vercel-template) - [Upgrade to Premium](https://x.com/i/premium_sign_up) - [3:06 AM · May 8, 2026](https://x.com/Rames_Jusso/status/2052465022367043830) - [17.8K Views](https://x.com/Rames_Jusso/status/2052465022367043830/analytics) - [View quotes](https://x.com/Rames_Jusso/status/2052465022367043830/quotes) --- *导出时间: 2026/5/8 13:42:46*
M Motion-Graphics Skill:用自然语言制作动态图形 文章介绍了 HyperFrames 的 Motion-Graphics Skill,这是一个通过 Agent 自动生成动态图形的工具。用户只需描述想要传达的内容(如趋势、品牌、数据),无需掌握专业术语或设计软件,Agent 即可自动完成数据获取、设计排版和动画渲染,极大地降低了视频设计和数据可视化的门槛。 技术 › Agent ✍ HeyGen🕐 2026-07-13 HeyGenHyperFramesMotion-GraphicsAIGC视频生成自动化设计工具数据可视化
C Codex 最强插件 HyperFrames:用代码导演镜头 文章介绍了 Codex 的新插件 HyperFrames,作者展示了如何利用该工具结合代码和提示词,在 10 秒内制作出包含关键帧、字幕、转场及粒子效果的 AI 科技预告片。这种新方式将传统的剪辑转变为通过代码调度镜头,文末附带了具体的提示词案例。 技术 › 工具与效率 ✍ 傅盛🕐 2026-05-07 CodexHyperFramesAI视频生成AIGC提示词OpenClawAgent傅盛自动化
H HyperFrames vs Remotion - a detailed rundown 文章详细对比了 HyperFrames 和 Remotion 两个代码驱动视频渲染工具的差异。作者指出,尽管 Remotion 是成熟的 React 方案,但 HyperFrames 从零构建,选择了 HTML 路线。这主要出于两个考量:一是 Agent 原生工作流,HTML 更符合 LLM 的训练数据,能激发更佳的创意输出;二是人类编辑工作流,HTML 作为渲染层和数据源,使得构建可视化编辑器更加健壮。文章还分析了两者在动画库兼容性(如 GSAP)、原生 HTML 支持以及渲染模式上的技术区别。 技术 › 工具与效率 ✍ Bin Liu🕐 2026-04-21 RemotionHyperFrames视频生成前端开发ReactGSAPAgentLLM技术对比
用 用代码做视频:HyperFrames 和 Remotion 选型指南 文章对比了 HyperFrames 和 Remotion 两个代码生成视频框架。HyperFrames 基于 HTML/GSAP,零构建、AI 友好,适合从零构建的动画和 AI 自动化管线;Remotion 基于 React,支持视频导入叠加和批量渲染,适合在已有视频素材上合成。作者建议根据底层是否含视频、AI 参与度等场景按需选型。 技术 › 前端 ✍ 雪踏乌云🕐 2026-07-28 视频生成前端开发工具对比AI工作流RemotionHyperFrames
C Claude Design 与 HyperFrames 的无创意工作流 本文介绍了 Anthropic 的 Claude Design 工具如何与 HyperFrames 结合,通过 HTML/CSS 直接将设计转化为视频。文章详细阐述了工作流程、品牌系统集成及实际案例,展示了从设计到渲染的无缝衔接。 技术 › Claude ✍ HyperFrames🕐 2026-07-26 Claude DesignHyperFrames设计工具视频生成工作流HTML/CSSAnthropic前端创意工具自动化
如 如何制作AI电影并登上院线 本文介绍了如何利用AI工具制作动画电影并参加电影节的完整流程。作者列举了六个关键工具(Claude、Runway、Midjourney等),详细说明了从剧本创作、角色设计到后期制作的步骤,并分析了该领域的变现潜力和参赛注意事项。 技术 › LLM ✍ Rich Odin🕐 2026-07-24 AI电影视频生成RunwayClaude影视制作工作流独立电影AIGC
我 我们运行的5种AI UGC格式及使用时机 文章探讨了内容格式对传播效果的重要性,详细介绍了五种常用的AI UGC格式:真人出镜、产品演示、前后对比、用户证言和幻灯片。文章分析了每种格式的运作机制、适用场景及制作要点,强调应根据内容和受众选择最合适的载体,以最大化内容的传播效率。 技术 › Agent ✍ Adrian Solarz🕐 2026-07-24 AIUGC内容营销视频生成社交媒体营销策略AIGC视频格式
V Video Agent:基于 HeyGen 的视频生成智能体 文章介绍了 HeyGen 推出的 Video Agent 产品。这是一个无需代码、通过自然语言交互即可自动生成完整视频的智能体。用户只需描述需求,Agent 便会自动规划、编剧、选角并生成视频,支持风格定义和后期精细编辑。 技术 › Agent ✍ HeyGen🕐 2026-07-24 HeyGen视频生成AIGC智能体自动化视频编辑产品设计
C Codex 5.6 真的要让剪辑师失业了 文章评测了 Codex 5.6 的视频制作能力,重度实测后筛选出 HyperFrames、Remotion、video-use 和 Seedance 四个 Skill。它们分别负责策划渲染、React 模板生成、真人素材剪辑和电影级提示词,实现了从脚本到成片的 AI 全流程闭环。 技术 › Codex ✍ 爱丽丝呀!🕐 2026-07-23 CodexAI视频剪辑HyperFramesRemotionvideo-useSeedance工具评测视频生成
H HyperFrames Storyboard: 掌控 AI 视频输出的分镜流程 文章介绍了 HyperFrames 的新功能 Storyboard,通过模仿电影制作中的分镜流程,让 AI 在生成视频前先制定计划、草图和布局,允许用户在低成本阶段进行修改和指导,从而提高视频生成的可控性和效率。 技术 › AI视频 ✍ HeyGen🕐 2026-07-23 AI视频分镜HyperFramesHeyGen自动化工作流视频生成
图 图书解读视频制作教程与实践案例 文章介绍了如何利用 Codex、AI 图片、AI 配音和 HyperFrames 制作 60-90 秒的中文图书解读短视频。作者以《活着》为例,详细分享了选书、脚本写作、图片生成约束、声音选择、字幕对齐及剪辑转场等全流程,并将经验封装成 Skill,为想做自媒体的人提供了一条不露脸、低门槛的内容创作路径。 技术 › Skill ✍ Smartpig🕐 2026-07-21 AI视频图书解读CodexHyperFrames自媒体工作流自动化AIGC短视频教程
我 我把自己攒了半年的提示词秘籍,喂给了一个Agent当导演 作者分享了使用 LibTV Agent 制作视频的体验,包括选择预设的 Skill 作为导演,自动分镜、生成视频,以及上传自定义 Skill 的功能。该平台降低了视频制作门槛,支持手动干预和爆款视频复刻,还推出了 Skill 激励计划,鼓励创作者分享经验。 技术 › Agent ✍ zhouluobo🕐 2026-07-15 LibTVAgent视频生成Skill提示词短剧AIGC工具评测自动化经验封装