/* global React */ // ShowgazeProcess — scroll-triggered animated process section // Usage: add // then use wherever it fits in the page const { useState, useEffect, useRef } = React; // Respect OS-level reduced-motion preference — checked once at parse time const REDUCE_MOTION = typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches; // ── Design tokens (mirrors Sections.jsx) ────────────────────────────────────── const C = { bg: '#0B0C0E', bg1: '#141518', bg2: '#1A1C20', bone: '#E6DCCB', grey: '#8A8A86', mute: '#52524F', border: '#1F2024', borderHi: '#33353A', cyan: '#59A3B3', cyanHi: '#7EBFCD', }; const F = { display: "'Playfair Display', Georgia, serif", sans: "'IBM Plex Sans', system-ui, sans-serif", mono: "'IBM Plex Mono', monospace", }; const E = 'cubic-bezier(0.2,0.7,0.2,1)'; // ── Animation helper ─────────────────────────────────────────────────────────── // Returns opacity + translateY transition styles. Strips motion if user prefers it. function anim(on, delay, dur = 400, dy = 16) { if (REDUCE_MOTION) { return { opacity: on ? 1 : 0, transition: `opacity 160ms ${E} ${delay}ms` }; } return { opacity: on ? 1 : 0, transform: on ? 'none' : `translateY(${dy}px)`, transition: `opacity ${dur}ms ${E} ${delay}ms, transform ${dur}ms ${E} ${delay}ms`, }; } // ── Pipeline step icons ──────────────────────────────────────────────────────── function ISync() { return ( ); } function IBars() { return ( ); } function INodes() { return ( ); } function IFace() { return ( ); } function IShield() { return ( ); } function ICheck() { return ( ); } // ── Viewfinder corner brackets (matches site's Corner component style) ───────── function Corners() { const b = '1px solid rgba(89,163,179,0.2)'; const s = { position: 'absolute', width: 9, height: 9 }; return (
); } // ── Connecting arrow between phases ─────────────────────────────────────────── // marginTop: 54 aligns the arrow with the card top. // Phase header = num(~14px) + label(~17px) + desc(~17px) + margins(~6px) ≈ 54px. // If the header layout changes, adjust this value to match. function Arrow({ on, delay }) { return (
); } // ── Phase 1: Filming ─────────────────────────────────────────────────────────── function CardFilming({ on }) { return (
{/* Stage light beams — [x1, x2, y2]; y1 is always 0 */} {[[22,36,27],[50,52,27],[82,64,27],[110,78,27],[130,90,27]].map(([x1,x2,y2], i) => ( ))} {/* Stage platform */} {/* Band silhouettes — three shapes */} {[[36,18,5,5],[74,16,5.5,6.5],[112,18,5,5]].map(([cx,cy,rx,ry], i) => ( ))} {/* Crowd — row 1 */} {[9,22,35,48,61,74,87,100,113,126,138].map((x, i) => ( ))} {/* Crowd — row 2 */} {[15,28,41,54,67,80,93,106,119,132].map((x, i) => ( ))} {/* Three highlighted phones */} {[[28,34],[74,32],[120,34]].map(([cx, cy], i) => ( {/* recording dot */} ))} {/* Dashed lines converging to a point */}

Multiple angles,
captured simultaneously

); } // ── Phase 2: Capture & Send ──────────────────────────────────────────────────── function CardCapture({ on }) { const items = [ { sym: '↑', label: 'Footage Uploads', sub: 'Via QR code' }, { sym: '◈', label: 'Dropbox File Request', sub: 'Organised folder' }, { sym: '≋', label: 'Reference Audio', sub: 'Sound desk feed' }, ]; return (
{items.map((it, i) => (
{it.sym}
{it.label}
{it.sub}
))}
); } // ── Phase 3: Processing & QC ─────────────────────────────────────────────────── function CardProcessing({ cardOn, pipeOn }) { const steps = [ { label: 'Sync', sub: null, Icon: ISync }, { label: 'Audio analysis', sub: null, Icon: IBars }, { label: 'CV', sub: 'Computer Vision', Icon: INodes }, { label: 'Face tracking', sub: 'Reframing', Icon: IFace }, { label: 'NSFW filter', sub: null, Icon: IShield }, { label: 'Quality control', sub: null, Icon: ICheck }, ]; return (

Automated

{/* Vertical guide line */}
{steps.map((step, i) => (
{step.label}
{step.sub && (
{step.sub}
)}
))}
{/* Review checkpoint */}
Review
Manual QC checkpoint
); } // ── Phase 4: Deliver & Share ─────────────────────────────────────────────────── function CardDeliver({ on }) { const outputs = [ { sym: '▶', label: 'Finished Video', sub: 'Download & stream' }, { sym: '◉', label: 'Host / Artist', sub: 'Direct access' }, { sym: '⊕', label: 'Online Distribution', sub: 'Social ready' }, ]; return (
{outputs.map((out, i) => (
{out.sym} {out.label}
{out.sub}
))}
); } // ── Main component ───────────────────────────────────────────────────────────── function ShowgazeProcess() { const ref = useRef(null); const [vis, setVis] = useState(false); const [pipe, setPipe] = useState(false); // Inject scoped styles into once — avoids a