Hi HN,
I’ve always enjoyed working with 3D graphics, and I originally built this tool because I needed a high-quality hero section mockup for a project. That site never got built - but this tool did!
What It Does:
Mockup Generator is a browser-based 3D tool that lets you create realistic device mockups (iPhones, MacBooks, iPads, etc.) for portfolios, marketing, and app presentations. Unlike static mockup templates, it allows full customization—device colors, backgrounds, multi-device scenes, and real-time screen updates. It also exports in ultra-high resolution (5832px × 3400px), making it great for websites, ads, and app store images.
Why I Built It:
I struggled to find a fast, easy-to-use 3D mockup tool that didn't require Blender or other complex software. Most existing solutions were either flat, static images or the opposite and too overcomplicated, requiring you to upload your own models. I wanted a tool that was accessible, interactive, and high-quality - so I built one.
Tech Stack & Challenges
Next.js: For a fast, server-side rendered web app
Three.js: Handles the 3D rendering & real-time transformations
Firebase: Authentication & backend services
Stripe: Manages subscriptions
Biggest challenges:
Optimizing WebGL performance for smooth rendering
Keeping high-quality exports while maintaining a lightweight UI
Making the tool intuitive for non-3D users
Try It Out (7-Day Free Trial)
Mockup Generator works in the browser - no need to install anything.
Just sign up and get immediate access to the free trial. Using Google sign up will immediately verify your email. Using email/password sign up will require you to verify your email (an attempt to reduce free trial abuse).
You can access the editor from the Dashboard page. Either choose an individual model or select from the pre-staged presets and upload your image – each model comes with recommended aspect ratio and dimensions to get the best results.
Would love to hear your thoughts, feedback, and suggestions!
