// Mean It — Create-Your-Own-Guide flow (hybrid: single screen, guided sequence inside). function CreateGuideDialog({ onClose, auto }) { const [step, setStep] = React.useState(0); // 0..4 = guided questions; 5 = preview/edit; 6 = done const [data, setData] = React.useState({ name: '', pulls_for: '', voice: '', sample_q: '', never: '', mascot: 'wren', }); const set = (k, v) => setData(d => ({ ...d, [k]: v })); // auto-demo cursor + callout state const [cursorPos, setCursorPos] = React.useState({ x: 0, y: 0 }); const [cursorVisible, setCursorVisible] = React.useState(false); const [clicking, setClicking] = React.useState(false); const [callout, setCallout] = React.useState(null); const textareaRef = React.useRef(null); const nextRef = React.useRef(null); const closeRef = React.useRef(null); const stampRef = React.useRef(null); const backRef = React.useRef(null); const shareRef = React.useRef(null); const dialogRef = React.useRef(null); React.useEffect(() => { if (!auto) return; let cancelled = false; const wait = (ms) => new Promise(r => setTimeout(r, ms)); const moveTo = (el, opts = {}) => { if (!el) return; const r = el.getBoundingClientRect(); setCursorPos({ x: r.left + (opts.offsetX != null ? opts.offsetX : r.width / 2), y: r.top + (opts.offsetY != null ? opts.offsetY : r.height / 2), }); }; const calloutAbove = (el, msg) => { if (!el) return; const r = el.getBoundingClientRect(); setCallout({ x: r.left + r.width / 2, y: r.top, text: msg }); }; const typeInto = async (key, text, perChar = 28) => { for (let i = 1; i <= text.length; i++) { if (cancelled) return false; setData(d => ({ ...d, [key]: text.slice(0, i) })); await wait(perChar); } return true; }; const answers = [ { key: 'pulls_for', text: 'the smallest, most specific gesture', callout: 'tell it what to listen for' }, { key: 'voice', text: 'patient. low-key. comfortable with quiet.', callout: 'and how they sound' }, { key: 'sample_q', text: 'When you picture their hands, what are they doing?', callout: 'a question they would ask' }, { key: 'never', text: 'never finish a sentence. never offer a metaphor.', callout: 'and a hard rule' }, { key: 'name', text: 'Marsh — the slow listener', callout: 'finally · a name' }, ]; (async () => { await wait(450); if (cancelled) return; setCursorPos({ x: window.innerWidth * 0.7, y: window.innerHeight * 0.3 }); setCursorVisible(true); await wait(400); if (cancelled) return; // intro — name what's happening const dlg = dialogRef.current; if (dlg) { const r = dlg.getBoundingClientRect(); setCallout({ x: r.left + r.width / 2, y: r.top + 40, text: 'answer 5 questions · build a guide' }); } await wait(2000); if (cancelled) return; setCallout(null); await wait(300); // fill all 5 questions for (let q = 0; q < answers.length; q++) { if (cancelled) return; const ta = textareaRef.current; calloutAbove(ta, answers[q].callout); moveTo(ta, { offsetX: 60, offsetY: 28 }); await wait(1000); if (cancelled) return; if (!await typeInto(answers[q].key, answers[q].text, 18)) return; setCallout(null); await wait(450); if (cancelled) return; moveTo(nextRef.current); await wait(800); if (cancelled) return; setClicking(true); await wait(200); if (cancelled) return; // advance step (last question goes to preview = step 5) setStep(s => s < answers.length - 1 ? s + 1 : 5); await wait(360); setClicking(false); await wait(420); } // ── preview screen (step 5) — pause to show the formed guide ── await wait(900); if (cancelled) return; const stamp = stampRef.current; calloutAbove(stamp, 'stamp it'); moveTo(stamp); await wait(1500); if (cancelled) return; setClicking(true); await wait(220); if (cancelled) return; setStep(6); await wait(380); setClicking(false); setCallout(null); // ── done screen (step 6) — saved confirmation ── await wait(900); if (cancelled) return; // point at the share link const share = shareRef.current; if (share) { const r = share.getBoundingClientRect(); setCallout({ x: r.left + r.width / 2, y: r.top, text: 'share it · anyone can import this guide' }); setCursorPos({ x: r.left + r.width / 2, y: r.top + r.height / 2 }); } await wait(2400); if (cancelled) return; setCallout(null); // back to picker — keep documentarian await wait(400); if (cancelled) return; const back = backRef.current; calloutAbove(back, "we'll just use the documentarian for now"); moveTo(back); await wait(1500); if (cancelled) return; setClicking(true); await wait(280); if (cancelled) return; onClose(); })(); return () => { cancelled = true; }; }, [auto]); const questions = [ { id: 'pulls_for', eyebrow: 'question 01 · what do they pull for', q: 'What does this guide listen for?', sub: 'The thing they hear when nobody else is hearing it.', placeholder: 'e.g. "the small, specific gesture nobody noticed but you"', examples: ['memory · specifics', 'the unsaid feeling', 'sensory detail', 'the contradiction'], }, { id: 'voice', eyebrow: 'question 02 · how do they sound', q: 'How would you describe their voice?', sub: 'Three words is plenty. Or a sentence. Or a feeling.', placeholder: 'e.g. "patient. low-key. comfortable with silence."', examples: ['curious · gentle', 'sharp · interrupting', 'warm · slow'], }, { id: 'sample_q', eyebrow: 'question 03 · the kind of question they ask', q: 'Write a question they\'d ask you.', sub: 'One sample question that captures how they pull a story.', placeholder: 'e.g. "When you picture their hands — what are they doing?"', examples: [], }, { id: 'never', eyebrow: 'question 04 · the rule they live by', q: 'What would they never do?', sub: 'Hard limits. The things you don\'t want this guide saying.', placeholder: 'e.g. "never finish your sentence. never offer a metaphor."', examples: ['never write for me', 'never cliché', 'never rush'], }, { id: 'name', eyebrow: 'question 05 · the name', q: 'What\'s their name?', sub: 'A name and a one-line title. The mascot art comes from us.', placeholder: 'e.g. "Marsh — the slow listener"', examples: [], }, ]; const cur = questions[step]; const filled = step <= 4 ? !!data[cur.id]?.trim() : true; const next = () => { if (step < questions.length - 1) setStep(step + 1); else setStep(5); }; const prev = () => { if (step > 0) setStep(step - 1); }; return (
e.stopPropagation()}> {/* tape decoration */}
create your own guide

{step <= 4 ? 'A guided interview · for the guide.' : 'Here they are.'}

{[0,1,2,3,4,5].map(i =>
)}
{step <= 4 && (
{cur.eyebrow}
{cur.q}
{cur.sub}