Skip to main content
/Documentation

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
Open the interactive version

What is a Desktop Mockup?

A Desktop Mockup project shows your screenshots on a 3D laptop whose lid swings open when the page loads. 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 dock to move between screens
  • Drag the background to turn the laptop, and switch on the dock zoom buttons to read small text
  • Hotspots anywhere on a screenshot, which scroll with the page
  • A live screen: paste a link and the real page loads inside the display
  • A screen counter that also shows the screen title, plus a links dock

Best for

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

Files and limits

  • Images or PDFs. One image is one screen, and each page of a PDF becomes one screen.
  • A PDF can have up to 200 pages and weigh up to 50 MB. Links inside it become hotspots on the screens they were on: a web link opens the page, a link inside the document goes to that screen.
  • Screenshots are fitted to the display width. A capture wider than 2048 px, or a very long one, is scaled down in proportion and never cropped, so a full-page capture keeps its whole length.
  • Upload several files at once, or use Import from URL to bring in an image from a web address.
  • Add a live screen to load a real web page in the display instead of a picture of it. The page has to allow being embedded; the editor checks when you add it.
  • Uploads count toward your workspace storage: 50 MB on Free, 10 GB on Pro, 25 GB on Business.

Create a Desktop Mockup

  1. 1. Upload your screenshots

    Open the Content tab and add one full-page capture per screen, or a PDF.

    • Capture at a desktop width, around 1440 px, and let the image be as tall as the page
    • Or add a live screen with the link to a page

  2. 2. Order and name the screens

    Drag a screen to move it. Give each one a title: titles show in the screen counter, so keep the counter on if you want them seen.

  3. 3. Add hotspots

    In the Hotspots tab, place clickable spots on a screenshot to open a link, jump to another screen, show a tooltip or open a pop-up. A hotspot is pinned to the whole image, so it scrolls with the part of the page it belongs to.

  4. 4. Set the device and the screen

    In Settings, under General, pick the laptop's colour and lid angle, tune the screen, and adjust the scrolling.

  5. 5. Share it

    Save, then copy the link or the embed code from the Share tab.

Settings

Everything below is in the editor's Settings tab, listed under the sub-tab where you find it: General, Scene or Camera.

General

Basic info (the project title and description) sits at the top for every type. Below it come the settings for the object itself.

Device

Device color: white keeps the laptop's own aluminium finish, and any other colour tints the body, never the screen. Screen angle, from 0 to 120 (90 by default), sets how far the lid stands open: 0 shuts it, 90 is upright, and past 90 it leans back like a laptop on a desk.

Screen

Screen background fills the display behind your screenshot, and the bands above and below a short one. Brightness (0.2 to 1.6), contrast (0.5 to 2) and saturation (0 to 2) all start at 1, which is the image exactly as uploaded; saturation 0 shows it in greyscale. Show screen counter, on by default, shows the title and the position, like Pricing · 2 / 5.

Scrolling

Scroll speed (0.25 to 3, 1 by default) is how far one turn of the wheel moves the screenshot. Scroll smoothing (0.02 to 0.5, 0.12 by default) is how quickly it catches up: higher follows the wheel closely, lower glides to a stop.

Scene

What surrounds the object, and the Realism finish over the whole frame.

Background

A solid colour, a gradient or an image of your own (with an optional blur), plus an optional pattern on top.

Realism

Film grain over the frame (0 to 100, 15 by default) and how much of it lands on the screen, still or animated grain, a vignette, the shadow the laptop leaves on its surface (with its darkness and softness), and Screen reflection, how much the glass reflects (0 is matte, 40 by default).

Camera

Where the view starts and how much visitors can move it.

Camera

Initial zoom, from 0.5 to 2, though the view never opens so close that the device leaves the frame. Min zoom (0.3 to 1) and Max zoom (1 to 3) limit the dock's zoom buttons, so they appear only while those buttons are on. Horizontal rotation (up to 75 degrees each way) and Vertical tilt (up to 40) aim the camera. Drag to rotate, on by default, lets visitors turn the laptop by dragging the background. Reset to default puts the zoom, its limits and both angles back, and leaves Drag to rotate as it is.

Hotspots, menu and sounds

Next to Files, the Content tab has three more sub-tabs: Hotspots, Menu and Sounds.

Hotspots

Hotspots go anywhere on a screenshot. They are pinned to the whole image, so they scroll with the page, and they stay tappable on a phone.

A hotspot can go to another page, open a link, show a tooltip or open a pop-up. How hotspots work

Sounds

Every project type can have background music. Add tracks as MP3, M4A, WAV, OGG or FLAC, up to 20 minutes each. They are compressed to about 1 MB per minute and count toward your workspace storage. You can loop the playlist, set the volume and show a small player next to the dock. Autoplay starts with the visitor's first tap or key press, because browsers block sound until then.

Film it in Studio

Every project type can be filmed in Studio. Open the project's Studio tab, pick camera moves made for this type, and turn the project into a video, a GIF, a still image or a page of its own to share. Studio reads this project's files and settings, so what you set here carries over. Read the Studio docs · See the camera moves for each type

Current limits

  • The laptop is the only device on this page. For a phone, create a Mobile Mockup instead. There is no tablet.
  • 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.
  • On a live screen, visitors scroll the real page inside the display, and hotspots stay where you put them instead of scrolling with the page.
  • In Studio, a live screen shows as a plain screen background, because the real page can't be recorded.

Tips

  • 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.
  • 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.