Mockup Studio
- Category Web Tool
- Platform Browser
- Technologies Three.js · Canvas API · JavaScript
- Started 2025
- Status Live
- Try It Open App
About the Project
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.
How It's Made
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.
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.
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