https://github.com/madebysan/craft

3D device mockup tool that runs in the browser. Drop a screenshot, pick a device, tune camera/lighting/background, export PNG or video.
https://github.com/madebysan/craft

Last synced: about 1 month ago
JSON representation

3D device mockup tool that runs in the browser. Drop a screenshot, pick a device, tune camera/lighting/background, export PNG or video.

• Host: GitHub
• URL: https://github.com/madebysan/craft
• Owner: madebysan
• License: mit
• Created: 2026-04-24T20:34:45.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2026-05-28T03:44:17.000Z (about 2 months ago)
• Last Synced: 2026-05-28T05:17:47.475Z (about 2 months ago)
• Language: TypeScript
• Homepage: https://craft-black.vercel.app
• Size: 63 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


Craft


Create 3D device mockups in the browser.


Drop in a screenshot or screen recording, choose a device, and export stills or video.




  

  

  

  



Try Craft live


Craft is for making app mockups without opening a 3D tool. It runs in the browser: upload media, place it on an iPhone or Nothing Phone, adjust camera, lighting, and background, then export PNG, JPEG, WebP, a ZIP of angles, or a recorded camera move.

It is desktop-only. Under 768px, Craft shows a desktop-required screen because the 3D viewport and side panels need room.



## Run it

```bash

npm install

npm run dev

```

The dev server runs on port 5173.

## Stack

[React 19](https://react.dev) · [TypeScript](https://www.typescriptlang.org) · [Vite 8](https://vitejs.dev) · [Three.js](https://threejs.org) via [React Three Fiber](https://r3f.docs.pmnd.rs) + [drei](https://github.com/pmndrs/drei) + [postprocessing](https://github.com/pmndrs/react-postprocessing) · [Zustand](https://zustand.docs.pmnd.rs) · [Tailwind CSS 4](https://tailwindcss.com) · [Lucide](https://lucide.dev) · DM Sans

HDRIs from [Poly Haven](https://polyhaven.com/hdris). Device models sourced from Sketchfab under permissive licenses.

Made by [santiagoalonso.com](https://santiagoalonso.com). If Craft saves you time, [buy me a coffee](https://buymeacoffee.com/madebysan).