iPhone Mockup Video of Your Web App, Without Editing
The usual way to make an iPhone mockup video is two jobs: record your app on a phone, then drop the clip into a mockup template in a video editor and line up the corners. For a responsive web app you can skip both. Klevo records your app in a phone-sized browser with touch, shows each tap as a ripple, and renders the result inside a phone frame drawn after the iPhone 15 Pro (Dynamic Island, status bar, home indicator) on a background in your brand color. You describe the flow to Claude or ChatGPT and get the MP4 back, in 9:16 for stories or 16:9 for a landing page.
Why is a mockup template slow for app demos?
The template is the easy part. The work is around it: a clean screen recording from a real phone, notifications turned off, the clock set, the clip masked into the screen area, then exported once per format. When the app changes, you do it all again. And a recording from your own phone shows your own battery level and carrier.
How does Klevo make the mockup video?
- Connect Klevo to Claude, ChatGPT, Cursor or Claude Code (setup guide).
- Ask for the mobile device. “Record a demo of adding a task on https://staging.myapp.com, mobile device, 9:16, phone frame.” The page opens at a phone width with touch and a mobile user agent, so your responsive layout is the one a phone visitor sees.
- The AI taps through the flow. One step at a time, with a screenshot after each. Taps and swipes become ripples in the video; there is no cursor on a phone.
- Klevo composes the frame. The page fills the phone’s display under a status bar showing 9:41, signal, Wi-Fi and battery, drawn in your page’s top color.
- Render other shapes from the same steps. “Now 16:9” puts the phone in the middle of a wide canvas for a landing page section.
The mobile habits (short captions, bigger tap targets, what to avoid) are in record a mobile demo of a responsive web app.
Which device frame should you pick?
| Frame | Looks like | Use it for |
|---|---|---|
| Phone | iPhone 15 Pro style: rim, Dynamic Island, status bar, home indicator | Stories, Reels, Shorts, mobile landing sections |
| Android | Rounded phone with a hole-punch camera | Android-heavy audiences |
| Tablet | Rounded, thin bezel | iPad-sized layouts, education and field apps |
| Browser | Window with an address bar | The desktop version of the same flow |
| None | Just the page | Embeds where your site already provides the frame |
On Free, a mobile recording comes in the phone frame by default; choosing another frame, or none, is a Pro option. Demo video formats and device frames by channel covers every channel.
Which format fits where?
| Where it goes | Format | What you see |
|---|---|---|
| Stories, Reels, Shorts | 9:16 | The phone fills the canvas |
| Landing page | 16:9 | The phone centered on your background |
| Feed post | 4:5 or 1:1 | The phone in a tall or square tile |
On Pro you can set the background to a solid color or a gradient, and the font of the captions to any Google Font.
What if it is a native iOS app?
Klevo’s live recording opens web pages, so a native app cannot be driven. You can still upload a screen recording of it: the AI picks the moments that tell the flow as prints, and Klevo adds the taps and captions inside the frame. See AI screen recording for how the two ways differ.
What does it cost?
| Plan | Price | What you get |
|---|---|---|
| Free | $0 | 3 videos a month, 720p, up to 20 steps, small watermark, 10 voice credits to start |
| Pro | $19 a month or $149 a year | 1080p without the watermark, every device frame, any Google Font, your background and brand, up to 120 steps |
| Ultra | $49 a month or $399 a year | Everything in Pro, up to 240 steps, more voice credits |
Your first Pro or Ultra subscription is free for 14 days, then $19 or $49 a month; cancel before the trial ends and you pay nothing. See the pricing section.
What is the next step?
Try it on your mobile signup flow. Create a free account and ask for that flow on the mobile device in 9:16. If the app needs a login, save it as a secret first (record a demo of an app behind a login).
FAQ
Can I put an existing video into the phone frame?
Upload the screen recording and the AI builds the demo from prints of it, inside the frame. Klevo does not place full video clips into a frame.
Does the status bar show my real battery and time?
No. The status bar is drawn: 9:41 with signal, Wi-Fi and battery icons, in your page’s top color.
Can I show the same flow on desktop and phone?
Yes. Re-render the saved script with the other device instead of recording again; the layout follows your responsive CSS (product launch video shows how one flow covers every channel).