Phone Studio

Most mockup tools paste your screenshot into a static image with a phone painted on it. Phone Studio puts it on an actual 3D model you can rotate, relight, refinish, and shadow — then exports the frame you composed. It runs entirely in the browser on React Three Fiber and Three.js; there's no signup and nothing is uploaded to a server. Pick a device, drop an image, and it's mapped live onto the screen while you tune the shot.

The hard part of a believable mockup is the surface, not the shape. The GLB models are pre-processed so each part can be finished independently: the Apple logo is split off the back-glass mesh into its own object so it reads as a glossy embossed shape sitting on the matte satin-glass pad, while the camera glass, side buttons, and flash keep their own materials instead of picking up the body tint.

Color is calibrated, not guessed. The presets match the official launch swatches — iPhone Silver, Deep Blue, and Cosmic Orange; Galaxy Cosmic Gray, Cloud Blue, Pink, and White — but the stored values are intentionally darker than the swatch, because a metallic body under environment lighting reflects its surroundings and reads brighter than the flat color. The tint is chosen to land at the right apparent value once it's lit, which is a small piece of color science most tools skip.

Wrapping an uploaded image onto the screen mesh sounds trivial and isn't. The GLB's screen panel renders through its back face because of the triangle winding, and its UVs run in an odd range that has to be flipped on both axes to land the image right-side-up and unmirrored. The aspect ratio is set explicitly rather than derived from the mesh bounds, because the mesh's local axes don't match the scene's before parent transforms apply — trusting the bounding box gives a wrongly-landscape screen. The texture logic lives in a small hook that's unit-tested on its own, away from the 3D scene.

The default soft-shadow helper for this kind of scene renders from directly overhead, which is fine for a phone lying flat and wrong for one standing up — it captures a thin sliver and the shadow detaches from the light direction entirely. Phone Studio replaces it with an accumulative shadow system: a randomized light shares the key light's position and the scene is rendered dozens of times, accumulating a soft, correctly-directioned shadow that rebuilds over about thirty frames whenever you move the light or change the softness.

The interesting part is how it's tested. You can't assert on a rendered 3D shadow through the DOM, so the Playwright tests read actual pixels off the canvas at normalized coordinates (device-pixel-ratio agnostic) and check that moving the key light left darkens the pixel to its right, that lowering opacity lightens the shadow center, and that higher softness widens the penumbra. A dev-only store bridge lets the tests drive controls directly instead of dragging sliders.

Export is free at low resolution; HD is gated behind an email and a one-time $9 lifetime unlock through Stripe, with unlock state kept in Upstash Redis keyed by email and the Stripe webhook as the source of truth. "Lifetime" reuses the existing expiry-timestamp mechanism — the unlock date is just pushed about a hundred years out — so the pricing change shipped with no new schema and almost no new code.

Before spending a cent on traffic, the funnel is instrumented: a privacy-preserving PostHog setup (in-memory persistence, no PII in events, no cookie banner needed) tracks pageview → email → checkout-started → checkout-completed, so the exact drop-off point is measurable rather than guessed. The tool is SEO'd end to end — structured metadata, an Open Graph image, a sitemap, and Search Console verification — and deployed on Vercel serverless functions.