// Chapter II — Product placement. // A flat product mock placed into a real photograph. // Layout: ingredients (scene + product) → big hero output with model thumbnails → variation grid. function ExProductPlacement() { const [activeModel, setActiveModel] = React.useState(0); const models = Array.from({ length: 9 }, (_, i) => `assets/marlboro-model-${String(i + 1).padStart(2, '0')}.jpg`); // Preload all model images so switching is instant React.useEffect(() => { models.forEach(src => { const img = new Image(); img.src = src; }); }, []); return ( Place a product. Into a real scene.} kicker={<>The original photograph is authentic from the Vault Stock Library.
The product is a flat e-commerce image. Product Studio puts one inside the other and matches the light, the angle, the grain.} tone="deep"> {/* Hero + side rail: large output on the left, ingredients stacked above the 3×3 model picker on the right. */}

{/* LEFT: Hero output */}

Output

{/* RIGHT: Ingredients stacked above Models */}

{/* Ingredients */}

Ingredients

{[ { src: 'assets/marlboro-original.jpg', label: 'Scene', tone: 'photo' }, { src: 'assets/marlboro-product.jpg', label: 'Product', tone: 'neutral' }, ].map((it, i) => (

{String(i + 1).padStart(2, '0')} {it.label}

))}

{/* Models picker — 3×3 grid */}

Models · 9 picks

{models.map((src, i) => ( ))}

Tap a face to swap

{/* Variation grid */}

{[1, 2, 3, 4, 5, 6, 7, 8].map((n) => )}

OUTPUT

); } Object.assign(window, { ExProductPlacement });