# Remotion AI Video Production Skill — Cinema-Grade Short Videos

> Pushed via CLI: video-production-skill-push.md

## Install

Copy the content below into your project:

# Remotion 短视频制作质量标准

> 影视飓风级别画面标准，适配 Remotion 代码生成场景。核心理念：**每一帧都必须是一张好看的海报**。

## 一、最高优先级铁律

1. **绝对禁止屏幕抖动/震动效果** — 这是低质量视频的标志，没有任何例外
2. **绝对禁止纯黑/纯暗色背景** — 即使叠了 2% opacity 的网格也不算，必须有**肉眼可见的色彩层次**。base 颜色至少 #1e0c0c 级别，blob 颜色至少 #8b2020 级别，opacity ≥ 0.4。渲染后文件大小是检验标准：纯黑视频 ≤10MB，有背景的 ≥15MB
3. **引用人物必须有人物视觉** — 不是一个 emoji 了事，要有头像区域+光效+环境氛围
4. **视频封面（第一帧/缩略图）绝对不能无信息、无内容** — 封面必须有文字 hook + 视觉冲击，不能是纯色/logo/空白
5. **场景过渡必须流畅** — 不能有硬切黑屏断点。使用 cross-fade（前后场景各 12-15 帧重叠）或动效衔接，让视觉连续不断

## 二、背景标准（最关键的差距来源）

### Mesh Gradient 系统（必须使用）
- 每个场景至少 **4-5 个大色块 blob**，每个 500-1000px 大小
- 每个 blob opacity **25-50%**（不是 2-4%！必须肉眼可见）
- 色块必须有 `filter: blur(40px+)` 制造柔和渐变
- 色块必须有独立的缓慢漂移运动（Math.sin/cos 驱动）
- 色相选择：不是纯灰，而是有明确色彩倾向的暗色（如 #2a2210 暖金、#1a0828 冷紫、#0a1525 深蓝）
- **base 底色也不能是纯黑**：用 #0c0b06（暖）、#0c0810（冷）等有色彩倾向的极深色

### Bokeh 粒子系统
- 每场景 10-20 个 bokeh 粒子
- 大小 6-20px，有 blur 和 boxShadow 发光
- opacity 20-35%（必须可见）
- 缓慢漂移，不能静止

### 禁止项
- ❌ 纯色 background + 微弱 overlay = 等于没做
- ❌ opacity < 10% 的装饰元素 = 等于不存在
- ❌ 静态背景 = 等于 PPT 不是视频
- ❌ `backgroundImage` 的 CSS noise pattern = 渲染看不见

## 三、文字标准

- 标题/关键词必须用 **gradient text**（WebkitBackgroundClip + WebkitTextFillColor）
- 配合 `filter: drop-shadow()` 制造发光效果
- 禁止裸白色文本：必须有 textShadow 或渐变
- 次要文字用 `rgba(255,255,255,0.35-0.5)` 而不是 #666（在暗背景上几乎看不见）
- 关键数字：超大字号 + 品牌色 + 双重 textShadow（色彩光晕 + 黑色投影）

## 四、动效标准

### 入场动画
- 使用 `spring()` 而非 `interpolate` 做入场（更自然的弹性感）
- damping 8-12，stiffness 100-200
- 每个元素错开入场（stagger），间隔 0.2-0.3s

### 持续运动（每一帧都在动）
- 背景 blob 漂移（Math.sin/cos * 40-60px）
- Bokeh 粒子浮动
- 装饰线条/环持续旋转或伸缩
- 即使内容已展示完毕，画面也必须在呼吸

### 禁止项
- ❌ screen shake / 抖动效果
- ❌ 突然的 flash（红色闪屏等）— 用渐进的 glow 替代
- ❌ 任何静止帧

## 五、卡片/容器标准

- 背景用 `rgba(R,G,B, 0.6-0.8)` 半透明，不是纯色实底
- 加 `border: 1px solid ${accent}30-45` 微边框
- 加 `boxShadow: 0 4px 30px ${color}15` 柔和投影
- 可选：`inset 0 1px 0 rgba(255,255,255,0.1)` 顶部高光线 = 玻璃感
- 圆角 16-24px

## 六、人物引用标准

当引用名人名言时：
1. 大圆形头像区（280px+），带 3px border + 内发光 + 外部辉光
2. 头像背后有**专属光环**：radial-gradient 400px+，opacity 20-30%
3. 可选：orbiting dots / 旋转环 增加科技感
4. 引用文字放在**独立的毛玻璃卡片**中，不是悬浮在空气中
5. 大号引号 `"` 装饰（50-60px，低 opacity）
6. 人物头衔/标签单独一行，小字 + 大间距

## 七、叙事结构（2026爆款升级版）

### 基础结构已过时，以下是高完播率结构：

**结构A：Mystery Gap（完播率70%+，最强）**
- 开场抛出未解问题/不可能声明 → 中段持续制造悬念 → 结尾揭晓答案
- 观众必须看完才能"闭合"好奇心

**结构B：Problem-Escalation-Flip（推荐用于产品推荐）**
- [0-3s] 说一个共鸣痛点
- [3-10s] 升级痛点（比想象更严重）→ 情绪低谷
- [10s-end] 反转解决方案 → 情绪高峰

**结构C：Countdown Ratchet（列表类，收藏率2.5x）**
- "Top 3..." 每个编号是一个 mini-hook，重置注意力
- 观众心理："已看2个，不如看完#1"

### 铁律
- **71%观众在前3秒决定去留** → hook 必须在3s内爆发
- **每2-4秒换一个画面** — 绝不同一画面超过3句话（Fireship标准）
- **70%+完播率 = 算法优先推荐**，低于30% = 结构需要重做
- **设计"重看点"** — 闪现0.5s的数据/彩蛋，触发重播（算法最强信号）
- **CTA用具体问题**（"What AI tool do you use?"）比 "like and subscribe" 互动高83%

### 配音脚本写法（去AI味）
- **voice-first 写法**：短句。碎片句OK。口语缩写（it's 不是 it is）
- **每15秒一个反问句**："But here's the thing — does it actually work?"
- **标点=节奏控制器**：省略号=停顿，破折号=急转，感叹号=能量
- **能量比正常对话高20%** — 手机外放+环境噪音下"稍微夸张"=刚好自然
- **Fireship技巧**：极快节奏+幽默呼吸点，每2句换语气，声音=角色不是播报员

## 七-B、TikTok 竖屏视觉层级铁律

### 核心原则：用户第一眼看屏幕中心
TikTok/Shorts 用户在 feed 中滑动时，**视线焦点在屏幕正中间**。如果中间区域是黑色/空白，用户会直接滑走。

### 1. 内容必须垂直居中
- **主要内容区域必须占据屏幕中央 60%**（Y轴 380px-1540px 区间）
- 终端/代码风格视频：终端窗口垂直居中，不要从顶部开始
- 禁止内容只在顶部或底部 — 中间留空 = 死亡

### 2. 开场必须有中心爆炸动效（0-1.5s）
- **前 1.5 秒必须有一个从屏幕中心向外扩散的视觉冲击**
- 目的：打断用户滑动惯性，强制停留
- 推荐效果：
  - 放射性光线从中心爆开（12-16条光线，spring弹性扩展）
  - 同心圆环从中心扩散（3-4层，依次扩大）
  - 大字从 scale(0) 弹到 scale(1) + 光晕爆发
  - 粒子从中心向四周射出
- **爆炸后立即显示第一句 Hook 文字**，无缝衔接

### 3. 安全区域
- 顶部 80px：TikTok 状态栏遮挡
- 底部 280px：TikTok 描述文字 + 按钮遮挡
- 左侧安全，右侧 80px：互动按钮遮挡
- **有效展示区域：1080×1560**，核心内容放中间

### 4. 终端风格视频特别规则
- 终端窗口不要全屏 — 留边距让背景可见
- 终端内容自动滚动时，保持当前输出行在**屏幕中央偏上**位置
- 终端背景半透明（0.85-0.9 opacity），让底层渐变/光效透出来

## 八、渲染稳定性铁律（帧闪烁问题根治）

### 问题根因
Remotion 用 headless Chrome 多线程并行渲染每一帧（concurrency=5 就是 5 个浏览器 tab 同时渲染不同帧）。CSS `filter: blur()` 和 `filter: drop-shadow()` 在不同浏览器实例间的渲染结果**不完全一致**——同样的 blur(40px) 在 Tab1 和 Tab2 渲染出来的像素级结果有微小差异。连续帧由不同 tab 渲染时，这些微小差异就变成了肉眼可见的**画面闪烁/抖动**。

### 禁止使用的 CSS 属性
- ❌ `filter: blur()` — 多线程渲染不确定性的最大来源
- ❌ `filter: drop-shadow()` — 同样不稳定
- ❌ `backdrop-filter: blur()` — 同理
- ⚠️ `boxShadow` 大面积高模糊 — 可能不稳定，小范围可接受

### 替代方案
| 想要的效果 | 禁止用法 | 正确用法 |
|-----------|---------|---------|
| 柔和色块 | `filter: blur(40px)` | 用更大的 `radial-gradient` 多层渐变模拟 |
| 文字发光 | `filter: drop-shadow()` | `textShadow: "0 0 20px color"` |
| 元素发光 | `filter: drop-shadow()` | `boxShadow`（小范围）或额外的 radial-gradient 底层 |
| 毛玻璃 | `backdrop-filter: blur()` | `rgba()` 半透明背景 + border |
| 柔和粒子 | `filter: blur(3px)` + `boxShadow` | `radial-gradient(circle, color 0%, color40 40%, transparent 70%)` |

### 渲染参数
- **必须用 `--concurrency=1`** 单线程渲染，彻底消除帧间不一致
- 代价是渲染时间更长（约 2-3 倍），但画面 100% 流畅
- 渲染命令：`npx remotion render src/index.ts [id] out/[name].mp4 --browser-executable="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --concurrency=1`

### 自检方法
渲染前在代码中搜索 `filter:` — 如果出现任何 `blur` 或 `drop-shadow`，必须替换。

## 八-B、字幕标准（必须有）

### 核心规则
- **每条视频必须有逐词高亮字幕** — 80%用户静音观看，无字幕=80%流失
- **字幕增加 12-40% 观看时长**（OpusClip 数据）

### 样式规范
- **字体**: SF Pro Display / Inter / Arial，sans-serif，fontWeight 800
- **大小**: 46px（竖屏 1080 宽度下）
- **颜色**: 当前词白色(#f5f5f5)，未到词 rgba(255,255,255,0.3)
- **阴影**: `0 0 10px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.8)` — 保证任何背景上可读
- **位置**: 屏幕下方 1/4 处（bottom: 380px），居中
- **每行**: 3-7 个词，自然断句
- **动效**: 当前词 scale(1.1) 放大

### 音频标准
- **配音**: 语速 +8~15%，pitch +2Hz，对话感而非播报感
- **背景音乐**: 必须有，音量 10-20%（不能喧宾夺主）
- **音效**: 转场 whoosh，关键数字 pop（可选但推荐）

## 九、过渡标准

- 连续两个场景间**不能用相同过渡类型**
- 推荐交替：wipe → fade → slide → fade
- 过渡时长 12-20 帧
- 场景内部用 spring/interpolate 做元素级过渡

## 九、色彩体系

每个场景应有一个**主导色调**，通过 mesh gradient blob 颜色体现：
- Hook/Pain 场景：冷色偏红/紫（危险/紧张）
- Flip/权威 场景：暖色偏金（信任/价值）
- Product 场景：冷色偏蓝/绿（理性/科技）
- CTA 场景：暖色偏金（品牌/行动）

## 十二、自查清单（渲染前必过）

### 渲染稳定性（最高优先级）
- [ ] 代码中搜索 `filter:` — 是否有 blur/drop-shadow？（必须为零）
- [ ] 渲染命令是否用了 `--concurrency=1`？

### 画面质量
- [ ] 暂停在任意帧，背景是否有可见的色彩变化（不是纯黑）？
- [ ] Mesh gradient blob 是否 ≥4 个，opacity ≥25%？
- [ ] Bokeh 粒子是否 ≥10 个，肉眼可见？
- [ ] 引用人物时是否有头像+光环+引用卡片？
- [ ] 文字是否全部有 gradient/textShadow 处理？
- [ ] 每个场景是否有 ≥3 层独立运动？
- [ ] 过渡类型是否交替多样？
- [ ] CTA 是否有脉动按钮 + URL + 免费标签？
- [ ] 是否有屏幕抖动/震动效果？（必须为否）

## 十三、真实素材融合标准（截图/视频/动效三级）

### 核心原则：素材服务叙事，叙事不服务素材
- 先定叙事结构 → 再选素材形式 → 绝不为炫素材打乱节奏
- 真实素材 = 说服力来源，但必须经过设计处理才能用

### Level 1: 截图作为证据卡片
- ❌ 截图绝不能当全屏背景铺满（很丑、喧宾夺主）
- ✅ 截图裁剪到关键区域 → 包裹在设备边框中（BrowserFrame：三色圆点+URL栏+圆角+阴影）
- ✅ 嵌入在暗色设计背景上，视频整体有自己的视觉体系
- ✅ spring 入场 + perspective 3D 倾斜效果
- 技术：Remotion `<Img>` + 自定义 BrowserFrame 组件

### Level 2: 代码模拟产品效果（首选，已验证）
- ⚠️ 外部视频素材（官方 GIF/YouTube）分辨率通常太低（如 600x300），放大到 1080 宽度会糊到无法辨认
- ✅ **用 Remotion 代码直接模拟产品运行效果** — 高清、可控、观众秒懂
- 模拟 IDE 代码补全：VS Code 深色主题 + 行号 + 语法高亮 + 打字动画 + ghost text 渐显 + 接受闪烁 + 状态栏
- 模拟 Dashboard：数据面板卡片 + 数字滚动增长
- 模拟终端：命令逐字输出 + 光标闪烁 + 结果渲染
- 关键：模拟 UI 必须足够逼真（One Dark Pro 配色、光标细节、状态栏内容），让观众以为是真实录屏
- 技术：纯 React/CSS 组件 + `interpolate` 驱动时间轴

### Level 2b: 高清外部视频片段（备选）
- 仅当有 ≥1080p 高分辨率源视频时使用
- `<OffthreadVideo>` 嵌入设备边框中，volume={0}，不是全屏铺底
- 获取方式：OBS/QuickTime 本地录屏 > 网上低分辨率素材
- 注意：外部视频需裁剪到关键片段，不超过 5-8 秒

### Level 3: 动效融合（最高水准）
- 截图 → 放大 → 变成全屏录像 → 缩小回卡片（无缝过渡）
- 数据可视化动效（stars 计数器滚动、下载量增长曲线）✅ 已实现
- 终端打字效果展示安装命令（光标闪烁+逐字输出）✅ 已实现
- 代码补全模拟（ghost text 渐显 → Tab 接受高亮）✅ 已实现
- 截图 zoom + pan 动画（全景→zoom into 关键区域）✅ 已实现
- 截图高亮标注（动态边框脉冲圈出关键数据）✅ 已实现
- 产品 UI 高亮：圈出关键区域、箭头指引、放大镜效果
- 截图之间的视差滚动（parallax）

### 品牌素材标准（细节决定品质 — 2026-04-12 大量细节经验）

**Logo 两套素材铁律：**
- **横版带文字 logo（如 512x110）绝不能塞进正方形/圆形容器** — 会严重变形拉伸
- 每个品牌必须准备：
  1. `xxx_logo.png` — 完整带文字版（用在大面积展示：Hook、CTA 白底卡片）
  2. `xxx_icon.png` — 纯图标正方形版（用在对比卡片、终端标题栏、小图标位置）
- 裁剪方法：`ffmpeg -i full_logo.png -vf "crop=H:H:0:0" icon.png` 取左侧正方形
- Logo 获取优先级：Wikipedia SVG 转 PNG > GitHub org 头像(`avatars.githubusercontent.com/u/{id}?s=200`) > 官网 favicon(`claude.ai/favicon.ico` → ffmpeg 转 PNG)
- 白底 logo 展示：`background: rgba(255,255,255,0.92)` + `borderRadius: 14-20` + `padding` + `boxShadow`
- 深色背景上需品牌色发光：`boxShadow: 0 0 20px ${brandColor}20`
- **绝不用字母/emoji/占位符代替真实 logo** — 这是最容易被发现的粗糙感来源

**真实性细节（容易忽略但影响专业感）：**
- 终端 prompt 必须匹配真实产品（Claude Code 用 `❯`，不是 `claude>` 或 `$`）
- 版本号从 GitHub releases 确认（如 v1.0.3 而非 v0.3.1）
- 安装命令必须匹配 TokRepo Quick Use / GitHub README 的真实命令
- BrowserFrame URL 必须精确（`github.com/openai/codex-plugin-cc` 不是 `github.com/openai/codex`）
- GitHub 数据必须真实：stars/forks/issues 从截图或 API 确认
- 终端输出的报错信息、代码审查结果要看起来合理逼真（真实的文件名、行号、错误类型）

**素材数量标准（不能偷懒）：**
- 每个产品至少收集 8-12 个素材源（截图+视频+logo+社区反馈）
- 每个品牌准备 logo + icon 两版
- 至少 3-4 个 YouTube 视频片段作为背景
- GitHub 至少 2 张截图（repo 首页 + README/Issues）
- TokRepo 页面截图
- 用 `tokrepo search` 而非浏览器找资产

**截图动态化铁律（不能只是静态放在那里）：**
- 截图停留 > 2 秒时必须有 zoom/pan/高亮动效
- zoom 参数：`interpolate(lf, [start, end], [1.0, 1.6-1.8])`，配合 `translate` 实现 pan
- 高亮标注：动态边框 `border: 3px solid rgba(color, ${pulse})` + `boxShadow` 脉冲
- 多截图联动：第一张 zoom in → 第二张从侧面滑入，避免两张静态并列
- 截图→终端无缝过渡：截图 zoom into 代码区域 → opacity 淡出 → 终端 fade in 在同一位置

### 视频片段获取方法
- `python3 -m yt_dlp -f 18 --extractor-args "youtube:player_client=android"` 下载（必须加 android client，否则 403）
- `--download-sections` 经常 403，改为下载全视频后 `ffmpeg -ss 0 -t 30 -i input.mp4 -c copy output.mp4`
- 竖屏转换：`ffmpeg -i input.mp4 -vf "crop=ih*9/16:ih,scale=1080:1920" -c:v libx264 -preset fast -crf 23 output_vert.mp4`
- 视频片段作为 8-12% opacity 背景层（用 `<OffthreadVideo>` + `<Sequence>`）
- 不同场景用不同视频片段，fade in/out 过渡（`interpolate` 控制 opacity）
- 视频背景在终端模拟场景中效果最好（增加"真实在运行"的感觉）
- 每条视频至少收集 3-4 个相关 YouTube 片段

### 代码模拟组件复用模式
- `ClaudeTerminal` 组件：prompt + 命令打字 + 输出逐行 stagger reveal + 标题栏双品牌标记 + 状态栏
- `CodeCompletionDemo` 组件：VS Code 主题 + 行号 + 语法高亮 + ghost text + 接受闪烁
- `BrowserFrame` 组件：三色圆点 + URL 栏 + 截图/视频内容
- 所有模拟 UI 的关键：**足够逼真的细节**（正确的颜色方案、真实的文件名、合理的数据）

### BrowserFrame 组件模板（可复用）
```tsx
const BrowserFrame: React.FC<{
  src: string; url?: string;
  style?: React.CSSProperties; imgStyle?: React.CSSProperties;
}> = ({ src, url, style, imgStyle }) => (
  <div style={{
    borderRadius: 14, overflow: "hidden",
    border: "1px solid rgba(255,255,255,0.12)",
    boxShadow: "0 8px 40px rgba(0,0,0,0.6)",
    ...style,
  }}>
    <div style={{
      background: "rgba(35,35,40,0.95)", padding: "7px 12px",
      display: "flex", alignItems: "center", gap: 6,
    }}>
      <div style={{ width: 10, height: 10, borderRadius: "50%", background: "#FF5F56" }} />
      <div style={{ width: 10, height: 10, borderRadius: "50%", background: "#FFBD2E" }} />
      <div style={{ width: 10, height: 10, borderRadius: "50%", background: "#27C93F" }} />
      {url && <div style={{ marginLeft: 10, flex: 1, background: "rgba(255,255,255,0.08)",
        borderRadius: 6, padding: "3px 10px" }}>
        <span style={{ fontFamily: MONO, fontSize: 11, color: "rgba(255,255,255,0.45)" }}>{url}</span>
      </div>}
    </div>
    <Img src={staticFile(src)} style={{ width: "100%", display: "block", ...imgStyle }} />
  </div>
);
```

## 十三-B、AI 视频融合标准（即梦 API）

### 核心原则：AI 视频不是点缀，是画面基底
- **每个场景都应考虑用 AI 视频**，不只是 Hook
- AI 视频必须和整体视觉风格统一（漫画风→AI也生成漫画风，科技风→AI也生成科技风）
- 在 AI 视频上叠加文字/UI 元素，而不是纯代码画面

### 贯穿角色
- **每条视频必须有一个主角形象贯穿全片**
- 角色在 AI 视频中保持一致的外观/风格
- 角色情绪随叙事变化：Hook（震惊）→ Problem（痛苦）→ Pivot（好奇）→ Demo（兴奋）→ CTA（满意）

### 即梦 API 使用
- 脚本：`jimeng_video.py` | AK/SK 已配置
- 竖屏：`--ratio 9:16` | 5秒：`--frames 121` | 10秒：`--frames 241`
- Prompt 要包含风格关键词（如 "comic book style", "manga art style"）
- 每个场景单独生成一段，保存到 `public/ai_clips/`

### 场景 AI 视频 Prompt 模板
- Hook: "[风格] dramatic close-up of [主角], [核心视觉冲击], cinematic lighting"
- Problem: "[风格] [主角] frustrated at desk, [具体痛点画面], dramatic"
- Pivot: "[风格] [主角] having eureka moment, light rays, transformation"
- Demo: "[风格] [主角] using futuristic interface, holographic UI, amazed expression"
- CTA: "[风格] [主角] confident and satisfied, product logo, call to action"

## 十四、OpenAI TTS 配音

- Base URL: `https://api.gptsapi.net`（代理）
- API Key: `sk-MxWcc873920d1ba5850b732d865936a7e9c1a1ae1b9quGgw`
- Model: `tts-1-hd`
- **默认 Voice**: `nova`（活力女声）— 2026-04-11 用户确认的默认选择，比 onyx 更活泼有感染力，更适合短视频节奏
- 备选 Voice: `onyx`（深沉男声，Fireship风格）、`shimmer`（柔和女声）、`alloy`（中性）
- **默认 Speed**: 1.15（nova 用 1.15，onyx 用 1.12）
- 切换声音后必须重跑 Whisper 重新生成 timings（因为不同声音时间戳会漂移 1-2s）

---
Source: https://tokrepo.com/en/workflows/91aeb22d-eff0-4310-abc6-811d2394b420
Author: henuwangkai