用代码做视频:HyperFrames 和 Remotion 选型指南
文章对比了 HyperFrames 和 Remotion 两个代码生成视频框架。HyperFrames 基于 HTML/GSAP,零构建、AI 友好,适合从零构建的动画和 AI 自动化管线;Remotion 基于 React,支持视频导入叠加和批量渲染,适合在已有视频素材上合成。作者建议根据底层是否含视频、AI 参与度等场景按需选型。
文章对比了 HyperFrames 和 Remotion 两个代码生成视频框架。HyperFrames 基于 HTML/GSAP,零构建、AI 友好,适合从零构建的动画和 AI 自动化管线;Remotion 基于 React,支持视频导入叠加和批量渲染,适合在已有视频素材上合成。作者建议根据底层是否含视频、AI 参与度等场景按需选型。
文章详细对比了 HyperFrames 和 Remotion 两个代码驱动视频渲染工具的差异。作者指出,尽管 Remotion 是成熟的 React 方案,但 HyperFrames 从零构建,选择了 HTML 路线。这主要出于两个考量:一是 Agent 原生工作流,HTML 更符合 LLM 的训练数据,能激发更佳的创意输出;二是人类编辑工作流,HTML 作为渲染层和数据源,使得构建可视化编辑器更加健壮。文章还分析了两者在动画库兼容性(如 GSAP)、原生 HTML 支持以及渲染模式上的技术区别。
本文介绍了如何使用 Claude Code 搭配 Opus 5.5 模型,在 15 分钟内生成完整动态视频的完整流程。文章涵盖初始设置(Claude Code、HyperFrames/Remotion 视频框架、动态设计 Skill)、创意简报撰写的八个关键要素(角色、格式、故事、视觉风格、排版、动效语言、音频、禁忌事项),并提供可直接使用的提示词模板。还分享了进阶技巧,包括创建自定义品牌 Skill、控制节奏、使用真实素材文件、逐场景拆解等方法,适用于产品发布视频、产品更新、个人品牌等场景。
文章介绍如何围绕 Claude Opus 5.5 构建程序化视频生产系统。作者 rari 指出,大多数用 Opus 5.5 制作的demo千篇一律,差异不在提示词,而在模型周围的系统工程。核心思路是让模型编写帧函数,渲染器跨时间轴生成视频,从而实现可控、可修订的视频制作。文章提出工作室五层架构:导演(明确目标)、参考(视觉规范)、时间轴(叙事节拍)、渲染器(Canvas/SVG、Remotion、HyperFrames)和评审循环,强调把决策显式化,避免模型用默认视觉方案填充空白,最终产出可复用的视频生产流程。
文章解析了 Claude Opus 5.5 制作视频的原理:它并非视频模型,而是通过编写程序逐帧绘制画面,再用浏览器截图、FFmpeg 合成 MP4。全流程分为五步:规划(脚本与分镜)、画面(HTML/SVG/three.js 等代码绘制)、动作(GSAP 或 Remotion 时间轴)、声音(TTS 配音作为全片时钟)、拍摄与合成(无头浏览器逐帧截图加 FFmpeg 拼接)。文章还介绍了 HyperFrames 和 Remotion 等现成工具,对比了代码视频与 Seedance、可灵等视频生成模型的优劣,并指出其局限与成本。
本文是 Codex 视频制作实战教程,讲解如何用 Codex 实现从文章或主题到成品视频的全流程自动化。作者介绍了完整的制作路线:生成口播稿、TTS 配音(含用 CosyVoice 复刻个人声音)、基于最终音频建立时间轴、拆解分镜、用 HyperFrames 生成成片,以及用 Remotion 制作固定栏目模板。文章还对比了 HyperFrames 与 Remotion 的选择策略,并补充了用 video-use 处理真人口播剪辑的方法。核心原则是先定稿声音再做画面,避免返工。零剪辑基础的新手只需将 GitHub 仓库链接交给 Codex,即可完成工具安装和视频生成。
作者分享使用 Claude Code 配合 DeepSeek Flash 1017 模型制作两个 Remotion 视频的经历,总成本不到 3 元。一个视频作为个人介绍页的开屏动画,另一个是 52 秒的 Media Kit 视频。作者基本只负责描述想法,通过开启 xhigh 思考模式、配置 workflow 并挂载 remotion-best-practices skill,模型即可直接实现效果。文章还介绍了该 skill 的路由机制:平时只占一句描述的上下文,需要时才按需读取转场、字幕、音效等子文档。作者提到之前担心的缓存命中问题已不存在,命中率超过 98%。
文章系统介绍了用代码(而非视频模型)生成 AI 视频的 9 种技术原理,分为四类:网页动画类(HyperFrames、Remotion、Motion Canvas),适合主流视频制作;去 AI 味类(rough.js 手绘线条、分层插画、p5.brush 数字水彩);数学板书与地图路线类(Manim、基于 TTS 时间戳的地图路线动画及自研 map-motion skill);3D 类(three.js 镜头曲线、Blender MCP)。代码动画相比视频模型可复现、可精确修改,作者推荐新手从生态最丰富的 HyperFrames 入手,并附开源地址和教程链接。
文章系统拆解了用 AI 写代码制作视频的 9 个技术方法,涵盖四大类型:一是网页渲染路线(HyperFrames、Remotion、Motion Canvas),借助浏览器逐帧截图生成视频;二是去除 AI 味的手绘风格(rough.js、分层插画、水彩动画叠层原理);三是数学板书 Manim 与地图路线动画(结合 TTS 时间戳与高德地图的 map-motion skill);四是 3D 视频制作(three.js 镜头曲线与 Blender MCP)。相比视频模型,代码动画可复现、可精确修改,作者推荐新手从生态最丰富的 HyperFrames 入手,并附开源地址与教程链接。
作者介绍了如何使用 Claude Opus 5.5 通过提示词生成动态图形视频,替代昂贵的动态设计师。传统上聘请动效设计师每月需 5000-6000 美元,制作 60 秒动画解说视频需 2-3 周,而使用 Opus 5.5 只需一个提示词即可在 10 分钟内生成发布视频。文章分享了 5 个经过测试的动效提示词及其实际生成的视频,并为付费会员提供涵盖 10 个类别的 100+ 提示词库。示例提示词详细展示了如何用 Remotion (React) 生成品牌动效视频,包括品牌配色、字体、动画平滑度控制、代码合成音乐、场景设计等完整规范,全程无需第三方视频或音频工具,所有帧和音效均由代码渲染合成。
Code2Video 是与 Google DeepMind 和 Kaggle 合作推出的开放基准,测试模型在单次调用、无 Agent 框架和工具的情况下,根据视频需求生成代码生成视频的能力。Opus 5.5 排名第一,超过 GPT-5.5、GPT-6 Astra 和 Claude Fable 5.1。研究分析了约 70 个 X 上的一次性提示词,发现 Opus 5.5 常用 Python 画帧再交给 FFmpeg,或用无头浏览器逐帧捕获 HTML 页面渲染。其核心思路是把视频写作时间的函数 f(t),逐帧计算,输出可重复。 Opus 5.5 还能在无工具和文档的情况下凭记忆复现 HyperFrames 特有概念,20 次全部通过其检查器。配合 HyperFrames 约束和 CLI 规则,可减少错误、降低一半 token 成本。
作者使用 AI 助手 Jev 逐个阅读 README,将 180 个能让 Claude Code、Codex 等 agent 直接做视频、剪辑、动效的开源 skill 和工具包分为 10 个类别并做安全评级,以约 200 美元成本产出开源仓库和在线筛选页面,每 8 小时刷新。文章介绍了各分类分布:剪辑与后期 35 个、讲解科普 32 个、框架 29 个等,重点分析 OpenMontage、HyperFrames 和 Remotion 两大技术路线,并指出代码化出片、配方卡资产化、小仓库信息密度被低估三个观察。