发布日期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 98pdoom-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.DUR54.2;// 影片总时长秒window.render(t){/* 绘制第 t 秒的画面必须确定性 */};window.READYtrue;// 字体和图片加载完成后置为 truewindow.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.js3D 场景、镜头运动、光影材质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-videos853 条提示词合集这是目前最大的 Opus 5.5 视频作品库按动效、讲解、3D 场景、游戏互动四类整理每条都附原作者帖子链接和完整提示词其中 523 条有可在线对比的复刻版本。适合零基础用户找灵感、直接复制提示词。GitHub 星数4620适合人群想快速出一条效果视频的新手2. lemo-opuscar43 种影片风格的 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.jsbun Vite渲染规格1080p60 默认--scale 2输出真 4K4K 全曲在 M5 Pro 上约需 57 分钟4. HyperFrames为 Agent 设计的 HTML 视频框架HyperFrames 由 HeyGen 开源口号是写 HTML渲染视频为 Agent 而生把 HTML、CSS、媒体素材和可定位动画转成确定性 MP4。它为 Claude Code、Codex、Cursor、Gemini CLI 等编程 Agent 提供 21 个按需加载的技能自带预览、校验和渲染命令适合把代码动效做成可复用的工程。GitHub 星数618465. Remotion用 React 组件写视频Remotion 是最成熟的程序化视频框架之一用 React 组件定义视频内容适合批量生成、数据驱动的视频。需注意 Remotion 采用特殊许可证部分公司使用场景需要购买企业授权。GitHub 星数636136. Manim数学与原理讲解动画引擎Manim 是 3Blue1Brown 开发的数学讲解动画引擎用 Python 描述公式推导、几何变换和图形动画适合做技术原理类讲解视频。GitHub 星数94975完整教程三条上手路线按投入程度从低到高推荐以下三条路线。路线一复制提示词单文件出片约 10 分钟打开 awesome-opus5-5-videos 的prompts/目录挑一个喜欢的作品复制Prompt下的提示词粘贴到运行 Opus 5.5 的工具中Claude Code、Claude 应用或其他 Agent要求模型把结果输出为单个 HTML 文件用浏览器打开 HTML录屏得到视频一条真实的社区提示词示例来自 moritzkrembSVG GSAP 实现大意是找一款大家熟知的 SaaS 产品从网上获取真实素材做成推特上常见的那种专业剪辑、动效风格的产品发布视频展示功能和卖点。这条路线的缺点是录屏会掉帧、帧率不稳适合发朋友圈或快速验证想法。路线二安装 lemo-opuscar 技能做完整短片约 30-60 分钟第 1 步准备环境需要 Node 20、ffmpeg 和 Python 3.11或 uv其余依赖由 Agent 自动安装。第 2 步安装技能claude plugin marketplaceaddlemomo-ai/lemo-opuscar claude plugininstalllemo-opuscarlemolab首次使用时技能会把指南、工具和风格提示词下载到~/lemo-opuscar每部影片的工程文件放在你启动 Claude Code 的目录中。第 3 步用一句话下指令用水彩风格做一支 45 秒的短片讲我家经营的咖啡农场用温暖的女声旁白。风格名可以用中文或英文完整列表见仓库的styles/README.md。Agent 开工前只会问一次有没有拿不准的题材细节、你是否有自己的配音或音乐素材、是否先看分镜。确认后它会依次完成画面、配乐、TTS 配音和混音默认输出 1920×1080、24 fps 的成片。第 4 步更新与卸载# 更新claude plugin marketplace update lemolabclaude plugin update lemo-opuscarlemolab# 卸载再手动删除 ~/lemo-opuscar 目录claude plugin uninstall lemo-opuscarlemolab路线三用 HyperFrames 工程化生产适合团队批量出片第 1 步在 Claude Code 中安装插件claude plugin marketplaceaddheygen-com/hyperframes claude plugininstallhyperframeshyperframes其他 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 主页的最新说明为准。延伸阅读awesome-opus5-5-videoshttps://github.com/yihui-dev/awesome-opus5-5-videoslemo-opuscarhttps://github.com/lemomo-ai/lemo-opuscarpdoom-videohttps://github.com/mexicat/pdoom-videoMiniMax H3https://github.com/MiniMax-AI/MiniMax-H3HyperFrameshttps://github.com/heygen-com/hyperframesRemotionhttps://github.com/remotion-dev/remotionManimhttps://github.com/3b1b/manim七牛云 Token Planhttps://www.qiniu.com/ai/plan