How to make an app or website mockup video
To make an app or website demo video, record your screen, place the recording on a 3D device in a mockup generator, add one slow camera move, and export in the length and format of the channel. For the App Store, upload the plain screen recording instead: Apple allows only captures of the app itself.
What is an app or website demo video?
A demo video is a short clip that shows a product working: a few taps in an app, or a scroll and a click on a site. It answers "what does this do?" faster than a screenshot and sits on a landing page, in a store listing, in a case study or in a social post.
The recording is the content. The 3D device around it is packaging, and it only helps where the video appears on a page you control or in a post, not in a store listing, as explained below.
How do I record the screen?
Record the real product in the smallest useful flow: one task, from the first screen to the result. On an iPhone or iPad, start a recording from Control Center. On a Mac, use QuickTime Player, File, New Screen Recording, and record the browser window only, not the whole desktop.
- Fill the app with believable data before you record. Empty lists and "Lorem ipsum" make a demo look unfinished.
- Turn on Do Not Disturb so no notification lands in the clip.
- Move slowly and pause for a second after each tap, because the viewer needs time to read the result.
- Keep the flow to one idea. If you have three features, make three clips.
How do I put the recording on a 3D device?
Open the clip in a mockup generator, choose a device scene and drop the video onto the screen. In the ls.graphics Live Mockups editor a screen takes an image or a video up to five minutes long, so there is nothing to convert first, and you export the result as a video from the same page.
Pick the device that matches the product: a phone for an app, a laptop for a web app or a site. A clean background keeps the eye on the screen, and a tilt of a few degrees looks more natural than a flat, straight-on view.
What camera moves work in a demo video?
One slow, simple move works best: a gentle push in toward the screen, or a small turn of the device while the recording plays. The camera should help the viewer read the screen, not compete with it.
- Start wide so the viewer sees the device, then move closer when the key action happens.
- Ease in and out instead of moving at a constant speed; abrupt starts feel cheap.
- Avoid spinning the device while text on the screen needs to be read.
- Use the same move across a set of videos so they look like one product family.
If you want to design the move yourself, 3d Studio is the ls.graphics mockup video maker: you start from one of its animation presets and shape the camera, the device and the timing with keyframes on a timeline. Live Mockups scenes are already animated, so you only add your screen.
How long should the video be, and which format?
It depends on where it appears. The App Store has hard rules, Google Play has few, and on your own site the limit is the viewer's patience.
- App Store: Apple's app preview specifications set a length of 15 to 30 seconds, up to three previews per device size and language, H.264 in .mov, .m4v or .mp4, a maximum of 30 frames per second and a file size of 500 MB. A portrait preview for the 6.9-inch iPhone class is 886 x 1920 px.
- Google Play: the preview video is a YouTube link. Google sets no maximum length, but only the first 30 seconds autoplay, and it recommends showing the real app within the first 10 seconds.
- Your site or a post: there is no official limit. As a rule of thumb, aim for 10 to 20 seconds that make one point, and loop short clips.
Apple's review guideline 2.3.4 says previews may only use video screen captures of the app itself, with narration and text or video overlays allowed. That means a 3D device mockup does not belong in an App Store preview. Use the raw recording there, and use the mockup video for your landing page, ads and social posts.
MP4 or WebM: which should I use for a website?
Use MP4 for a video with a solid background, and WebM when the video needs a transparent background so it sits directly on your page. A WebM file can carry an alpha channel; a plain MP4 cannot.
In ls.graphics, scenes with a transparent background export as WebM with real alpha, so the clip can sit on top of any page or edit. One catch: MDN notes that Safari does not support alpha transparency in VP9, the codec WebM files commonly use. Test the page in Safari, and keep a fallback, such as an MP4 on a solid color or a still image.
Whichever format you use, give the video a poster image, mute it if it autoplays, and keep the file small so the page loads fast. If you would rather not host files at all, Live Mockups can also embed the scene on a page with a snippet you paste into Framer, Webflow or any HTML page.
Which scenes work for demo videos?
Scenes with one clear device and a quiet background work best, because the screen stays the focus. Five from the ls.graphics library to start with:
- Animated iPhone mockup, a tilted phone on a dark gradient for a mobile app
- Animated iPad Pro mockup, a floating tablet for a tablet app or dashboard
- MacBook Air looped animation, an open laptop for a web app
- MacBook Pro 16 inch, scene 12, a side view for a site walkthrough
- Video iPhones mockup, two phones for showing two screens of a flow
More motion-ready scenes are in the animated mockups category.
FAQ
How do I make an app promo video without After Effects?
Record the app on the phone, put the recording on an animated iPhone scene in an online editor and export an MP4. Live Mockups scenes already move, so there are no keyframes to set; 3d Studio is there if you want to design the camera move yourself.
How long should an app demo video be?
For the App Store, 15 to 30 seconds. For your own site or social posts, 10 to 20 seconds that make a single point is a good rule of thumb. Cut anything that does not help someone decide.
Can I use a 3D device mockup in an App Store preview?
No. Apple's guideline 2.3.4 limits previews to screen captures of the app itself, so upload the raw recording and keep the mockup video for other channels.
How do I make a video with a transparent background?
Choose a scene with a transparent background and export it as WebM, which keeps the alpha channel. Check playback in Safari, since it does not support alpha in VP9.
Do I need to install anything?
No. Both Live Mockups and 3d Studio are online editors: you open a scene, edit it and export it in the browser.