Web Tool · Browser ● Live

Mockup Studio

Drop a screenshot onto a fully 3D iPhone or Apple Watch, style it, and export crisp PNGs or animated WebM — right in the browser.

Platform
Browser
Technologies
Three.js · Canvas API · JavaScript
Started
2025
Try It
Open the app
Mockup Studio — 3D phone mockup preview
/ 01

About

Mockup Studio is a browser-based tool for creating professional smartphone device mockups and App Store promotional screenshots — no design software required. Drop a screenshot onto a fully 3D iPhone or Apple Watch model, customize frame color, background gradient, and rotation, then export a crisp PNG or animated WebM in seconds. The App Store tab generates ready-to-submit promotional slides for iPhone and iPad with multiple visual templates, editable headlines, and one-click bulk export.

/ 02

How It's Made

M.01

Three.js 3D Engine

Parametric phone and watch geometry built from rounded-rectangle extrusions and RoundedBoxGeometry. Screenshot texture mapped live onto the screen mesh. OrbitControls for drag-to-orbit interaction.

M.02

Canvas API — App Store Graphics

App Store slides rendered entirely on a 2D <canvas> at full 1290×2796 px resolution. Three built-in templates, per-slide headline editing, and bulk PNG export via toBlob.

M.03

Zero Dependencies Installed

Three.js loaded via import map from a CDN — no build step, no bundler, no npm. The entire tool is four files that run directly in the browser.

Try Mockup Studio

Free, runs in your browser — no install, no account