AI Lab
Mockup Studio
A device mockup studio in the browser. Ten devices, from phones to a laptop, rebuilt in Three.js from reference images with Claude Code.
- Client
- Self-initiated
- Year
- 2026
- Role
- Designed and built the tool
- What I did
- Three.js
- Claude Code
- 3D mockups
- Tool design
The project
Mockup sites give you a flat phone at a fixed angle. I wanted to pose the device myself, light it, and drop a real screen recording onto it.
I used img2threejs, Hoai-Nho Nguyen's open source Claude Code skill, to rebuild the devices in Three.js from reference images. Ten models in all: six iPhones, a Pixel, two iPads and a MacBook Pro, each one built from code rather than a downloaded 3D file.
The studio around them is mine: twelve angle presets, four lighting setups, backdrops from flat colour to a plinth and an obsidian rock, soft shadows, blur, grain and vignette, and PNG export up to 4x. Drop in an image or a video and it plays on the screen.
More work
More like this
Leveraging a New Image Model
I tested a new image model against a full 360 campaign to see where it holds up and where it breaks.
From Prompt to WebGL 3D
Three interactive website heroes. I designed and directed them and built them with Claude in one session.
Designing at the Speed of Markets
A template system that turns each day's market data into finished posts in under an hour.