/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, useTyping, Shimmer, SB_EASE, MPill, MPillP, MShell, MRail, MHead, MGenerate */ // Create Image feature page — mobile layout (formats follow site-mobile). const { useState: cmS, useEffect: cmE } = React; const MCI_PROMPT = 'mirror selfie of me in a white crop top and jean shorts in my bedroom'; const MCI_OUTS = [{ src: 'assets/create/out-mirror.webp' }, { src: 'assets/create/out-garden.webp' }]; // ---------- hero ---------- const MCIHero = () => { const [ref, on] = useReveal(0.25); const [phase, setPhase] = cmS('idle'); const [typed, doneTyping] = useTyping(MCI_PROMPT, phase !== 'idle', 28, 400); cmE(() => { if (on && phase === 'idle') setPhase('typing'); }, [on]); cmE(() => { if (phase === 'typing' && doneTyping) { const t = setTimeout(() => setPhase('gen'), 650); return () => clearTimeout(t); } if (phase === 'gen') { const t = setTimeout(() => setPhase('done'), 1700); return () => clearTimeout(t); } if (phase === 'done') { const t = setTimeout(() => setPhase('typing'), 6000); return () => clearTimeout(t); } }, [phase, doneTyping]); const ready = phase === 'done'; return (
sozee
Features / Create Image

Type a scene.
Get the set.

One sentence becomes one to four photos of your Character — 4:5 or 9:16, up to 4K. The first image lands in about twenty seconds.

Start generating
{['Create Image', 'Create Video', 'Live Mode'].map((m, i) => {m} )}
{MCI_OUTS.map((g, i) => { // only the first tile plays the generate → reveal animation; the rest // are already part of the set and stay in place across the loop const anim = i === 0; const shown = anim ? ready : true; return (
{anim && !ready && } {shown ? `${i + 1} / 3` : phase === 'gen' ? 'Generating…' : 'Waiting'}
); })}
{typed || 'Describe the scene, or drop a reference image…'} {phase === 'typing' && }
Scarlett {['1K', '4:5', 'Photo Control'].map(c => {c})}
); }; // ---------- § 01 — Reference to Image ---------- const MCIRef = () => { const [ref, on] = useReveal(0.35); return ( Seen the shot?
Drop it in.} sub="Drag any photo into the composer — a pose, a framing, a light — and Sozee re-shoots it as your Character. The prompt is optional." /> Join for free
Reference The reference
Your Character Your Character
keep the pose, framing and light

Works with anything — a saved post, a photo from your camera roll, a past shot you want to run back.

); }; // ---------- § 04 — Formats & quality ---------- const MCI_FMT = [ { src: GENS[1].src, ar: '4 / 5', chip: '4:5 · Feed' }, { src: GENS[3].src, ar: '9 / 16', chip: '9:16 · Stories & Reels' }, { src: GENS[0].src, ar: '4 / 5', chip: '1K · 2K · 4K', badge: '4K' }]; const MCIFormats = () => ( Every format
the feed asks for.} sub="Portrait for the feed, tall for Stories — one to four photos per run, rendered up to 4K. Pick the shape before you generate." />
{[{ ...MCI_FMT[0], w: 158, r: '-3.5deg', mt: 14, z: 1 }, { ...MCI_FMT[1], w: 122, r: '2.5deg', mt: 0, ml: -26, z: 3 }, { ...MCI_FMT[2], w: 152, r: '-1.5deg', mt: 30, ml: -24, z: 2 }].map((f, i) =>
{f.badge && {f.badge}}
{f.chip}
 )}
); // ---------- § 06 — Where the image goes next ---------- const MCI_NEXT = [ { t: 'Photo Shoot', d: 'Pick the best photo — Sozee shoots a locked set of ten around it.', kind: 'shoot', tag: 'Turn 1 into 10', href: '/#05 Photo Shoot' }, { t: 'Create Video', d: 'Make it move — same scene, with her voice on the track.', kind: 'video', tag: 'Direct the take', href: '/create-video' }, { t: 'The Scheduler', d: 'Queue it to six platforms straight from the board.', kind: 'sched', tag: 'Queued · IG · 9:00', href: '/#11 Scheduler' }]; const MPipeMedia = ({ kind }) => (
{kind === 'shoot' &&
{[1, 2, 3, 4].map((n, i) => )}
} {kind === 'video' && GENERATE ✦ } {kind === 'sched' &&
{[['assets/gen/beach-pool.png', 'IG · 9:00'], ['assets/shoot/set-2.webp', 'TT · 12:30'], ['assets/create/out-garden.webp', 'OF · 6:00']].map(([src, l]) => {l} )}
}
); const MCIPipeline = () => ( One image is
just the start.} sub="Every photo lands on a board wired into the rest of the studio." />
{MCI_NEXT.map((c, i) =>
{c.tag}
{c.t}
{c.d}
 )}
See the full tour → ); // sticky bottom CTA for the mobile layout const MCISticky = () => { const [on, setOn] = cmS(false); cmE(() => { const check = () => { // hide again once the closing CTA + footer comes into view — the bar never overlaps it const foot = document.querySelector('[data-screen-label="CTA + Footer"]'); const atFooter = foot ? foot.getBoundingClientRect().top < window.innerHeight - 40 : false; setOn(window.scrollY > window.innerHeight * 0.9 && !atFooter); }; window.addEventListener('scroll', check, { passive: true }); check(); return () => window.removeEventListener('scroll', check); }, []); return (
{/* szCTA, not szGo: on the Brands pages this must open the waitlist form */}
); }; const MCIPage = () => (
); Object.assign(window, { MCIPage, MCISticky });