How to Show an App on a Phone Mockup in a Video

Step by step

1. 1

   Choose the device and the motion

   Phone Scroll fits a single long screen such as a feed. Browser Window fits a website, because its URL types itself before the page loads in. Click Zoom Demo fits a feature walkthrough, since a cursor clicks your points while the view pushes in. App Carousel shows up to five different app screens in a row.

2. 2

   Load your screens

   Upload an image under Screenshot, or pick a built-in layout under Screen and rewrite its Title and Labels. On Browser Window, Title is the address that types in. Screen theme switches the interface between dark and light. Click Zoom Demo adds Points for the cursor stops, and App Carousel takes Screenshot 2 through Screenshot 5.

3. 3

   Set the pace and the frame

   Browser Window runs 5 seconds, while Phone Scroll and Click Zoom Demo run 10, and Duration extends any of them up to a minute. Lower Speed on Phone Scroll if viewers need to read the screen. Phones suit 9:16 and browsers suit 16:9. Scale changes how much of the frame the device takes up.

4. 4

   Export MP4 unless it floats

   All 14 presets ship on a solid background that fills the frame, so MP4 is the default. To float a device over your own footage, set Background to Transparent. That needs alpha, so export a PNG sequence for Premiere Pro or After Effects, or WebM for CapCut or a landing page.

5. 5

   Put it in the edit

   In DaVinci Resolve, drop the MP4 into the media pool and edit it between your presenter shots. For a floating phone in Premiere Pro, choose File > Import, select the first frame, tick Image Sequence, then set the frame rate in Interpret Footage. On a landing page, the WebM plays in a video element.

Where it is used

• App launch videos

  A startup uploads real screens to App Carousel for the launch trailer, and Phone Scroll for the feed, which saves filming a handheld phone in a studio with glare to fight.

• Website feature tours

  A software company turns a screenshot into Click Zoom Demo for its pricing or help page, with the cursor clicking each point it wants a visitor to notice before signing up.

• Design portfolio reels

  A freelance designer uploads finished screens to Screen Grid Wall or Responsive Showcase, then uses the clip as the opening shot of a case study on their own site.

Presets

14

Default length

5 to 10 seconds

Best export

MP4; PNG sequence or WebM to float the device

Aspect ratios

16:9, 9:16, 1:1, 4:5

Which format should you export?

MP4 when the mockup fills the frame, transparent WebM when the device floats over a background you are already using.

Format

MP4 · WebM · PNG sequence

Alpha

WebM or PNG sequence

Resolution

720p to 8K

Aspect

16:9 · 9:16 · 1:1 · 4:5

License

Commercial use included

Three tips that make it look intentional

• Upload a screenshot at the device's aspect ratio so nothing is cropped.
• One scroll or one rotation per clip; combine them in the edit, not the preset.
• Keep the device centered for social and offset for wide title frames.

Three things people get wrong

• Using a screenshot taken at the wrong aspect ratio, which letterboxes inside the device and gives the fake away.
• Scrolling faster than a thumb moves.
• Showing a phone with a status bar that says 9:41 while the rest of the video is set in the evening.

Frequently asked