{!reduced && }

); } function FilmGrain() { return (

); } function PlaceholderFrame({ alt }) { return (

Cinematic still / video
{alt}

); } function AmbientParticles({ density = 12, intensity = 1 }) { const reduced = useReducedMotion(); if (reduced || intensity <= 0) return null; const items = React.useMemo(() => { return Array.from({ length: Math.round(density * intensity) }).map((_, i) => ({ l: Math.random() * 100, t: 30 + Math.random() * 60, d: 4 + Math.random() * 5, delay: Math.random() * 4, s: 1 + Math.random() * 2, })); }, [density, intensity]); return (

{items.map((p, i) => ( ))}

); } // ───────────────────────────────────────────────────────────────── // useSpeech, Web Speech API wrapper. Returns {speak, stop, enabled, toggle, ready}. // `enabled` defaults to FALSE (browser autoplay rules); toggle on user click. // `ready` flips true when voices are loaded. // ───────────────────────────────────────────────────────────────── function useSpeech() { const [enabled, setEnabled] = React.useState(false); const [ready, setReady] = React.useState(false); const voicesRef = React.useRef({ lantic: null, person: null }); const synth = typeof window !== 'undefined' ? window.speechSynthesis : null; React.useEffect(() => { if (!synth) return; const pick = () => { const list = synth.getVoices(); if (!list.length) return; // Prefer en-GB / en-AU for Lantic (warm), en-US for person. const en = list.filter(v => v.lang.startsWith('en')); voicesRef.current.lantic = en.find(v => /Daniel|Samantha|Karen|en-GB|Google UK English/i.test(v.name)) || en.find(v => v.lang === 'en-GB') || en[0]; voicesRef.current.person = en.find(v => /Alex|Fred|en-US|Google US English Male/i.test(v.name)) || en.find(v => v.lang === 'en-US') || en[0]; setReady(true); }; pick(); synth.addEventListener('voiceschanged', pick); return () => synth.removeEventListener('voiceschanged', pick); }, [synth]); const speak = React.useCallback((text, who = 'L') => { if (!synth || !enabled) return; synth.cancel(); const u = new SpeechSynthesisUtterance(text); const isLantic = who === 'L' || who === 'L2'; u.voice = isLantic ? voicesRef.current.lantic : voicesRef.current.person; u.rate = isLantic ? 1.05 : 1.0; u.pitch = isLantic ? 1.0 : 0.95; u.volume = 0.85; synth.speak(u); }, [synth, enabled]); const stop = React.useCallback(() => { if (synth) synth.cancel(); }, [synth]); const toggle = React.useCallback(() => { setEnabled(v => { const next = !v; if (!next && synth) synth.cancel(); return next; }); }, [synth]); return { speak, stop, enabled, toggle, ready }; } // ───────────────────────────────────────────────────────────────── // FloatingDialogue, places each speaker's text near where they are in the image. // Lantic line floats near the Cortex orb. Builder/person line floats near their face. // No boxes, just text with strong shadow for legibility over the cinematic image. // Auto-loops the conversation continuously. // ───────────────────────────────────────────────────────────────── function FloatingDialogue({ scene, start, onActiveSpeakerChange, compact = false, speak, audioEnabled = false }) { const lines = scene.dialogue; const { lineIdx, wordIdx } = useVoiceTranscript(lines, { start, wordMs: 190, lineGapMs: 850, loop: true, loopGapMs: 2400 }); const cur = lines[lineIdx]; const isLantic = cur ? (cur.who === 'L' || cur.who === 'L2') : false; const protagonist = scene.protagonist || 'You'; // Audio playback: if a line has `audio: 'path/to/file.mp3'`, play it when active. // Drop MP3s into v3/assets/audio/ and add the path to each line in v3-data.jsx — no other code change required. const audioRef = React.useRef(null); React.useEffect(() => { if (!audioRef.current) audioRef.current = new Audio(); const el = audioRef.current; el.pause(); if (audioEnabled && cur && cur.audio) { el.src = cur.audio; el.currentTime = 0; el.play().catch(() => { /* user gesture not granted yet */ }); } return () => { try { el.pause(); } catch(e) {} }; }, [lineIdx, audioEnabled]); React.useEffect(() => { if (onActiveSpeakerChange) onActiveSpeakerChange(cur?.who || null); }, [cur, onActiveSpeakerChange]); // (speech disabled, re-enable by uncommenting) // React.useEffect(() => { // if (!cur || !speak) return; // speak(cur.text, cur.who); // }, [lineIdx, cur, speak]); const orbPos = scene.image?.orbPos || { x: 63, y: 56 }; // On phones/tablets the floating lines are centered with full safe width so they // read on one line where possible and never run off the side or get clipped by the // next section. Desktop keeps the art-directed positions over the image. // On phones/tablets: Lantic speaks low over the table (below the orb), wide and // centered. Dave speaks from the empty space to the RIGHT of his head, like the // original desktop framing, so the text never lands on him. const lanticTextPos = compact ? { x: 50, y: 70 } : (scene.image?.lanticTextPos || { x: orbPos.x, y: Math.min(orbPos.y + 22, 88) }); const builderPos = compact ? { x: 73, y: 15 } : (scene.image?.builderPos || { x: 30, y: 14 }); if (!start || !cur) return null; return ( <> ); } // One floating line of speech, no box. function FloatingLine({ who, text, wordIdx, x, y, align = 'below', compact = false, protagonist = 'You' }) { const isLantic = who === 'L' || who === 'L2'; const speakerName = who === 'L' ? 'Lantic' : who === 'L2' ? 'Mike\u2019s Lantic' : who === 'P2' ? 'Mike' : protagonist; const dotColor = who === 'L2' ? '#A78BFA' : (isLantic ? BRAND.skyLight : '#FBBF24'); const words = React.useMemo(() => text.split(/(\s+)/), [text]); // Lantic gets the full width low over the table; Dave's sits in the narrower // empty space beside his head, so it stays off his body. const compactW = isLantic ? 'min(92vw, 440px)' : 'min(52vw, 195px)'; let revealedWordCount = 0; const wordSpans = words.map((w, i) => { if (w.match(/\s+/)) return {w}; revealedWordCount += 1; const shouldShow = revealedWordCount <= wordIdx; return {w}; }); // Lantic speaks just under the orb and grows downward as the words reveal. const lanticBottom = false; return (

{/* small connector dot, suggests the source */}

{speakerName}

{wordSpans}

); } Object.assign(window, { CortexOverlay, VoiceBars, VoiceLine, VoiceTranscript, useVoiceTranscript, SceneMeta, OutcomeTag, SceneImage, AmbientParticles, FloatingDialogue, useSpeech, });