Screen recording → device mockup video

how it works

How to make an app promo video from a screen recording

Record your app, drop the recording into the mockup maker, pick a phone or browser frame, and export an animated device-frame video. The free browser export carries a small watermark; the desktop app renders it full-quality and clean.

1. Record your screen — any recorder works, portrait for phone frames.
2. Drop the recording here and choose the device frame.
3. Preview the framing and motion live in the browser.
4. Export — or open it in the desktop app for the full-quality version.

before you record

Record it right and the framing takes care of itself

A device frame crops to a fixed aspect ratio, so a recording captured at the wrong shape either letterboxes or loses its edges. Matching the shape at capture time costs nothing and saves a re-record.

what to show

What belongs in an app promo video

App store previews and social promos are watched muted, in a feed, by someone who has not decided to care yet. That rules out the slow build. Open on the app already doing the thing it is best at, not a splash screen or a sign-up flow. The first frame is the only one guaranteed to be seen.

Show one job per promo. A framed recording of a single complete task reads as proof; a montage of six features reads as a menu and gets skipped. If you have six features worth showing, that is six short videos, and re-rendering variants of one project is far cheaper than producing six films. Keep text overlays short enough to read at phone size, and put the app name in the last two seconds. In the first two it competes with the hook for attention nobody has given you yet.

where it goes

Store listings, ads and social all want different cuts

A framed recording is rarely one deliverable. The app stores, paid social and your own landing page each expect a different length, shape and opening, and a single export that tries to satisfy all of them usually satisfies none. Store rules change without much notice, so treat the numbers below as the shape of the problem and check the current guidelines before you submit.

the limits

What a device frame fixes, and what it hides

A frame does three useful things. It tells the viewer what kind of product this is without a sentence of explanation. It gives an odd-shaped recording a deliberate edge, so a portrait capture stops looking like a mistake in a landscape layout. And it adds a small amount of visual craft to footage that is, underneath, just a screen recording.

What it cannot do is rescue the recording inside it. A frame shrinks your app to perhaps half the canvas width, so every legibility problem gets worse. Small text that was marginal full-bleed becomes unreadable framed. Jerky scrolling is more obvious against a static bezel, not less. A cluttered screen stays cluttered. If the recording is weak, framing it produces a well-presented weak recording.

The common failure is using a frame to look finished. A device mockup reads as production value, which makes it tempting as a substitute for editing. The videos that work still do the ordinary work: one job per video, the app already doing the thing in the first frame, a pause on each screen long enough to register, and an ending that holds instead of cutting. The frame is the last five percent, and it is worth exactly that much.

the recording

Getting a clean take without a studio

Almost every problem in a finished app promo was introduced at capture, where it costs nothing to fix, and surfaces in the edit, where it costs a re-record. A few minutes of preparation removes most of them.

Decide what the video proves before pressing record. A promo that shows one complete task — something started and finished — is an argument. A promo that tours five screens is a menu, and menus do not convert. Write the single sentence you want a viewer to repeat afterwards, then record only what supports it. Everything else is a second video.

Rehearse the run once without recording. Screen capture is unforgiving of hesitation. A half-second pause while you remember which tab to click reads as the product being slow, not you. The second take is nearly always usable where the first is not, and it costs a minute.

Record more than you need at both ends. A couple of seconds of stillness before the first interaction and after the last gives room to trim to a clean start and to hold the final state, A promo that cuts the instant an action completes denies the viewer the moment where the result registers. Keep the original capture at full resolution too. Framed exports are derivatives, and the day you need a different aspect ratio or a longer cut, having the source turns a reshoot into an edit.

If the promo needs narration, record the voice separately instead of talking while you drive the UI. Your mouse hand and your speaking voice rarely settle into the same rhythm, and a separate voice track can be re-recorded on its own without redoing the capture. Then watch it once on a phone before publishing. Everything about a screen recording looks generous on the machine that made it. Text size, pacing and contrast all get harder on a six-inch display in daylight, which is where the video will be seen.

which frame

Phone frame or browser frame?

The frame should match where the product actually runs, and the temptation is always to pick the one that looks better rather than the one that is true. A web app shown in a phone frame reads as a mobile app, and the mismatch does real damage. Viewers arrive expecting an app store listing, do not find one, and leave.

A phone frame suits anything used primarily on mobile, and it carries an extra signal beyond the shape, implying portability, notifications, something you carry. It also crops hard. A dense dashboard squeezed into a portrait frame loses the density that made it worth showing, and the text becomes unreadable at feed size well before the layout stops making sense.

A browser frame suits anything with a URL, and it does one job phones cannot. It shows the address bar. For a product whose credibility rests on being a real, reachable service, a visible domain is a small piece of proof, and it costs you nothing to include. The tab and window chrome also date a video less quickly than a phone bezel does, since a specific handset silhouette looks old within a couple of years and a browser window does not.

When the product is genuinely both, make two videos rather than one compromise. They share a script and most of the work, the recordings differ, and each lands correctly in its own context. The mistake is the single landscape recording letterboxed into a phone, which looks like neither and signals that nobody checked.