# Moujave Image Generation Recipe

## Purpose

Use this process for supporting Moujave backgrounds and social artwork. It does not replace the canonical logo, genuine Moujave photography or the rules in `docs/standards/moujave-brand.md`.

## Reusable base prompt

Cinematic photorealistic mountain range at night, one strong central peak, near-black rocky foreground, deep violet and indigo lighting, subtle purple glow behind the ridgeline, atmospheric mist between mountain layers, restrained stars, high contrast, realistic geological texture, premium dark editorial landscape photography, wide panoramic composition, no text, no logo, no people, no buildings, large dark negative space above the mountains.

## Composition variants

### Landscape

Use a wide 16:9 composition. Keep the main peak low and centred, with generous negative space above for website headings and interface elements.

### Square

Use a 1:1 composition. Keep the main peak in the lower-middle third with balanced negative space around it for social cards and tiles.

### Portrait

Use a 9:16 composition. Keep the peak in the lower third and preserve a large dark sky area for mobile hero text.

Generate each aspect ratio independently when composition matters. Do not assume one crop will work for all three.

## Generation rules

- Generate clean raster artwork, not SVG approximations.
- Do not bake in a logo, wordmark, title, button, footer, badge or other UI.
- Avoid generic stock-photo lighting, neon cyberpunk cities, spacecraft, fantasy characters and fake lifestyle scenes.
- Prefer realistic rock texture, restrained atmospheric depth and a dark editorial finish.
- Prefer genuine Moujave photography when it exists and is suitable.
- Treat generated imagery as a supporting plate, never as a new canonical identity.

## Website treatment

Use the generated image as a base plate and apply atmosphere separately in CSS when appropriate:

- bottom-anchor mountains with `object-position: center 100%`;
- use `object-fit: cover`;
- reduce opacity slightly when needed, around `0.84` as a starting point;
- fade the upper edge into the page with a vertical mask;
- add stars, aurora, fog, glow, grain and vignette as separate CSS layers;
- keep headings as real HTML and logos as approved SVG or raster assets;
- verify mobile crops rather than relying only on desktop composition.

## Export process

1. Generate PNG at the largest practical size for the target ratio.
2. Review composition and reject obvious visual defects before conversion.
3. Preserve the full-size source outside the optimized deployment asset where practical.
4. Convert to WebP in sRGB RGB output.
5. Use quality 68–86 depending on complexity and target size.
6. Record width, height, format and intended use in the asset index or manifest.
7. Commit generated files and their documentation together through review.

Current optimized supporting backgrounds:

- `/assets/brand/visuals/moujave-cosmic-landscape.webp`
- `/assets/brand/visuals/moujave-cosmic-square.webp`
- `/assets/brand/visuals/moujave-cosmic-portrait.webp`

## Social preview process

The social preview is generated deterministically by:

`scripts/generate-moujave-social.mjs`

Run from the Dev Platform repository root on Hulk:

```bash
npm install --no-save sharp
node --check scripts/generate-moujave-social.mjs
node scripts/generate-moujave-social.mjs
```

The generator:

1. reads the approved cosmic landscape and canonical mark;
2. resizes and processes the background as a raster image;
3. verifies that the background is not blank or nearly uniform;
4. composites the raster background, approved mark and SVG text overlay using Sharp;
5. exports an exact 1200 × 630 JPEG;
6. writes `/assets/moujave-social.jpg` as the stable convenience copy;
7. creates `/assets/moujave-social-<sha256-prefix>.jpg` for cache-sensitive metadata;
8. updates Open Graph, X/Twitter and gallery references;
9. removes superseded fingerprinted social images;
10. records dimensions, sources and the full SHA-256 digest in `/assets/brand/generated-assets.json`.

Do not embed WebP backgrounds inside an SVG and expect the SVG renderer to composite them reliably. Raster source images must be processed and composited as raster layers.

## Social preview review checklist

Before accepting a generated social image, confirm:

- the cosmic landscape is clearly visible;
- the canonical mark is sharp and correctly proportioned;
- the title and supporting copy are readable at thumbnail size;
- there is no accidental black or empty background;
- output is exactly 1200 × 630 JPEG;
- the fingerprinted filename matches the manifest digest prefix;
- `og:image`, `og:image:secure_url` and `twitter:image` use the same fingerprinted URL;
- the brand gallery points to the same current image.

## Current source references

Production mountain plate:

`https://moujave.com/assets/moujave-mountains.webp`

Generated cosmic landscape:

`https://moujave.com/assets/brand/visuals/moujave-cosmic-landscape.webp`

Canonical mark:

`https://moujave.com/assets/moujave-mark.svg`

Use these as the approved implementation references for restraint, placement and visual continuity.

## Governance

The complete authority order, change process, stable-versus-fingerprinted URL rules and deprecation process are documented in:

`/assets/brand/asset-governance.md`