READING YOUR STORE

Extracting {domainLabel}

We're not making this up. Every asset starts with your real brand — your real logo, palette, product catalog, copy voice, and customer reviews.

{/* LEFT: mini browser preview with scan line */}

{domainLabel}

⋯

{/* Fake homepage for visual extraction */}

{brandName}

{[0,1,2,3].map(i=>(

))}

{/* Scan line */}
SCANNING · {Math.round(scanPct)}%
{/* Extraction chips — fade in at marker positions on site */} {chipsShown.map(c => (
{c.label}
))}

{/* RIGHT: brand kit building up */}

BRAND KIT · ASSEMBLING {chipsShown.length}/5

=EXTRACT_TARGETS[0].t}>
Wordmark

{brandName}

=EXTRACT_TARGETS[1].t}>
Palette · extracted from imagery

{palette.map((c,i)=>( ))}

=EXTRACT_TARGETS[2].t}>
Voice · from reviews + PDP copy

{voiceQuote}

=EXTRACT_TARGETS[3].t}>
Catalog

{skuCount}SKUs

{avgPrice}avg price

{(store && store.families) || 4}product lines

=EXTRACT_TARGETS[4].t}>
Primary persona

{personaLine}

{t

); } // ============== GENERATION ============== function Generation({ onDone, payload, submittedUrl }) { const [t, setT] = useState(0); const [doneAssets, setDoneAssets] = useState(new Set()); const [running, setRunning] = useState('ad-a1'); const startRef = useRef(performance.now()); const firedDoneRef = useRef(false); // Translate the live payload into a set of done asset-ids we render here. // Worker now produces 10 distinct ads — map each to its own tile. const liveDone = useMemo(() => { const done = new Set(); if (!payload) return done; const ads = (payload.new_batch && payload.new_batch.ads) || []; const slots = ['ad-a1','ad-a2','ad-a3','ad-a4','ad-a5','ad-b1','ad-b2','ad-b3','ad-b4','ad-b5']; slots.forEach((id, i) => { if (ads[i]) done.add(id); }); const a = payload.assets || {}; if (a.quiz) done.add('quiz'); if (a.advertorial) done.add('advertorial'); if (a.listicle) done.add('listicle'); if (a.offer_lp) done.add('offer'); if (Array.isArray(a.emails)) { // UI labels email-1=cart, email-2=upsell, email-3=winback but the // Worker emits them in an arbitrary role order. Match by role. const byRole = Object.fromEntries(a.emails.filter(Boolean).map(e => [e.role, e])); if (byRole.cart_recovery) done.add('email-1'); if (byRole.post_purchase_upsell) done.add('email-2'); if (byRole.non_converter_winback) done.add('email-3'); } if (a.digital_product) done.add('ebook'); return done; }, [payload]); useEffect(() => { let raf; const tick = () => { const elapsed = (performance.now() - startRef.current) / 1000; setT(elapsed); // Fake-script tags only light up ahead of real data if the worker is // running slow — but real `liveDone` always wins when a key flips to ready. const fakeDone = new Set(); for (const s of STREAM_SCRIPT) { if (s.type === 'done' && elapsed >= s.t) { if (s.tag === 'AD A1') fakeDone.add('ad-a1'); else if (s.tag === 'AD A2') fakeDone.add('ad-a2'); else if (s.tag === 'AD A3') fakeDone.add('ad-a3'); else if (s.tag === 'AD A4') fakeDone.add('ad-a4'); else if (s.tag === 'AD A5') fakeDone.add('ad-a5'); else if (s.tag === 'AD B1') fakeDone.add('ad-b1'); else if (s.tag === 'AD B2') fakeDone.add('ad-b2'); else if (s.tag === 'AD B3') fakeDone.add('ad-b3'); else if (s.tag === 'AD B4') fakeDone.add('ad-b4'); else if (s.tag === 'AD B5') fakeDone.add('ad-b5'); else if (s.tag === 'QUIZ') fakeDone.add('quiz'); else if (s.tag === 'ARTICLE') { fakeDone.add('advertorial'); fakeDone.add('listicle'); } else if (s.tag === 'OFFER') fakeDone.add('offer'); else if (s.tag === 'EMAILS') { fakeDone.add('email-1'); fakeDone.add('email-2'); fakeDone.add('email-3'); } else if (s.tag === 'EBOOK') fakeDone.add('ebook'); } } // Merge fake + live — real progress beats cinematic. const merged = new Set([...fakeDone, ...liveDone]); setDoneAssets(merged); const nextRunning = ASSET_ORDER.find(id => !merged.has(id)); setRunning(nextRunning || null); // Advance to dashboard as soon as there's meaningful content. Ads // land in ~10-20s, bridges in ~30-60s, offer LP in ~60-120s. We don't // wait for all 18 — dashboard lets the user browse as more land. const shouldAdvance = liveDone.has('offer') || (liveDone.size >= 3 && elapsed > 15) || elapsed > 90; if (shouldAdvance && !firedDoneRef.current) { firedDoneRef.current = true; setTimeout(onDone, 900); } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [liveDone]); // Substitute live brand tokens into the cinematic script so real URLs don't // render "drinkolipop.com / 14 SKUs / Olipop persona". const cleanDom = (u) => String(u || '').replace(/^https?:\/\//i,'').replace(/\/$/,''); const store = payload && payload.store; const persona = payload && payload.persona; const tokens = { domain: cleanDom(submittedUrl) || cleanDom(store && store.url) || 'your store', primary: (store && store.brand_primary) || '#E85C2B', accent: (store && store.brand_accent) || '#4A1942', skus: String(((payload && payload.products) || []).length || 14), persona: (persona && persona.short_persona) || 'health-conscious primary buyer', }; const interpolate = (s) => s.replace(/\{\{(\w+)\}\}/g, (_, k) => tokens[k] ?? `{{${k}}}`); const visibleLines = STREAM_SCRIPT.filter(s => t >= s.t).map(l => ({ ...l, msg: interpolate(l.msg) })); // Weighted progress — counts the 9 Worker phases the Opus chain actually // produces (3 ads-roll-up, quiz, emails, offer_lp, advertorial, listicle, // digital_product). Avoids the old "tiles-with-no-phase-behind-them" bug // that made the bar jump to 100% before the pipeline was done. const phases = (payload && payload.meta && payload.meta.phases) || {}; const PHASE_KEYS = ['ads','quiz','advertorial','listicle','offer_lp','emails','digital_product']; const phaseWeight = (k) => phases[k] === 'ready' ? 1 : phases[k] === 'generating' ? 0.4 : 0; const phaseScore = PHASE_KEYS.reduce((acc, k) => acc + phaseWeight(k), 0) / PHASE_KEYS.length; const pct = Math.min(99, Math.round(phaseScore * 100)); const totalSec = Math.floor(Math.min(t, 3600)); const mmss = `${Math.floor(totalSec/60)}:${String(totalSec%60).padStart(2,'0')}`; const headUrl = tokens.domain; return (

We're reading {headUrl}

Extracting your real brand · building your real system. Assets appear as they finish.

ELAPSED {mmss}
{pct}%

Live System Log
odyssey://agents/orchestrator

{visibleLines.map((l,i) => (
{l.t.toFixed(1)}s {l.tag}
))}

{ASSET_ORDER.map(id => { const a = ASSETS.find(x => x.id === id); const isDone = doneAssets.has(id); const isRun = id === running && !isDone; const cls = isDone ? 'done' : isRun ? 'running' : 'pending'; return (

{a.cat} · {a.title}

{isDone ? '✓' : isRun ? 'generating' : 'queued'}

); })}

); } function BrandCard({ payload, submittedUrl }) { const cleanDomain = (u) => String(u || '').replace(/^https?:\/\//i, '').replace(/\/$/, ''); const store = payload && payload.store; const persona = payload && payload.persona; const products = (payload && payload.products) || []; const name = (store && store.name) || 'Olipop'; const domain = cleanDomain(submittedUrl || (store && store.url)) || 'drinkolipop.com'; const platform = (store && store.platform) || 'Shopify'; const primary = (store && store.brand_primary) || '#E85C2B'; const accent = (store && store.brand_accent) || '#4A1942'; // Build a 5-swatch palette: primary + accent + 3 product dominant-colors (unique). const swatches = []; const addSw = (c) => { if (c && !swatches.includes(c)) swatches.push(c); }; addSw(primary); addSw(accent); for (const p of products) { addSw(p.dominant_color || p.color); if (swatches.length >= 5) break; } while (swatches.length < 5) swatches.push(swatches[0] || '#F4E9D8'); const skuCount = products.length || 14; const avgPrice = (() => { const prices = products .map(p => Number(p.price || (p.variants && p.variants[0] && p.variants[0].price))) .filter(Number.isFinite); if (!prices.length) return '$2.49'; return '$' + (prices.reduce((a,b)=>a+b,0) / prices.length).toFixed(2); })(); const voiceSummary = (payload && payload.voice && payload.voice.tone_summary) || (persona && persona.short_angle) || 'Playful · Claim-led'; const icp = (persona && persona.short_persona) || 'F · 28–42'; const tagline = (store && store.tagline) || (persona && persona.full_persona) || 'Playful-functional prebiotic soda. Nostalgic flavor cues, health-forward claims.'; const wordmark = (store && store.logo_url) ? '' : name; return (

BRAND LOCKED

{store ? 'live' : '…'}

{domain}

{store && store.logo_url ? ( ) : (
{wordmark}
)}
{(persona && persona.short_angle) ? String(persona.short_angle).toUpperCase() : 'A NEW KIND OF SODA'}

{products.slice(0,4).map((p,i) => ( p.image_url ? :
))} {products.length === 0 && ( <>

)}

{domain} · {platform}

{name}

{tagline}

Extracted Palette

{swatches.slice(0,5).map((c,i) =>
)}

SKUs
{skuCount}{products.length ? ' products' : ' flavors'}

Avg price
{avgPrice}

Voice
{voiceSummary}

Primary ICP
{icp}

); } // ============== LEVER FRAMING (CPA · LTV · AOV) ============== function LeverFraming() { const levers = [ { k:'CPA ↓', label:'Cost per acquisition', color:'#FF8A5C', sub:'Ads + bridges + lead magnet', pitch:'Cheaper clicks, higher click-to-buy rate. We ship new ad variants weekly — the winners push your CPA down, every week, forever.' }, { k:'AOV ↑', label:'Average order value', color:'#E85BA9', sub:'Bundles + offer stack + upsells', pitch:'Every first-time buyer sees the starter pack, then a subscription upsell, then a post-purchase bundle — each one lifting AOV without raising your ad spend.' }, { k:'LTV ↑', label:'Lifetime value', color:'#5AE6D2', sub:'Email flows + retargeting + digital products', pitch:'Three flows keep customers buying for 180+ days. Reactivated customers flow back to the start — every cohort compounds.' }, ]; return (

THE WHOLE THING, IN THREE LEVERS

Every asset you just saw pulls on one of three levers. Move all three, and the numbers compound.

Ecommerce is three numbers: what it costs you to get a customer, how much they spend, and how long they stick around. Odyssey builds assets for all three, and improves them forever.

{levers.map((l,i) => (

{l.k}

{l.label}

{l.sub}

{l.pitch}

))}

Move each one by just 10% 1.10 × 1.10 × 1.10 = 1.33× your revenue. That's the compounding play.

); } // ============== SPLIT-TEST EXPLAINER ============== function SplitTestExplainer() { const steps = [ { n:'01', t:'Generate unlimited variants', d:'Because there\'s no per-asset cost, we ship 20 versions of every ad, every email, every landing page — every month.' }, { n:'02', t:'Split-test automatically', d:'Each variant runs against the current winner. Traffic routes to the leader. Losers auto-retire.' }, { n:'03', t:'Winners compound', d:'Last month\'s winning ad is this month\'s baseline. Every cycle, your CPA drops, your AOV rises, your LTV stretches.' }, { n:'04', t:'Forever', d:'Agencies ship one campaign and stop. Odyssey ships a new test every week, on autopilot, for one flat fee.' }, ]; return (

◆ THE UNFAIR ADVANTAGE ◆

Unlimited generations mean every piece of this gets better every week.

An agency ships one version and moves on. You get the first draft and that's it. With Odyssey, these 11 assets are only the first cohort — every week, new variants ship, split-test themselves, and the winners replace the old ones.

{steps.map((s,i) => (

{s.n}

{s.t}

{s.d}

))}

); } // ============== INTEGRATION BADGE ============== const INTEGRATIONS = { meta: { name:'Meta Ads Manager', detail:'Auto-publish · tracked', color:'#0866FF', logo:, }, klaviyo: { name:'Klaviyo · Omnisend', detail:'Flows + campaigns live', color:'#232F3E', logo:, }, shopify: { name:'Shopify', detail:'Auto-deployed · live', color:'#5E8E3E', logo:, }, }; function IntegrationBadge({ kind }) { const i = INTEGRATIONS[kind]; if (!i) return null; return (

{i.logo}

{i.name}

{i.detail}

LIVE

); } // ============== FUNNEL SECTIONS ============== const FUNNEL = [ { id:'acquire', cls:'acquire', step:'01', lever:'CPA ↓', kicker:'AD BATCHES · META ADS MANAGER', integration:'meta', title:'Ad Batches — 10 creatives, 2 batches, launched straight into Meta', sub:'Every drop is two batches of 5 ads pushed directly into your Meta Ads Manager. Batch A hits cold audiences with pain-points, stories, and stats. Batch B retargets everyone who saw Batch A with price, urgency, and proof. New drops auto-ship weekly — winners from last week\'s pool seed the next.', automation:[ 'Direct publish to Meta Ads Manager · no uploads', 'UTM + naming convention: OLI_{angle}_{audience}_{date}', 'Auto-launched weekly (or on your cadence)', 'Winners feed the next batch · losers retire automatically', ], assets:['ad-a1','ad-a2','ad-a3','ad-a4','ad-a5','ad-b1','ad-b2','ad-b3','ad-b4','ad-b5'], batches:[ { label:'BATCH A · COLD / AWARENESS', sub:'Top-of-funnel · pain-points, stories, stats · runs against net-new audiences', ids:['ad-a1','ad-a2','ad-a3','ad-a4','ad-a5'] }, { label:'BATCH B · WARM / RETARGETING', sub:'Bottom-of-funnel · price, urgency, proof · runs against everyone who saw Batch A', ids:['ad-b1','ad-b2','ad-b3','ad-b4','ad-b5'] }, ], linkLabel:'Every ad lands on a bridge — never a PDP', }, { id:'convert', cls:'convert', step:'02', lever:'CVR ↑', kicker:'BRIDGES · SHOPIFY-HOSTED', integration:'shopify', title:'Bridges — the warming layer between ad and offer', sub:'Cold clicks almost never buy. Bridges fix that. Quiz, advertorial, and listicle pre-sell cold traffic so by the time visitors see the $19 pack, they\'re ready. Each bridge gets its own unique URL, auto-published to your Shopify, and its own UTMs so you see per-bridge CVR in your Shopify dashboard.', automation:[ 'Auto-deployed to your Shopify as /pages/...', 'Unique UTM per bridge · per-source CVR tracking', 'A/B tests rotate on 2-week cycles', 'Zero-party data from the quiz pipes into Klaviyo segments', ], assets:['quiz','advertorial','listicle'], linkLabel:'All three bridges route into one offer ↓', }, { id:'offer', cls:'offer', step:'03', lever:'AOV ↑', kicker:'THE OFFER · WHERE THE MONEY IS MADE', integration:'shopify', title:'The Offer — standalone page every bridge lands on', sub:'This is where acquisition turns into revenue. The $19 starter pack is your anchor — but the AOV play is the stack: build-your-own bundle → free-ship threshold → subscription upsell → post-purchase bump. Split-tested continuously. Every bridge\'s traffic lands here with its context pre-loaded, so the page personalizes itself (quiz-taker sees their flavor; advertorial-reader sees the matching story beat).', automation:[ 'Auto-personalizes based on which bridge sent the visitor', 'Shopify checkout + native upsell on the thank-you page', 'A/B on price, urgency, bundle size — winners survive', 'Post-purchase drops into the Klaviyo upsell flow', ], assets:['offer'], linkLabel:'Buyer becomes a customer — we keep them forever →', }, { id:'retain', cls:'retain', step:'04', lever:'LTV ↑', kicker:'FLOWS + CAMPAIGNS · KLAVIYO / OMNISEND', integration:'klaviyo', title:'Flows — full sequences pushed live into your ESP', sub:'Not three emails — three complete flows, wired directly into your Klaviyo or Omnisend account. Abandoned cart recovers revenue you already earned. Post-purchase upsell doubles AOV on day 3. 180-day winback revives your dead list. And it goes further: we auto-schedule weekly campaigns, newsletters, and even full 6–12 month educational drip sequences for subscribers.', automation:[ 'Full flows (not one-offs) published directly to Klaviyo / Omnisend', 'Weekly campaigns + newsletters on autopilot', '6–12 month educational sequences for the email list', 'Every send is segmented by zero-party data from the quiz', ], assets:['email-1','email-2','email-3'], linkLabel:'And the whole funnel gets a bonus asset that lifts all 3 levers →', }, { id:'compound', cls:'compound', step:'05', lever:'BONUS · all 3 levers', kicker:'DIGITAL PRODUCT · 3-WAY UTILITY', integration:'shopify', title:'Bonus — a digital product that moves every lever', sub:'A 42-page branded eBook auto-published to Shopify as its own product. Works three ways: (1) free lead magnet that drops your CPA, (2) value-booster bundled into the $19 offer that lifts AOV, (3) standalone $27 product you can sell as an upsell for pure-margin LTV.', automation:[ 'Auto-hosted on Shopify as a digital product + downloadable', 'Toggle between lead-magnet · bundle · standalone in one click', 'Every month: new chapters added from latest reviews + FAQs', 'Delivered via Klaviyo post-optin or post-purchase', ], assets:['ebook'], }, ]; function FunnelSections({ onFocus, payload }) { return (
{FUNNEL.map((sec, si) => (

{sec.step}

{sec.kicker}

{sec.title}

Lever

{sec.lever}

{sec.assets.length} asset{sec.assets.length>1?'s':''} · live

{sec.automation && (

Fully automated · hands-free

{sec.automation.map((line,i) => (
))}

)} {sec.batches ? ( sec.batches.map((b, bi) => (

{b.label}

{b.sub}

{b.ids.length} creatives

{b.ids.map((aid, i) => { const a = ASSETS.find(x => x.id === aid); if (!a) return null; return (
onFocus(a.id)}>

{a.cat}

hover

{a.title}

{a.sub}

↗

WHY IT WORKS

{a.title}

{a.strategy.map((s,j) =>
)}

{a.kpi.map(([k,v],j) => {k} {v})}

); })}

)) ) : (
{sec.assets.map((aid, i) => { const a = ASSETS.find(x => x.id === aid); if (!a) return null; return (
onFocus(a.id)}>

{a.cat}

hover

{a.title}

{a.sub}

↗

WHY IT WORKS

{a.title}

{a.strategy.map((s,j) =>
)}

{a.kpi.map(([k,v],j) => {k} {v})}

); })}
)}
{sec.linkLabel && si < FUNNEL.length - 1 && (

{sec.linkLabel}

)} ))}
); } // ============== DASHBOARD ============== function Dashboard({ onFocus, onFinish, payload, submittedUrl }) { const store = payload && payload.store; const brandName = (store && store.name) || 'your brand'; // Count what the Worker has actually produced so far. const a = (payload && payload.assets) || {}; const readyCount = [ ...(((payload && payload.new_batch && payload.new_batch.ads) || []).filter(Boolean)), a.quiz, a.advertorial, a.listicle, a.offer_lp, a.digital_product, ...(Array.isArray(a.emails) ? a.emails.filter(Boolean) : []), ].filter(Boolean).length; return (

Your whole funnel, live.

A real acquisition-and-retention machine for {brandName}. 10 ads across 2 batches feed 3 bridges. Bridges feed one offer. The offer feeds 3 email flows. And a bonus digital product lifts all three. Every piece improves itself forever.

Live assets
{readyCount || '…'}

Total in plan
18

Agency quote
$18,480

); } // ============== FOCUS OVERLAY ============== // Map an overlay tile id → the generator's asset-type name. These flow // through `UI_TO_WORKER` in generator.js to the Worker kind. const GEN_ASSET_TYPE = { offer: 'offer-page', quiz: 'quiz', advertorial: 'advertorial', listicle: 'listicle', 'email-1': 'email-cart', 'email-2': 'email-upsell', 'email-3': 'email-winback', ebook: 'ebook', }; // Pull the already-generated HTML for a given overlay-id out of the live // payload, if the Worker has produced it. Returns null otherwise. function liveHtmlFor(payload, id) { if (!payload || !payload.assets) return null; const a = payload.assets; if (id === 'offer') return a.offer_lp?.html || null; if (id === 'quiz') return a.quiz?.html || null; if (id === 'advertorial') return a.advertorial?.html || null; if (id === 'listicle') return a.listicle?.html || null; if (id === 'ebook') return a.digital_product?.html || null; if (id === 'email-1' || id === 'email-2' || id === 'email-3') { // Worker ships emails in [upsell, cart, winback] order but the UI // labels them [cart, upsell, winback] — map by role so each tile // shows the email it advertises. const roleFor = { 'email-1':'cart_recovery', 'email-2':'post_purchase_upsell', 'email-3':'non_converter_winback' }; const role = roleFor[id]; const e = Array.isArray(a.emails) ? a.emails.find((em) => em && em.role === role) : null; return wrapEmail(e); } return null; } // Emails arrive as { subject, preview_text, from_name, body_html } from the // Worker — wrap in a minimal gmail-ish shell for the iframe. function wrapEmail(e) { if (!e || !e.body_html) return null; return `${e.subject || ''}
${e.subject || '(no subject)'}
${e.from_name || 'Your Brand'} <hi@yourbrand.com>
${e.body_html}
`; } function FocusOverlay({ id, onClose, previewId, payload }) { useEffect(() => { document.body.classList.add('no-scroll'); return () => document.body.classList.remove('no-scroll'); }, []); useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); if (e.key === 'ArrowRight') nav(1); if (e.key === 'ArrowLeft') nav(-1); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }); const nav = (d) => { const idx = ASSET_ORDER.indexOf(id); const next = ASSET_ORDER[(idx + d + ASSET_ORDER.length) % ASSET_ORDER.length]; window.__setFocus && window.__setFocus(next); }; const a = ASSETS.find(x => x.id === id); // Live state: regen results keyed by asset-id (user may regenerate). const [liveByAsset, setLiveByAsset] = useState({}); const [genStatus, setGenStatus] = useState({ phase: 'idle' }); const blobUrlsRef = useRef([]); useEffect(() => () => { blobUrlsRef.current.forEach((u) => URL.revokeObjectURL(u)); }, []); const genAssetType = GEN_ASSET_TYPE[id]; // If the Worker already produced HTML for this asset, render it by // default (unless the user has regenerated locally). const payloadHtml = useMemo(() => liveHtmlFor(payload, id), [payload, id]); const payloadSrc = useMemo(() => { if (!payloadHtml) return null; try { return URL.createObjectURL(new Blob([payloadHtml], { type: 'text/html' })); } catch { return null; } }, [payloadHtml]); useEffect(() => () => { if (payloadSrc) URL.revokeObjectURL(payloadSrc); }, [payloadSrc]); const live = liveByAsset[id] || (payloadSrc ? { src: payloadSrc, meta: { model: 'claude-opus-4-7', fromWorker: true } } : null); const brandId = (payload && payload.store && payload.store.name) || 'your brand'; const regenerate = async ({ forceRegen = true } = {}) => { if (!genAssetType || !window.Odyssey || !window.Odyssey.generateAsset) { setGenStatus({ phase: 'error', error: 'Odyssey generator not loaded' }); return; } if (!previewId) { setGenStatus({ phase: 'error', error: 'No previewId — submit a URL first' }); return; } try { const t0 = performance.now(); setGenStatus({ phase: 'loading' }); const result = await window.Odyssey.generateAsset({ previewId, assetType: genAssetType, forceRegen, onStatus: (s) => setGenStatus(s), }); const src = window.Odyssey.htmlToBlobUrl(result.html); blobUrlsRef.current.push(src); setLiveByAsset((prev) => ({ ...prev, [id]: { src, meta: result } })); setGenStatus({ phase: 'done', elapsedMs: Math.round(performance.now() - t0), model: result.model }); } catch (err) { console.error('[regenerate]', err); setGenStatus({ phase: 'error', error: err && err.message ? err.message : String(err) }); } }; if (!a) return null; const renderFull = () => { const wrap = (child) =>
{child}
; const fullHTML = (src, {w=1280, h=3200, url='olipop.com', phone=false}={}) => (

); // Ads: show the live product-locked GPT Image 2 creative as a clean 1:1 // square. No phone chrome, no fake username, no like-comment-share — this // is what lands in Meta Ads Manager. const adSquare = () => { const ads = (payload && payload.new_batch && payload.new_batch.ads) || []; const idxMap = { 'ad-a1':0, 'ad-a2':1, 'ad-a3':2, 'ad-a4':3, 'ad-a5':4, 'ad-b1':5, 'ad-b2':6, 'ad-b3':7, 'ad-b4':8, 'ad-b5':9, }; const i = idxMap[id]; const ad = ads[i]; const img = ad && (ad.generated_image_url || ad.image_url); return (

{img ? :
Generating ad…
}

); }; switch (id) { case 'ad-a1': case 'ad-a2': case 'ad-a3': case 'ad-a4': case 'ad-a5': case 'ad-b1': case 'ad-b2': case 'ad-b3': case 'ad-b4': case 'ad-b5': return adSquare(); case 'quiz': return fullHTML(live?.src || 'assets/quiz-landing.html', {w:1280, h:1800, url:'your-store.com/quiz'}); case 'advertorial': return fullHTML(live?.src || 'assets/advertorial.html', {w:900, h:3600, url:'healthdesk-weekly.com/article'}); case 'listicle': return fullHTML(live?.src || 'assets/listicle.html', {w:900, h:4200, url:'theeatguide.com/best-in-category'}); case 'offer': return fullHTML(live?.src || 'assets/offer-page.html', {w:1280, h:3400, url:'your-store.com/starter'}); case 'email-1': return fullHTML(live?.src || 'assets/email-cart.html', {w:680, h:1800, url:'mail.google.com'}); case 'email-2': return fullHTML(live?.src || 'assets/email-upsell.html', {w:680, h:1800, url:'mail.google.com'}); case 'email-3': return fullHTML(live?.src || 'assets/email-winback.html', {w:680, h:1800, url:'mail.google.com'}); case 'ebook': return fullHTML(live?.src || 'assets/ebook.html', {w:1200, h:1600, url:'your-store.com/ebook'}); default: return null; } }; return (
{if(e.target===e.currentTarget) onClose();}}>

{String(ASSET_ORDER.indexOf(id)+1).padStart(2,'0')}

{a.cat}

{a.title}

{renderFull()}

Why this works

{a.strategy.map((s,i) =>
/g,'').replace(/<\/strong>/g,'')}}/>)}

Performance targets

{a.kpi.map(([k,v],i) => (

{k}

{v}

))}

{genAssetType && (

✦ Regenerate with Opus 4.7

Fresh HTML, live from claude-opus-4-7, composed from the {brandId} BrandKit + this asset's brief + our hand-built reference. Briefs, not templates.

{live && ( )}

Model · Opus 4.7 Brand · {brandId} {live && ( Live · {((live.meta.elapsedMs || 0) / 1000).toFixed(1)}s{live.meta.cached ? ' · cached' : ''} )} {genStatus.phase === 'loading' && ( {genStatus.phase === 'loading' && genStatus.promptChars ? `Prompting · ${(genStatus.promptChars / 1000).toFixed(1)}k chars` : 'Loading brief + brand + example…'} )}
{genStatus.phase === 'error' && (
{genStatus.error} · Using the hand-built reference.
)}
)}

⚡ Install this forever

This asset is yours to download. But the system that made it — running unlimited, on your schedule, tuned to your catalog — is a 30-min install.

); } // ============== FINALE ============== function Finale() { const stackItems = [ { n:'01', name:'10 Meta ad creatives · 2 batches', sub:'5 cold + 5 warm · agency rate: $4,000 · 3 weeks', val:'$4,000' }, { n:'02', name:'Quiz landing page', sub:'Custom build + CRO copy', val:'$2,400' }, { n:'03', name:'Advertorial + Listicle pages', sub:'Long-form · SEO-ready', val:'$1,800' }, { n:'04', name:'$19 starter-pack offer page', sub:'High-conversion template', val:'$2,200' }, { n:'05', name:'3 revenue-recovery emails', sub:'Klaviyo-ready flows', val:'$1,800' }, { n:'06', name:'Branded 42-page lead magnet', sub:'PDF · fully your brand', val:'$2,800' }, { n:'07', name:'Brand intelligence dossier', sub:'Palette · persona · catalog audit', val:'$2,080' }, ]; const today = new Date(); const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1).getDay(); const daysInMonth = new Date(today.getFullYear(), today.getMonth()+1, 0).getDate(); const days = []; for (let i = 0; i < firstOfMonth; i++) days.push({ label: '', other: true }); for (let d = 1; d <= daysInMonth; d++) { const isAvail = d >= today.getDate() && d <= today.getDate()+12 && ![0,6].includes(new Date(today.getFullYear(), today.getMonth(), d).getDay()); days.push({ label: d, avail: isAvail, selected: d === today.getDate()+2 }); } return (

✦ The pitch ✦

You didn't lift a finger.
This is your system.

What we just built for Olipop in 13.2 seconds is what an agency would quote you $17,080 for — and deliver in 3 weeks. You're not here to buy these 18 assets. You're here to install the machine that makes this, unlimited, on your schedule.

What you just watched get built

AGENCY EQUIVALENT COST

{stackItems.map((it,i) => (

{it.n}

{it.name}{it.sub}

{it.val}

))}

If you paid an agency, once

3 weeks. One campaign. Then you pay again for the next one.

$17,080Per drop · agency quote

THE ODYSSEY INSTALL

Unlimited, forever — for less than one agency drop. $10,497 flat.

30-minute install call. We wire Odyssey into your Shopify, Klaviyo, and Meta. Then you hit "go" on a new campaign whenever you want — ads, pages, emails, lead magnets — built in under a minute. Your brand. Your catalog. Unlimited.

One-time fee · no monthly, no per-seat, no token metering

Unlimited generations — every new SKU, every launch, every test

Direct-to-Shopify + Klaviyo + Meta publishing

Your team trained in the install call · Loom follow-up

Book a 30-min install call

This week only · 3 slots

3
slots left · this week

12
founders booked · last 7d

$10,497
flat · one-time

April 2026

‹›

{['S','M','T','W','T','F','S'].map((d,i)=>
{d}
)} {days.map((d,i) => (
{d.label}
))}

Available slots · Friday {today.getDate()+2} April

9:00 AM

10:30 AM

1:00 PM

2:30 PM

4:00 PM

5:00 PM

30 minutes · no pitch deck · just the install

★★★★★

"We retired our agency the week after the install. Not kidding."

Maya J.
Founder · Tenure Skincare$2.4M ARR

★★★★★

"Paid for itself in one Black Friday creative test. The ROI is stupid."

David R.
Head of Growth · Forma$8.1M ARR

★★★★★

"I ship a new landing page every Tuesday now. Used to take 3 weeks."

Rachel K.
CMO · Nook Home$5.7M ARR

Odyssey · we install the system, the system does the rest

); } // ============== TOP BAR ============== function TopBar({ stage, submittedUrl, onReset }) { const cleanDomain = (u) => String(u || '').replace(/^https?:\/\//i, '').replace(/\/$/, ''); const domain = cleanDomain(submittedUrl) || 'drinkolipop.com'; return (

Odyssey· preview

{stage !== 'entry' && (
{domain}
)} Book a call →

); } // ============== APP ============== function App() { const [stage, setStage] = useState(() => localStorage.getItem('odyssey-stage') || 'entry'); const [focus, setFocus] = useState(null); // Live-build state. previewId comes back from POST /api/generate; payload // is polled from GET /api/preview/:id and holds the extracted store + // generated assets as they land. const [previewId, setPreviewId] = useState(() => { try { return localStorage.getItem('odyssey:live-preview-id') || null; } catch { return null; } }); const [submittedUrl, setSubmittedUrl] = useState(() => localStorage.getItem('odyssey-submitted-url') || ''); const [payload, setPayload] = useState(null); useEffect(() => { localStorage.setItem('odyssey-stage', stage); }, [stage]); useEffect(() => { window.__setFocus = setFocus; }, []); // Re-skin the UI to the customer's extracted brand color once their // palette is live. Overrides the Odyssey cyan default by setting CSS // custom properties inline on — the rest of the UI (topbar pill, // stage-glow, buttons, stats, stream, dashboard accents, finale) already // reads --coral / --coral-rgb / --plum, so this cascades everywhere. useEffect(() => { const brandStages = new Set(['extracting','generating','dashboard','finale']); const b = document.body; const inStage = brandStages.has(stage); const primary = payload && payload.store && payload.store.brand_primary; const accent = payload && payload.store && payload.store.brand_accent; if (!inStage || !primary) { // Default back to the cyan Odyssey palette between builds / on Entry. b.style.removeProperty('--coral'); b.style.removeProperty('--coral-rgb'); b.style.removeProperty('--coral-ink'); b.style.removeProperty('--plum'); b.removeAttribute('data-brand'); return; } // Parse hex → "r, g, b" for rgba() compositing. const hexToRgb = (hex) => { const m = /^#?([0-9a-f]{6})$/i.exec(String(hex || '')); if (!m) return null; const n = parseInt(m[1], 16); return `${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}`; }; // Pick readable ink color against the brand primary (white for dark // brands, near-black for light brands). Basic luminance test. const inkFor = (hex) => { const rgb = hexToRgb(hex); if (!rgb) return '#ffffff'; const [r, g, bl] = rgb.split(', ').map(Number); // Rec. 709 luma const L = (0.2126 * r + 0.7152 * g + 0.0722 * bl) / 255; return L > 0.62 ? '#0A0A0E' : '#ffffff'; }; const rgb = hexToRgb(primary); if (rgb) { b.style.setProperty('--coral', primary); b.style.setProperty('--coral-rgb', rgb); b.style.setProperty('--coral-ink', inkFor(primary)); } if (accent) b.style.setProperty('--plum', accent); // data-brand stays set (informational) so Olipop fixtures still win // when we explicitly switch to them. b.setAttribute('data-brand', (payload && payload.store && payload.store.brand_code) || 'live'); }, [stage, payload]); // Kicked off from Entry. Hits the deployed Worker, gets a previewId, fans // out all asset generators, and advances to extracting. Polling starts // once previewId is set. const handleStart = async ({ url, email }) => { if (!window.Odyssey || !window.Odyssey.startLiveBuild) { throw new Error('Odyssey live-build API not loaded'); } const { id } = await window.Odyssey.startLiveBuild({ url, email }); setPreviewId(id); setSubmittedUrl(url); try { localStorage.setItem('odyssey-submitted-url', url); } catch {} setPayload(null); setStage('extracting'); }; // Poll the Worker payload every 2.5s while we have a previewId. Keeps // payload fresh for all downstream stages (Extraction reads .store, // Generation reads .assets + .new_batch.ads, FocusOverlay reads // .assets..html for instant iframe preview). useEffect(() => { if (!previewId) return; if (!window.OdysseyAPI) return; let cancelled = false; let timer = null; const tick = async () => { try { const p = await window.OdysseyAPI.getPayload(previewId); if (!cancelled) setPayload(p); } catch (e) { // transient — keep polling } finally { if (!cancelled) timer = setTimeout(tick, 2500); } }; tick(); return () => { cancelled = true; if (timer) clearTimeout(timer); }; }, [previewId]); // If a previewId was persisted in localStorage across a reload, auto-resume // by re-firing the fan-out so the Worker keeps producing (Worker ops are // idempotent per-kind). useEffect(() => { if (!previewId || !window.OdysseyAPI) return; try { window.OdysseyAPI.fanOut(previewId); } catch {} }, [previewId]); const resetBuild = () => { try { localStorage.removeItem('odyssey:live-preview-id'); } catch {} try { localStorage.removeItem('odyssey-submitted-url'); } catch {} setPreviewId(null); setSubmittedUrl(''); setPayload(null); setFocus(null); setStage('entry'); }; return ( <>

{stage === 'entry' && } {stage === 'extracting' && setStage('generating')} payload={payload} submittedUrl={submittedUrl}/>} {stage === 'generating' && setStage('dashboard')} payload={payload} submittedUrl={submittedUrl}/>} {stage === 'dashboard' && setStage('finale')} payload={payload} submittedUrl={submittedUrl}/>} {stage === 'finale' && }
{focus && setFocus(null)} previewId={previewId} payload={payload}/>}
{['entry','extracting','generating','dashboard','finale'].map(s => ( ))}
); } ReactDOM.createRoot(document.getElementById('app')).render();

Your entire growth engine.Built in the next 3 minutes.

Extracting {domainLabel}

We're reading {headUrl}

Live System Log

Every asset you just saw pulls on one of three levers. Move all three, and the numbers compound.

Unlimited generations mean every piece of this gets better every week.

{sec.title}

{a.title}

{a.title}

{a.title}

{a.title}

Your whole funnel, live.

{a.title}

Why this works

Performance targets

✦ Regenerate with Opus 4.7

⚡ Install this forever

You didn't lift a finger.This is your system.

What you just watched get built

Unlimited, forever — for less than one agency drop. $10,497 flat.

Your entire growth engine.
Built in the next 3 minutes.

You didn't lift a finger.
This is your system.