用Claude Opus 5.5做视频堪称一绝：代码动画+逐帧导出，外网10支爆款+5个开源项目全拆解-AIGC

用Claude Opus 5.5做视频堪称一绝：代码动画+逐帧导出，外网10支爆款+5个开源项目全拆解

Claude Opus 5.5 做视频

先说结果

外网爆火的"Claude Opus 5.5 做视频"，不是用视频生成模型，而是让 Claude Code/Codex 写 HTML、Canvas、WebGL 或 Remotion 动画代码，再用 Playwright 逐帧截图 + FFmpeg 合成 MP4。字幕、镜头路径、转场全在代码里调，单个 HTML 文件用时间参数计算每一帧画面。产品发布片、动态图解、5分钟历史电影都能做。本文拆解 10 支外网爆款案例 + 5 个开源项目 + 三套可直接抄的提示词模板。

一、这不是视频生成模型，是"代码动画"

9月22日 Anthropic 发布 Claude Opus 5.5，官方重心放在编程能力和 Agent 任务执行上，视频能力根本不是发布主角。但开发者测试中意外发现：这款模型虽不直接输出像素画面，却能通过编写前端代码，生成完成度极高的动画视频。

核心区别：

维度	传统视频生成（Seedance/可灵等）	Claude Opus 5.5 代码动画
原理	AI 模型直接生成像素帧	AI 写动画代码，浏览器渲染后逐帧导出
可控性	提示词控制，细节不可控	代码级精确控制，每帧可复现
文字/字幕	容易乱码、变形	CSS 渲染，完美清晰
镜头/转场	提示词描述，效果随机	代码精确计算镜头路径和转场
适合场景	真人/写实/艺术风格视频	产品介绍、动态图解、科普动画、UI动效
成本	按秒/次计费	API 调用 + 本地渲染，几乎零边际成本

模型的代码能力到了一个门槛，很多场景的可用性就很高了——这才是 Opus 5.5 做视频爆火的真正原因。

二、核心原理：时间参数 + 逐帧渲染 + FFmpeg 合成

工作流程

写动画代码：Claude Code/Codex 根据你的需求，生成单个 HTML 文件（或 Remotion 项目），用 JavaScript 时间参数 t 计算每一帧的元素位置、形状、颜色。

浏览器渲染：HTML 在浏览器中实时渲染，支持 Canvas 2D、WebGL/Three.js、CSS 动画等所有前端技术。

逐帧截图：用 Playwright 控制浏览器，按固定帧率（如 30fps）逐帧截取画面。因为每一帧都是时间参数的纯函数，任何时刻的画面都能准确重现。

FFmpeg 合成：将逐帧截图合成为 MP4 视频，可同时加入音轨、字幕、转场。

关键技术栈：

🎨

HTML/CSS/JS：最基础的方式，适合 UI 动效、产品介绍、文字动画。单个 HTML 文件即可完成。

🖼️

Canvas 2D：逐帧绘制，适合手绘风格、沙画、剪纸动画、科普图解。

🌐

WebGL / Three.js：3D 场景渲染，适合产品 3D 展示、空间穿梭、数据可视化。

⚛️

Remotion：用 React 代码制作视频，官方提供 Agent Skills，支持预览和导出。

📷

Playwright + FFmpeg：标准导出组合，Playwright 逐帧截图，FFmpeg 合成 MP4。

三、10 支外网爆款案例拆解

小女孩问 Claude：你喜欢什么？——约 28 秒手绘短片。镇上的人不断向 Claude 提需求，一个女孩却问它喜欢什么。画面随回答切到大海、动物和星星，最后回到女孩窗前。用 JavaScript 逐帧画出手绘风格。

一个按钮连续变成整支视频——单个 HTML 文件，按钮先伸展成播放器，再变为图表和命令面板，光标每次点击推动下一次转场。用时间参数计算每一帧元素位置，Playwright 截图 + FFmpeg 合成。

镜头一路钻进 Blackwell 芯片——约 49 秒 3D 穿梭。从数据中心钻进服务器，再穿过芯片直到原子尺度。整个三维场景装在一个 HTML 文件里，Three.js 实时渲染，连续推进的镜头把不同尺度串成一次穿梭。

一张鸡尾酒图变成 30 秒调制动画——给模型一张参考图，用 HTML 把静态画面扩展成完整调制过程。配料逐步出现，画面同时标出步骤和用量。参考图提供视觉样式，HTML 动画按时间顺序展开步骤。

两分钟沙画讲美国 250 年历史——用代码把不同历史节点组织成连续沙画叙事，并生成配乐与音效。沙画风格的渐变和过渡完全由代码控制。

一句需求做出推理产品介绍片——约 26 秒成片。给一家推理服务创业公司做利落的介绍视频，JavaScript 控制文字、图形和转场随时间变化，Playwright + FFmpeg 导出。

产品歌短片——约 28 秒 Replit Animation 宣传片。橙色图形和产品画面随音乐切换，Opus 5.5 编写 JavaScript 安排图形运动和剪辑节奏，Replit Animation 提供工程搭建与导出能力。

五分钟奥斯特里茨战役电影——WebGL 程序按叙事时间线渲染战场和镜头运动，生成的声音、离线旁白与画面合成。镜头从地图推进到士兵行动，形成有叙事节奏的影片。开源项目：WinterArc21/Battle-of-Austerlitz-Film。

剪纸动画解释相对论——约 46 秒科普片。日本创作者让 Opus 5.5 用 JavaScript 在 Canvas 上逐帧画出剪纸风格，纸片、星球和人物解释双生子佯谬，音乐和音效也由代码生成。

40 秒讲清浏览器怎样工作——Addy Osmani 让 Opus 5.5 用 JavaScript 逐帧画出《浏览器如何工作》解释动画，页面、网络请求和渲染过程被画成会动的图解。

四、5 个开源项目推荐

①

Lemo-Opuscar（github.com/lemomo-ai/lemo-opuscar）——收集了 39 种用 Opus 5.5 做成的影片风格，每种配样片和说明。先在样片库挑喜欢的视觉效果，再把自己的主题交给它的 Skill。适合不知道做什么风格时找灵感。

②

Awesome-Opus5-5-Videos（github.com/yihui-dev/awesome-opus5-5-videos）——一共 301 个Opus 5.5 视频，开发者花了整整 $3000 测试，把全网最难最火的特效重新做了一遍。所有测试视频、全套 Prompt 和工作流全部开源。适合直接抄作业。

③

opus-video-prompts（github.com/joeseesun/opus-video-prompts）——Opus 5.5 视频提示词大合集。把不同作者的成片和提示词放在一起，方便顺着喜欢的视频找写法。适合研究提示词技巧。

④

OneTake（github.com/feitangyuan/onetake）——收集一镜到底产品视频的动作和制作拆解，提供可复用的 Skill。适合想做流畅产品介绍视频的人。

⑤

HyperFrames + Remotion Skills——HyperFrames（github.com/heygen-com/hyperframes）把 HTML 动画渲染成视频；Remotion 官方 Agent Skills（github.com/remotion-dev/skills）教 Agent 用 React 代码制作、预览和导出视频。两个都是 GitHub 上高赞的 AI Coding 做视频项目。

五、3 分钟上手：从 0 到第一支视频

准备环境：安装 Claude Code（或 Codex）、Node.js、Playwright（npx playwright install）、FFmpeg（brew install ffmpeg 或下载）。

写需求：在 Claude Code 中描述你想要的视频——主题、时长、风格、关键画面。越具体越好，包括配色、字体、转场方式。

生成代码：Claude 生成单个 HTML 文件，用 requestAnimationFrame 或时间参数 t 驱动动画。在浏览器中预览效果，反复迭代调整。

逐帧导出：用 Playwright 脚本打开 HTML，按 30fps 逐帧截图保存为 PNG 序列。

合成 MP4：用 FFmpeg 将 PNG 序列合成为 MP4，可选加入音轨。命令：ffmpeg -framerate 30 -i frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4

六、三套实战提示词模板

帮我用单个 HTML 文件做一支 30 秒产品介绍动画视频，要求：

【主题】我的产品是一个 AI 笔记应用，核心卖点是"语音转文字+自动总结"
【风格】深色背景 #0a0e1a，主色 #6366f1（紫色）和 #10b981（绿色），无衬线字体，现代简约
【结构】
0-5秒：产品 Logo 从中心放大出现，背景粒子动效
5-12秒：展示语音转文字功能，模拟录音波形和文字逐字出现
12-20秒：展示自动总结功能，原始文字折叠为3条要点
20-27秒：三个核心功能图标横向排列，依次高亮
27-30秒：产品名+Slogan+下载按钮
【技术要求】
- 用 requestAnimationFrame + 时间参数 t 驱动所有动画
- 每一帧都是 t 的纯函数，可精确复现
- 文字用 CSS 渲染，确保清晰
- 转场用 opacity 和 transform 平滑过渡
- 输出单个 index.html，浏览器打开即可播放
【导出】写完后提供 Playwright 逐帧截图脚本（30fps）和 FFmpeg 合成命令

帮我用 Canvas 2D 做一支 45 秒科普动画，主题是"区块链如何工作"：

【风格】扁平化插画风格，浅色背景 #f8fafc，彩色几何图形，线条清晰
【分镜】
0-8秒：中心化系统 vs 去中心化系统对比图解
8-18秒：区块如何产生——交易打包、哈希计算、链式连接
18-30秒：共识机制演示——多个节点验证、最长链原则
30-40秒：不可篡改特性——修改一个区块导致后续全部失效
40-45秒：总结要点
【技术要求】
- Canvas 2D 逐帧绘制，所有图形用代码画，不依赖外部图片
- 用时间参数 t 控制动画进度，支持缓动函数（easeInOutCubic）
- 每个概念用图标+文字标签说明
- 转场用画布整体淡入淡出
- 输出单个 HTML 文件
【导出】提供 Playwright 截图脚本（30fps，1920x1080）和 FFmpeg 命令

帮我用 Three.js 做一支 40 秒 3D 产品展示动画：

【产品】无线耳机（用几何体组合建模：椭圆充电盒+两个耳机）
【风格】深色背景 #0f172a，产品金属质感 PBR 材质，蓝色 rim light，景深效果
【镜头】
0-8秒：产品从黑暗中旋转出现，镜头缓慢环绕
8-18秒：充电盒打开，耳机升起，特写细节
18-28秒：耳机分离，展示佩戴角度，浮动信息标签（续航/降噪/重量）
28-36秒：产品组合回充电盒，镜头拉远
36-40秒：品牌名+Slogan 淡入
【技术要求】
- Three.js 单文件实现，CDN 引入
- 用 GSAP 或自定义时间线控制镜头和动画
- 灯光：主光+轮廓光+环境光
- 后期处理：Bloom 辉光效果
- 输出单个 HTML，1920x1080
【导出】Playwright 逐帧截图（30fps）+ FFmpeg 合成，可选加入背景音乐

七、适合谁？不适合谁？

适合场景

✅

产品/创业者：需要快速做产品介绍片、功能演示、融资视频，代码动画可控性高、文字清晰、成本低。

✅

内容创作者：做科普图解、知识动画、数据可视化，Canvas/WebGL 能精确表达复杂概念。

✅

前端开发者：熟悉 HTML/CSS/JS，能看懂和修改生成的代码，迭代效率极高。

✅

需要精确控制的场景：品牌色、字体、Logo、数据图表必须准确的视频，代码渲染比 AI 生成可靠得多。

不适合直接使用的场景

❌

真人/写实风格视频：代码动画做不出真实人物表演，需要用 Seedance/可灵等视频生成模型。

❌

完全不会代码的纯小白：虽然 AI 写代码，但预览、调试、导出需要基本的命令行和前端知识。

❌

复杂角色动画：人物骨骼动画、表情变化用代码实现成本高，不如用专业动画工具或 AI 生成。

❌

超长视频（>10分钟）：逐帧渲染时间长，代码维护复杂，长视频更适合专业剪辑工具。

八、避坑提醒

避坑提醒

动画必须是时间的纯函数：每一帧的画面只由时间参数 t 决定，不能依赖随机数、用户交互或外部状态。否则逐帧导出时画面会不一致。这是代码动画最核心的原则。

先预览再导出：在浏览器里完整播放一遍，确认动画流畅、没有卡顿、文字不溢出。逐帧导出耗时较长（30秒视频=900帧），不要盲目导出后才发现问题。

注意帧率和分辨率：建议 30fps、1920x1080 起步。60fps 渲染时间翻倍，4K 渲染时间是 1080p 的 4 倍。先做低分辨率预览，确认后再高清导出。

字体要嵌入或用系统字体：如果用了特殊字体，Playwright 截图环境可能没有，导致文字回退。要么用 web-safe 字体，要么在 CSS 中 @font-face 嵌入字体文件。

音频要单独处理：代码动画本身不生成音频（除非用 Web Audio API）。背景音乐、旁白、音效需要用 FFmpeg 在合成时混入，或后期用剪映添加。

迭代时保留版本：每次大的修改另存为新文件（v1.html、v2.html），方便对比效果和回退。AI 生成的代码可能一次不如一次，保留好版本很重要。

九、一句话收个尾

Claude Opus 5.5 做视频的爆火，本质上不是"AI 又学会了一个新技能"，而是模型的代码能力跨过了一个门槛——复杂到能写完整动画系统，稳定到能逐帧复现每一帧画面。当 AI 写的 HTML 动画能媲美专业动效师的作品，产品介绍片、科普图解、数据可视化这些场景的制作门槛就被彻底拉低了。不需要学 AE、不需要买素材库，一句提示词 + 一个 HTML 文件 + FFmpeg，你也能做出外网那种"玩疯了"的视频。

作者声明：本作品含 AI 生成内容