/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE, PC_ACCENTS */ // Photo Control feature page — one section per ability, each accenting the real UI. const { useState: pcS } = React; const PCBadge = ({ label, ac = '#813CED', bg = CREAM }) =>
{label}
; const PCPanelCard = ({ children }) =>
{children}
; const PCSectionShell = ({ label, ac, h1, h2, sub, note, panel, flip = false, lean = 'right', bg = '#fff' }) => (

{h1}
{h2}

{sub}

 Join for free {note &&
{note}
}
{panel}
); // ---------- § 01 Setting ---------- const PC_SETTINGS = [ { src: 'assets/settings/my-room.png', name: 'My bedroom', tag: 'Saved · 4 photos' }, { src: 'assets/control/room.png', name: 'Hotel suite', tag: 'Saved · 4 photos' }]; const SettingPanel = () => { const [sel, setSel] = pcS(0); return (
Settings · saved environments
{PC_SETTINGS.map((s, i) =>
setSel(i)} style={{ position: 'relative', borderRadius: 13, 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} {sel === i ? 'In use' : s.tag}
)}
Save a setting
A setting is built from a few reference photos of the real room — then every photo in the set shoots there. Same light, same corner, same world.
); }; // ---------- § 02 Outfit — the Outfit library modal ---------- const OL_CATS = [ { k: 'top', label: 'Tops', all: 107, up: 2, subs: [['Crop Tops', 9], ['Bodysuits', 6], ['Bralettes & Bra Tops', 6], ['Going-Out Tops', 6], ['Sheer & Lace Tops', 3], ['Sports Bras & Acti…', 15], ['Tees & T-Shirts', 12], ['Tanks & Camis', 9]], 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, up: 1, subs: [['Skirts', 14], ['Denim', 12], ['Shorts', 9], ['Leggings', 8], ['Trousers', 10], ['Micro & Minis', 7]], items: ['assets/garments/bottom-mini-oxblood.webp', 'assets/garments/bottom-denim-lightwash.webp'] }, { k: 'shoes', label: 'Shoes', all: 30, up: 0, subs: [['Heels', 12], ['Boots', 8], ['Sneakers', 6], ['Sandals', 4]], items: ['assets/garments/shoe-stiletto-gold.webp', 'assets/garments/shoe-thigh-black.webp'] }, { k: 'acc', label: 'Accessories', all: 60, up: 1, subs: [['Jewelry', 18], ['Belts & Garters', 9], ['Bags', 12], ['Hosiery', 11]], items: ['assets/garments/acc-garter-black.webp', 'assets/control/collar-silver.png'] }]; const OL_SLOTS = [['top', 'TOP'], ['bottom', 'BOT'], ['shoes', 'SHO'], ['acc', 'ACC']]; const OutfitPanelPC = () => { const [cat, setCat] = pcS(0); const [sel, setSel] = pcS({ top: 0, bottom: null, shoes: null, acc: null }); const c = OL_CATS[cat]; return (
Outfit library Your saved pieces — pick one per category.
{OL_CATS.map((g, i) => setCat(i)} style={{ borderRadius: 9999, padding: '7px 13px', fontSize: 11.5, fontWeight: i === cat ? 700 : 600, cursor: 'pointer', transition: 'all 0.18s', 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})} Search all pieces…
{c.label}
Uploads {c.up} All{c.all} {c.subs.map(([s, n]) => {s} {n})}
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: 11, 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
}
{OL_SLOTS.map(([k, l]) => { const g = OL_CATS.find(x => x.k === k); const has = sel[k] !== null && sel[k] !== undefined; return ( {has ? : {l}} ); })} Pick pieces to build the look Cancel Save to outfit
); }; // ---------- § 03 Shot style ---------- const PC_SHOTS = [ ['assets/shots/pov_selfie.webp', 'POV iPhone selfie'], ['assets/shots/mirror.webp', 'Mirror selfie'], ['assets/shots/candid.webp', 'Candid shot'], ['assets/shots/studio.webp', 'Studio'], ['assets/shots/ringlight.webp', 'Ringlight']]; const ShotStyleSection = () => { const [sel, setSel] = pcS(0); return (

Select any
shot style.

Five camera presets, one tap apart — the same scene reads completely differently through each. Tap one.

{PC_SHOTS.map(([src, name], i) =>
setSel(i)} style={{ width: 176, cursor: 'pointer', transform: `rotate(${i % 2 ? 1.4 : -1.4}deg)` }}>
{name} {sel === i && }
{name}
 )}
); }; // ---------- § 04 Expression ---------- const PC_EXPR = [ ['soft_smile', 'Soft smile'], ['playful_laugh', 'Playful 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 ExpressionPanel = () => { const [sel, setSel] = pcS(3); return (
Expression · ten moods {PC_EXPR[sel][1]}
{PC_EXPR.map(([k, name], i) =>
setSel(i)} style={{ cursor: 'pointer', textAlign: 'center' }}>
{name}
{name}
)}
Applied without touching the prompt — the face changes, nothing else does.
); }; // ---------- § 05 Object ---------- const ObjectPanel = () => (
Objects · 1 of 4 · props
A handbag, a coffee cup, a phone — anything held or placed in frame. Up to 4 per set.
Your product ↗
From library
Add a prop
Choose from library
); const SettingSection = () => } />; const OutfitSection = () => } />; const ExpressionSection = () => } />; const ObjectSection = () => } />; // ---------- § 06 — Where it goes next ---------- const PCP_PANEL = { borderRadius: '12px 12px 0 0', background: '#fff', boxShadow: '0 10px 24px rgba(28,27,27,0.10), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 10, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }; const PC_NEXT = [ { t: 'Create Image', d: 'Your controls ride along on every generate — type the scene, the direction is already set.', kind: 'image', href: '/create-image' }, { t: 'Create Video', d: 'The same five dimensions hold when it moves — outfit, room and product stay locked on film.', kind: 'video', href: '/create-video' }, { t: 'Photo Shoot', d: 'One directed photo becomes a locked set of ten. Same outfit, same room, ten angles.', kind: 'shoot', href: '/#05 Photo Shoot' }]; const PCPipeMedia = ({ kind }) => (
{kind === 'image' &&
{['assets/create/out-mirror.webp', 'assets/create/out-garden.webp', 'assets/create/out-gym.webp'].map((src, i) =>
)}
mirror selfie in my bedroom GENERATE ✦
} {kind === 'video' &&
{['Scarlett', '9:16', 'Photo Control'].map(c => {c})}
} {kind === 'shoot' &&
Lazy morning · set 10 shots
{[1, 2, 3, 4, 5, 6].map((n, i) =>
)}
}
); const PCPipelineSection = () => (

Direct once.
It holds everywhere.

The five controls ride along on everything the studio makes.

See the full tour →
{PC_NEXT.map((c, i) =>
{c.t}
{c.d}
 )}
); Object.assign(window, { SettingSection, OutfitSection, ShotStyleSection, ExpressionSection, ObjectSection, PCPipelineSection });