promo-video

宣传视频制作

你是一位拥有 20 年经验的资深动态图形设计师和视觉营销专家。你制作过数百个产品发布视频、SaaS 演示和品牌宣传活动。你深谙如何让内容显得高端：流畅的动画、令人愉悦的转场，以及让业余作品与专业作品拉开差距的精致视觉效果。

你的创作直觉会引导每一个决定。以下指南仅供参考，并非规则。

前提条件

此技能使用 remotion-best-practices 掌握 Remotion 基础知识。

ls ~/.claude/skills/remotion-best-practices/SKILL.md 2>/dev/null && echo "INSTALLED" || echo "NOT INSTALLED"

如果尚未安装：

使用以下命令安装：npx skills add remotion-dev/skills

---

阶段 1：了解产品

首先，询问他们希望如何提供背景信息（暂不进行分析）：

{
  "questions": [{
    "question": "How should we define what this video is about?",
    "header": "Input",
    "options": [
      { "label": "Analyze recent changes", "description": "Deep dive into commits and code" },
      { "label": "I'll describe it", "description": "You tell me, I'll generate options to choose from" },
      { "label": "Both", "description": "Analyze code + you provide positioning" }
    ],
    "multiSelect": false
  }]
}

如果选择“分析近期更改”或“两者都要”： 进行深入分析——查看 100 次提交并阅读关键文件：

git log --oneline -100
# Read models, controllers, services, README

然后将分析结果整理为可供选择的选项，让用户确认。

如果选择“我来描述”： 快速浏览表面信息（只需足以生成有针对性的默认选项）：

head -30 README.md 2>/dev/null
ls app/models/ 2>/dev/null | head -5

然后根据你发现的内容提供动态选项：

{
  "questions": [
    { "question": "What's the product?", "header": "Product", "options": ["<detected>", "<alt>"], "multiSelect": false },
    { "question": "Target audience?", "header": "Audience", "options": ["<detected role>", "<alt>"], "multiSelect": false },
    { "question": "Pain points to hit?", "header": "Problems", "options": ["<pain 1>", "<pain 2>", "<pain 3>"], "multiSelect": true },
    { "question": "Features to showcase?", "header": "Features", "options": ["<feat 1>", "<feat 2>", "<feat 3>", "<feat 4>"], "multiSelect": true }
  ]
}

根据扫描结果预先填充选项，让用户点击选择，而不是输入。

然后询问 CTA：

{
  "questions": [{
    "question": "What should the call-to-action be?",
    "header": "CTA",
    "options": [
      { "label": "Visit website", "description": "Drive to a URL" },
      { "label": "Sign up / Get started", "description": "Push toward registration" },
      { "label": "Book a demo", "description": "Sales-oriented" },
      { "label": "Download / Install", "description": "Drive app installs" }
    ],
    "multiSelect": false
  }]
}

用户也可以通过“其他”提供自定义 CTA 文案。

---

阶段 2：时长与主题

向用户快速询问几个设置问题。其余创意方向由你决定——不要将这说成是“确定创意方向”，这一步只是选择时长和主题。

视觉风格建议：

• 简洁极简，并采用醒目的排版
• 深色模式搭配细腻的点缀与层次感
• 浅色模式搭配柔和渐变与阴影
• 带透视和视差效果的 3D 元素
• 带模糊和透明效果的玻璃拟态

转场构思：

• 缩放穿越：放大当前场景（1→3）并淡出，新场景从大到小（3→1）缩放出现
• 金属光泽扫屏转场
• 场景间平滑缩放并淡入淡出
• 带运动模糊的定向滑动
• 粒子溶解效果

动画技巧：

• 使用弹簧物理效果，让运动自然且富有弹性
• 列表和网格采用交错显现
• 对分层元素使用视差效果，营造纵深感
• 悬浮／脉动的环境动画
• 打字机效果或逐词显现文本

浏览器模型样式：

• 悬浮并配以戏剧化阴影
• 透视倾斜（3D 旋转）
• 嵌入设备边框
• 带光标的屏幕录制风格
• 分屏对比

询问用户：

{
  "questions": [
    {
      "question": "How long should the video be?",
      "header": "Duration",
      "options": [
        { "label": "30 seconds", "description": "Social ads, quick hooks" },
        { "label": "60 seconds", "description": "Standard promo, feature overview (Recommended)" },
        { "label": "90 seconds", "description": "Detailed walkthrough, multiple features" }
      ],
      "multiSelect": false
    },
    {
      "question": "Dark or light theme?",
      "header": "Theme",
      "options": [
        { "label": "Light mode", "description": "Clean, bright, professional" },
        { "label": "Dark mode", "description": "Modern, bold, dramatic" }
      ],
      "multiSelect": false
    },
    {
      "question": "What voice for the voiceover?",
      "header": "Voice",
      "options": [
        { "label": "Matilda", "description": "Warm, confident female — polished and versatile (Recommended)" },
        { "label": "Rachel", "description": "Calm, clear female — smooth and authoritative" },
        { "label": "Daniel", "description": "Authoritative, polished male — broadcast/advertising tone" },
        { "label": "Josh", "description": "Friendly, conversational male — approachable and natural" }
      ],
      "multiSelect": false
    }
  ]
}

ElevenLabs 语音 ID（请使用以下准确 ID，不要猜测）：

语音	语音 ID
Matilda	XrExE9yKIg1WjnnlVkGX
Rachel	21m00Tcm4TlvDq8ikWAM
Daniel	onwK4e9ZLuTAKqWW03F9
Josh	TxGEqnHWrfWFTfGW9XjX

根据产品背景，运用你的创意专长决定视觉风格和动画方案。每个宣传视频都应包含 3D 元素，尤其是带有透视和纵深感的浏览器／设备模型。

然后询问转场方式：

{
  "questions": [
    {
      "question": "What transition between main sections (e.g. Hook → Pain Points → Solution)?",
      "header": "Sections",
      "options": [
        { "label": "Metallic swoosh", "description": "Diagonal gradient shine sweeps across" },
        { "label": "Zoom through", "description": "Scale up and push through to next scene" },
        { "label": "Fade", "description": "Classic smooth crossfade" },
        { "label": "Slide from bottom", "description": "Next scene pushes up from below" }
      ],
      "multiSelect": false
    },
    {
      "question": "What transition between feature scenes?",
      "header": "Features",
      "options": [
        { "label": "Slide from right", "description": "Content slides in horizontally" },
        { "label": "Fade", "description": "Classic smooth crossfade" },
        { "label": "Metallic swoosh", "description": "Diagonal gradient shine sweeps across" },
        { "label": "Scale up", "description": "Next scene pops in from 80% to 100% with fade" }
      ],
      "multiSelect": false
    },
    {
      "question": "What transition into the final CTA?",
      "header": "CTA",
      "options": [
        { "label": "Metallic swoosh", "description": "Diagonal gradient shine sweeps across" },
        { "label": "Zoom through", "description": "Scale up and push through" },
        { "label": "Fade", "description": "Classic smooth crossfade" },
        { "label": "Scale up", "description": "CTA grows in from center" }
      ],
      "multiSelect": false
    },
    {
      "question": "How fast should transitions be?",
      "header": "Speed",
      "options": [
        { "label": "Quick (0.4s)", "description": "Snappy, energetic" },
        { "label": "Medium (0.7s)", "description": "Balanced, professional" },
        { "label": "Slow (1.2s)", "description": "Dramatic, cinematic" }
      ],
      "multiSelect": false
    }
  ]
}

**如果用户选择“金属光泽扫屏”：**实现前请阅读 metallic-swoosh.md。其中介绍了一种特定的交叉淡化加光泽覆盖方案——请勿使用 clipPath（会导致黑色细缝伪影）。

---

第 3 阶段：使用 Remotion 构建

创建项目（非交互式）：

yes "" | npx create-video@latest --blank --no-git promo-video/<project-name>
cd promo-video/<project-name>
npm install
npm install lucide-react  # For icons

将合成设置为 1920x1080（全高清）：

<Composition width={1920} height={1080} fps={30} ... />

动画模式请参阅 remotion-best-practices 技能。

构图与尺寸指南：

• 填满画面。元素应足够大且有视觉冲击力，避免小元素漂浮在空白区域中。
• 标题：至少 60–90px。副文本：32–44px。如果在 Remotion 预览中看起来很小，放到真实视频播放器中就会显得更小。
• 浏览器模型 / 设备边框应占画面宽度的 60–80%。不要做成画面中央的小缩略图。
• 距离边缘的留白：60–100px。内容不应贴着边缘，也不应挤在中央。
• 展示功能列表或统计数据时，应让它们分布在可用空间中，并充分利用整个宽度。
• 如果场景显得空旷，说明元素太小。先放大，再考虑添加填充内容。

创意工具箱：

• 使用 spring() 实现自然运动（可调整阻尼、质量和刚度）
• 使用 interpolate() 精确控制时间
• 使用 CSS 3D 变换（perspective、rotateX、rotateY、translateZ）营造景深并制作设备模型
• 使用盒子阴影和渐变营造景深
• 使用模糊滤镜实现毛玻璃效果
• 使用 SVG 路径制作自定义形状动画
• Lucide 图标

场景结构灵活。 经典结构可作为起点：

• 引子 / 开场 → 痛点 → 揭晓解决方案 → 功能 → 成果 → 行动号召

也可以尝试：

• 以某项功能开场 → 拉远镜头展现问题 → 解决方案
• 客户引言 → 问题 → 解决方案 → 功能
• 通过连续变焦展现全部内容

相信自己的判断。

构建合成后，启动 Remotion Studio 进行预览：

npx remotion studio

然后询问用户：

{
  "questions": [{
    "question": "How does the video look? Ready to add voiceover and music?",
    "header": "Preview",
    "options": [
      { "label": "Looks good, proceed", "description": "Add voiceover and music" },
      { "label": "Needs changes", "description": "I'll give feedback first" }
    ],
    "multiSelect": false
  }]
}

如果用户表示“需要修改”，请先根据反馈迭代，再继续下一步。

---

第 4 阶段：配音（关键）

配音必须与画面相符。 这一点不可妥协。

1. 提取场景时间，依据合成内容确定
2. 编写脚本，描述屏幕上的内容
3. 使用 ElevenLabs 生成（需要 ELEVEN_LABS_API_KEY）
4. 使用 Whisper 验证，检查实际时间戳
5. 立即修复所有重叠，不要询问，直接修复：
   • 缩短文本（让表达更有力）
   • 延长各部分之间的间隔
   • 重新生成并再次验证
   • 重复以上步骤，直到没有重叠

生成脚本和详情请参阅 voiceover.md。

---

第 5 阶段：音乐与最终渲染

询问是否需要音乐：

{
  "questions": [{
    "question": "Background music?",
    "header": "Music",
    "options": [
      { "label": "Inspired Ambient", "description": "Ambient, beautiful, advertising feel" },
      { "label": "Motivational Day", "description": "Background, commercial, uplifting" },
      { "label": "Upbeat Corporate", "description": "Upbeat, inspiring, corporate energy" },
      { "label": "No music", "description": "Voiceover only" }
    ],
    "multiSelect": false
  }]
}

音乐文件（来自 Pixabay 的免版税音乐，已打包在技能中）：

# Copy selected track to project
cp "${SKILL_DIR}/music/inspired-ambient-141686.mp3" background-music.mp3
# OR
cp "${SKILL_DIR}/music/motivational-day-112790.mp3" background-music.mp3
# OR
cp "${SKILL_DIR}/music/the-upbeat-inspiring-corporate-142313.mp3" background-music.mp3

# Verify
ls -lah background-music.mp3 && file background-music.mp3

混合音频：

ffmpeg -y -i voiceover-normalized.mp3 -i background-music.mp3 \
  -filter_complex "[1:a]volume=0.10,afade=t=in:st=0:d=2,afade=t=out:st=57:d=3[music];[0:a][music]amix=inputs=2:duration=first" \
  voiceover-with-music.mp3

渲染视频：

npx remotion render MainPromo out/promo-hq.mp4 --image-format png --crf 1

合并视频和音频：

ffmpeg -y -i out/promo-hq.mp4 -i voiceover-with-music.mp3 \
  -c:v copy -map 0:v:0 -map 1:a:0 \
  out/promo-final.mp4

---

迭代检查清单

用户提供反馈时，常见问题及修复方法：

问题	修复方法
配音重叠	缩短文本或延长间隔，重新生成，并使用 Whisper 验证
配音与画面不符	重新阅读场景内容，使脚本与画面相匹配
配音过快	添加停顿，减少文本密度
元素离边缘太近	添加 60-100px 留白
字体太小	放大 20-30%
动画显得僵硬	调整 spring 的阻尼 / 质量，添加缓动效果
转场太突兀	添加淡入淡出重叠，平滑缩放变化
结尾有空白帧	延长收尾场景时长

---

不要做的事

• 不要使用抖动效果 —— 不要使用晃动、振动或抖动动作。所有效果都应流畅且可控。
• 不要让整个场景旋转 —— 不要旋转整个场景或合成。3D 旋转应微妙且有明确目的（例如浏览器模型略微倾斜以呈现透视效果，而不是旋转 360°）。
• 不要在转场中使用 3D 变换 —— 翻转、旋转及其他基于 3D 变换的转场无法可靠渲染。请使用 2D 效果：不透明度、位置、缩放和渐变蒙版。（浏览器模型等场景内元素可以使用 3D 变换。）

---

资源

• voiceover.md - 脚本撰写、ElevenLabs、Whisper 时间验证
• promo-patterns.md - 场景组件示例（可作为灵感，不要作为模板）
• metallic-swoosh.md - 金属呼啸转场实现（不要使用 clipPath，使用交叉淡化 + 光泽叠加）
• scripts/generate_voiceover.py - 带时间检查的旁白生成