🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
BytesAgain β€Ί Skills β€Ί WhatsApp video maker
πŸ¦€ ClawHub

WhatsApp video maker

by @danpeg

Create animated WhatsApp chat videos with realistic iPhone, dark mode UI, typing indicators, read receipts, and auto-scrolling for social media formats.

Versionv1.0.0
Downloads2,164
Installs3
Stars⭐ 1
#video#social-media#legal#gaming
TERMINAL
clawhub install whatsapp-video-mockup

πŸ“– About This Skill

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)

    // Outgoing message (from user)

    // Typing indicator (shows "..." bubbles)

    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:

    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.

    πŸ’‘ Examples

    cd ~/Projects/remotion-test

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

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

    βš™οΈ Configuration

    This skill requires the Remotion Best Practices skill:

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

    πŸ“‹ Tips & Best Practices

    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