whatsapp-video-mockup

核心用法：该技能基于 Remotion 视频渲染框架，允许用户通过编辑 React 组件（TSX 文件）来定义 WhatsApp 聊天对话的时间轴、内容和动画效果。用户需在 WhatsAppVideo.tsx 中配置消息内容、发送者类型、延迟时间和持续时间，利用 Remotion 的帧动画系统控制消息出现时机，最终通过 CLI 命令渲染为 MP4 视频。

显著优点：UI 还原度极高，包含 iPhone 动态岛、深色模式、已读回执、链接预览等细节；支持多平台尺寸预设（4:5、9:16、16:9 等）；具备自动滚动、弹性动画、音效反馈等专业功能；基于代码的配置方式提供了极高的自定义灵活性，适合批量生成或模板化生产。

潜在缺点：对用户技术要求较高，需要掌握 React/TypeScript 基础和 Remotion 概念；时间轴调整需手动计算帧数，操作繁琐；依赖 remotion-dev/skills 前置技能，环境配置较复杂；输出质量受本地硬件性能限制。

适合群体：社交媒体内容创作者、短视频运营人员、数字营销从业者、具备前端基础的开发者，以及需要将对话内容可视化的教育工作者或产品经理。

使用风险：虽然代码本身无恶意行为，但来源为个人开发者（T3），建议生产环境使用前进行代码审计；generate.sh 脚本会自动打开输出文件，虽为正常功能但需注意；项目依赖 Node.js 环境和 Remotion 生态，存在版本兼容性风险；渲染过程消耗大量计算资源，长时间视频可能导致内存占用过高。

核心用法

该 Skill 基于 React + Remotion 框架，将代码转化为高保真 WhatsApp 聊天动画视频。用户只需编辑 src/WhatsAppVideo.tsx 中的消息序列，定义每条消息的内容、发送方、时间戳和出现时机（以帧为单位，30fps），即可生成带弹簧动画、打字指示器、已读回执、链接预览等完整交互细节的 MP4 视频。

核心工作流：
1. 配置对话：使用 <Message> 组件定义收/发消息，delay 控制出现帧
2. 微调时序：通过 duration 设置打字指示器停留时长，用 interpolate 调整自动滚动
3. 适配平台：修改 Root.tsx 中的尺寸（4:5 默认适合 Instagram/X，9:16 适合短视频平台）
4. 渲染输出：CLI 命令一键导出，--concurrency 加速，--crf 18 提升画质

显著优点

• 视觉还原度高：精准复刻 iPhone 灵动岛、WhatsApp 暗黑模式配色、消息气泡形态
• 动画细腻：Spring 物理动画让消息弹入自然，自动滚动模拟真实聊天阅读体验
• 多平台原生适配：内置 4:5、9:16、1:1、16:9 四种比例，无需后期裁切
• 开发体验友好：热重载预览（npm run dev）、帧级时间轴 scrubber、类型安全
• 零外部依赖：纯本地渲染，无 API 密钥、无网络请求、无数据隐私风险

潜在局限

• 学习曲线：需理解 Remotion 的「帧即时间」模型，对非开发者门槛较高
• 手动调参：复杂对话的滚动偏移量需人工计算，长对话易出现裁切或留白
• 字体固定：2x 放大策略虽保可读性，但不支持自定义字体或品牌字体植入
• 音效局限：仅内置 pop/send 两种音效，不支持动态语音合成或 BGM 混音

适合人群

• 内容创作者：快速产出社交媒体短视频（教程、产品演示、幽默对话）
• 开发者/设计师：需要程序化生成高质量 UI 动画，替代 After Effects 手工制作
• 营销团队：批量生成个性化 WhatsApp mockup 用于广告素材 A/B 测试

常规风险

• 版权边界：WhatsApp 界面受 Meta 商标保护，商业大规模分发需评估法律风险
• 来源可信度：作者为个人开发者（T3），长期维护承诺未明确，建议锁定版本或 fork 维护
• Remotion 版本锁定：依赖特定技能体系（remotion-dev/skills），上游 breaking change 可能影响兼容性