发布日期：2026-10-13 | 话题分类：AI 编程 / 动效视频 | 时效性：高（仓库数据截至 2026 年 10 月 13 日）

Opus 5.5 动效视频是指让 Anthropic 的 Claude Opus 5.5 编写动画代码（HTML、Canvas、SVG、GSAP、Three.js 等），再由无头浏览器逐帧渲染、ffmpeg 合成为 MP4 的视频制作方式，全程不调用任何视频生成模型。2026 年 9 月下旬起，这一玩法在 X 和 GitHub 上快速走红：收录社区作品的 awesome-opus5-5-videos 仓库两周内积累 4620 星，整理了 853 条可复用提示词；lemo-opuscar 把 43 种影片风格打包成 Claude Code 技能，作者用它做出了 6 分 31 秒、串起 98 部奥斯卡最佳影片的短片 OPUSCAR 98；pdoom-video 则示范了歌词逐字卡点、4K60 运动模糊渲染的完整工程。本文拆解这类视频背后"画面是时间的函数"这一核心原理，对比 Canvas、SVG、Three.js 等技术栈的适用场景，并给出从复制提示词到工程化渲染的三条上手路线，以及与 MiniMax H3 这类视频生成模型的选择建议。

Opus 5.5 动效视频是怎么做出来的

Opus 5.5 动效视频的本质是"代码即画面"：模型不生成像素，而是写出一个网页，网页里的每一帧都由代码根据时间 t 实时计算并绘制出来。

这与 Sora、可灵、MiniMax H3 等视频生成模型完全是两条路线。视频生成模型从噪声中"想象"出画面，代码动效则像传统动画师一样逐个摆放图形、文字和镜头，因此文字永远清晰、数据永远准确、任何一帧都可以精确修改。

lemo-opuscar 在技术文档 TECHNIQUE.md 中把整条流水线概括为"一条时间轴，五路输出"：

时间轴（唯一事实来源）
   ├─► 画面：网页 render(t) ──► 无头 Chrome 逐帧截图 ──► video.mp4
   ├─► 配音：逐句 TTS ──► 语音识别校验 ──► 词级时间戳
   ├─► 音乐：按同一时间轴编曲（采样 + 合成）──► 分轨
   ├─► 音效：在事件时间点程序化生成拟音
   └─► 字幕：.srt + 烧录字幕
混音（闪避、压缩、平衡）──► ffmpeg 合成，两遍响度标准化到 −14 LUFS ──► film.mp4

核心原理：画面是时间的确定性函数

整套方案能稳定出片，关键在于一个约定：页面暴露一个 render(t) 函数，输入任意时间点，就画出那一帧，且结果永远相同。

lemo-opuscar 规定每个影片页面需要暴露以下全局变量：

window.DUR = 54.2;                 // 影片总时长（秒）
window.render = (t) => { /* 绘制第 t 秒的画面，必须确定性 */ };
window.READY = true;               // 字体和图片加载完成后置为 true
window.EV = [{ t: 3.2, type: "hit" }];  // 可选：供混音器使用的音效事件

围绕这个约定，有三条必须遵守的规则：

  • 禁止不确定性：不能用 Date.now()，Math.random() 必须带种子，不能依赖上一帧遗留的状态。这样任意一帧都能单独渲染，可以多进程并行

  • 等资源就绪再截图：字体、图片没加载完就开拍，会出现字体闪变或空白帧，READY 标志就是为此而设

  • 按目标分辨率布局：默认 1920×1080、24 fps；做竖屏视频时传入 --size 1080x1920，页面按 innerWidth × innerHeight 排版

pdoom-video 把这个原理推到了极致：它的 README 写明"每一帧都是歌曲时间的确定性函数，所以浏览器里的实时预览和离线导出的 1080p60 或 4K60 成片完全一致"。

技术栈怎么选：Canvas、SVG、Three.js 各管什么

不同的动效风格对应不同的绘图技术，awesome-opus5-5-videos 给每个作品都标注了所用技术，常见组合如下：

技术栈

擅长的画面

典型作品类型

Canvas 2D

粒子、手绘、像素、逐帧笔触

水彩、蜡笔绘本、复古游戏风

SVG + GSAP

矢量图形、文字排版、精确缓动

SaaS 产品发布片、数据讲解

Three.js

3D 场景、镜头运动、光影材质

3D 产品展示、空间叙事

WebGL2 着色器

后期效果、光线步进

胶片划痕、CRT、辉光、景深

经验上，2D 风格优先用 Canvas，文字和图形为主的发布片用 SVG + GSAP，涉及镜头运动和立体感再上 Three.js，着色器只作为最后一层后期滤镜。lemo-opuscar 公开的 98 种风格中，77 种是 2D、4 种是 2.5D、17 种是 3D，可见大部分好看的动效并不需要 3D。

6 个值得收藏的开源模板与框架

截至 2026 年 10 月 13 日，以下项目覆盖了从"抄提示词"到"工程化出片"的完整链路：

1. awesome-opus5-5-videos：853 条提示词合集

这是目前最大的 Opus 5.5 视频作品库，按动效、讲解、3D 场景、游戏互动四类整理，每条都附原作者帖子链接和完整提示词，其中 523 条有可在线对比的复刻版本。适合零基础用户找灵感、直接复制提示词。

  • GitHub 星数：4620

  • 适合人群：想快速出一条效果视频的新手

2. lemo-opuscar：43 种影片风格的 Claude Code 技能

lemo-opuscar 由开发者 Lemomo 制作，把每种风格做成一份 STYLE.md 风格提示词加一支纯代码样片，涵盖水彩、水墨、版画、动画、游戏、电影年代、材质 3D 等 9 大类。它附带导演指南 DIRECTOR.md 和技术指南 TECHNIQUE.md，让编程 Agent 像一个小型工作室一样完成分镜、画面、配乐、配音和混音。

  • GitHub 星数：2066

  • 适合人群：想做有叙事、有配乐的完整短片

  • 作者特别说明：风格针对 Opus 5.5 调校，换用其他模型不一定能复现

3. pdoom-video：音乐卡点 MV 的工程范本

pdoom-video 是一支为歌曲 "I'm Upping My P(doom)" 制作的代码渲染 MV，概念、歌词对齐、音频分析、渲染器和每个场景都由 Claude Opus 5.5 在 Claude Code 中协作完成。它的价值在于展示了专业级音画同步的做法：用 Demucs 分离人声、CTC 强制对齐交叉 Whisper 得到逐词时间戳，再分析出 132.007 BPM 的节拍网格，让场景切换精确卡在节拍上。

  • GitHub 星数：2685

  • 技术栈：TypeScript + three.js，bun + Vite

  • 渲染规格：1080p60 默认，--scale 2 输出真 4K；4K 全曲在 M5 Pro 上约需 57 分钟

4. HyperFrames：为 Agent 设计的 HTML 视频框架

HyperFrames 由 HeyGen 开源，口号是"写 HTML，渲染视频，为 Agent 而生"，把 HTML、CSS、媒体素材和可定位动画转成确定性 MP4。它为 Claude Code、Codex、Cursor、Gemini CLI 等编程 Agent 提供 21 个按需加载的技能，自带预览、校验和渲染命令，适合把代码动效做成可复用的工程。

  • GitHub 星数：61846

5. Remotion：用 React 组件写视频

Remotion 是最成熟的程序化视频框架之一，用 React 组件定义视频内容，适合批量生成、数据驱动的视频。需注意 Remotion 采用特殊许可证，部分公司使用场景需要购买企业授权。

  • GitHub 星数：63613

6. Manim：数学与原理讲解动画引擎

Manim 是 3Blue1Brown 开发的数学讲解动画引擎，用 Python 描述公式推导、几何变换和图形动画，适合做技术原理类讲解视频。

  • GitHub 星数：94975

完整教程：三条上手路线

按投入程度从低到高，推荐以下三条路线。

路线一：复制提示词，单文件出片（约 10 分钟）

  1. 打开 awesome-opus5-5-videos 的 prompts/ 目录，挑一个喜欢的作品，复制 Prompt 下的提示词

  2. 粘贴到运行 Opus 5.5 的工具中（Claude Code、Claude 应用或其他 Agent）

  3. 要求模型"把结果输出为单个 HTML 文件"

  4. 用浏览器打开 HTML，录屏得到视频

一条真实的社区提示词示例（来自 @moritzkremb，SVG + GSAP 实现）大意是：找一款大家熟知的 SaaS 产品，从网上获取真实素材，做成推特上常见的那种专业剪辑、动效风格的产品发布视频，展示功能和卖点。

这条路线的缺点是录屏会掉帧、帧率不稳，适合发朋友圈或快速验证想法。

路线二：安装 lemo-opuscar 技能，做完整短片（约 30-60 分钟）

第 1 步：准备环境

需要 Node 20+、ffmpeg 和 Python 3.11+（或 uv），其余依赖由 Agent 自动安装。

第 2 步：安装技能

claude plugin marketplace add lemomo-ai/lemo-opuscar
claude plugin install lemo-opuscar@lemolab

首次使用时，技能会把指南、工具和风格提示词下载到 ~/lemo-opuscar，每部影片的工程文件放在你启动 Claude Code 的目录中。

第 3 步：用一句话下指令

用水彩风格做一支 45 秒的短片，讲我家经营的咖啡农场，用温暖的女声旁白。

风格名可以用中文或英文，完整列表见仓库的 styles/README.md。Agent 开工前只会问一次：有没有拿不准的题材细节、你是否有自己的配音或音乐素材、是否先看分镜。确认后它会依次完成画面、配乐、TTS 配音和混音，默认输出 1920×1080、24 fps 的成片。

第 4 步：更新与卸载

# 更新
claude plugin marketplace update lemolab && claude plugin update lemo-opuscar@lemolab
# 卸载（再手动删除 ~/lemo-opuscar 目录）
claude plugin uninstall lemo-opuscar@lemolab

路线三：用 HyperFrames 工程化生产（适合团队批量出片）

第 1 步：在 Claude Code 中安装插件

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

其他 Agent 可以用 npx skills add heygen-com/hyperframes 安装独立技能。

第 2 步：用技能下指令

使用 /hyperframes，做一支 10 秒的产品开场片：标题淡入，背景视频，轻柔的背景音乐。

技能会引导 Agent 完成规划、编写合法 HTML、接入可定位动画、添加媒体、校验、预览和渲染的完整流程。由于输出是确定性的 HTML 工程，同一模板换一份文案和数据就能批量生成一组视频。

进阶技巧：让代码动效更像"大片"

  • 音乐卡点：参考 pdoom-video，先用 Demucs 分离人声和鼓点，再用 Whisper 做词级对齐，把场景切换吸附到节拍网格上

  • 运动模糊：pdoom-video 的做法是每一帧取多个子帧求平均，静止区域 12 个子帧、甩镜和快速推拉最多 324 个子帧，让高速运动留下连续拖影而不是跳帧

  • "按二拍"动画：定格、像素、赛璐珞风格可以让角色 12 fps 步进，但镜头和光线必须保持每帧平滑，否则看起来像卡顿

  • 统一坐标映射：所有跟随主体的效果（光圈、推镜、聚光）都经过同一个"世界坐标→屏幕坐标"函数，不要手写屏幕坐标

  • 文字可读性检查：lemo-opuscar 提供 readcheck.mjs，自动检查每段屏幕文字停留时间是否足够阅读

代码动效 vs 视频生成模型：怎么选

MiniMax H3 是 MiniMax 于 2026 年 7 月发布、在 GitHub 和 Hugging Face 公开的全模态生成系统，支持文本、图像、视频、音频多模态输入，可生成最高 2K 分辨率、最长 15 秒、带原生立体声的视频。它代表的是"视频生成模型"路线，与 Opus 5.5 代码动效形成互补：

对比维度

Opus 5.5 代码动效

MiniMax H3 等视频生成模型

画面来源

代码逐帧绘制

模型生成像素

文字与数据

精确清晰，可逐字修改

容易出现错字、变形

真实感（人物、实景）

弱，偏图形化风格

强

时长

不受限，几分钟的长片也能做

单段最长 15 秒，需拼接

可修改性

改一行代码重新渲染

需重新生成，结果有随机性

适合场景

产品发布、数据讲解、MV、知识科普

真人场景、广告氛围片、写实镜头

选择建议：以文字、图表、品牌元素为主的视频选代码动效；需要真实人物和实景氛围的选视频生成模型；做完整短片时，可以用 MiniMax H3 生成写实空镜，再用代码动效叠加标题、字幕和数据图层。MiniMax H3 仓库也提供了 h3-prompt-writing 提示词技能，可通过 npx skills add https://github.com/MiniMax-AI/MiniMax-H3 --skill h3-prompt-writing 安装，在 Claude Code、Cursor 等工具中通用。

成本与常见问题

lemo-opuscar 的 README 提示，一部短片需要 Agent 运行约 30-60 分钟，消耗"相当多的 token"。长片项目反复调试分镜时，模型调用成本会快速累积。

对于需要在多个模型之间分工的团队，常见做法是把分镜规划、风格调试交给能力最强的模型，把批量改文案、生成字幕等简单任务交给更便宜的模型。七牛云 Token Plan 提供多款主流大模型的统一调用和按量套餐，可用于这类多模型分工场景下的成本管理。

Opus 5.5 动效视频必须用 Claude Code 才能做吗？

不必须。简单作品只需在任何能调用 Opus 5.5 的对话界面里生成单个 HTML 文件，用浏览器打开后录屏即可。Claude Code 的优势在于能直接运行渲染脚本、安装 ffmpeg 等依赖，并调用 lemo-opuscar、HyperFrames 这类技能，适合要求稳定帧率、带配乐配音的完整成片。

换成其他模型能复现这些效果吗？

HyperFrames、Remotion 等框架本身不绑定模型，Codex、Cursor、Gemini CLI 都能使用。但 lemo-opuscar 作者明确说明其风格针对 Opus 5.5 调校，其他模型不一定能复现；awesome-opus5-5-videos 中的提示词也是基于 Opus 5.5 的效果整理的，换模型后需要预期质量差异。

录屏和逐帧渲染有什么区别？

录屏受电脑性能影响，复杂场景会掉帧，帧率不稳定；逐帧渲染由无头 Chrome 按固定时间点逐帧截图，再交给 ffmpeg 合成，不论场景多复杂，每一帧都完整、帧率恒定。pdoom-video 的 4K 渲染单帧耗时从约 40 毫秒到数秒不等，但成片依然是平滑的 60 fps。

总结

Opus 5.5 动效视频把视频制作从"生成"变成了"编程"：画面是时间的确定性函数，由无头浏览器逐帧渲染，再与 TTS 配音、程序化配乐合成成片。入门可以从 awesome-opus5-5-videos 的 853 条提示词开始，做完整短片推荐 lemo-opuscar 的 43 种风格技能，工程化批量生产则可以选择 HyperFrames 或 Remotion。本文仓库数据截至 2026 年 10 月 13 日，这一领域迭代很快，建议以各项目 GitHub 主页的最新说明为准。

延伸阅读