/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE, PC_ACCENTS, MShell, MHead, MGenerate */ // Photo Control feature page — mobile layout. const { useState: pcmS } = React; const MPCHero = () => { const [ref, on] = useReveal(0.25); return (
sozee
Features / Photo Control

Don’t prompt it.
Direct it.

Five dimensions you set before you generate — Setting, Outfit, Shot style, Expression, Object — from presets and your own libraries.

Start directing
{[['assets/control/top-red.webp', 'Outfit', '#fff'], ['assets/control/skirt-black.webp', 'Outfit', '#fff'], ['assets/control/shot-mirror.webp', 'Shot', null], ['assets/control/expression-surprised.jpg', 'Mood', null], ['assets/control/collar-silver.png', 'Object', '#fff'], ['assets/control/room.png', 'Setting', null]].map(([src, label, bg], i) =>
{label}
)}
The shot
Scarlett {Object.entries(PC_ACCENTS).map(([n, ac]) => {n})}
); }; // eyebrows are hero-only on mobile — keep the heading, drop the pill const MPCBadgeHead = ({ title, sub }) => ; // § 01 Setting const MPC_SETTINGS = [ { src: 'assets/settings/my-room.png', name: 'My bedroom' }, { src: 'assets/control/room.png', name: 'Hotel suite' }]; const MPCSetting = () => { const [sel, setSel] = pcmS(0); return ( Any setting.
One click.} sub="A setting is built from a few reference photos of the real room — then every photo shoots there. One click sets the scene." />
{MPC_SETTINGS.map((s, i) =>
setSel(i)} style={{ position: 'relative', borderRadius: 12, overflow: 'hidden', aspectRatio: '1/1.05', cursor: 'pointer', outline: sel === i ? '2px solid var(--brand-purple-500)' : '1px solid rgba(28,27,27,0.1)', outlineOffset: -1 }}> {s.name}
)}
Save a setting
); }; // § 02 Outfit — compact Outfit library const MOL_CATS = [ { k: 'top', label: 'Tops', all: 107, items: ['assets/garments/top-crop-white.webp', 'assets/garments/top-velvet-emerald.webp', 'assets/garments/top-bodysuit-black.webp'] }, { k: 'bottom', label: 'Bottoms', all: 60, items: ['assets/garments/bottom-mini-oxblood.webp', 'assets/garments/bottom-denim-lightwash.webp'] }, { k: 'shoes', label: 'Shoes', all: 30, items: ['assets/garments/shoe-stiletto-gold.webp', 'assets/garments/shoe-thigh-black.webp'] }, { k: 'acc', label: 'Accessories', all: 60, items: ['assets/garments/acc-garter-black.webp', 'assets/control/collar-silver.png'] }]; const MPCOutfit = () => { const [cat, setCat] = pcmS(0); const [sel, setSel] = pcmS({ top: 0, bottom: null, shoes: null, acc: null }); const c = MOL_CATS[cat]; return ( Upload any outfit.
They wear it.} sub="Photograph a garment you own — or pick from 700+ pieces — and put your Character in it, exactly, in every shot." />
Outfit library Your saved pieces — pick one per category.
{MOL_CATS.map((g, i) => setCat(i)} style={{ borderRadius: 9999, padding: '6px 11px', fontSize: 10, fontWeight: i === cat ? 700 : 600, cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0, background: i === cat ? INK : '#fff', color: i === cat ? '#fff' : 'rgba(28,27,27,0.6)', boxShadow: i === cat ? 'none' : 'inset 0 0 0 1px rgba(28,27,27,0.12)' }}>{g.label})}
All {c.label} {c.all} items
Upload your own
{c.items.map((src, i) => { const on = sel[c.k] === i; return (
setSel({ ...sel, [c.k]: on ? null : i })} style={{ position: 'relative', borderRadius: 10, overflow: 'hidden', aspectRatio: '1/0.94', cursor: 'pointer', background: '#fff', outline: on ? '2px solid var(--brand-purple-500)' : '1px solid rgba(28,27,27,0.1)', outlineOffset: -1 }}> {on && }
); })} {c.items.length < 3 &&
+ {c.all - c.items.length} more
}
{[['top', 'TOP'], ['bottom', 'BOT'], ['shoes', 'SHO'], ['acc', 'ACC']].map(([k, l]) => { const g = MOL_CATS.find(x => x.k === k); const has = sel[k] !== null && sel[k] !== undefined; return ( {has ? : {l}} ); })} Save to outfit
); }; // § 03 Shot style const MPC_SHOTS = [ ['assets/shots/pov_selfie.webp', 'POV selfie'], ['assets/shots/mirror.webp', 'Mirror'], ['assets/shots/candid.webp', 'Candid'], ['assets/shots/studio.webp', 'Studio'], ['assets/shots/ringlight.webp', 'Ringlight']]; const MPCShots = () => { const [sel, setSel] = pcmS(0); return ( Select any
shot style.} sub="Five camera presets, one tap apart — the same scene reads completely differently through each." />
{MPC_SHOTS.map(([src, name], i) =>
setSel(i)} style={{ width: 118, flexShrink: 0, cursor: 'pointer', transform: `rotate(${i % 2 ? 1.3 : -1.3}deg)` }}>
{name}
{name}
)}
); }; // § 04 Expression const MPC_EXPR = [['soft_smile', 'Soft smile'], ['playful_laugh', 'Laugh'], ['playful_wink', 'Wink'], ['seductive', 'Seductive'], ['biting_lip', 'Biting lip'], ['blow_kiss', 'Blow a kiss'], ['innocent', 'Innocent'], ['neutral', 'Neutral'], ['surprised', 'Surprised'], ['tongue_out', 'Tongue out']]; const MPCExpression = () => { const [sel, setSel] = pcmS(3); return ( Any mood
in 1-click.} sub="Ten expressions from soft smile to seductive, applied without touching the prompt." />
Expression {MPC_EXPR[sel][1]}
{MPC_EXPR.map(([k, name], i) =>
setSel(i)} style={{ cursor: 'pointer' }}>
{name}
)}
The face changes, nothing else does.
); }; // § 05 Object const MPCObject = () => ( Upload or choose
custom objects.} sub="Up to four objects in frame — including your brand-deal product, pixel-consistent in every shot of the set." />
Your product ↗
Library
Add a prop
Brands: this is how the product stays recognizable across a campaign.
 ); // § 06 pipeline const MPC_NEXT = [ { t: 'Create Image', d: 'Your controls ride along on every generate.', kind: 'image', href: '/create-image' }, { t: 'Create Video', d: 'The five dimensions hold when it moves.', kind: 'video', href: '/create-video' }, { t: 'Photo Shoot', d: 'One directed photo becomes a locked set of ten.', kind: 'shoot', href: '/#05 Photo Shoot' }]; const MPCPipeMedia = ({ kind }) => (
{kind === 'image' &&
{['assets/create/out-mirror.webp', 'assets/create/out-garden.webp'].map((src, i) => )}
GENERATE ✦ } {kind === 'video' && } {kind === 'shoot' &&
{[1, 2, 3, 4].map((n, i) => )}
}
); const MPCPipeline = () => ( Direct once.
It holds everywhere.} sub="The five controls ride along on everything the studio makes." />
{MPC_NEXT.map((c, i) =>
{c.t}
{c.d}
 )}
See the full tour → ); const MPCPage = () => (
); Object.assign(window, { MPCPage });