Desktop Mockup

Put your website or prototype screenshots on the screen of a 3D laptop. Visitors scroll the page inside the display and move between screens with the arrow keys or the dock.

Create a Desktop Mockup

What is a Desktop Mockup?

A Desktop Mockup project shows your screenshots on a 3D laptop that ships with the lid already open. One image is one screen. Tall images are not shrunk to fit: the visitor scrolls them inside the display, the same way they would scroll the real page. Upload five screenshots and you get five screens that the visitor pages through one at a time.

One tall screenshot per screen, scrolled inside the laptop display
Wheel, trackpad, or a drag on the device to scroll the current screen
Arrow keys and the navigation dock to move between screens
Drag the background to turn the laptop, and switch on the dock zoom buttons to read small text
Hotspots can be placed anywhere on a screenshot, and both mockups draw them on the display
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

Landing pages

Show a full landing page scrolling the way it really scrolls, without sending anyone to a live URL

Product tours

One feature per screen, in the order you want people to see them

Prototype reviews

Share design exports with a client and let them scroll the whole flow

Client presentations

Present a site you built inside a proposal or a case study

Web design portfolios

Collect the sites you have designed, one screen each

App screenshots

Show what a web app looks like without asking anyone to sign up

Creating a Desktop 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 page 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 at a desktop width, around 1440px, and let the image be as tall as the page. 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 laptop 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 of the page it belongs to as the visitor scrolls. Both mockups draw them on the display, and they stay tappable on a phone.

Desktop 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 laptop 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 page 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 page 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 laptop: 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 drag that starts on the laptop moves the current screenshot up and down. The Up and Down keys and Page Up and Page Down do the same.

Change screen

Left and Right move between screens, Home and End jump to the first and the last, and the dock has the same buttons. Reaching the bottom of a screen does not advance to the next one, and every screen opens at the top.

Turn the laptop

A drag that starts on the background 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 laptop 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:

The laptop is the only device on this page. For a phone, create a Mobile Mockup instead. There is no tablet yet.
The lid is already open. There is no opening animation.
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 laptop body, but the finish itself is baked into the model.

Tips for great Desktop Mockups

Export one full page capture per screen instead of stitching sections together
Keep every screenshot at the same width so the content does not change size between screens
Match the screen background to your page 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 visitor would click on the real site
Lower the scroll speed when a page is very long
Check it on a phone: the laptop scales down, and small body text may stop being readable