\")", mixBlendMode: 'overlay', }} /> ); } // ────────────────────────────────────────────────────────────────────────── // Brand mark — hexagonal gateway with faceted mountain peaks inside. // Per DESIGN.md: hexagonal silhouette in gold linework; mountain peaks // rising from baseline; gold-on-black only. // ────────────────────────────────────────────────────────────────────────── function HexMark({ size = 80, color = OR.gold, fillPeaks = true }) { const s = size; // hex points (normalized 0-80 viewBox) const hex = "40,4 72,22 72,58 40,76 8,58 8,22"; return ( ); } // Small PCB-style trace ornament — for corners / edges of scenes. // kind: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' function PCBTrace({ kind = 'top-left', size = 200, color = OR.gold, opacity = 0.5 }) { const flip = (kind === 'top-right' || kind === 'bottom-right'); const flipY = (kind === 'bottom-left' || kind === 'bottom-right'); const tx = flip ? `scale(-1, ${flipY ? -1 : 1}) translate(${-size}, 0)` : (flipY ? `scale(1, -1) translate(0, ${-size})` : ''); return ( ); } // ────────────────────────────────────────────────────────────────────────── // Source citation — small mono line, bottom-left. // ────────────────────────────────────────────────────────────────────────── function SourceChip({ text, x = 60, y = 1000 }) { return (

—{text}

); } // Eyebrow — small uppercase mono with leading gold dot. function Eyebrow({ children, x, y, color = OR.gold }) { return (

{children}

); } // ────────────────────────────────────────────────────────────────────────── // Counter — ticks a number up using a custom curve. // fromVal/toVal and t∈[0,1]. format is a fn. // ────────────────────────────────────────────────────────────────────────── function useCountUp({ from, to, start, end, ease = Easing.easeOutExpo }) { const t = useTime(); if (t <= start) return from; if (t >= end) return to; const p = ease((t - start) / (end - start)); return from + (to - from) * p; } // Format a big number with commas, optional currency prefix. function fmtMoney(n, opts = {}) { const v = Math.floor(n); const s = v.toLocaleString('en-US'); return (opts.prefix || '$') + s; } // Format a percent (0-100 scale) function fmtPct(n, digits = 1) { return n.toFixed(digits) + '%'; } // ────────────────────────────────────────────────────────────────────────── // VideoCallTile — Zoom/Teams-style call cell. // Soft gradient background, circular initials avatar, name strap, REC dot. // Glitch prop (0..1) progressively distorts the tile for the deepfake reveal. // ────────────────────────────────────────────────────────────────────────── function PortraitTile({ x, y, w, h, label, role, initials, hue = 220, talking = true, glitch = 0 }) { const t = useTime(); // subtle breathing on the avatar so it doesn't feel dead const breathe = 1 + Math.sin(t * 1.6 + hue * 0.01) * 0.012; // talking pulse — outer ring of the avatar const talk = talking ? Math.max(0, Math.sin(t * 6.0 + hue * 0.03)) : 0; // glitch effects const gShiftX = glitch > 0 ? Math.sin(t * 50 + hue) * 6 * glitch : 0; const tearY = glitch > 0 ? (((t * 0.7 + hue * 0.01) % 1) * h) : -100; const split = glitch * 6; const avSize = Math.min(w, h) * 0.42; const gradTop = `oklch(${28 + (hue % 30) * 0.4}% 0.05 ${hue})`; const gradBot = `oklch(${14 + (hue % 30) * 0.2}% 0.04 ${hue})`; const avTop = `oklch(${64}% 0.07 ${hue})`; const avBot = `oklch(${52}% 0.09 ${hue})`; return (

0.4 ? `hue-rotate(${(glitch - 0.4) * 60}deg)` : 'none', }}> {/* RGB color-split halos behind avatar when glitching */} {glitch > 0 && (

)} {/* talking-ring */}

{/* avatar circle with initials */}

0.7 ? `blur(${(glitch - 0.7) * 16}px)` : 'none', }}> {initials}

{/* glitch overlays */} {glitch > 0 && ( {/* scanlines */}

{/* horizontal tear */}

{/* color-split edge */}

)} {/* REC indicator top-left */}

REC

{/* mute mic icon top-right (mock UI chrome) */}

{/* name strap */}

{label}

{role}

); } // ────────────────────────────────────────────────────────────────────────── // CursorTip — animated cursor pointer // ────────────────────────────────────────────────────────────────────────── function CursorTip({ x, y, size = 28 }) { return (

); } Object.assign(window, { OR, FF, FilmTexture, SourceChip, Eyebrow, HexMark, PCBTrace, useCountUp, fmtMoney, fmtPct, PortraitTile, CursorTip, });