← Back to Communication
Communication by @danpeg

whatsapp-video-mockup

whatsapp-video-mockup

WhatsApp Video Skill

Create animated WhatsApp-style chat videos using Remotion. Perfect for X, TikTok, Instagram Reels.

Features

  • 📱 Realistic iPhone frame with Dynamic Island
  • 💬 WhatsApp dark mode UI (accurate colors, bubbles, timestamps)
  • 📜 Auto-scrolling as messages extend
  • 🔤 Large, readable fonts (optimized for mobile viewing)
  • 🎵 Message notification sounds
  • ✨ Spring animations on message appearance
  • ⌨️ Typing indicator ("..." bubbles)
  • 🔗 Link preview cards
  • ✅ Read receipts (blue checkmarks)
  • Bold and code formatting support

Default Settings

  • Aspect ratio: 4:5 (1080×1350) - optimal for X/Instagram feed
  • No intro/outro - starts and ends with the chat
  • 2x fonts - readable on mobile devices
  • Auto-scroll - keeps all messages visible

Prerequisites

This skill requires the Remotion Best Practices skill:

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

Quick Start

cd ~/Projects/remotion-test

Edit the conversation in src/WhatsAppVideo.tsx, then render:

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

How to Create a New Video

1. Define Your Messages

Edit the ChatMessages component in src/WhatsAppVideo.tsx:

// Incoming message (from assistant)
<Message
  text="Your message text here"
  isOutgoing={false}
  time="8:40 AM"
  delay={125}  // Frame when message appears (30fps)
/>

// Outgoing message (from user)
<Message
  text="Your outgoing message"
  isOutgoing={true}
  time="8:41 AM"
  delay={200}
  showCheck={true}
/>

// Typing indicator (shows "..." bubbles)
<TypingIndicator delay={80} duration={45} />

2. Timing Guide

  • 30 fps = 30 frames per second
  • delay={30} = appears at 1 second
  • delay={60} = appears at 2 seconds
  • duration={45} = lasts 1.5 seconds

Typical flow:

  1. First message: delay={20} (~0.7s)
  2. Typing indicator: delay={80}, duration={45}
  3. Response: delay={125} (after typing ends)
  4. Next typing: delay={175}, duration={45}
  5. Next response: delay={220}

3. Adjust Scrolling

In ChatMessages, update the scroll interpolation based on your message count:

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

Increase scroll values if messages overflow.

4. Text Formatting

Messages support:

  • Bold: **bold text**
  • Code: backticks around text
  • Line breaks: \n in the string
  • Emojis: just use them directly 🎬

5. Customizing the Header

In ChatHeader component, change:

  • Name: Pokey 🐡 → your assistant name
  • Status: online
  • Avatar emoji

6. Update Duration

In Root.tsx, set durationInFrames to match your video length:

  • Count frames until last message appears + ~100 frames buffer
  • At 30fps: 450 frames = 15 seconds

7. Render

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

# Higher quality
npx remotion render WhatsAppDemo out/video.mp4 --codec h264 --crf 18

# Preview in browser
npm run dev

Platform Dimensions

Edit Root.tsx to change dimensions:

Platform Dimensions Aspect Ratio Use Case
X/Instagram feed 1080×1350 4:5 Default, most visible
X/TikTok/Reels 1080×1920 9:16 Full vertical
X square 1080×1080 1:1 Universal
YouTube/X landscape 1920×1080 16:9 Horizontal

Project Structure

~/Projects/remotion-test/
├── src/
│   ├── WhatsAppVideo.tsx   # Main video component
│   └── Root.tsx            # Composition config
├── public/
│   └── sounds/
│       ├── pop.mp3         # Message received
│       └── send.mp3        # Message sent
└── out/                    # Rendered videos

Sound Effects

Sounds are triggered with Sequence:

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

Tips

  1. Preview while editing: Run npm run dev to see changes live
  2. Frame-by-frame: Use timeline scrubber to check timing
  3. Keep messages concise: Long messages may need scroll adjustment
  4. Test on mobile: Check readability at actual size

Asking Pokey to Generate

Just describe the conversation:

  • "WhatsApp video: me asking you to [X]"
  • "Make a chat video showing [conversation]"

Pokey will write the messages, set timing, render, and send the MP4.