{"skill":{"slug":"whatsapp-video-mockup","displayName":"WhatsApp video maker","summary":"Create animated WhatsApp chat videos with realistic iPhone, dark mode UI, typing indicators, read receipts, and auto-scrolling for social media formats.","description":"# WhatsApp Video Skill\n\nCreate animated WhatsApp-style chat videos using Remotion. Perfect for X, TikTok, Instagram Reels.\n\n## Features\n\n- 📱 Realistic iPhone frame with Dynamic Island\n- 💬 WhatsApp dark mode UI (accurate colors, bubbles, timestamps)\n- 📜 Auto-scrolling as messages extend\n- 🔤 Large, readable fonts (optimized for mobile viewing)\n- 🎵 Message notification sounds\n- ✨ Spring animations on message appearance\n- ⌨️ Typing indicator (\"...\" bubbles)\n- 🔗 Link preview cards\n- ✅ Read receipts (blue checkmarks)\n- **Bold** and `code` formatting support\n\n## Default Settings\n\n- **Aspect ratio:** 4:5 (1080×1350) - optimal for X/Instagram feed\n- **No intro/outro** - starts and ends with the chat\n- **2x fonts** - readable on mobile devices\n- **Auto-scroll** - keeps all messages visible\n\n## Prerequisites\n\nThis skill requires the **Remotion Best Practices** skill:\n\n```bash\nnpx skills add remotion-dev/skills -a claude-code -y -g\n```\n\n## Quick Start\n\n```bash\ncd ~/Projects/remotion-test\n```\n\nEdit the conversation in `src/WhatsAppVideo.tsx`, then render:\n\n```bash\nnpx remotion render WhatsAppDemo out/my-video.mp4 --concurrency=4\n```\n\n## How to Create a New Video\n\n### 1. Define Your Messages\n\nEdit the `ChatMessages` component in `src/WhatsAppVideo.tsx`:\n\n```tsx\n// Incoming message (from assistant)\n<Message\n  text=\"Your message text here\"\n  isOutgoing={false}\n  time=\"8:40 AM\"\n  delay={125}  // Frame when message appears (30fps)\n/>\n\n// Outgoing message (from user)\n<Message\n  text=\"Your outgoing message\"\n  isOutgoing={true}\n  time=\"8:41 AM\"\n  delay={200}\n  showCheck={true}\n/>\n\n// Typing indicator (shows \"...\" bubbles)\n<TypingIndicator delay={80} duration={45} />\n```\n\n### 2. Timing Guide\n\n- **30 fps** = 30 frames per second\n- `delay={30}` = appears at 1 second\n- `delay={60}` = appears at 2 seconds\n- `duration={45}` = lasts 1.5 seconds\n\n**Typical flow:**\n1. First message: `delay={20}` (~0.7s)\n2. Typing indicator: `delay={80}`, `duration={45}`\n3. Response: `delay={125}` (after typing ends)\n4. Next typing: `delay={175}`, `duration={45}`\n5. Next response: `delay={220}`\n\n### 3. Adjust Scrolling\n\nIn `ChatMessages`, update the scroll interpolation based on your message count:\n\n```tsx\nconst scrollAmount = interpolate(\n  frame,\n  [scrollStart, scrollStart + 60, messageFrame, lastFrame],\n  [0, firstScroll, firstScroll, finalScroll],\n  { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" }\n);\n```\n\nIncrease scroll values if messages overflow.\n\n### 4. Text Formatting\n\nMessages support:\n- **Bold**: `**bold text**`\n- `Code`: backticks around text\n- Line breaks: `\\n` in the string\n- Emojis: just use them directly 🎬\n\n### 5. Customizing the Header\n\nIn `ChatHeader` component, change:\n- Name: `Pokey 🐡` → your assistant name\n- Status: `online`\n- Avatar emoji\n\n### 6. Update Duration\n\nIn `Root.tsx`, set `durationInFrames` to match your video length:\n- Count frames until last message appears + ~100 frames buffer\n- At 30fps: 450 frames = 15 seconds\n\n### 7. Render\n\n```bash\n# Standard render\nnpx remotion render WhatsAppDemo out/video.mp4 --concurrency=4\n\n# Higher quality\nnpx remotion render WhatsAppDemo out/video.mp4 --codec h264 --crf 18\n\n# Preview in browser\nnpm run dev\n```\n\n## Platform Dimensions\n\nEdit `Root.tsx` to change dimensions:\n\n| Platform | Dimensions | Aspect Ratio | Use Case |\n|----------|------------|--------------|----------|\n| **X/Instagram feed** | 1080×1350 | 4:5 | Default, most visible |\n| **X/TikTok/Reels** | 1080×1920 | 9:16 | Full vertical |\n| **X square** | 1080×1080 | 1:1 | Universal |\n| **YouTube/X landscape** | 1920×1080 | 16:9 | Horizontal |\n\n## Project Structure\n\n```\n~/Projects/remotion-test/\n├── src/\n│   ├── WhatsAppVideo.tsx   # Main video component\n│   └── Root.tsx            # Composition config\n├── public/\n│   └── sounds/\n│       ├── pop.mp3         # Message received\n│       └── send.mp3        # Message sent\n└── out/                    # Rendered videos\n```\n\n## Sound Effects\n\nSounds are triggered with Sequence:\n```tsx\n<Sequence from={125}>\n  <Audio src={staticFile(\"sounds/pop.mp3\")} volume={0.5} />\n</Sequence>\n```\n\n## Tips\n\n1. **Preview while editing**: Run `npm run dev` to see changes live\n2. **Frame-by-frame**: Use timeline scrubber to check timing\n3. **Keep messages concise**: Long messages may need scroll adjustment\n4. **Test on mobile**: Check readability at actual size\n\n## Asking Pokey to Generate\n\nJust describe the conversation:\n- \"WhatsApp video: me asking you to [X]\"\n- \"Make a chat video showing [conversation]\"\n\nPokey will write the messages, set timing, render, and send the MP4.\n","topics":["WhatsApp"],"tags":{"latest":"1.0.0"},"stats":{"comments":0,"downloads":2229,"installsAllTime":84,"installsCurrent":3,"stars":1,"versions":1},"createdAt":1768988598325,"updatedAt":1778485848771},"latestVersion":{"version":"1.0.0","createdAt":1768988598325,"changelog":"Initial release of WhatsApp Video Skill — create animated WhatsApp-style chat videos for social media.\n\n- Realistic iPhone frame with Dynamic Island and WhatsApp dark mode UI\n- Supports message animations, typing indicator, link previews, read receipts, and sound effects\n- Fully customizable messages, formatting, and timing for each chat bubble\n- Optimized 4:5 aspect ratio, large fonts, and auto-scrolling for mobile viewing\n- Includes setup instructions, how-to guide, and tips for best results","license":null},"metadata":null,"owner":{"handle":"danpeg","userId":"s1750ehhcp5wb15w55g0z962c5885xzn","displayName":"danpeg","image":"https://avatars.githubusercontent.com/u/134135?v=4"},"moderation":null}