How I Built and Launched FastMockup: Behind the Scenes

FastMockup grew around a simple workflow: put a screenshot on a 3D device and export a product video without requiring an account first. The hard part was not displaying a phone in a browser. It was preserving screen quality, motion and branding in the downloaded file, while keeping the editor usable.

Preview quality was only the beginning

The editor uses React Three Fiber and Three.js inside a Next.js application. A shared scene contains the device, screen texture, lighting and background. That makes it possible to reuse the visual definition instead of maintaining a separate drawing of the device for each output format.

The first lesson was that an attractive preview does not guarantee a correct export. During development, exports revealed missing motion, pixelation and branding that did not appear in the final video. These were real implementation problems, not issues to hide behind a polished landing page.

Why the browser does the rendering

The FastMockup editor renders on the user's device. This avoids paying for a server render for every free export, but moves the performance constraint to the browser and GPU. A high-resolution export can still take time, and compatibility needs honest error handling.

The MP4 pipeline uses WebCodecs when supported and keeps a MediaRecorder compatibility path. The frame buffer must match the requested output size; enlarging only the final image can preserve a low-resolution intermediate. Animation timing also needs an explicit clock so the exporter captures more than a single frame.

Separating identity from product rendering

The website adopted blue branding, but that did not mean every device finish should become blue. The orange iPhone finish remained a product option. Similarly, a shared social preview needed its own English copy while the Spanish landing retained its language. Keeping those decisions separate reduced accidental changes across the site.

The landing now uses one hero component for Spanish, English, French and German. That change came from a visible inconsistency: translating text alone had left other languages with a weaker layout and no large logo.

Launching is a starting point

A Product Hunt page and a public site provide places for people to try the product. They are not proof of product-market fit. The next useful questions are whether a visitor finishes an export, whether they return, and whether saving a project works reliably enough to justify creating an account.