WhatsApp 视频制作技能

使用 Remotion 创建动画风格的 WhatsApp 聊天视频。完美适配 X、TikTok、Instagram Reels 等平台。

功能特性

• 📱 逼真的 iPhone 边框与动态岛显示
• 💬 WhatsApp 深色模式界面（精确配色、气泡、时间戳）
• 📜 消息超长时自动滚动
• 🔤 大号易读字体（针对移动端观看优化）
• 🎵 消息通知音效
• ✨ 消息出现时的弹性动画效果
• ⌨️ 输入状态指示器（"..." 气泡）
• 🔗 链接预览卡片
• ✅ 已读回执（蓝色对勾标记）
• 支持 粗体 和 代码 格式

默认设置

• 画面比例: 4:5 (1080×1350) - 适用于 X/Instagram 信息流
• 无片头/片尾 - 直接以聊天界面开始和结束
• 2 倍字体大小 - 确保在移动设备上清晰可读
• 自动滚动 - 保持所有消息可见

环境准备

此技能需要先安装 Remotion 最佳实践 技能包：

npx skills add remotion-dev/skills -a claude-code -y -g

快速开始

cd ~/Projects/remotion-test

编辑 src/WhatsAppVideo.tsx 中的对话内容，然后渲染视频：

npx remotion render WhatsAppDemo out/my-video.mp4 --concurrency=4

如何制作新视频

1. 定义消息内容

编辑 src/WhatsAppVideo.tsx 中的 ChatMessages 组件：

// 接收消息（来自助手）
<Message
  text="在此输入消息内容"
  isOutgoing={false}
  time="8:40 AM"
  delay={125}  // 消息出现的帧数（30fps）
/>

// 发送消息（来自用户）
<Message
  text="您发送的消息"
  isOutgoing={true}
  time="8:41 AM"
  delay={200}
  showCheck={true}
/>

// 输入指示器（显示 "..." 气泡）
<TypingIndicator delay={80} duration={45} />

2. 时间安排指南

• 30 fps = 每秒 30 帧
• delay={30} = 在第 1 秒出现
• delay={60} = 在第 2 秒出现
• duration={45} = 持续 1.5 秒

典型流程：
1. 第一条消息：delay={20} (~0.7秒)
2. 输入指示器：delay={80}, duration={45}
3. 回复消息：delay={125}（输入结束后）
4. 下一个输入：delay={175}, duration={45}
5. 下一个回复：delay={220}

3. 调整滚动设置

在 ChatMessages 中，根据消息数量更新滚动插值：

const scrollAmount = interpolate(
  frame,
  [scrollStart, scrollStart + 60, messageFrame, lastFrame],
  [0, firstScroll, firstScroll, finalScroll],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);

如果消息溢出屏幕，请增加滚动值。

4. 文本格式

消息支持以下格式：
- 粗体：**粗体文本**
- 代码：用反引号包裹文本
- 换行：在字符串中使用 \n
- 表情符号：直接使用 🎬

5. 自定义聊天头部

在 ChatHeader 组件中修改：
- 名称：将 Pokey 🐡 改为您的助手名称
- 状态：online
- 头像表情符号

6. 更新视频时长

在 Root.tsx 中，设置 durationInFrames 以匹配视频长度：
- 计算到最后一条消息出现的帧数 + 约 100 帧缓冲
- 30fps 下：450 帧 = 15 秒

7. 渲染视频

# 标准渲染
npx remotion render WhatsAppDemo out/video.mp4 --concurrency=4

# 更高质量
npx remotion render WhatsAppDemo out/video.mp4 --codec h264 --crf 18

# 浏览器预览
npm run dev

平台尺寸设置

编辑 Root.tsx 以更改尺寸：

项目结构

~/Projects/remotion-test/
├── src/
│   ├── WhatsAppVideo.tsx   # 主视频组件
│   └── Root.tsx            # 合成配置
├── public/
│   └── sounds/
│       ├── pop.mp3         # 消息接收音效
│       └── send.mp3        # 消息发送音效
└── out/                    # 渲染的视频文件

音效设置

使用 Sequence 触发音效：

<Sequence from={125}>
  <Audio src={staticFile("sounds/pop.mp3")} volume={0.5} />
</Sequence>

实用技巧

1. 编辑时实时预览：运行 npm run dev 查看实时变化
2. 逐帧检查：使用时间轴滑块检查时间安排
3. 保持消息简洁：长消息可能需要调整滚动设置
4. 在移动设备上测试：检查实际尺寸下的可读性

让 Pokey 生成视频

只需描述对话内容：
- "WhatsApp 视频：我请你 [做某事]"
- "制作一个展示 [对话内容] 的聊天视频"

Pokey 将编写消息、设置时间、渲染并发送 MP4 文件。