Phone Mockup Generator is a free, browser-based tool for creating stunning 3D phone mockups. Easily transform your app screenshots into professional device presentations perfect for the App Store, marketing materials, websites, and portfolios.

Try the live demo here: https://phonemockup.online/

• Interactive 3D Preview: Rotate and adjust your mockup in real-time to find the perfect angle.
• Multiple Device Frames: Choose from various phone models to showcase your app accurately.
• High-Quality Rendering: Get crisp, professional-looking results.
• Easy Screenshot Upload: Simply drag and drop or select your screenshots.
• Custom Backgrounds: Upload your own background image or use a transparent background.
• Privacy-Focused: All processing happens directly in your browser. Your screenshots are never uploaded to a server.
• Completely Free: No watermarks, no limitations, no hidden fees.
• Instant Download: Download your high-resolution mockup immediately.
• Open Source: Built with Next.js, React, Three.js, and Tailwind CSS.

• Frontend: Next.js (React framework)
• 3D Rendering: Three.js via @react-three/fiber
• UI: Tailwind CSS
• State Management: React Hooks (useState, useEffect, etc.)
• File Handling: react-dropzone
• Deployment: Static Export on Cloudflare Pages / Vercel / etc.

1. Clone the repository:

   git clone https://github.com/ihou/PhoneMockup.git
   cd PhoneMockup

2. Install dependencies:

   npm install
   # or
   # yarn install
   # or
   # pnpm install

3. Run the development server:

   npm run dev
   # or
   # yarn dev
   # or
   # pnpm dev

   Open http://localhost:3000 with your browser to see the result.

4. Build for production (Static Export):

   npm run build

   This will create an out directory with the static files ready for deployment.

Contributions are welcome! If you have suggestions for improvements or find a bug, please feel free to open an issue or submit a pull request.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Distributed under the MIT License. See LICENSE for more information.

Project Link: https://github.com/ihou/PhoneMockup

Live Site: https://phonemockup.online/