JeecgBoot AI专题研究| 用 HTML、Canvas、Three.js、Remotion 写动画再逐帧导出 MP4——Coding Agent 做视频的原理、案例与上手路径
一个容易被误解的"AI 视频"热潮
最近刷社交平台，会看到大量标着"Claude Opus 5.5 做的"视频：产品发布片、动态图解、科普动画，甚至还有五分钟的历史战争片。很多人第一反应是"Anthropic 也出视频生成模型了？"
其实不是。这一波火起来的玩法，和 Seedance、Sora 这类像素级视频生成模型完全是两条路。它的本质是：
让 Claude Code、Codex 这类 Coding Agent 去写动画代码（HTML / CSS、Canvas、WebGL、Three.js、Remotion 等），代码用时间参数算出每一帧画面，再用无头浏览器逐帧截图，最后由 FFmpeg 合成 MP4。
换句话说，视频不是"生成"出来的，而是"编译"出来的。字幕、镜头路径、转场节奏全部写在代码里，想改哪里就改哪里，任意时刻的画面都能精确复现。
为什么偏偏是现在爆发？答案很朴素：模型的代码能力跨过了某个门槛。以前让 AI 写一段复杂动画，十次里能跑通两三次就不错了；而当一个模型能稳定写出几百行、时间轴精确的动画代码时，"用代码拍片"就从极客玩具变成了可用的生产方式。
底层原理：三步把代码变成视频
在看案例之前，先把通用流程讲清楚，后面所有作品基本都是它的变体：
- 写动画：Agent 生成一个 HTML 文件（或 Remotion 的 React 组件），所有元素的位置、形状、透明度都是时间
t的函数； - 逐帧截图：用 Playwright / Puppeteer 打开页面，把
t从 0 递增到结尾，每一帧截一张图； - 合成导出：FFmpeg 把图片序列与音频（Web Audio 或 Python 合成的配乐、TTS 旁白）合成为 MP4。
这种方式有三个天然优势：可复现（同一份代码永远输出同一个视频）、可编辑（改一行代码就能调一个镜头）、成本低（不消耗昂贵的视频生成算力）。短板也很明显：它擅长动态图形、手绘、线稿、水墨、科普图解、产品发布片、歌词 MV，不擅长写实真人镜头。真要写实画面，常见做法是让 Agent 调用 Seedance、Runway 这类视频模型生成素材，自己只负责编排与剪辑。
十个值得拆解的作品
1. 手绘短片：小女孩问 Claude"你喜欢什么"
约 28 秒，完全由 JavaScript 逐帧画出。镇上的人都在给 Claude 派活，只有一个女孩问它喜欢什么——画面随回答切到大海、动物、星空，最后回到女孩的窗前。它证明了"代码动画"也能讲有情绪的故事。
链接：https://x.com/kevin_t_ngo/status/2102437977435893771
2. 一个按钮"长"成整支界面短片
要求是只用一个 HTML 文件完成。按钮先伸展成播放器，再变成图表、命令面板，光标的每次点击都推动下一次转场。原帖还公开了提示词，写明了逐帧计算与导出的方法——单个页面用时间参数计算每帧元素的位置和形状，Playwright 截图、FFmpeg 合成。
链接：https://x.com/twoclipping/status/2103273003555402193
3. 从机房一路钻进 Blackwell 芯片
约 49 秒的连续镜头：从数据中心推进到服务器，再穿过芯片，直至原子尺度。整个三维场景装在一个 HTML 文件中，由 Opus 5.5 编写的 Three.js 代码实时渲染，连续推进的镜头把不同尺度串成一次"穿梭"。
链接：https://x.com/lucian__03/status/2103494418477260830
4. 一张鸡尾酒图，扩展成 30 秒调制动画
给模型一张参考图，让它用 HTML 把静态画面"展开"成完整调制过程：配料依次出现，同时标注步骤和用量。参考图负责视觉风格，动画负责时间顺序——这是"图生动画"的一种低成本思路。
链接：https://x.com/Ror_Fly/status/2102853258582880547
5. 两分钟沙画讲完美国 250 年
用代码把不同历史节点组织成连续的沙画叙事，并由程序生成配乐与音效。
链接：https://x.com/Michaelzsguo/status/2102592355165782312
6. 一句需求，产出推理服务公司的介绍片
提示词只有一句"为专注推理的现代初创公司做一部现代、时尚且有冲击力的视频"，得到约 26 秒的成片。作者提到成本大约 2 美元、耗时约 1 分钟——放在过去，这类片子要和机构协调数周。
链接：https://x.com/deedydas/status/2102787937482252537
7. 一支"产品歌"宣传片
约 28 秒的 Replit Animation 宣传片，橙色图形与产品画面随音乐切换。Opus 5.5 负责图形运动与剪辑节奏的代码，Replit Animation 提供工程搭建与导出。
链接：https://x.com/samuel_spitz/status/2103293794594816100
8. 五分钟的奥斯特里茨战役电影
这是目前看到最"重"的一个：WebGL 程序按叙事时间线渲染战场与镜头运动，再与生成的音效、离线旁白合成。镜头从地图推进到士兵行动，有完整的叙事节奏。项目开源，适合拿来研究长片的工程组织方式。
链接：https://github.com/WinterArc21/Battle-of-Austerlitz-Film
9. 用剪纸动画讲双生子佯谬
一位日本创作者让 Opus 5.5 在 Canvas 上逐帧绘制约 46 秒的相对论科普片，纸片质感的星球与人物把"双生子佯谬"讲得很直观，音乐和音效同样由代码生成。
链接：https://x.com/masahirochaen/status/2102722719502704941
10. 40 秒讲清浏览器如何工作
Addy Osmani 用 Opus 5.5 生成的解释动画：页面、网络请求、渲染流程都变成了会动的图解。对技术布道和内部培训来说，这类片子比一篇长文档好懂得多。
链接：https://x.com/addyosmani/status/2103009037164110327
想自己动手？这五个开源项目值得收藏
看完案例，更实际的问题是"我该从哪里开始"。下面五个项目分别覆盖风格库、案例库、提示词库、运镜技巧和底层框架。
① Lemo-Opuscar：39 种影片风格，一套 Skill 直接套用
项目收集了 39 种用 Opus 5.5 做出的影片风格，每种都配有完整样片与说明。用法很简单：先在样片库里挑一个喜欢的视觉风格，再把自己的故事交给它的 Skill，让 Coding Agent 当导演。
其中的特别放映作品把 98 部奥斯卡最佳影片逐一用对应风格重绘，每一帧画面、每个音符、每一刀剪辑都由代码完成：
开源地址：https://github.com/lemomo-ai/lemo-opuscar
② Awesome-Opus5-5-Videos：301 个视频 + 全套提示词
作者投入约 3000 美元，用 Opus 5.5 把网上最难、最火的一批特效重新做了一遍，共 301 个视频，测试视频、提示词与工作流全部开源，可按动画宣传、知识讲解、3D 场景、游戏互动等分类浏览。
开源地址：https://github.com/yihui-dev/awesome-opus5-5-videos
③ Opus Video Prompts：顺着成片找写法
这是一个提示词合集，把不同作者的成片与原始提示词对应整理，只收录作者本人公开的原文并附原帖链接。它在 README 里对技术路线的总结也很到位：Opus 5.5 本身不输出视频文件，而是写代码画出每一帧——HTML Canvas、p5.js、Three.js、Remotion、Manim、Blender 脚本都有人用。
提示词按"一句话 / 模板填空 / 参考图 / 长提示词"等类型分类，从推理创业公司发布片到史前岛屿 3D 场景都有：
开源地址：https://github.com/joeseesun/opus-video-prompts
④ OneTake：让镜头"一镜到底"
很多 AI 做的产品片看起来像 PPT 翻页，原因是每个镜头都是独立生成后硬切的。OneTake 专门解决这个问题：它收集了一镜到底产品视频的动作与制作拆解，并封装成可复用的 Claude Agent Skill——每个画面都从上一个画面"长"出来，而不是轮流出现的幻灯片。
下面这种手机 App 发布片的连贯动效，就是它擅长的类型：
开源地址：https://github.com/feitangyuan/onetake
⑤ 两个底座：HyperFrames 与 Remotion Skills
如果说前面几个是"菜谱"，这两个就是"灶台"：
- HyperFrames：写 HTML 动画即可渲染成视频，专为 Agent 设计，门槛最低；
- Remotion 官方 Agent Skills：教 Agent 用 React 代码制作、预览和导出视频，镜头、转场、卡点能精确到帧。
地址：
- https://github.com/heygen-com/hyperframes
- https://github.com/remotion-dev/skills
实践建议：怎么少走弯路
结合上面的案例，给准备上手的同学几点建议：
- 先选底座再写提示词：想快速出片用 HyperFrames（Agent 写 HTML 最熟练）；需要精细控制节奏、做系列化模板用 Remotion；
- 从"参考成片 + 原始提示词"起步：直接改别人验证过的提示词，比从零描述一个视频可靠得多，提示词合集和 Awesome 列表就是最好的起点；
- 把时间轴交给代码，把审美交给参考：参考图、风格样片决定"长什么样"，代码决定"什么时候动"，这样分工最稳定；
- 长片要拆章节：像奥斯特里茨战役这样的长片，本质上是多段动画按时间线拼接，分章节开发、最后统一合成，调试成本会低很多；
- 别指望它做写实真人：需要真实人物镜头时，用视频生成模型产出素材，再让 Agent 负责编排、字幕和转场。
总结
"用代码拍视频"并不是什么新概念，Remotion、Manim 这类工具已经存在多年。真正的变化在于：Coding Agent 的代码能力足够强之后，写动画代码这件事从专业门槛变成了一句话需求。
这和我们在 JeecgBoot 低代码平台中观察到的趋势一脉相承——当 AI 能稳定地产出结构化代码，原本需要专业团队完成的工作（无论是业务表单、报表大屏还是一支产品宣传片）都会被重新定价。对于开发者而言，与其等待下一个"更强的视频模型"，不如现在就把 HyperFrames、Remotion 这样的底座和现成的 Skill 用起来，让 Agent 成为你的动画师和剪辑师。
本文为 JeecgBoot AI 专题研究系列文章。
