// Walkthrough demo orchestrator — scrubber, narrator, scene host. const { useState, useEffect, useCallback, useRef } = React; // Scenes chosen for the preview loop on the project page: hero scenes that // read well without the demo chrome. Scenes 1/2/4/5/7 either depend on chrome // to make sense (the loading state, the modal-on-blur) or have too much // whitespace at small scale. 3 = extraction review (hero), 6 = client form // telling the cross-actor story, 8 = signature (most visceral), 9 = audit log // (closes the auditability pitch). const PREVIEW_SCENES = [ { component: Scene3Review, title: 'Adviser reviews · confidence dots draw the eye' }, { component: Scene6Form, title: 'Client confirms · modified fields tint amber' }, { component: Scene8Signature, title: 'E-signature · pulsing target on unsigned field' }, { component: Scene9Audit, title: 'Immutable audit log · one vertical thread' }, ]; const SCENES = [ { id: 1, title: 'Adviser uploads documents', narrate: 'Daniel & Anna Bennett are due for their annual review. Lachlan uploads four source documents to begin extraction.', component: Scene1Upload }, { id: 2, title: 'Claude extracts into structured fields', narrate: 'One batched call sends all four documents to Claude. The model returns JSON conforming to a fixed schema, with a confidence label on every leaf.', component: Scene2Extracting }, { id: 3, title: 'Adviser reviews the extraction', narrate: 'The hero screen. Red and amber dots draw the eye. The model flagged Daniel\'s salary as low-confidence — Lachlan corrects it to $215k using the PAYG summary.', component: Scene3Review }, { id: 4, title: 'Adviser confirms the extraction', narrate: 'Confirmation creates a draft submission and a magic link. Three fields changed in review — every change is in the audit log.', component: Scene4Confirm }, { id: 5, title: 'Client opens the link & enters OTP', narrate: 'No password, no app. Magic link from email, six-digit code from SMS. The link is POST-only on entry so safe-link scanners can\'t auto-trigger.', component: Scene5OTP }, { id: 6, title: 'Client confirms their details', narrate: 'A pre-filled form. Modified fields tint amber, brand-new information tints green. The client\'s submission becomes the canonical record.', component: Scene6Form }, { id: 7, title: 'Adviser cockpit & money audit', narrate: 'Before signature, Lachlan walks the 12-section agenda, ticks scope, acknowledges general warnings. Confirming snapshots a pinned view model.', component: Scene7Cockpit }, { id: 8, title: 'E-signature with audit page', narrate: 'Daniel has signed. Anna\'s field is pulsing for attention. The submitted bundle gets an audit page appended with SHA-256 of every component.', component: Scene8Signature }, { id: 9, title: 'Immutable audit log', narrate: 'Filter by the Bennett client_id and the whole story shows up in order, on one page. This is what auditability by design feels like.', component: Scene9Audit }, ]; function App() { // Preview mode — chrome-free auto-cycling loop for embed on the project page. const isPreview = (() => { try { return new URL(window.location.href).searchParams.get('preview') === '1'; } catch { return false; } })(); if (isPreview) return ; const bp = useBreakpoint(); const isMobile = bp === 'mobile'; const isTablet = bp === 'tablet'; const isCompact = isMobile || isTablet; const [idx, setIdx] = useState(() => { const u = new URL(window.location.href); const p = parseInt(u.searchParams.get('s') || '1', 10); return Math.max(0, Math.min(SCENES.length - 1, p - 1)); }); const [showNarrator, setShowNarrator] = useState(true); // Cover screen — only on a fresh first visit (no ?s= deep link). // Auto-dismisses after 2.5s or on any user interaction. const [showCover, setShowCover] = useState(() => { const u = new URL(window.location.href); if (u.searchParams.has('s')) return false; const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; return !reducedMotion; }); useEffect(() => { if (!showCover) return; const dismiss = () => setShowCover(false); const timer = setTimeout(dismiss, 2500); window.addEventListener('keydown', dismiss, { once: true }); window.addEventListener('click', dismiss, { once: true }); return () => { clearTimeout(timer); window.removeEventListener('keydown', dismiss); window.removeEventListener('click', dismiss); }; }, [showCover]); const go = useCallback((next) => { const n = Math.max(0, Math.min(SCENES.length - 1, next)); setIdx(n); const u = new URL(window.location.href); u.searchParams.set('s', String(n + 1)); window.history.replaceState({}, '', u.toString()); }, []); useEffect(() => { const onKey = (e) => { if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); go(idx + 1); } if (e.key === 'ArrowLeft') { e.preventDefault(); go(idx - 1); } if (e.key === 'Escape') { setShowNarrator(s => !s); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [idx, go]); // Swipe gesture handling — only enabled on touch-capable narrow viewports. // Requires |dx| > |dy| and |dx| > 50 so vertical scrolling inside scenes // (esp. the audit table on Scene 9) isn't misread as a swipe. const touchRef = useRef({ x: 0, y: 0, active: false }); const onTouchStart = useCallback((e) => { const t = e.touches[0]; touchRef.current = { x: t.clientX, y: t.clientY, active: true }; }, []); const onTouchEnd = useCallback((e) => { if (!touchRef.current.active) return; touchRef.current.active = false; const t = e.changedTouches[0]; const dx = t.clientX - touchRef.current.x; const dy = t.clientY - touchRef.current.y; if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) { if (dx < 0) go(idx + 1); else go(idx - 1); } }, [idx, go]); const scene = SCENES[idx]; const Scene = scene.component; return (

{/* Cover screen — fades out after 2.5s on fresh first visits */} {showCover && } {/* Demo chrome — top */}

{isMobile ? 'Back' : 'Back to case study'} {!isMobile &&

} Financial Advisory Firm {!isCompact && ( walkthrough · demo )}

{!isCompact && ( All names and data synthetic. Real product, recreated as a static walkthrough. )} Contact ↗

{/* Scene viewport */}

{/* Big side-arrow buttons — desktop only; mobile/tablet use swipe */} {!isCompact && ( <> go(idx - 1)} disabled={idx === 0}/> go(idx + 1)} disabled={idx === SCENES.length - 1}/> )}

{/* Bottom chrome — light cream control bar */}

); } const kbdStyle = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', minWidth: 20, height: 20, background: '#fff', border: `1px solid ${EPG.line2 || '#CBD5D8'}`, borderRadius: 4, fontSize: 11, fontWeight: 600, color: EPG.ink2, padding: '0 5px', boxShadow: '0 1px 0 rgba(0,0,0,0.06)', }; // ---------- Preview loop (rendered when ?preview=1) ------------------------- // Renders selected scenes at their natural desktop size (1280×960, 4:3) and // scales them down to fit the host iframe. Cross-fades every 6 seconds. // Respects prefers-reduced-motion. The whole frame is meant to be wrapped // in a click-through anchor by the host page (FeatureBlock.astro), so we // don't handle the click here. const PREVIEW_NATURAL_W = 1280; const PREVIEW_NATURAL_H = 960; // 4:3 of 1280 const PREVIEW_INTERVAL = 6000; const PREVIEW_FADE_MS = 600; function PreviewLoop() { const containerRef = useRef(null); const [scale, setScale] = useState(1); const [idx, setIdx] = useState(0); // Track container width → scale so the inner 1280px-wide scene fits. useEffect(() => { const el = containerRef.current; if (!el) return; const update = () => { const w = el.clientWidth; const h = el.clientHeight; // Use whichever dimension is the limiting factor — usually width on 4:3 // hosts but doesn't hurt to be defensive. const s = Math.min(w / PREVIEW_NATURAL_W, h / PREVIEW_NATURAL_H); setScale(s || 1); }; update(); const obs = new ResizeObserver(update); obs.observe(el); return () => obs.disconnect(); }, []); // Auto-advance unless the user prefers reduced motion. useEffect(() => { const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); if (mq.matches) return; const id = setInterval(() => { setIdx(i => (i + 1) % PREVIEW_SCENES.length); }, PREVIEW_INTERVAL); return () => clearInterval(id); }, []); return (

{/* Stacked scene layers — only opacity changes for cross-fade */} {PREVIEW_SCENES.map((s, i) => { const Scene = s.component; const visible = i === idx; return (

); })} {/* CTA overlay — tagline + pill button, gradient strip at bottom */}

Live · 9-step adviser portal demo

Try the walkthrough demo →

{/* Progress dots */}

{PREVIEW_SCENES.map((_, i) => (

))}

{/* Top-corner watermark — subtle "walkthrough preview" tag */}

Preview

); } function DemoCover() { // Fades itself out via opacity transition once the parent unmounts it. // (Stays mounted for 2.5s, then parent flips showCover=false.) return (

E

Adviser Portal Walkthrough

9 steps · synthetic data · recreation of a real product

Press → or click anywhere to begin

); } function SideArrow({ direction, onClick, disabled }) { const isLeft = direction === 'left'; return ( ); } // Boot const root = ReactDOM.createRoot(document.getElementById('root')); root.render();