// Atoms + small shared components for Matrix-Sharon showcase const { useState, useEffect, useRef, useMemo } = React; // SVG icon helpers — keep tiny and consistent const Icon = ({ children, size = 16, ...rest }) => ( {children} ); const IconCheck = (p) => ; const IconX = (p) => ; const IconArrowRight = (p) => ; const IconArrowDown = (p) => ; const IconSearch = (p) => ; const IconDownload = (p) => ; const IconUpload = (p) => ; const IconSend = (p) => ; const IconShield = (p) => ; const IconGithub = (p) => ; const IconTerminal = (p) => ; const IconStar = (p) => ; const IconBolt = (p) => ; const IconUsers = (p) => ; const IconInbox = (p) => ; const IconClock = (p) => ; const IconPackage = (p) => ; const IconFile = (p) => ; const IconCopy = (p) => ; // Simple animated counter — used for retention numbers function AnimatedNumber({ value, format = (v) => v.toFixed(0), duration = 600 }) { const [val, setVal] = useState(value); const fromRef = useRef(value); useEffect(() => { const from = val; fromRef.current = from; const start = Date.now(); let cancelled = false; const tick = () => { if (cancelled) return; const p = Math.min(1, (Date.now() - start) / duration); const e = 1 - Math.pow(1 - p, 3); setVal(from + (value - from) * e); if (p < 1) setTimeout(tick, 16); }; tick(); return () => { cancelled = true; }; }, [value]); return <>{format(val)}; } // Avatar with initials function Avatar({ handle, role, size = 28 }) { const initial = (handle || "?").replace("@", "").slice(0, 1).toUpperCase(); const isLeader = role === "leader"; const colors = { s: ["oklch(0.78 0.12 18)", "var(--rose-deep)"], c: ["oklch(0.82 0.10 145)", "oklch(0.42 0.14 145)"], v: ["oklch(0.82 0.08 245)", "oklch(0.42 0.14 245)"], r: ["oklch(0.82 0.10 75)", "oklch(0.42 0.14 75)"], l: ["oklch(0.82 0.08 290)", "oklch(0.42 0.14 290)"], n: ["oklch(0.86 0.04 60)", "oklch(0.42 0.04 60)"], }; const [bg, fg] = colors[initial.toLowerCase()] || colors.n; return (
{initial} {isLeader && (
)}
); } // Typewriter line — used in terminal function useTypewriter(lines, active, speed = 18) { const [out, setOut] = useState([]); const stopRef = useRef(false); const timerRef = useRef(null); const linesKey = Array.isArray(lines) ? lines.join("\n") : ""; useEffect(() => { if (!active) { setOut([]); return; } stopRef.current = false; let i = 0, j = 0; let cur = []; setOut([]); const tick = () => { if (stopRef.current) return; if (i >= lines.length) { return; } const line = lines[i]; if (j === 0) cur = [...cur, ""]; if (j < line.length) { cur = [...cur.slice(0, -1), line.slice(0, j + 1)]; setOut(cur); j++; timerRef.current = setTimeout(tick, speed); } else { i++; j = 0; timerRef.current = setTimeout(tick, 120); } }; timerRef.current = setTimeout(tick, 200); return () => { stopRef.current = true; if (timerRef.current) clearTimeout(timerRef.current); }; }, [active, linesKey]); return { out }; } Object.assign(window, { Icon, IconCheck, IconX, IconArrowRight, IconArrowDown, IconSearch, IconDownload, IconUpload, IconSend, IconShield, IconGithub, IconTerminal, IconStar, IconBolt, IconUsers, IconInbox, IconClock, IconPackage, IconFile, IconCopy, AnimatedNumber, Avatar, useTypewriter, PrototypeFrame, useReveal, revealAll, Reveal, RevealNumber, Kinetic, ScrollProgress, HeroBlob, }); /* ---------------- Reveal-on-scroll ---------------- */ // Easing — cubic ease-out const easeOutCubic = (p) => 1 - Math.pow(1 - p, 3); // JS-driven reveal animation. Uses setTimeout-based stepping because in this // sandboxed editor iframe, requestAnimationFrame fires once and stops (the // animation timeline is frozen). setTimeout still runs reliably. function playReveal(el, { fromOpacity = 0, toOpacity = 1, fromY = 24, toY = 0, duration = 850, delay = 0, easing = easeOutCubic, stepMs = 16, } = {}) { if (!el) return; let cancelled = false; const begin = () => { if (cancelled) return; const startWall = Date.now(); const tick = () => { if (cancelled || !el.isConnected) return; const elapsed = Date.now() - startWall; const p = Math.min(1, elapsed / duration); const t = easing(p); el.style.opacity = (fromOpacity + (toOpacity - fromOpacity) * t).toString(); const ty = fromY + (toY - fromY) * t; el.style.transform = `translateY(${ty.toFixed(2)}px)`; if (p < 1) { setTimeout(tick, stepMs); } else { el.style.opacity = String(toOpacity); el.style.transform = toY === 0 ? "" : `translateY(${toY}px)`; } }; tick(); }; if (delay > 0) setTimeout(begin, delay); else begin(); return () => { cancelled = true; }; } // Returns [ref, shown]. Uses IntersectionObserver + scroll listener + polling // (each path can trip `shown`). All three are needed because sandboxed iframes // can block some/all of them. function useReveal({ rootMargin = "0px 0px -8% 0px", threshold = 0.12 } = {}) { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { if (!ref.current) return; const el = ref.current; let done = false; const trip = () => { if (done) return; done = true; setShown(true); }; const check = () => { if (done || !el.isConnected) return; const r = el.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight || 1; if (r.top < vh * 0.92 && r.bottom > 0) trip(); }; let obs; try { if (typeof IntersectionObserver !== "undefined") { obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) trip(); }); }, { rootMargin, threshold }); obs.observe(el); } } catch (_) {} window.addEventListener("scroll", check, { passive: true }); window.addEventListener("resize", check); const intervalId = setInterval(() => { if (done) clearInterval(intervalId); else check(); }, 200); const t1 = setTimeout(check, 50); const t2 = setTimeout(check, 400); return () => { done = true; clearTimeout(t1); clearTimeout(t2); clearInterval(intervalId); if (obs) obs.disconnect(); window.removeEventListener("scroll", check); window.removeEventListener("resize", check); }; }, []); return [ref, shown]; } // Global helper — apply .will-reveal first, then JS-animate when in view. // JS-driven so it works in sandboxed iframes where CSS animations get stuck. // Polls every 200ms instead of relying on scroll events (those don't fire // in some sandboxed iframes either). function revealAll(selector, opts = {}) { const { thresholdRatio = 0.92, duration = 850, fromY = 24 } = opts; const targets = Array.from(document.querySelectorAll(selector)); targets.forEach((t) => { if (!t.classList.contains("revealed-played")) { t.classList.add("will-reveal"); t.style.opacity = "0"; t.style.transform = `translateY(${fromY}px)`; } }); const remaining = new Set(targets); const trip = (el) => { if (!remaining.has(el)) return; el.classList.add("shown", "revealed-played"); playReveal(el, { duration, fromY }); remaining.delete(el); }; const check = () => { const vh = window.innerHeight || document.documentElement.clientHeight || 1; remaining.forEach((el) => { if (!el.isConnected) { remaining.delete(el); return; } const r = el.getBoundingClientRect(); if (r.top < vh * thresholdRatio && r.bottom > 0) trip(el); }); if (remaining.size === 0) stop(); }; const stop = () => { window.removeEventListener("scroll", check); window.removeEventListener("resize", check); if (intervalId) clearInterval(intervalId); }; window.addEventListener("scroll", check, { passive: true }); window.addEventListener("resize", check); // Poll because scroll events don't fire in some sandboxed iframes const intervalId = setInterval(check, 200); setTimeout(check, 50); setTimeout(check, 300); return stop; } // Wrap any block in to fade-up when scrolled into view. // stagger=true also staggers direct children. function Reveal({ children, className = "", stagger = false, style, as: As = "div" }) { const [ref, shown] = useReveal(); const innerRef = useRef(null); useEffect(() => { if (!shown || !innerRef.current) return; if (stagger) { const kids = Array.from(innerRef.current.children); kids.forEach((k, i) => { k.style.opacity = "0"; k.style.transform = "translateY(20px)"; playReveal(k, { duration: 700, delay: i * 70, fromY: 20 }); }); } else { playReveal(innerRef.current, { duration: 900, fromY: 28 }); } }, [shown, stagger]); // attach both refs const setRefs = (n) => { ref.current = n; innerRef.current = n; }; const initialStyle = stagger ? {} : { opacity: 0, transform: "translateY(28px)" }; return {children}; } // Counter that counts from 0 → value when scrolled into view. Used for "by the numbers". function RevealNumber({ value, format = (v) => Math.round(v).toString(), duration = 1400, suffix = "" }) { const [ref, shown] = useReveal({ threshold: 0.4 }); const [val, setVal] = useState(0); useEffect(() => { if (!shown) return; const start = Date.now(); let cancelled = false; const tick = () => { if (cancelled) return; const p = Math.min(1, (Date.now() - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setVal(value * eased); if (p < 1) setTimeout(tick, 16); }; tick(); return () => { cancelled = true; }; }, [shown, value, duration]); return {format(val)}{suffix}; } // Kinetic — split children text into per-word spans that stagger in. function Kinetic({ children, className = "", style, as: As = "h2" }) { const [ref, shown] = useReveal({ threshold: 0.2 }); const containerRef = useRef(null); let idx = 0; const walk = (node, key = 0) => { if (typeof node === "string") { const tokens = node.split(/(\s+)/); return tokens.map((tok, i) => { if (/^\s+$/.test(tok)) return tok; const ki = idx++; return {tok}; }); } if (Array.isArray(node)) return node.map((n, i) => walk(n, i)); if (React.isValidElement(node)) { const inner = walk(node.props.children, key); return React.cloneElement(node, { key: `e-${key}`, children: inner }); } return node; }; const content = walk(children); // JS-animate each kword with stagger when shown becomes true. useEffect(() => { if (!shown || !containerRef.current) return; const kwords = containerRef.current.querySelectorAll(".kword"); kwords.forEach((kw) => { const ki = parseInt(kw.dataset.ki || "0"); playReveal(kw, { duration: 700, delay: ki * 60, fromY: 18 }); }); }, [shown]); const setRefs = (n) => { ref.current = n; containerRef.current = n; }; return {content}; } // Scroll progress bar at top of page function ScrollProgress() { const ref = useRef(null); useEffect(() => { const update = () => { const max = (document.documentElement.scrollHeight - window.innerHeight) || 1; const p = Math.max(0, Math.min(1, window.scrollY / max)); if (ref.current) ref.current.style.width = `${p * 100}%`; }; window.addEventListener("scroll", update, { passive: true }); window.addEventListener("resize", update); const intervalId = setInterval(update, 150); // fallback for sandboxed iframes update(); return () => { window.removeEventListener("scroll", update); window.removeEventListener("resize", update); clearInterval(intervalId); }; }, []); return
; } // Hero blob — cursor-following soft gradient. Wrap inside the hero-canvas card. function HeroBlob() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const onMove = (e) => { const r = el.getBoundingClientRect(); el.style.setProperty("--mx", `${e.clientX - r.left}px`); el.style.setProperty("--my", `${e.clientY - r.top}px`); }; const onLeave = () => { el.style.setProperty("--mx", `${el.offsetWidth / 2}px`); el.style.setProperty("--my", `${el.offsetHeight / 2}px`); }; el.addEventListener("mousemove", onMove); el.addEventListener("mouseleave", onLeave); onLeave(); return () => { el.removeEventListener("mousemove", onMove); el.removeEventListener("mouseleave", onLeave); }; }, []); return
; } // Embed the real prototype/index.html. Same-origin so we can poke its body.dataset.role // + drive hashchange to switch pages. Optionally syncs back: if user clicks the // in-iframe role-switch, onPersonaChange fires so the showcase's persona state follows. function PrototypeFrame({ route = "/browse", persona = "member", onPersonaChange, height = 640, hideChrome = false, style }) { const ref = useRef(null); const personaRef = useRef(persona); personaRef.current = persona; const onPersonaChangeRef = useRef(onPersonaChange); onPersonaChangeRef.current = onPersonaChange; const hideChromeRef = useRef(hideChrome); hideChromeRef.current = hideChrome; // First-mount wiring: attach load handler that does the role sync + listener install. useEffect(() => { const f = ref.current; if (!f) return; const wireUp = () => { try { const doc = f.contentDocument; if (!doc || !doc.body) return; // Apply role doc.body.dataset.role = personaRef.current; doc.querySelectorAll("#role-switch button").forEach(b => { b.classList.toggle("active", b.dataset.role === personaRef.current); }); // Bridge back: clicks on the in-iframe role switch update parent persona const sw = doc.getElementById("role-switch"); if (sw && !sw.dataset.bridged) { sw.dataset.bridged = "1"; sw.addEventListener("click", (e) => { const t = e.target; if (t && t.tagName === "BUTTON" && t.dataset.role) { onPersonaChangeRef.current && onPersonaChangeRef.current(t.dataset.role); } }); } // Tone down iframe chrome — drop the page padding-top so the embed sits flush if (hideChromeRef.current) { const tb = doc.querySelector(".topbar"); if (tb) tb.style.display = "none"; const cont = doc.querySelector(".container"); if (cont) cont.style.paddingTop = "20px"; } } catch (_) { /* cross-origin or pre-load */ } }; f.addEventListener("load", wireUp); wireUp(); // also run now in case already loaded return () => f.removeEventListener("load", wireUp); }, []); // Push persona prop changes into the iframe useEffect(() => { const f = ref.current; try { const doc = f && f.contentDocument; if (!doc || !doc.body) return; doc.body.dataset.role = persona; doc.querySelectorAll("#role-switch button").forEach(b => { b.classList.toggle("active", b.dataset.role === persona); }); // Some pages need a refresh after role change — trigger the prototype's router try { const hash = doc.defaultView.location.hash; doc.defaultView.dispatchEvent(new HashChangeEvent("hashchange", { oldURL: "", newURL: hash })); } catch (_) {} } catch (_) {} }, [persona]); // Push route prop changes into the iframe useEffect(() => { const f = ref.current; try { const w = f && f.contentWindow; if (!w) return; const target = "#" + (route.startsWith("/") ? route : "/" + route); if (w.location.hash !== target) { w.location.hash = target; } } catch (_) {} }, [route]); return (