Mobile Mockup

Put your app screenshots on the screen of a 3D phone. Visitors scroll each screenshot inside the display and move between screens with the dock or the arrow keys.

Create a Mobile Mockup

What is a Mobile Mockup?

A Mobile Mockup project shows your screenshots on a 3D phone. One image is one screen. Tall screenshots are not shrunk to fit: the visitor scrolls them inside the display, the same way they would scroll the real app. Upload five screenshots and you get five screens the visitor pages through one at a time. The phone is a real model with a display mesh of its own, 645 KB in total, so the Dynamic Island is modelled geometry and not a shape drawn over your screenshot.

One tall screenshot per screen, scrolled inside the phone display
Wheel, trackpad, or a vertical drag on the device to scroll the current screen
The navigation dock and the arrow keys to move between screens
Drag the backdrop to turn the phone, and switch on the dock zoom buttons to read small text
Clickable hotspots anywhere on a screenshot, including the parts a visitor has to scroll to reach
A screen counter that also shows the screen title, plus the usual links dock
Works on phones and tablets, where a drag replaces the wheel

Best use cases

App demos

Show a mobile app screen by screen without sending anyone to an app store

Onboarding flows

One step per screen, in the order a new user would meet them

Prototype reviews

Share design exports with a client and let them scroll each screen in full

Client presentations

Present the mobile build inside a proposal or a case study

Mobile design portfolios

Collect the apps and mobile sites you have designed, one screen each

Responsive views

Show the phone version of a site, next to the desktop one or on its own

Creating a Mobile Mockup

Step 1: Upload your screenshots

In the project editor, open the Content tab and add one image per screen:

Any image format your browser opens, JPG, PNG and WebP included. A PDF works too, and each page becomes one screen
One image is one screen, so a full length capture goes in as it is, with no cropping
Upload several files at once, or import one from a URL
A PDF is limited to 200 pages and 50 MB per file, and the links inside it become hotspots on the screens they were on
Screenshots are optimized automatically for fast loading

Capture in portrait, around 1200px wide, and let the image be as tall as the screen really is. The width is fitted to the display and the height is what the visitor scrolls.

Step 2: Order and name the screens

The order in the Content tab is the order visitors page through:

Drag a screen to move it
Give each screen a title, shown in the screen counter, so the counter has to stay on for titles to be visible
Delete a screen you no longer want, or clear every screen at once from the Content menu
Add more screens at any time

Step 3: Set the screen and the scrolling

Adjust how the display looks and how it moves in the Settings tab:

Device color: tints the phone body, white being the model as built
Screen background: the color behind your screenshot
Screen brightness, contrast, and saturation: all start at 1, which is the image exactly as you uploaded it
Screen counter: show or hide the position and the screen title
Scroll speed and scroll damping: how far one wheel notch travels and how quickly it settles

Step 4: Add hotspots

Place clickable hotspots on a screenshot to open a link, jump to another screen, or show a note. A hotspot is anchored to the whole image, not to the visible part, so it stays on the section it belongs to as the visitor scrolls. Both mockups draw them on the display, and they stay tappable on a phone, which is how a flow gets walked.

Mobile Mockup settings

The display and the scrolling have their own sections in the Settings tab. Backgrounds, the links dock, zoom, and rotation use the same panels as the other project types.

Device color

Tints the phone body. It starts at pure white, which is the model exactly as it was built, and any other color tints that finish rather than repainting it.

Screen background

The color painted behind your screenshot. It also fills the space above and below when an image is shorter than the display, so pick something close to your app background.

Screen brightness

How lit the display looks, from 0.2 to 1.6. It starts at 1, which is exactly the pixels you uploaded: below that dims the screen, above it blows it out the way a phone at full brightness does.

Screen contrast

Applied to the screenshot as it is drawn, from 0.5 to 2, starting at 1 for the image untouched. Raise it a little when a flat design loses its edges on the small display.

Screen saturation

The same idea for color, from 0 to 2 and starting at 1. Zero renders the screenshot in greyscale, which is a quick way to show a wireframe without exporting one.

Screen counter

A small badge with the screen title first and the position after it, Pricing · 2 / 5 for example, or just 2 / 5 when the screen has no title. It is where titles appear, so turning it off hides them too, which is what you want for a single screenshot.

Scroll speed

How far one notch of the wheel moves the content. Lower it for a very long screen so visitors can stop where they mean to.

Scroll damping

How quickly the content catches up with the wheel. Low values glide to a stop, high values feel immediate.

Scene background

The backdrop behind the phone: a solid color, a gradient, a pattern, or an image of your own.

How visitors navigate

There are two separate movements here. The content moves inside the screen, and the screens change one at a time. Neither one triggers the other.

Scroll inside the screen

The wheel, a trackpad, or a vertical drag that starts on the phone moves the current screenshot up and down. The Up and Down keys and Page Up and Page Down do the same.

Change screen

The dock buttons move between screens, and so do Left and Right, with Home and End jumping to the first and the last. Reaching the bottom of a screen does not advance to the next one, and every screen opens at the top.

Turn the phone

A drag that starts on the backdrop turns the device up to 75 degrees left and right and 40 degrees up and down, then it springs back to face front when released. A drag that starts on the phone scrolls instead of turning.

Zoom

The zoom buttons move the camera closer, which is how a visitor reads small body text in a screenshot. They are off until you switch them on in the Menu tab. The wheel always scrolls the screenshot, it never zooms.

What it does not do

Some of this is deliberate and some of it is simply not built yet. Either way it is better known before you record a demo:

A PDF page rarely scrolls on a phone. Fitted to this display's width a page still falls short of its height, so it sits centred with bands above and below. Full length captures are what scroll here.
Scrolling to the bottom of a screen does not move to the next one. Changing screen is always a deliberate action.
One screen is on the display at a time. The other screens are not visible around it.
The Screen section tints the phone body, but pure white means the factory finish, so pick #fefefe for a white body.
There is one handset, one flagship phone. No other model and no tablet yet.

Tips for great Mobile Mockups

Export one full length capture per screen instead of stitching sections together
Capture in portrait: the display is far taller than it is wide, and a landscape image leaves bands above and below
Keep every screenshot at the same width so the content does not change size between screens
Match the screen background to your app background so a short screenshot does not sit on a white band
Name the screens after what they show, not Screen 1 and Screen 2
Put hotspots where a user would tap in the real app
Lower the scroll speed when a screen is very long