The app currently has 3 separate creation pages (Create, Recipes, Carousel) and 3 overlapping content pages (Generations, Vault, Collections). The goal is to consolidate creation into a single /app/create page where recipes and carousels are more prominent than manual create.
- Recipes page: Left config panel (reference image, recipe details, batch/create button) + main area is a 4-column recipe card grid + filmstrip of session outputs at bottom. Full viewport height.
- Create page: Output grid fills the main area + compose bar at bottom (prompt, reference images, model/aspect/size/batch controls, generate button). Full viewport height.
- Carousel page: Left form (mode selector, shot count, notes) + right model preview + plan status below. In progress, uses a separate pipeline.
- Recipe browsing needs significant viewport space (19+ visual cards with category tabs)
- Manual create's output grid also wants the full viewport
- Recipes and carousels should be MORE prominent than manual create
- More creation methods will be added in the future
- All methods should show generation results
Landing on /app/create shows the full recipe/carousel browser — the entire viewport is dedicated to browsing creation options. Carousel modes appear as a distinct section alongside recipe categories. A "Custom prompt" card sits at the end, clearly secondary.
When you select a recipe and hit generate (or start a carousel), the page transitions into a creation session: the browser slides away, the output grid + compose bar take over. A breadcrumb or back-arrow returns to the browser.
Layout:
┌─────────────────────────────────────────────────────┐
│ Create │
│ │
│ 🎠 Carousels │
│ [Same Space] [Adjacent Spaces] [Photo Dump] │
│ │
│ 📸 Photo Recipes See all → │
│ [card] [card] [card] [card] │
│ │
│ 🎬 Video Recipes See all → │
│ [card] [card] [card] │
│ │
│ ✏️ Custom Prompt │
│ [card] │
│ │
│ ─── Compose Bar (minimal until selection) ───────── │
└─────────────────────────────────────────────────────┘
↓ after selecting a recipe and generating ↓
┌─────────────────────────────────────────────────────┐
│ ← Back to Browse "Luxury Car Night Flash" │
│ │
│ [output] [output] [output] [output] │
│ [output] [output] [GENERATING...] │
│ │
│ │
│ ─── Compose Bar (recipe config, generate) ───────── │
└─────────────────────────────────────────────────────┘
| Pros | Cons |
|---|---|
| Recipes/carousels are maximally prominent — they ARE the default page | Can't see outputs while browsing for the next recipe |
| No spatial competition — browse and output are sequential states | Extra click/transition to start creating |
| Manual create is naturally de-emphasized (just a card) | Back-and-forth if you want to try multiple recipes quickly |
| Clean mental model: browse → select → create → review | Transition animation needs to feel smooth or it's jarring |
| New creation methods = new cards/sections in the browser |
Persistent split layout. Left panel (~55-60%) is a scrollable recipe/carousel browser with category sections. Right panel (~40-45%) shows generation outputs and has the compose/generate controls at the bottom.
Select a recipe on the left → right panel's controls update → generate → outputs appear on the right. You can immediately browse and pick another recipe without leaving.
Layout:
┌──────────────────────────┬──────────────────────┐
│ 📸 Photo Recipes │ Recent Outputs │
│ [All] [Photos] [Video] │ │
│ │ [output] [output] │
│ [card] [card] [card] │ [output] [output] │
│ [card] [card] [card] │ [output] [GENERAT.] │
│ [card] [card] [card] │ │
│ │ │
│ 🎠 Carousels │ │
│ [Same] [Adjacent] [PD] │ │
│ │ │
│ ✏️ Custom Prompt │ ──────────────────── │
│ [expand to prompt] │ [compose controls] │
│ │ [Generate 🎨 15cr] │
└──────────────────────────┴──────────────────────┘
| Pros | Cons |
|---|---|
| Both browsing and outputs always visible simultaneously | Each panel is narrower — recipe cards go from 4 to 2-3 columns |
| Recipes stay prominent (majority of viewport) | Outputs panel is small — images are thumbnails |
| Can rapidly try different recipes without view switching | Dense UI, especially on smaller screens |
| Natural workflow: browse left, create right | Two scrollable panels can feel busy |
| Familiar pattern (email, file managers, IDE) |
Break from the fixed full-height layout. The page scrolls vertically through categorized sections like the App Store. A sticky compose bar sits at the bottom. Outputs appear at the top of the page as a filmstrip or compact grid section.
Layout:
┌─────────────────────────────────────────────────────┐
│ ─── Recent ─────────────────────────────────────── │
│ [out] [out] [out] [out] [out] → (horizontal scroll)
│ │
│ 🎠 Carousels ──────────────────────────────────── │
│ [Same Space] [Adjacent Spaces] [Photo Dump] │
│ │
│ 📸 Photo Recipes ──────────────────── See all → │
│ [card] [card] [card] [card] │
│ [card] [card] [card] [card] │
│ │
│ 🔀 Face Swap ──────────────────────── │
│ [card] [card] │
│ │
│ 🎬 Video ────────────────────────── See all → │
│ [card] [card] [card] │
│ │
│ ✏️ Custom Generation │
│ [card → expands to prompt input] │
│ │
│ ═══ Sticky Compose Bar ════════════════════════════ │
│ [Selected: Luxury Car Night Flash] [⚙] [Create 15] │
└─────────────────────────────────────────────────────┘
| Pros | Cons |
|---|---|
| Recipes and carousels are front and center, organized by category | Departure from current full-height aesthetic |
| Outputs live at the top as a compact section | Recipe browsing requires scrolling through sections |
| Manual create is naturally just one section at the bottom | Sticky compose bar over scrollable content can feel awkward |
| Adding new creation methods = adding a new section | Outputs section at the top is small/compact |
| Familiar mobile-native pattern (App Store, Spotify Browse) | |
| Everything on one surface — no mode transitions |
One unified masonry/grid mixing recipe cards and recent generation outputs together. Recipe cards have a distinct visual treatment (colored border, recipe name overlay, category badge). Your generated images sit alongside them naturally. Carousel modes appear as special wider cards.
Clicking a recipe card → compose bar activates for that recipe. Clicking an output → lightbox opens.
Layout:
┌─────────────────────────────────────────────────────┐
│ [recipe: ] [YOUR OUTPUT ] [recipe: ]│
│ [Luxury Car ] [ ] [Tennis Court ]│
│ [Night Flash ] [ ] [Lifestyle ]│
│ │
│ [YOUR OUTPUT ] [carousel:──────────] [recipe: ]│
│ [ ] [Same Space mode ] [Grocery Run ]│
│ [ ] [ ] [ ]│
│ │
│ [recipe: ] [recipe: ] [YOUR OUTPUT ]│
│ [Poolside ] [Beach Walk ] [ ]│
│ [Lounging ] [Golden Hour ] [ ]│
│ │
│ ═══ Compose Bar ═══════════════════════════════════ │
│ [Selected: ...] [model] [4:5] [2K] [Generate 🎨] │
└─────────────────────────────────────────────────────┘
| Pros | Cons |
|---|---|
| Browsing and outputs coexist naturally on one surface | Mixing inputs and outputs in one grid may be confusing |
| The more you create, the more personal the feed becomes | Hard to scan recipes specifically vs. outputs specifically |
| Visually rich — every cell is an image | Recipe cards need very distinct styling to not blend with outputs |
| No mode switching or transitions | Ordering/layout algorithm is complex |
| Scales: new creation methods = new card types | Less organized than categorized sections |
The default view is the output grid (like Create now), but with a prominent handle/section at the top that expands into a full creation drawer (slides down, covering ~70% of the viewport). The drawer contains the recipe browser, carousel modes, and custom create. Select something → drawer auto-closes, compose bar is populated.
Layout:
── Collapsed (default after first generation) ──
┌─────────────────────────────────────────────────────┐
│ ▼ Browse Recipes & Carousels [19 recipes] │
│─────────────────────────────────────────────────────│
│ │
│ [output] [output] [output] [output] │
│ [output] [output] [GENERATING] │
│ │
│ ─── Compose Bar ────────────────────────────────── │
└─────────────────────────────────────────────────────┘
── Expanded (click handle or first landing) ──
┌─────────────────────────────────────────────────────┐
│ ▲ Browse Recipes & Carousels [19 recipes] │
│ │
│ 🎠 Carousels │
│ [Same Space] [Adjacent] [Photo Dump] │
│ │
│ 📸 Recipes [All] [Photos] [Face Swap] [Video] │
│ [card] [card] [card] [card] │
│ [card] [card] [card] [card] │
│ [card] [card] [card] [card] │
│─────────────────────────────────────────────────────│
│ [output] [output] (peek of outputs below) │
│ ─── Compose Bar ────────────────────────────────── │
└─────────────────────────────────────────────────────┘
| Pros | Cons |
|---|---|
| Recipes get full width when browsing | Drawer = hidden by default (less prominent than full-page) |
| Outputs always partially visible | Drawer open/close adds interaction friction |
| Can be set to "open by default" on first visit | Two states to manage (open/closed) |
| Compose bar stays consistent regardless of drawer state | Might feel like a bolted-on panel rather than integrated |
| Clean separation between browsing and output viewing |
Instead of plain text tabs, the tab bar itself is visual — each tab shows a mini preview and count. The active tab owns the full main area.
Layout:
┌─────────────────────────────────────────────────────┐
│ ┌─────────────┐ ┌──────────────┐ ┌───────────────┐ │
│ │ 📸 Recipes │ │ 🎠 Carousel │ │ ✏️ Custom │ │
│ │ [mini][mini] │ │ [mini][mini] │ │ [mini] │ │
│ │ 19 recipes │ │ 3 modes │ │ │ │
│ └─────────────┘ └──────────────┘ └───────────────┘ │
│─────────────────────────────────────────────────────│
│ │
│ [card] [card] [card] [card] (active tab content│
│ [card] [card] [card] [card] fills this area) │
│ [card] [card] [card] [card] │
│ │
│ ─── Filmstrip: recent outputs ──────────────────── │
│ [out] [out] [out] [out] → │
│ │
│ ═══ Compose Bar ═══════════════════════════════════ │
│ [Selected: ...] [config] [Generate 🎨 15] │
└─────────────────────────────────────────────────────┘
| Pros | Cons |
|---|---|
| Each creation method gets full viewport width | Tabs are still tabs — user mentioned not loving this |
| Visual tab bar makes all methods prominent and discoverable | Only one method visible at a time |
| Filmstrip keeps outputs visible regardless of active tab | Tab bar takes vertical space |
| Easy to add new tabs for new creation methods | Recipes and carousels can't be seen simultaneously |
| Familiar pattern, low learning curve |
The main area is ALWAYS the output grid. The compose bar at the bottom has a prominent creation method selector that opens a large popover/flyout (not a tiny dropdown — more like 60-70% of viewport) showing recipes and carousel options visually.
The difference from the earlier Option B: the popover is rich, visual, and large — essentially the recipe browser rendered as a flyout panel anchored to the compose bar.
Layout:
── Default state ──
┌─────────────────────────────────────────────────────┐
│ │
│ [output] [output] [output] [output] │
│ [output] [output] [output] [GENERATING] │
│ [output] [output] │
│ │
│ ═══ Compose Bar ═══════════════════════════════════ │
│ [🎨 Luxury Car Night Flash ▾] [4:5] [Generate 15] │
└─────────────────────────────────────────────────────┘
── Popover open (click the method selector) ──
┌─────────────────────────────────────────────────────┐
│ (outputs dimmed behind) │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 🎠 Carousels │ │
│ │ [Same Space] [Adjacent] [Photo Dump] │ │
│ │ │ │
│ │ 📸 Recipes [All] [Photos] [Face Swap] [Video] │ │
│ │ [card] [card] [card] [card] │ │
│ │ [card] [card] [card] [card] │ │
│ │ [card] [card] [card] [card] │ │
│ │ │ │
│ │ ✏️ Custom Prompt │ │
│ └─────────────────────────────────────────────────┘ │
│ ═══ Compose Bar ═══════════════════════════════════ │
│ [🎨 Luxury Car Night Flash ▾] [4:5] [Generate 15] │
└─────────────────────────────────────────────────────┘
| Pros | Cons |
|---|---|
| Output grid is always the main view — consistent | Recipes hidden behind a click (less prominent) |
| Popover gives recipes full visual browsing space when open | Popover over content feels less "native" than a page |
| Compose bar is the single source of truth | On first visit, user might not know to click the selector |
| Very compact — no panels, drawers, or tabs | Large popover is essentially a modal with extra steps |
| Model picker already exists — this extends its role naturally |
The page is a scrollable dashboard where creation options are "above the fold" as hero content, and generations appear inline as you create them. Think Netflix/Spotify homepage but for content creation.
Layout:
┌─────────────────────────────────────────────────────┐
│ │
│ ✨ Featured │
│ ┌──────────────────────────────────────────────┐ │
│ │ [large hero card — featured recipe or │ │
│ │ carousel mode with compelling preview] │ │
│ └──────────────────────────────────────────────┘ │
│ │
│ 🎠 Carousels │
│ [Same Space ──] [Adjacent ────] [Photo Dump ──] │
│ [with preview ] [with preview ] [with preview ] │
│ │
│ 📸 Photo Recipes ─────────────────── See all → │
│ [card] [card] [card] [card] [card] → (h-scroll) │
│ │
│ 🎬 Video ─────────────────────────── See all → │
│ [card] [card] [card] → (h-scroll) │
│ │
│ ─── Your Creations ────────────────────────────── │
│ [output] [output] [output] [output] [output] │
│ [output] [output] [output] [output] │
│ │
│ ═══ Sticky Compose Bar ════════════════════════════ │
│ [Selected: ...] [Generate 🎨] │
└─────────────────────────────────────────────────────┘
| Pros | Cons |
|---|---|
| Recipes and carousels dominate the viewport | Long scrollable page — outputs may be below the fold |
| Featured section draws attention to key creation methods | Horizontal scroll for recipe rows = less browsable than grid |
| Familiar streaming platform pattern | Sticky compose bar over scroll can feel disconnected |
| New methods = new sections, infinitely extensible | Need to decide: full grid vs. horizontal rows per category |
| Hero card can rotate/feature new recipes | More of a "homepage" than a "tool" feel |
| Manual create can be a small card or just the compose bar |
| Option | Recipes Prominent? | Outputs Visible? | Spatial Efficiency | Extensibility | Complexity |
|---|---|---|---|---|---|
| 1. Canva (browse→create) | ⭐⭐⭐ | ❌ while browsing | ⭐⭐⭐ | ⭐⭐⭐ | Low |
| 2. Two-panel (browse+output) | ⭐⭐ | ⭐⭐⭐ always | ⭐⭐ | ⭐⭐ | Medium |
| 3. Scrollable + sticky bar | ⭐⭐⭐ | ⭐⭐ compact | ⭐⭐ | ⭐⭐⭐ | Medium |
| 4. Mixed feed | ⭐⭐ | ⭐⭐⭐ inline | ⭐⭐ | ⭐⭐ | High |
| 5. Top drawer | ⭐⭐ | ⭐⭐ peeking | ⭐⭐ | ⭐⭐ | Medium |
| 6. Visual tabs | ⭐⭐⭐ | ⭐⭐ filmstrip | ⭐⭐⭐ | ⭐⭐⭐ | Low |
| 7. Rich popover (refined B) | ⭐ (hidden) | ⭐⭐⭐ always | ⭐⭐⭐ | ⭐⭐⭐ | Medium |
| 8. Dashboard hero | ⭐⭐⭐ | ⭐⭐ below fold | ⭐⭐ | ⭐⭐⭐ | Medium |
- Should outputs be visible while browsing recipes? If yes, eliminates Options 1 and 5. If not required, Options 1 and 3 are cleanest.
- Does the page scroll or stay fixed-height? Current pages are all full-viewport fixed. Scrolling opens up Options 3 and 8 but is a pattern departure.
- How does model selection work? Global via sidebar (current), or per-method? Recipes define their own model. Manual create uses the model picker.
- What is the default state on first visit? Should users see recipes immediately, or an empty canvas?
- How do carousel outputs display? Carousels produce plan-based multi-image sets, not single outputs. Do they show in the same output grid or as carousel cards?
- Generations page fate? If Create shows outputs, does Generations still exist? Or does it become a "History" tab within Create?