WhatsApp对话视频生成

技能简介

基于Remotion框架，将文本对话转换为带iPhone外框的WhatsApp风格动画视频。输出格式适配X、TikTok、Instagram Reels等平台的竖屏比例。

能做什么

• 生成带灵动岛设计的iPhone外框动画
• 模拟WhatsApp深色模式聊天界面（气泡、时间戳、已读标记）
• 自动滚动展示长对话内容
• 添加消息提示音与弹性出现动画
• 支持打字指示器、链接预览卡片、文字加粗与代码格式

使用说明

前置依赖安装：

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

创建视频步骤：

1. 进入项目目录：cd ~/Projects/remotion-test
2. 编辑 src/WhatsAppVideo.tsx 中的 ChatMessages 组件，定义消息内容与出现时机（delay参数按30fps计算）
3. 调整 Root.tsx 中的 durationInFrames 匹配视频总长度
4. 执行渲染：npx remotion render WhatsAppDemo out/video.mp4 --concurrency=4

实时预览运行 npm run dev，可在浏览器中逐帧检查时间轴。

输入与输出

见下方输入与输出表格。

风险提示

• 需预先安装Remotion Best Practices技能，否则无法运行
• 消息过多时需手动调整scrollAmount数值避免溢出截断
• 长文本在移动端显示效果需实际测试验证
• 音频文件需放置于public/sounds目录，缺失会导致静音

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/danpeg/whatsapp-video-mockup/SKILL.md
来源类型：GitHub仓库