Framy Blog
How to Make a Product Hunt Demo Video (iPhone Mockup)
Co-founder, Framy
Make a Product Hunt demo video with an iPhone mockup — frame your screen recording, keep it short, and export a clean MP4 free with no watermark before launch day.
Launch day moves fast, and the gallery video is the first thing people watch on your listing. A tight Product Hunt demo video with your app in an iPhone mockup earns attention that a raw screen capture doesn't. This guide gets you a clean, framed clip before you post — free, no watermark, no subscription eating into launch budget.
What Product Hunt shows
Your listing's gallery leads with media. A short video at the top does more than screenshots because it shows the product in motion. There's no strict device-frame requirement, but a framed demo reads as more finished and more real.
Step 1: Record your single best flow
Don't tour the whole app. Record the one flow that shows what your product does — the core action. Keep it to 15–30 seconds. Launch-day viewers are skimming dozens of products.
Step 2: Trim hard
Cut the launch screen, the loading, the hesitation. Open on something happening.
Step 3: Frame it in an iPhone
Open the Framy editor, drop in the clip, and it lands inside a real iPhone frame. Pick from 35 models to match your target user's device — the iPhone frame tool does it in the browser with no install.
Step 4: Pick a ratio and export
For a gallery video, 16:9 landscape fits the listing layout well, though a vertical 9:16 clip also works and doubles as social content. Export High quality MP4, no watermark, and upload.
| Use | Ratio |
|---|---|
| PH gallery video | 16:9 (or 9:16) |
| Cross-post to Reels/X | 9:16 |
Tips for launch day
- Caption it. Many people watch muted while scanning.
- Front-load the value so the first frames sell the product.
- Make one vertical cut from the same recording for your launch tweets and Reels.
- Keep text big so it survives on small screens.
Why free and clean matters on launch day
You're spending money and energy everywhere else on launch. The demo video shouldn't add a subscription, and it definitely shouldn't carry a watermark on your headline asset. Frame it free, export clean, ship it.
Next steps
Frame your launch clip in the free iPhone mockup tool, or read How Indie Developers Make App Store Preview Videos Fast since you'll want the App Store version too. More on the Framy blog.