Garment Mockup

Pick a garment

Choose what you want to mock up. Each garment has its own front and back, color swatches, and design layers.

Garment

← Pick a different garment

Size —

Garment width —

Safe area —

Color

Design

Realism

Show fabric folds & highlights on shirt

Sleeve print

Left sleeve (10 × 10 cm) Right sleeve (10 × 10 cm)

Dashed callout + leader line pointing to the middle of the sleeve. Either side or both. Visible on Front and on the Side-by-side preview.

Export

Naming details optional

Client / customer Garment Color Date

Click an artwork to select it. Drag to move (constrained to the frame). Corners scale (aspect-locked); top handle rotates. Delete or Backspace removes the selected artwork.

Admin · Garment registry

Edit the garment list shown on the selection page. Changes are saved per browser (localStorage). Use "Reset to defaults" to revert.

How to add a new garment image

Drop your garment PNG into static/assets/ with a transparent background and a white/light-grey shirt (multiply-tinting can only darken). Recommended naming: <slug>-white.png.
Generate the matching back view (mirror) from the front:
```
bun run static/scripts/make-back-view.ts <src> <dst>
```
Or use a known slug like tshirt / hoodie / polo.

Generate the lighting map (luminance overlay used for fabric realism). One per side:

bun run static/scripts/make-lighting.ts <src> <dst>

Example for a custom garment:

bun run static/scripts/make-lighting.ts \
  static/assets/longsleeve-white.png \
  static/assets/longsleeve-lighting.png

bun run static/scripts/make-lighting.ts \
  static/assets/longsleeve-white-back.png \
  static/assets/longsleeve-back-lighting.png

Click + Add garment below, paste the four asset paths (assets/<slug>-white.png, …-lighting.png, …-back.png, …-back-lighting.png), set the print area, hit Save.
The garment shows up immediately on the selection page. (Edits are stored per-browser in localStorage.)

Note: there's no in-browser auto-generation for the lighting map yet; the script is the supported path. Ask if you'd like it added — it's possible to do client-side, with some localStorage size tradeoffs.