WhatsApp 视频技能

使用 Remotion 创建动画风格的 WhatsApp 式聊天视频，适用于 X（原 Twitter）、TikTok、Instagram Reels 等平台。

功能特性

• 📱 带有 Dynamic Island 的真实感 iPhone 边框
• 💬 WhatsApp 深色模式 UI（配色、气泡样式、时间戳均高度还原）
• 📜 消息超出可视区域时自动滚动
• 🔤 大号易读字体（专为移动端观看优化）
• 🎵 消息通知音效
• ✨ 消息出现时使用 Spring 动画
• ⌨️ 输入状态指示器（显示 “...” 气泡）
• 🔗 链接预览卡片
• ✅ 已读回执（蓝色对勾）
• 支持 加粗 和 code 格式化

默认设置

• 画面比例：4:5（1080×1350）—— 适配 X / Instagram 信息流的最佳比例
• 无片头/片尾 —— 视频直接从聊天界面开始并结束
• 字体缩放 2 倍 —— 确保在移动设备上清晰可读
• 自动滚动 —— 始终确保所有消息可见

前置依赖

本技能需先安装 Remotion Best Practices 技能：

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 组件：

// 接收消息（来自 assistant）


// 发送消息（来自用户）


// 输入状态指示器（显示 “...” 气泡）

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（字符串中直接写）
• Emoji：直接插入即可 🎬

5. 自定义顶部栏

在 ChatHeader 组件中修改以下字段：

• 名称：Pokey 🐡 → 替换为你自己的 assistant 名称
• 在线状态：online
• 头像 Emoji

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 组件触发：

使用建议

1. 边编辑边预览：运行 npm run dev 实时查看修改效果
2. 逐帧检查：使用时间轴拖拽工具精确校验节奏
3. 精简消息内容：过长消息可能需要额外调整滚动逻辑
4. 真机测试：务必在真实移动设备上验证可读性与显示效果

让 Pokey 自动生成

只需描述你想要的对话内容：

• “WhatsApp 视频：我向你询问 [X]”
• “制作一段展示 [对话内容] 的聊天视频”

Pokey 将自动生成完整消息序列、设定精准时间点、完成渲染，并将 MP4 文件发送给你。