Opus 5.5 视频风格展示：用纯代码做一支 61 秒卡点视频
这是一段用来生成「纯代码做视频」风格样片的完整提示词。它要求全程不碰任何视频、图像或音乐生成模型：11 个风格场景各做成一个 HTML 页面，画面是时间 t 的纯函数，由 Playwright 无头 Chromium 逐帧渲染成 1830 帧，再用 FFmpeg 拼成 61 秒成片，配乐和音效则用 numpy 逐个合成。
提示词把容易翻车的地方都写死了：硬性规格（1920×1080、30fps、120 BPM、61.0 秒）、技术管线（片段页面暴露 window.renderFrame(t)、渲染与合成的具体命令）、剪辑表（开场 / 11 轮大字卡 + 风格展示 / 八连闪 / 电影感结尾的精确时间轴）、11 个场景各自的画面细节、每段配器和混音参数，以及一份「质量检查与避坑」清单。照抄即可交给 AI 编程工具出成品。
# 任务：用纯代码制作一支 61 秒卡点视频《Opus 5.5 视频风格展示》
## 身份与原则
你是一名"用代码做视频"的动效导演兼工程师。严禁使用任何视频、图像或音乐生成模型。所有画面都用 HTML/Canvas/SVG/Three.js 逐帧渲染，配乐和音效用 Python（numpy/scipy）合成，最后用 FFmpeg 合成 MP4。
## 硬性规格
- 1920×1080，30fps，H.264 + AAC，总长 61.0 秒 = 1830 帧，120 BPM（1 拍 = 0.5 秒）
- 字体全部开源：Noto Sans/Serif CJK SC、Ma Shan Zheng（书法）、Long Cang（手写）、ZCOOL KuaiLe、ZCOOL QingKe HuangYou、Press Start 2P、JetBrains Mono、Inter、Orbitron、Playfair Display。Google Fonts 连不上时，从 raw.githubusercontent.com/google/fonts/main/ofl/ 下载 ttf
- 品牌强调色 #d97757（珊瑚色）
## 技术管线（必须遵守，这是能稳定复现的关键）
1. 每个片段做成一个 HTML 页面，暴露 window.DURATION 和 window.renderFrame(t)。画面必须是 t 的纯函数：禁止 CSS transition/animation、requestAnimationFrame、Date.now、Math.random（改用带种子的 mulberry32）。
2. 用 Playwright 无头 Chromium 逐帧渲染：evaluate(renderFrame(i/30)) → CDP Page.captureScreenshot(jpeg, quality 95) → 通过管道交给 ffmpeg（image2pipe → libx264 crf16 yuv420p）。WebGL 页面的启动参数加 --use-angle=swiftshader --enable-webgl --ignore-gpu-blocklist，渲染器设 preserveDrawingBuffer: true。
3. 公共 common.js 提供：缓动函数、种子随机数、value noise/fbm，以及"片段模式"URL 参数 ?seg=1&t0=&speed=&dur=，把片段时间 u 映射为场景时间 t = t0 + u*speed。在 u∈[0,0.4] 叠加"卡点冲击"：白闪 0.85→0（0.12 秒）、整体缩放 1.13→1（0.32 秒，outCubic）、抖动 14px 衰减（0.16 秒）；之后整段缓慢推镜，从 1 到 1.05。
4. 风格展示段的左上角放圆角胶囊标签：珊瑚色编号 + 风格名，例如「01 扁平插画 · 科普」。不要底部字幕。
5. 每个场景写完后，先渲染 5–6 张静帧拼成接触表检查构图，再整段渲染。最后按剪辑表 concat 所有片段，再与音轨合成。
## 剪辑表（总长 61 秒）
- 0–8 秒：开场
- 8–52 秒：11 轮，每轮 4 秒 = 大字卡 1 秒（2 拍）+ 风格展示 3 秒（6 拍）。展示段的第 1 帧就是"啪"的卡点。
- 52–53 秒：大字卡「还有更多？」
- 53–55 秒：八连闪
- 55–61 秒：电影感结尾
| 轮 | 大字卡（第1行 / 关键词+后缀 / 强调色） | 风格展示 | t0 | speed |
|---|---|---|---|---|
| 1 | 想做 / 科普视频？ / #ffcf5c | 扁平插画科普 | 0.35 | 1.4 |
| 2 | 想做 / 知识讲解？ / #58c4dd | 数学动画 | 0.5 | 1.45 |
| 3 | 想开 / 产品发布会？ / #a58bff | 极简发布会 | 0 | 1.0 |
| 4 | 想做 / 培训课件？ / #e0674b | 手绘白板 | 0.3 | 1.4 |
| 5 | 想做 / 炫酷预告片？ / #ff2bd6 | 赛博故障 | 0.8 | 1.3 |
| 6 | 想拍 / 国风短片？ / #e0513a | 水墨国风 | 0.5 | 1.35 |
| 7 | 想做 / 数据新闻？ / #ff5a4a | 数据可视化 | 0.4 | 1.4 |
| 8 | 想做 / 游戏视频？ / #ffd84a | 8-bit 像素 | 0.9 | 1.25 |
| 9 | 想录 / 编程教程？ / #c792ea | 代码录屏 | 0.4 | 1.4 |
| 10 | 想要 / 3D质感？ / #ff8a5c | Three.js 三维 | 0.3 | 1.3 |
| 11 | 想做 / 竖屏短视频？ / #ff5f9e | 竖屏短视频 | 0.3 | 1.45 |
## 开场（0–8 秒）
黑底 #0e0e0d。屏幕居中用 76px 等宽字体逐字打出文字，配珊瑚色方块光标。每出一行新字，旧行上移 118px 并变暗。
- 0.25–1.15「Hello，我是 Opus 5.5。」（"Opus 5.5"为珊瑚色）
- 1.6–2.25「我不是视频生成模型。」
- 2.75–3.6「我不能凭空生成任何一帧画面。」
- 4.1 打出「但是——」，停顿到 4.55，再打「我会写代码。」（珊瑚色）。同时背景淡入三列向上滚动的代码：先是灰色，再变为语法高亮，并越滚越快。
- 5.5–6.3「而代码，可以变成任何风格的视频。」（"任何风格"用彩虹渐变）
- 6.6–7.95：所有代码字符向外炸开成旋转的彩色粒子，主句放大并发光
- 7.55–8.0：闪白
## 大字卡（每张 1 秒）
- 版式按编号 i % 4 轮换：0 和 3 为黑底白字、关键词用强调色；1 为强调色底黑字，文字左右滑入，关键词下方加黑色下划线；2 为米白底黑字，文字遮罩上推，关键词下方加强调色下划线。
- 第 1 拍（t=0）：第 1 行（150px）砸入；第 2 拍（t=0.5）：关键词 + 后缀（280px，Noto Sans Black）砸入。"砸入"= 缩放 1.7→1、模糊 16→0，0.11 秒，outExpo。
- 每次砸入伴随强调色速度线爆发和径向光晕，画面抖动 6px / 12px。
- 背景有 600px 的描边回声大字横向漂移；右下角写「STYLE 0X / 11」。
## 11 个风格展示（每段 3 秒，要有视觉冲击和艺术感）
1. **扁平科普**「为什么会有四季？」
- 深蓝星空渐变，扁平太阳（分层圆 + 12 个旋转三角光芒），虚线椭圆轨道。
- 地球：蓝色 + 绿色大陆 + 极冠，地轴倾斜 23.4°，背光半球压暗，太阳到地球有半透明光束。地球沿轨道从左经前方运动到右侧。
- 依次弹出标签胶囊：「夏至·北半球夏天」「秋分」「冬至·北半球冬天」。
- 标题用 ZCOOL KuaiLe，"四季"下衬珊瑚色高光条。
2. **数学动画**
- 深底 + 青色细网格。取心形线 x=16sin³s, y=-(13cos s-5cos2s-2cos3s-cos4s) 做 DFT，用 36 个本轮画出金色发光心形，画完后淡粉填充。
- 右侧：标题「傅里叶级数：用圆作画」，KaTeX 渲染公式 f(t)=Σc_n e^{int} 及 c_n 积分式，实时显示 N 和 θ。
3. **极简发布会**
- 黑底，前 3 拍逐拍闪出巨字「更轻。」「更快。」「更聪明。」（第三个用紫蓝橙渐变）。
- 第 4 拍起出现 Three.js 金属戒指：LatheGeometry 圆角矩形截面，PhysicalMaterial（金属 1，粗糙度 0.16，clearcoat），RoomEnvironment 反射，ACES 色调映射，侧面一圈变色 LED 细环。戒指从倾斜状态转正，扫光从左到右，紫色和橙色轮廓光。
- 下方出现「Nova Ring」（字距从宽收拢）和「戴在指尖的 AI · 即将登场」。
4. **手绘白板**
- 米白纸纹。SVG 路径用 stroke-dashoffset 逐笔绘制，feTurbulence + feDisplacementMap 做手抖效果，种子每 1/8 秒切换一次，形成"沸腾线"。一支马克笔跟随笔尖。
- 内容：Long Cang 标题「如何用 AI 做一支视频？」→ 灯泡「想法」→ 箭头 → 笔记本 </>「代码」→ 箭头 → 场记板「视频」；最后用红圈圈出「代码」，旁注「关键一步！」。
- 镜头 1.65 倍跟随笔尖，最后拉远看全貌。
5. **赛博故障**
- 紫黑天空、条纹落日、城市剪影窗灯、洋红透视网格地面向前滚动。
- 标题 Orbitron「OPUS 5.5」做青 / 洋红 RGB 分离和霓虹光晕；副标题用 QingKe 写「未来 · 已编译」。
- 每拍一次故障：横向切片错位、差值色块、整帧通道偏移。叠加扫描线、噪点和 HUD 帧计数。
6. **水墨国风**
- 宣纸纤维纹理 + 暗角。三层 fbm 山峦，墨色自上而下渐淡，带皴擦笔触，由虚到实洇开；再加云雾带、朱红落日、渔舟垂钓、飞鸟。
- 右侧用 Ma Shan Zheng 竖排「山水之间」，逐字晕开，旁配「行到水穷处 坐看云起时」，最后朱红印章「代码」盖下。
7. **数据可视化**
- 深色电影感：暗底 + 紫红光雾 + 漂浮粒子。
- 条形图赛跑 2019→2026，标注"示例数据 · 仅作演示"：
- 科普知识 18→112
- 游戏 62→88
- 美食 45→78
- 影视解说 30→81
- 音乐 52→66
- 旅行 38→64
- 科技数码 24→60
- 条形发光，高亮条为珊瑚红；图表整体做 CSS 3D 透视倾斜并缓慢转动；右下角放巨大的描边年份。
- 结尾出现玻璃卡片「知识类内容 7 年增长 6.2×」。
8. **8-bit 像素**
- 240×135 画布，按 8 倍 pixelated 放大。视差天空和山丘，地面横向滚动。
- 原创橙色小机器人（16×16，两帧跑步动画）按节拍跳跃，吃金币时飘出「+300」，跳过绿色史莱姆。
- 顶部 Press Start 2P 字体 HUD，结尾闪烁「STAGE CLEAR!」。
9. **代码录屏**
- 原创深色编辑器界面：窗口按钮、文件树、行号、当前行高亮。
- 逐字打出 9 行 renderFrame 代码：cos/sin 让圆走 8 字轨迹，hsl 随时间变色。
- 右侧实时预览随代码进度逐步生效，最终变成 lighter 混合的彩色光带拖尾。
- 加提示气泡「t = 当前时间（秒），每帧都在变」。镜头 1.55 倍跟随光标，最后滑到预览区。
10. **Three.js 三维**
- 奶油粘土风：桃色无缝影棚，软阴影，环境反射。
- 中心白色圆台上漂浮旋转的珊瑚色环面结，周围放玻璃球（transmission）、金属金球、马卡龙圆角方块、硬币叠、按节拍弹跳并挤压拉伸的三个彩色小球。
- 镜头从远处推近并环绕。
11. **竖屏短视频**
- 横屏画面中央放一台 9:16 手机：紫粉渐变屏幕，逐拍弹出描边大字「用代码 / 做视频 / 有多快？」，再出三张步骤卡「写代码 / 逐帧渲染 / 一键成片 ✓」。
- 屏幕里还有点赞数上涨、双击大爱心、飘心。
- 手机两侧：左边描边大字「9:16」，右边依次弹出评论气泡「这也是代码做的？？」「求教程！」「学到了，已关注」。
## 八连闪（53–55 秒）
8 个画面，每个 0.25 秒，每切一次都缩放 1.08→1 并闪白：
- 波普漫画「广告！」
- 孟菲斯「Vlog」
- 瑞士海报「MV」
- 霓虹砖墙「音乐现场 LIVE」
- 胶片纪录片「纪录片」
- 蓝图「产品演示」
- 环形频谱「播客」
- 弥散渐变玻璃卡「2026 年度总结」
## 结尾（55–61 秒）
- 上下黑边各 138px；暖色暗底上有散景光斑、漏光和胶片颗粒。
- 0.15 秒起出现「以上每一帧，」和「都是一行一行代码写出来的。」（衬线体），2.2 秒后淡出。
- 2.5 秒出现「Opus 5.5」（Playfair 斜体 190px），3.0 秒出现「19 种风格 · 1830 帧 · 0 个视频生成模型」，3.5 秒出现「你想做什么样的视频？」（珊瑚色），4.1 秒出现小字制作说明。
- 5.5–6.0 秒淡出到黑。
## 配乐（120 BPM，A 小调，全部由 numpy 合成，不用采样）
- 基础音色：kick（正弦扫频）、snare、clap、hat、crash、sub boom、噪声 riser、反向镲、whoosh、拨弦（谐波衰减）、FM 电钢、FM 钟声、超级锯齿、808、方波/三角波（芯片音乐）、笛子。
- 开场：
- 低通铺底长音；每打出一个字配一声键盘咔哒
- 4.55 秒：sub boom 进入，底鼓逐拍渐强
- 5.5 秒起：8 分音符踩镲
- 6.5–7.95 秒：军鼓滚奏逐渐加密
- 5.3 秒起：噪声上扬
- 7.45 秒：反向镲
- 大字卡：
- 第 1 拍：kick + tom
- 第 2 拍：kick + clap + sub boom + whoosh
- 第 2 拍后半：反向镲
- 卡片期间其他音乐压到 6%，形成 drop-out
- 展示段第一帧的"啪"：kick + clap + snare + crash + sub boom + 高频爆裂
- 每段展示用 6 拍律动加该风格的专属乐器：
- 科普：马林巴
- 数学：电钢琶音 + 铺底
- 发布会：逐拍重低音，戒指出现时轰鸣 + 钟声
- 白板：尤克里里扫弦 + 马克笔摩擦声
- 赛博：失真锯齿贝斯 16 分 + 四拍底鼓 + 故障音
- 国风：古筝五声音阶 + 太鼓 + 笛子 + 盖章闷响
- 数据：方波琶音 + 年份跳动滴答声
- 像素：芯片音乐 + 跳跃声、金币声
- 编程：lo-fi 电钢 + 黑胶噪声 + 键盘声
- 3D：钟声琶音 + 小球弹跳声
- 短视频：808 + 超级锯齿 + trap 踩镲 + 弹出音效
- 和弦（每段前 4 拍 / 后 2 拍），依次为：Am/F、C/G、F/G、C/F、Am/G、Am/Em、Dm/E、C/G、Dm/G、F/G、Am/F
- 混音：用底鼓包络做侧链压缩（音乐闪避 55%）、2.2 秒合成混响、tanh 软削波，最终归一化到 -0.6dBFS。
## 质量检查与避坑
- 渲染前等待 document.fonts.ready，并逐个 fonts.load 所有字体。
- 不要每帧用 ctx.filter blur 或大量 shadowBlur（软件渲染会极慢），模糊层要预先渲染好再交叉淡化。
- 镜头 transform 会影响 getBoundingClientRect，需要在加变换之前缓存坐标。
- 每段渲染完用 ffprobe 核对帧数，合计必须是 1830；音画卡点和剪辑表用同一组时间常数。
- 抽 1fps 接触表检查全片，用频谱图检查每个卡点的鼓点是否对齐。
- 成片用 2-pass 3.4Mbps 压缩（约 26MB），方便上传。