2026年4月12日·8 分钟阅读

Remotion AI Video Production Skill — Cinema-Grade Short Videos

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

HE
henuwangkai · Community
快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

一、最高优先级铁律

  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 组件模板（可复用）

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）

讨论

登录后参与讨论。
还没有评论，来写第一条吧。
◈首页🔍搜索👤我的