/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, Shimmer, SB_EASE, CP_ACCENTS, MShell, MHead */ // Copilot feature page — mobile layout (skews alternate right → left → right …). const { useState: cmpS, useEffect: cmpE } = React; // eyebrows are hero-only on mobile — keep the heading, drop the pill const MCPBadgeHead = ({ title, sub }) => ; const MCPCard = ({ lean = 'right', children, pad = 12 }) => (
{children}
); // hero const MCPHero = () => { const [ref, on] = useReveal(0.25); const [step, setStep] = cmpS(0); cmpE(() => { if (!on) return; const times = [400, 1300, 2400, 4200]; const ts = times.map((t, i) => setTimeout(() => setStep(i + 1), t)); return () => ts.forEach(clearTimeout); }, [on]); const ready = step >= 4; return (
sozee
Features / Copilot

Ask for it.
It ships.

A conversational layer over the whole studio — Copilot plans, generates, edits and schedules, all in one thread.

Open Copilot
✦ Copilot NEW Scarlett
= 1 ? 1 : 0, transition: `opacity 0.4s ${SB_EASE}` }}> Make tonight’s post — poolside, golden hour.
= 2 ? 1 : 0, transition: `opacity 0.4s ${SB_EASE}` }}> On it — three directions. Pick one and I’ll finish it.
= 3 ? 1 : 0, transition: `opacity 0.4s ${SB_EASE}` }}> {[GENS[7], GENS[1], GENS[3]].map((g, i) =>
{!ready && }
)}
= 4 ? 1 : 0, transition: `opacity 0.4s ${SB_EASE}` }}> Caption written, queued for 9:00 PM — approve to ship.
); }; // § 01 Quick starts const MCP_STARTS = [['Photo for social', false], ['Photo for OnlyFans', false], ['Photoshoot for social', false], ['Photoshoot for OnlyFans', false], ['Video for social', false], ['Find reels to clone', true]]; const MCPQuickstarts = () => { const [sel, setSel] = cmpS(-1); return ( “What should
we make?”} sub="Six starting points — or just type. Each thread binds to one Character." />
{MCP_STARTS.map(([s, plan], i) => setSel(i)} style={{ display: 'flex', flexDirection: 'column', gap: 3, borderRadius: 10, padding: '9px 10px', fontSize: 10, fontWeight: sel === i ? 700 : 600, cursor: 'pointer', transition: 'all 0.18s', background: sel === i ? 'var(--brand-purple-50)' : 'rgb(250,247,247)', boxShadow: sel === i ? 'inset 0 0 0 1.5px var(--brand-purple-400)' : 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: INK }}> {s} {plan && PLAN MODE} )}
Scarlett
{sel >= 0 ? MCP_STARTS[sel][0] : 'Or just type…'}
); }; // § 02 Generative UI const MCPGenUI = () => { const [opt, setOpt] = cmpS(0); const opts = [GENS[7], GENS[1], GENS[3]]; return ( It hands you
ready-to-go shots.} sub="Copilot suggests real shots with all the Create controls attached — flip through the options and hit Generate." />
{opts.map((g, i) => )}
{[-1, 1].map((d, j) => setOpt(o => (o + d + 3) % 3)} style={{ order: j ? 3 : 1, width: 22, height: 22, borderRadius: '50%', background: 'rgba(252,248,248,0.9)', display: 'grid', placeItems: 'center', cursor: 'pointer', boxShadow: '0 4px 10px rgba(28,27,27,0.25)' }}> )} {opt + 1} / 3
{[['Character', 'Scarlett'], ['Photo Control', 'Set · Outfit'], ['Aspect', '4:5'], ['Quantity', '3']].map(([k, v]) =>
{k} {v}
)} GENERATE ✦
); }; // § 03 Conversational editing const MCPChatEdit = () => { const [ref, on] = useReveal(0.35); const [done, setDone] = cmpS(false); cmpE(() => { if (!on) return; const t = setInterval(() => setDone(d => !d), 3200); return () => clearInterval(t); }, [on]); return ( Edit by
saying so.} sub="Copilot keeps the conversation context and targets the right image — or opens the full suite in-thread." />
make her top red
{done ? 'Edited — only the top changed' : 'Targeting the right image…'}
{['Reimagine', 'Inpaint', 'Background', 'Expression', 'Crop', 'Filters'].map(t => {t})}
); }; // § 04 Publishing const MCPPublish = () => ( It writes.
You approve.} sub="“Create post” hands you a prefilled card — caption in your voice, platforms picked, time set." />
Create Post · prefilled @scarlett.day
{[['Instagram', '#E1306C', true], ['Twitter/X', '#5B6470', false], ['TikTok', '#1C1B1B', false], ['Fanvue', '#1FB85A', true]].map(([n, c, on]) => {n})}
poolside, golden light, zero meetings. new set live now ↗
✦ Rewrite in my voice
Tonight, 9:00 PM Approve & schedule
); // § 05 Checkpoints const MCP_NODES = [ { t: 'The brief', time: '8:02 PM' }, { t: 'Generated 3 options', time: '8:03 PM' }, { t: 'Edit · top → red', time: '8:05 PM' }, { t: 'Post scheduled', time: '8:06 PM' }]; const MCPCheckpoints = () => { const [at, setAt] = cmpS(3); return ( Every step,
a checkpoint.} sub="Each step is a node on the thread — Resume from here rolls back to any earlier point." />
{MCP_NODES.map((n, i) => { const live = i <= at; return (
setAt(i)} style={{ display: 'flex', gap: 10, cursor: 'pointer' }}>
{i < MCP_NODES.length - 1 && }
{n.t} {n.time} {i === at && Resume from here}
); })}
); }; // § 06 pipeline const MCP_NEXT = [ { t: 'Create Image', d: 'The composer Copilot drives.', kind: 'image', href: '/create-image' }, { t: 'Editing Suite', d: 'The tools it opens in-thread.', kind: 'edit', href: '/editing-suite' }, { t: 'Post & Analyze', d: 'Where approved posts land.', kind: 'sched', href: '/post-analyze' }]; const MCPPipeMedia = ({ kind }) => (
{kind === 'image' &&
{['assets/create/out-mirror.webp', 'assets/create/out-garden.webp'].map((src, i) => )}
GENERATE ✦ } {kind === 'edit' && } {kind === 'sched' &&
{[[GENS[7].src, 'IG · 9:00'], [GENS[1].src, 'FV · 9:00'], [GENS[3].src, 'TT · 12:30']].map(([src, l]) => {l} )}
}
); const MCPPipeline = () => ( One thread drives
the whole studio.} sub="Everything Copilot does runs on the same tools you can drive yourself." />
{MCP_NEXT.map((c, i) =>
{c.t}
{c.d}
 )}
See the full tour → ); const MCPPage = () => (
); Object.assign(window, { MCPPage });