# Future Forward — Asset Generator Product Plan

## Current State
A 4-step wizard: Brief → Direction → Image → Edit. Works end-to-end but the editor (Step 4) is basic and has UX gaps.

---

## UX CRITIQUE — What's broken

### Step 1: Brief
- ✅ Clean, clear, works well
- ✅ Shot type cards with thumbnails
- ⚠️ Shot type cards need updating with v2 style thumbnails (darker, no Earth)

### Step 2: Directions
- ✅ Three creative directions from AI, well presented
- ⚠️ No thumbnail preview of what each direction might look like

### Step 3: Image Generation
- ✅ Loading states with progress steps
- ✅ Preview with USE THIS / REGENERATE / ADJUST
- ⚠️ Adjust input is small and easy to miss

### Step 4: Editor — THE PROBLEM AREA
**Text handling:**
- ❌ Text overflows bounding box — fixed with Textbox but needs word wrap enforcement
- ❌ No max character count or visual indication of overflow
- ❌ Headline defaults to center of canvas — should default to bottom-left (poster convention)

**Safe zones:**
- ⚠️ Basic 30px safe zone exists but not visible enough
- ❌ Story safe zones (top 180px, bottom 320px) need stronger visual — red tint is too subtle
- ❌ No safe zone enforcement — elements can still be dragged outside

**Logo:**
- ❌ FF logo loads from external URL that sometimes fails
- ❌ Logo should default to bottom-left corner, inside safe zone
- ❌ No size control for logo

**Layout/Composition:**
- ❌ No layout presets — user has to manually position everything
- ❌ No snap-to-grid or alignment guides
- ❌ Yellow accent line is decorative noise — should be an opt-in element
- ❌ No CTA button element (fixed by Thibault but needs better default styling)

**Image:**
- ❌ Background image repositioning is clunky
- ❌ No zoom/scale control for background image
- ❌ No image filter controls (brightness, contrast, warmth)

**Export:**
- ❌ Only PNG export
- ❌ No quality/resolution options
- ❌ No multi-format batch export (make one post, export as IG + LinkedIn + Story in one click)

---

## PRODUCT DESIGN — The Upgraded Editor

### Architecture: 3 Composition Layers

```
Layer 1: BACKGROUND IMAGE (full bleed, repositionable, scaleable)
Layer 2: OVERLAY (darken/gradient, adjustable)
Layer 3: CONTENT (text, logo, CTA, elements — all within safe zone)
```

### Layout Presets (one-click compositions)
Instead of starting from scratch, offer 6 pre-built layouts:

| Preset | Description |
|--------|-------------|
| **Bottom Left** | Logo top-left, headline bottom-left, subhead below, CTA bottom-right |
| **Center Stack** | Everything centered vertically — logo, headline, subhead, CTA |
| **Split** | Left half: text stack. Right half: image breathes |
| **Minimal** | Logo only + single line bottom-center |
| **Event Card** | Date badge top, headline center, venue/CTA bottom |
| **Speaker** | Name large center, title below, logo bottom-left |

Each preset snaps all elements to their positions with correct font sizes and spacing for the current format. Switching formats re-flows the preset.

### Smart Text
- **Auto-size:** Headline starts at max size and shrinks to fit within safe zone width
- **Word wrap:** Always on, constrained to safe zone minus padding
- **Character count:** Show remaining characters for platform limits (280 Twitter, 2200 IG)
- **Font stack:** Sora (display/headlines) + Inter (body/subhead) — locked to brand

### Safe Zone System
- **All formats:** 40px padding (visible dashed guide, non-printing)
- **Story (9:16):** Extended top (180px) and bottom (320px) dead zones with semi-transparent red overlay showing "UI BLOCKED ZONE" label
- **Enforcement:** Elements snap back inside safe zone when dragged out

### Elements Panel
| Element | Default | Editable |
|---------|---------|----------|
| **FF Logo** | Bottom-left, white, 120px | Position, size, color (white/black/lime) |
| **Headline** | Sora 600, white, bottom-left | Text, size (40-120px), color, alignment |
| **Subhead** | Inter 400, white 80%, below headline | Text, size, color |
| **Date Badge** | Lime pill with black text, top or bottom | Text, position |
| **CTA Button** | Lime pill "REGISTER NOW →" | Text, position, style |
| **Accent Line** | Optional, lime, horizontal | Width, position, color |
| **Divider** | Optional, thin white line | Position |

### Image Controls
| Control | Range |
|---------|-------|
| **Position** | Drag to reposition (pan) |
| **Scale** | Slider 50%-200% (zoom in/out) |
| **Darken** | 0-80% black overlay |
| **Gradient** | Toggle bottom-to-top gradient (for text readability) |

### Export
- **Download PNG** — current format, 2x resolution
- **Batch Export** — one click exports all 4 formats (IG, LinkedIn, Story, Twitter)
- **Copy to Clipboard** — for quick paste into Slack/email

### Brand Lock
Everything stays within FF/CE brand:
- Colors: White, Black (#1a1a1a), Lime (#DCFF00), CE Red (#cc0000)
- Fonts: Sora (display), Inter (body)
- No custom uploads, no off-brand colors

---

## IMPLEMENTATION PRIORITY

### Phase 1 — Must Have (ship this)
1. Layout presets (6 templates, one-click)
2. Smart text (auto-size, word wrap, safe zone constraint)
3. Logo fix (local file, default bottom-left, size control)
4. Gradient overlay option
5. Image scale slider
6. Safe zone enforcement
7. Background image zoom/pan controls

### Phase 2 — Nice to Have
8. Batch multi-format export
9. Alignment guides / snap-to-grid
10. Image filters (brightness, contrast)
11. Character count for platform limits
12. Copy to clipboard

### Phase 3 — Future
13. Save/load compositions
14. Template gallery
15. Animation export (MP4 with subtle motion)

---

## UPDATED SHOT TYPE THUMBNAILS
Need to regenerate thumbnails from v2 style images (darker, stardust, no Earth) and replace in `/public/thumbs/`.