maddexritter-rgb/vibe-editing-promo

/promo — 品牌视频生成器 (Remotion + Claude Code)

制作两种高端品牌视频。基于 Remotion (基于 React 的视频框架) + Claude Code + remotion-best-practices 技能。

🎬 首先选择模式（如果不明确，询问用户）

• 模式 A — 动画演示/讲解视频。 完全动画化，不使用真实的长篇素材作为主轴。适用于幻灯片演示、功能发布、内容飞轮视频、SaaS 推广、品牌讲解视频。→ 基于 templates/glass/ (高级液态玻璃) 或 templates/saas/ 构建。请参阅下面的 glass 部分。示例：~/Downloads/engine/2026-06-12_WorkflowDemo (FlywheelFilm 合成)
• 模式 B — 档案/起源故事影片。 用户提供一段长的粗剪影片（他们自己的剪辑——章节之间由黑色帧分隔），希望将其制作为品牌影片：章节间插入卡片、每个章节匹配合适的音乐、闪白过渡以及增长曲线高潮。→ 时代卡片 + assemble.py。请参阅下面的 MODE B 部分。示例：~/Downloads/engine/2026-06-14_BrandHistory (一部“约 5 分钟回顾 4.5 年”的起源影片)

两种模式共享同一套品牌化玻璃组件库（开场、GlassBG、时代卡片、增长曲线、品牌 constants.ts），因此外观风格统一。在 constants.ts + public/ 中按品牌重新品牌化徽标——切勿将品牌名称硬编码到组件中。

何时使用此技能（与其他视频技能对比）

• ✅ 使用此技能：独立宣传视频、SaaS 演示、课程预告片、功能发布视频、基于 URL 的动画讲解视频
• ❌ 不要使用此技能：人物讲话片段、面部追踪重构图、填充词剪辑、为现有视频加字幕（使用 shortform / caption-clips 代替）

现成的 SaaS 动画模板

三个可用于生产的 Remotion 组件，采用“SaaS 动画风格”（2026 年主导科技品牌 Instagram/TikTok 的 $1-2k/视频风格）。可将它们放入任何 Remotion 项目：

• templates/saas/SaasTextPopup.tsx — 4 秒品牌化介绍，具有弹出文字 + 徽标展示
• templates/saas/SaasGlassReveal.tsx — 6 秒玻璃 UI 功能卡片，具有背景模糊效果
• templates/saas/SaasDashboardTour.tsx — 8 秒 3D 仪表板导览，具有动画光标

完整技术参考位于 editing-styles/saas-animation-style.md。链接编排器位于 saas-animation-video — 使用“创建一个 SaaS 动画视频”触发。

参见 templates/saas/README.md 了解接线和品牌自定义。

---

🟣 高级液态玻璃演示/讲解视频 — templates/glass/

这是高端、品牌原生、“令人惊叹”的演示视频系统（那种可以直接放入幻灯片作为现场演示的视频）。当需求是精致、概念驱动的演示/讲解，包含真实素材、真实产品 UI 和醒目的屏幕文字（而非旁白）时，请使用此系统——而不是 SaaS 模板。示例：~/Downloads/engine/2026-06-12_WorkflowDemo (FlywheelFilm 合成——一个内容飞轮演示)。1920×1080 @ 30fps，粗体下方第三，无旁白。

品牌无关。 该组件库已品牌化标记。在 src/constants.ts 中设置品牌（COLORS + 字体），并将品牌的徽标 PNG 放入 public/。示例使用的是 Speaker / company.com (Sambucus #131628, Electric Indigo #6f00ff, Lavender #a08bec, Poppins) — 根据不同品牌替换这些标记；切勿将品牌名称硬编码到组件中。

组件库包含 (templates/glass/src/)

• constants.ts — 品牌标记 (COLORS, FPS, WIDTH, HEIGHT, 弹簧预设)。唯一进行重新品牌化的地方。
• components/GlassBG.tsx — 持续漂浮的光晕渐变背景（连续流动基础；位于每个节拍后面）。
• components/GlassPanel.tsx — 磨砂“液态玻璃”面板（背景滤镜模糊 + 光泽 + 深度）。dark 变体用于文字可读性。backdrop-filter 在 Remotion 的无头 Chrome 中可以渲染。
• components/GlassBeats.tsx — 节拍原语：GlassTitle (钩子卡片), GlassFrame/SceneDemo (玻璃窗口中的 UI + 叙事), GlassOutro (收尾卡片 + 徽标), PayoffCard。
• components/BrandSting.tsx — 约 1.5 秒徽标开场（条纹 → 闪光 → 标记绽放 → 文字标记）。
• components/CreateShots.tsx — NarratorChip (粗体下方第三字幕 = “粗体文字，无旁白”层) + 媒体播放器镜头。
• components/Flywheel.tsx — 标志性节拍：ContentFlywheel (循环 RING), FlywheelEscalation (堆叠的牌组线收尾), AutoPostScheduler (实时终端 + 真实屏幕录制，并排显示), RawSessionPlayer, HeroClipPlayer (手机框中的片段), Tier1Prompt/Tier1Pipeline (命令 + 步骤)。
• components/ChannelScroll.tsx — 真实的频道订阅滚动（缩略图 + 时长）。RealClipShowcase.tsx — 真实竖屏片段播放网格。GlassBrowser.tsx — 浏览器框中的应用 UI。ScaleWall/Odometer/Stopwatch — 音量 + 数字戏剧效果。FXOverlay — 颗粒/暗角。
• audio/index.tsx — AudioBed (音乐，低音量) + Sfx (嗖声/轰鸣声/上升音/滴答声…) 带有 MASTER 增益图。
• compositions/FlywheelFilm.tsx — 示例：开场 → 钩子 → 原始证明 → 命令 → 管线 → (中部：频道 + 自动发布终端/录制) → (短视频：英雄 + 网格) → 飞轮环 → 升级 → 收尾。

制作手册（可行的顺序）

1. 首先阅读源材料（幻灯片/简报）。提取概念和品牌的特有语言——抽取原样句子用于节拍，使视频感觉像他们自己的演讲。（不要编造通用的文案。）
2. 在 constants.ts 中设置品牌标记；将徽标放入 public/（参见关于徽标 PNG 的陷阱 #5）。
3. 使用 TransitionSeries 为节拍构思故事板（开场 → 钩子 → 演示节拍 → 收尾循环 → 升级 → 收尾）。保持紧凑（约 38~45 秒） — 快速节拍，粗体下方第三。（“太慢”是第一大反馈。）
4. 连接真实素材（见下文模式）—— 真实素材/UI > 模拟，每次都是。
5. 渲染： npx remotion render <CompId> out/<name>.mp4 --codec=h264 --crf=16（在提示编辑时附加“使用 Remotion 最佳实践”）。
6. 通过提取帧进行质量控制——切勿盲目信任（陷阱 #1）。
7. 交付到项目的 20_DELIVER/（以品牌命名）。除非另有说明，否则仅限本地交付。

真实素材模式

• 素材 → <OffthreadVideo muted startFrom={..} playbackRate={..} /> 放置在玻璃播放器/手机/浏览器框架内。制作代理（720×1280 / 1080）以保持工作室和渲染速度。
• 屏幕录制 → 裁剪为 JUST 应用 UI（去除浏览器标签/地址栏/横幅）：ffmpeg -ss A -t B -i rec.mov -vf "crop=W:H:0:Y,scale=1600:-2" -an out.mp4。加速（playbackRate 2~3.5×）使其能展示步骤进度，而非停滞。
• 终端 + 录屏并排显示（王牌节拍）：一个样式化的终端，其日志镜像真实脚本的 stdout（读取实际技能/脚本以获取真实行）旁边是实际屏幕录制——两者显示相同的名称使其看起来像一个系统。参见 AutoPostScheduler。
• 真实数据/缩略图 → 实时拉取：yt-dlp "https://youtube.com/@CHANNEL/videos" --flat-playlist --print "%(id)s|%(duration_string)s|%(title)s"，然后从 https://i.ytimg.com/vi/<id>/maxresdefault.jpg 获取缩略图（后备 mqdefault.jpg）。对于 Speaker 片段数据，使用 your analytics MCP。

🛑 陷阱——每一个都是构建此技能时遇到的真实修复；渲染前请阅读

1. 通过帧进行质量控制，切勿盲目。 每次渲染后，使用 ffmpeg -ss <t> -i out.mp4 -frames:v 1 f.jpg 检查每个节拍并实际查看。在素材完成渲染的同时，使用 --frames=0-540 提前渲染前半部分。
2. 过渡文字混淆。 两个交叉淡入淡出的文字节拍重叠形成不可读的混乱。修复：使每个文字节拍的内容在其最后约 14 帧内淡出（一个 exit = interpolate(f,[dur-16,dur],[1,0]) 乘以不透明度），以便在下一个交叉淡入之前消失。（或硬切文字节拍。）
3. 开场/徽标透出。 以明亮徽标结束的开场（或任何节拍）会在交叉淡入期间透过下一个半透明玻璃卡片透出。修复：使开场的徽标在其自身结尾处淡出，以便在干净的黑色帧上过渡。
4. 文字上的遮罩变暗（微妙！）。 一个 <AbsoluteFill> 遮罩是定位的兄弟元素，因此它会绘制在静态文字之上并使其变暗——亮白色幸存，薰衣草色/次要颜色被压扁并显得微弱。修复：将遮罩置于 zIndex:0，并将文字包裹在 position:relative; zIndex:1 容器中。（然后高不透明度的遮罩会抑制漂浮光晕的“发光-熄灭”脉冲，而不会使文字变暗。）
5. 不可见的徽标。 带有透明填充的方形徽标 PNG 会使实际标记显得微小/不可见。修复：先将 PNG 裁剪为其内容，然后按宽度调整大小（<Img style={{ width: 600, height: 'auto' }} />）。
6. 音频削波。 未映射的音效以 1.0 播放 → 满刻度削波。修复：一个 MASTER 增益（约 0.5）+ 一个完整的每音效 VOL 映射 + 人声下的音乐约 0.2；最终交付文件使用 loudnorm I=-14:TP=-1.5。验证 volumedetect 最大值 ≤ 约 −3 dB。
7. zsh 单词拆分。 for x in $VAR 在 zsh 中不会拆分（一次迭代包含整个字符串）。使用字面列表或 ${=VAR}。（这在我批量下载缩略图时坑了我。）
8. 保持最后一帧活跃（非黑色）—— 收尾以徽标卡片结束；验证最后一帧亮度 > 约 10。
9. 字体 通过 @remotion/google-fonts 获取（Poppins, JetBrainsMono）。数字/关键词 使用恒定的 textShadow 发光（不要依赖背景产生发光效果——参见 #4）。

---

🧊 3D + 2.5D 视差 + ☁️ 云规模（模式 A 增强）

示例：~/Downloads/_PROJECTS/2026-06-15_3DSaasDemo（一个 SaaS 演示示例——视差英雄，浮动玻璃仪表盘卡片，3D 条形图 + 真正的 WebGL 变体）。

3D — 两种路径

• CSS 3D（默认，无依赖，可在任何地方渲染）。 将一个场景包裹在 perspective + transformStyle:'preserve-3d' 中；在不同 translateZ 处放置图层，并使用 useCurrentFrame() 动画化世界的 Z = 一个摄像机移动平台，其中近层比远层移动更多（真正的 2.5D 视差）。浮动玻璃卡片、挤压条形图（正面/侧面/顶面）、后退的网格地板都来自 CSS 变换。首选此方法——它在无头 Chrome 中非常稳定。
• 真正的 WebGL — @remotion/three + React Three Fiber。 真实网格、光照、阴影、材质。仅在 CSS-3D 无法满足时使用（真正的几何/光照/景深）。安装 @remotion/three + @react-three/fiber@^9 + three（R3F v9 是 React 19 所必需的；v8 适用于 React 18）。使用 Remotion 的 useCurrentFrame() 驱动动画，不要使用 R3F 的 useFrame（Remotion 逐帧渲染）。包裹在 `<ThreeCanvas width