Mock Studio

What is Mock Studio?

Mock Studio is an open-source editor for composing app screens inside interactive 3D device mockups, with transparent PNG export for marketing shots, product presentations, and social assets.

My job here was...

I designed and built the product end to end, covering interface design, frontend architecture, 3D scene composition, editing flows, export behavior, and the overall product direction.

The problem

Creating polished device mockups usually depends on static templates, scattered tools, or editing workflows that are too rigid for quick iteration. I wanted a faster way to combine multiple devices, upload custom screens, adjust transforms, and export presentation-ready visuals from a single editor.

The solution

I created a web editor with layered scene management, per-object controls, device-specific themes, custom screen uploads, bilingual interface support, and transparent PNG export. The current version is built with Next.js, React, Three.js, and React Three Fiber, and supports multi-device compositions with smartphones, a smartwatch, and a notebook.