HyperFrames vs Remotion - a detailed rundown ✍ Bin Liu🕐 2026-04-21📦 11.7 KB 🟢 已读 𝕏 文章列表 文章详细对比了 HyperFrames 和 Remotion 两个代码驱动视频渲染工具的差异。作者指出，尽管 Remotion 是成熟的 React 方案，但 HyperFrames 从零构建，选择了 HTML 路线。这主要出于两个考量：一是 Agent 原生工作流，HTML 更符合 LLM 的训练数据，能激发更佳的创意输出；二是人类编辑工作流，HTML 作为渲染层和数据源，使得构建可视化编辑器更加健壮。文章还分析了两者在动画库兼容性（如 GSAP）、原生 HTML 支持以及渲染模式上的技术区别。 RemotionHyperFrames视频生成前端开发ReactGSAPAgentLLM技术对比 # HyperFrames vs Remotion - a detailed rundown **作者**: Bin Liu **日期**: 2026-04-20T21:17:24.000Z **来源**: [https://x.com/liu8in/status/2046337462604279828](https://x.com/liu8in/status/2046337462604279828) ---  ## someone commented "remotion wrapper?" ## No - HyperFrames was designed for native agent usage, built from scratch. First and foremost - Remotion is an awesome project - we used Remotion for many months in our production pipelines. Remotion promoted the idea of using code to orchestrate and animate video production, they proved that headless Chrome could be a reliable, deterministic video renderer. However, Remotion is React based. As we scaled our code-to-video pipelines, we kept running into the same kinds of limits inside a React-first authoring model. We debated internally, on continuing with Remotion, or build our own from scratch. ## Two factors drove our decision: #1 - the agent-native workflow In our evals, LLMs writing Remotion compositions produced less creative visual outputs, needed a lot more guardrails and prompting to improve, when compared with the same LLMs writing HTML compositions and GSAP animations directly. Two related issues compounded it: Animation libraries with their own internal clocks (GSAP, Anime.js, Motion One) don't compose cleanly with React's per-frame render. And arbitrary HTML or CSS that wasn't written as React doesn't have a clean path into a React composition; you must rewrite it. #2 - the human editing workflow We want the same code to be the render layer AND data layer - because we need to build a UI for human atop the agentic experience. HTML is both the render layer and the editable source of truth. The same DOM is what you see and what you edit. This makes building a real visual editor (selection, drag & drop, property panels, timeline, etc.) much more natural and robust — exactly like how @paper & @pencildev does it. With Remotion (React), the source of truth of the Remotion Editor is json, converted to code + build tooling. Round-tripping through a visual editor becomes painful and fragile. Although the Remotion team has shown some progress here, it’s much more difficult to build a real time editor on top of React than HTML. We architected HyperFrames so it’s the most native to agents while easy to build a human interface on top. Now let’s dive into all the detailed differences between Remotion & HyperFrames:  Difference at the core: React vs HTML Remotion and HyperFrames both drive headless Chrome. Both are deterministic. Both ship agent skills. They differ on one decision: what the primary author (either Agent or Human) writes. Remotion's bet is React. Video compositions are React components. You get typed JSX, the React ecosystem, component reuse, and the whole of React tooling. Remotion's strengths come from committing to that surface: five years of production use, Lambda at hyperscale, a large community, careful type-safe APIs. HyperFrames' bet is HTML. Video compositions are HTML pages. You can paste in a landing page, a design-system component, a CodePen demo, and animate it. We think this is the right surface for two specific use cases: AI agents writing video, and visual editors built directly on the DOM the renderer consumes. Different bets, different strengths. What the difference means in practice ## Agents express visuals better in HTML than in React When an LLM writes HyperFrames, it's writing the medium it was trained on most heavily. The web as browsers see it (HTML, CSS, JavaScript, GSAP idioms from CodePen, 25+ years of accumulated web animation content) is the deepest well in the model's training data. React-specific sources inevitably would be a much much smaller slice. From running both systems in production: an agent asked to write a Remotion composition spends tokens learning framework rules (which hooks are allowed, which APIs are forbidden, how to scaffold a project), before it can be creative. Output tends to converge on a narrow visual vocabulary: centered titles, stock transitions, conventional typography. The same agent, writing HTML with GSAP, reaches for a wider creative range because that's what its training data looks like. ## Animation libraries with their own clocks Asking an agent to port a GSAP animation or an existing web page into Remotion loses details on the first try: timing nuances, audio level relationships, text sizing. The HTML-first path avoids the translation step entirely. We gave both tools the same 4-second GSAP timeline: 11 letters of "HYPERFRAMES" enter staggered with a back-out ease, hold for 1.5 seconds, then each letter rotates and falls out of frame. Identical animation code, identical easings, identical stagger. The only thing we changed was the renderer. HyperFrames output (what the animation is meant to look like):  In this render, all four seconds are used. Letters fly in one by one, the full word holds in the center for about a second and a half, then the letters spin and drop away. Remotion output (same timeline, same code):  In this render, GSAP plays through its entire 4-second animation in roughly the first second of render wall-clock time. By the time Remotion starts capturing later frames of the video, GSAP has already finished and every letter has exited. Most of the output is black frames of an empty stage. Why: GSAP drives its own timeline via performance.now(), which ticks at real-time speed during render. HyperFrames pauses GSAP and seeks it to frame / fps before capturing each frame, so the library runs in lockstep with the output. Remotion has no equivalent primitive, so GSAP's internal ticker races through the timeline at wall-clock speed while Remotion captures a handful of frames during the entrance and mostly-empty frames after. Everything GSAP supports (SplitText, ScrollTrigger, MotionPath, physics, 15 years of snippets on CodePen) works the same way in HyperFrames. The pattern generalizes to Anime.js and Motion One and any other library with its own clock, and any JS library without it’s own clock just works. Wrapping a library clock in a Remotion component is possible but awkward; you give up most of what the library is good at. ## Arbitrary HTML, CSS, JavaScript Every web page is a potential HyperFrames composition. Landing pages. Claude Design artifacts. Design-system docs. CodePen embeds. You paste in the HTML, render. Remotion asks you to translate first: rewrite HTML as JSX, convert CSS for React, wrap imperative code (Canvas, WebGL, GSAP) in React components with refs and effects. Every translation step is a chance for an agent or a human to lose fidelity or introduce bugs. The translation is round-tripping work anyway; both frameworks ultimately serve HTML to the browser to render. ## Auto-fallback for edge primitives HyperFrames has two capture modes. BeginFrame mode (Linux + chrome-headless-shell) drives Chrome's compositor atomically via HeadlessExperimental.beginFrame, producing byte-for-byte reproducible frames across machines. Screenshot mode (macOS, Windows, and as an automatic fallback) runs Chrome in real time and takes ordinary screenshots, the same approach Remotion uses. The renderer inspects each composition at compile time and falls back to screenshot mode when it spots primitives BeginFrame can't handle: inline <iframe>s, raw `requestAnimationFrame` loops outside a Frame Adapter. It injects a virtual-time shim so rAF and iframe content stay frame-driven instead of wall-clock-driven. You get a diagnostic explaining the fallback, and the render produces visibly-correct output. When the composition can run in BeginFrame mode, you get determinism for free. In practice: GSAP timelines, CSS @keyframes (via the Web Animations API adapter), Lottie, Three.js, and the Web Animations API all render deterministically in BeginFrame mode. Raw canvas loops and live-web embeds get screenshot mode automatically. ## React UI components reuse (Remotion's home turf) If your team already has a design system in React components, Remotion lets you compose videos from the same primitives you ship in your app. Type safety, IDE completion, cross-file refactoring, everything React brings to developer ergonomics. For teams with existing React investment, this is a real advantage that HyperFrames doesn't try to match. ## Distributed rendering (Remotion's clean lead) Remotion Lambda splits long videos across hundreds of AWS Lambda functions. Mature, production-tested, well-documented. It's a thing you can pick up today and use at hyperscale. HyperFrames’ renderer logic runs on a single machine today. For long-form at large scale, HyperFrames' architecture doesn't block distributed rendering (compositions are stateless HTML, the renderer is stateless), just that we haven't gotten there yet. Closing this gap is on our roadmap. ## Visual editing over the render source (HyperFrames' natural bet) The DOM you render is the DOM you edit. HyperFrames Studio previews compositions in a live iframe and lets you pick and edit elements directly: click an element, drag to reposition, edit properties in a panel. The editor and the renderer share one source of truth. Building the same editor on top of React is harder because the source of truth is code plus a build step. Round-tripping a visual edit back to JSX means re-compiling. That's why tools like Paper.Design chose HTML as the editable source in the first place. Stay tuned - this will soon materialize and continue to be open sourced. ## HDR output Both tools currently render through headless Chrome, which outputs sRGB. Remotion documents this as unsupported. HyperFrames is working on an HDR output path. ## Open Source vs Licensing HyperFrames: Apache 2.0 Remotion: Commercial (free for teams of 3 or fewer, then $0.01/render, $100/mo minimum) ## Recap: the single difference between Remotion and HyperFrames is the choice of React v.s. HTML (+CSS+Javascript) but this decision leads to many differences down the line. for our needs: > #1 - most native to agents so they perform the best. > #2 - architected to enable UI layer for humans. HTML + CSS + Javascript is the obvious bet: Agents already “think” in HTML - LLMs have seen massive amounts of web code True “one file in, video out”. No package.json, no installs, no bundler config, no composition setup. Fewer moving parts = way fewer random failures in automated/agentic workflows. Highest creative ceiling: anything the browser can render, HTML can represent. HTML is both the render layer and the editable source of truth. The same DOM is what you see and what you edit. We at HeyGen are all-in with HyperFrames - but we cannot do this alone, that’s why we open sourced it under Apache 2.0 - so together we build the foundation for agentic video creation. ## 相关链接 - [Joshua Xu reposted](https://x.com/joshua_xu_) - [Bin Liu](https://x.com/liu8in) - [@liu8in](https://x.com/liu8in) - [12K](https://x.com/liu8in/status/2046337462604279828/analytics) - [@paper](https://x.com/@paper) - [@pencildev](https://x.com/@pencildev) - [performance.now](https://performance.now/) - [@keyframes](https://x.com/@keyframes) - [Paper.Design](http://paper.design/) - [Upgrade to Premium](https://x.com/i/premium_sign_up) - [5:17 AM · Apr 21, 2026](https://x.com/liu8in/status/2046337462604279828) - [12.4K Views](https://x.com/liu8in/status/2046337462604279828/analytics) - [View quotes](https://x.com/liu8in/status/2046337462604279828/quotes) --- *导出时间: 2026/4/21 09:19:29*
用 用代码做视频：HyperFrames 和 Remotion 选型指南 文章对比了 HyperFrames 和 Remotion 两个代码生成视频框架。HyperFrames 基于 HTML/GSAP，零构建、AI 友好，适合从零构建的动画和 AI 自动化管线；Remotion 基于 React，支持视频导入叠加和批量渲染，适合在已有视频素材上合成。作者建议根据底层是否含视频、AI 参与度等场景按需选型。 技术 › 前端 ✍ 雪踏乌云🕐 2026-07-28 视频生成前端开发工具对比AI工作流RemotionHyperFrames
A AI 视频创作的新范式：Codex + Remotion 文章探讨了将视频制作转化为代码工程的“视频即代码”新范式。通过结合 Codex（负责编写和迭代代码）与 Remotion（负责 React 组件渲染视频），创作者可以实现视频的组件化、参数化和版本控制，解决高频生产中的可控性与复用难题。文章详细介绍了工作流、工具链选型、项目结构搭建以及避坑指南，强调了从单次生成向系统化生产转变的重要性。 技术 › Codex ✍ 知识猫图解🕐 2026-07-03 视频生成RemotionCodex视频工程工作流AI创作React自动化组件化Agent
装 装完 Codex 不知道干什么？这 6 个 GitHub Skills 让你做视频搞钱 文章介绍了 6 个适用于 Codex 的 GitHub Skills，涵盖动效生成、视频剪辑、批量制作、AI 生成及中文剪辑等工具，帮助用户构建自动化视频工作流以提升效率。 技术 › Codex ✍ Kay🕐 2026-07-30 Codex视频制作AgentSkill自动化HyperFramesRemotionAI剪辑工作流
C Codex 5.6 真的要让剪辑师失业了 文章评测了 Codex 5.6 的视频制作能力，重度实测后筛选出 HyperFrames、Remotion、video-use 和 Seedance 四个 Skill。它们分别负责策划渲染、React 模板生成、真人素材剪辑和电影级提示词，实现了从脚本到成片的 AI 全流程闭环。 技术 › Codex ✍ 爱丽丝呀！🕐 2026-07-23 CodexAI视频剪辑HyperFramesRemotionvideo-useSeedance工具评测视频生成
G Graph Engineering 101: When a Loop Isn’t Enough 文章探讨了AI Agent从简单的ReAct循环向图工程架构的演进。循环模式在处理复杂、多步骤及需人工介入的任务时存在状态持久化、错误处理和分支逻辑的局限性。图工程通过显式的节点、边和状态管理，解决了并发、暂停恢复及复杂流程控制问题，为构建更健壮的Agent系统提供了架构基础。 技术 › Agent ✍ Alex Prompter🕐 2026-07-22 AgentGraph EngineeringReActLangGraph架构设计状态管理LLM
从 从 CoT 到 ReAct：用 Python 搭建 LLM Agent 实战指南 本文通过 Python 演示了如何搭建一个具备规划、工具调用、验证和复盘能力的完整 LLM Agent。教程详细拆解了 Plan-and-Solve、ReAct、Verification、Self-Refine 和 Reflexion 五个核心模块，强调了结构化数据控制流程的重要性，并提供了工程落地的具体代码实现与原则。 技术 › Agent ✍ Mr Panda🕐 2026-07-19 LLMAgentPythonReActCoT工程实践ReflexionPrompt Engineering教程
F Faceless-explainer Skill：一键将文本转化为解说视频 本文介绍了 HeyGen 推出的 'Faceless-explainer' Agent Skill，它能在没有任何素材的情况下，仅通过文本输入自动生成完整的解说视频。该工具负责脚本撰写、GitHub 实时调研、HTML 动态视觉设计、配音及字幕渲染，极大简化了视频制作流程。 技术 › Skill ✍ HeyGen🕐 2026-07-11 HeyGenAgent视频生成自动化HyperFramesHTMLJS写作视觉设计
H Hermes Agent 架构详细拆解：工业级 Agent 框架底层运行时揭秘 本文详细拆解了 Hermes Agent 的底层架构，将其定义为工业级运行时而非简单的 LLM 循环。文章类比前端工程模式，阐述了 Agent = Harness + Model 的核心公式。重点解析了从平台入口、适配器层、事件总线、GatewayRunner 核心调度层到 AI Agent 执行层的五层架构，揭示了 Hermes 如何通过共享线程池、会话复用和生命周期管理，实现高并发、有状态且安全可靠的 Agent 运行环境。 技术 › Hermes ✍ MateMatt🕐 2026-07-07 AgentHermes架构设计LLM事件总线多线程源码解析运行时HarnessReAct
人 人工智能的工程全景（下）：Agent 全解 本文是《人工智能的工程全景》系列的下篇，深入探讨了2025-2026年AI行业的竞争焦点——Agent工程层。文章从Agent定义的演变出发，区分了Workflow与Agent的本质差异，解析了ReAct架构与关键能力清单。重点介绍了Function Calling的工业化起点、MCP协议带来的工具调用标准化，以及Context Engineering与Harness Engineering在Agent系统构建中的核心地位。 技术 › Agent ✍ snowboat🕐 2026-07-03 AgentMCPLLMContext EngineeringHarnessTool UseReAct人工智能工程化
S SkillOS 详解：自进化 Agent 的技能策展机制 文章详细解读了 Google 关于 SkillOS 的最新论文。SkillOS 是一个帮助 LLM Agent 通过管理可复用“技能”来实现自我进化的框架。该框架包含一个冻结的 Agent Executor 和一个可训练的 Skill Curator，后者利用强化学习（RL）从执行轨迹中自动提取、更新或删除技能，从而实现从经验到技能的转化。 技术 › Agent ✍ AVB🕐 2026-05-12 AgentSkillOSGoogleSkill CuratorLLMReAct强化学习模型训练AI论文解读
基 基于 HyperFrames 构建 LLM 驱动的视频生成应用 文章介绍了如何利用 HyperFrames 和 LLM（大语言模型）构建低成本的视频生成系统。作者对比了传统图像生成模型（高昂成本、易产生幻觉）与基于代码生成（HTML）的方法，展示了如何以极低成本（低至 $0.02）生成可编辑的视觉故事。文章详细阐述了技术栈（Next.js, Vercel, AI SDK）和应用场景，如动画日志、数据视频化等。 技术 › 前端 ✍ James Russo🕐 2026-05-08 HyperFramesLLM视频生成Next.js低代码AIGCWeb组件Vercel
C Codex 最强插件 HyperFrames：用代码导演镜头 文章介绍了 Codex 的新插件 HyperFrames，作者展示了如何利用该工具结合代码和提示词，在 10 秒内制作出包含关键帧、字幕、转场及粒子效果的 AI 科技预告片。这种新方式将传统的剪辑转变为通过代码调度镜头，文末附带了具体的提示词案例。 技术 › 工具与效率 ✍ 傅盛🕐 2026-05-07 CodexHyperFramesAI视频生成AIGC提示词OpenClawAgent傅盛自动化