); } function StatusChip({ children, color, theme }) { return ( {children} ); } // Editorial-style placeholder: dotted underline + small "TO VERIFY" tag. // Reads as a serious working draft, not broken. function Placeholder({ children, note, theme }) { return ( {children} ^{TO VERIFY} ); } window.Section = Section; window.Eyebrow = Eyebrow; window.Rule = Rule; window.StatusChip = StatusChip; window.Placeholder = Placeholder; // ============================================================ // MOTION PRIMITIVES — Reveal, SpotlightCard, Marquee, CountUp // transform/opacity only; IO-driven; everything collapses to // static under dyslexia mode or OS reduced-motion. // ============================================================ (function injectMotionCSS() { if (document.getElementById("brains-motion-css")) return; const style = document.createElement("style"); style.id = "brains-motion-css"; style.textContent = ` .bv-reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); transition-delay: var(--bv-delay, 0ms); will-change: transform, opacity; } .bv-reveal.bv-in { opacity: 1; transform: none; } @keyframes bv-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.35); opacity: .5; } } @keyframes bv-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .bv-press { transition: transform .15s cubic-bezier(.16,1,.3,1); } .bv-press:active { transform: scale(.98); } @media (prefers-reduced-motion: reduce) { .bv-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } body.dyslexia-mode .bv-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } body.dyslexia-mode .bv-marquee-track { transform: none !important; } `; document.head.appendChild(style); })(); // Heavy motion (reveals, 3D, count-ups) respects OS reduced-motion + dyslexia. function brainsMotionOK() { if (typeof window === "undefined") return false; if (document.body.classList.contains("dyslexia-mode")) return false; if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return false; return true; } // Light decorative motion (marquee) halts only on the explicit dyslexia toggle, // consistent with the hero constellation behaviour. function brainsDecorOK() { if (typeof window === "undefined") return false; return !document.body.classList.contains("dyslexia-mode"); } window.brainsMotionOK = brainsMotionOK; window.brainsDecorOK = brainsDecorOK; function Reveal({ children, delay = 0, style, as = "div" }) { const ref = React.useRef(null); React.useEffect(() => { const el = ref.current; if (!el) return; if (!brainsMotionOK() || !("IntersectionObserver" in window)) { el.classList.add("bv-in"); return; } const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("bv-in"); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" } ); io.observe(el); return () => io.disconnect(); }, []); const Tag = as; return ( {children} ); } // Cursor-tracked radial border highlight. Writes CSS vars via ref — no re-renders. function SpotlightCard({ children, theme, style, radius = 18, padding }) { const ref = React.useRef(null); const onMove = (e) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); el.style.setProperty("--sx", `${e.clientX - r.left}px`); el.style.setProperty("--sy", `${e.clientY - r.top}px`); el.style.setProperty("--so", "1"); }; const onLeave = () => { const el = ref.current; if (el) el.style.setProperty("--so", "0"); }; return (

{children}

); } // Kinetic marquee — rAF-driven so it can't be killed by CSS resets. function Marquee({ items, theme, speed = 34, style }) { const trackRef = React.useRef(null); const copyRef = React.useRef(null); React.useEffect(() => { if (!brainsDecorOK()) return; const track = trackRef.current; const copy = copyRef.current; if (!track || !copy) return; let raf = 0; let x = 0; let last = performance.now(); const tick = (now) => { const dt = (now - last) / 1000; last = now; const w = copy.offsetWidth || 1; x -= (w / speed) * dt; if (x <= -w) x += w; track.style.transform = `translate3d(${x}px, 0, 0)`; raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [speed]); const row = (key, withRef) => (

{items.map((it, i) => ( {it} ∞ ))}

); return (

{row("a", true)} {row("b", false)}

); } // Animated numeral — counts from 0 to `value` when scrolled into view. // Renders `prefix`/`suffix` around the number. Static under reduced motion. function CountUp({ value, prefix = "", suffix = "", duration = 1400, style }) { const ref = React.useRef(null); const [display, setDisplay] = React.useState(brainsMotionOK() ? 0 : value); React.useEffect(() => { if (!brainsMotionOK() || !("IntersectionObserver" in window)) { setDisplay(value); return; } let raf = 0; const io = new IntersectionObserver( (es) => { es.forEach((e) => { if (!e.isIntersecting) return; io.disconnect(); const start = performance.now(); const step = (now) => { const p = Math.min((now - start) / duration, 1); const eased = 1 - Math.pow(1 - p, 3); setDisplay(Math.round(value * eased)); if (p < 1) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); }); }, { threshold: 0.5 } ); if (ref.current) io.observe(ref.current); return () => { io.disconnect(); cancelAnimationFrame(raf); }; }, [value, duration]); return ( {prefix} {display} {suffix} ); } // Typewriter loop — cycles through lines char-by-char with a blinking caret. // Light decorative motion: halts only on the dyslexia toggle (consistent with // the marquee); renders the first line statically otherwise. function TypeLoop({ lines, theme, typeMs = 34, holdMs = 1700, style }) { const [text, setText] = React.useState(brainsDecorOK() ? "" : lines[0]); React.useEffect(() => { if (!brainsDecorOK()) return; let line = 0; let char = 0; let deleting = false; let timer; const step = () => { const full = lines[line]; if (!deleting) { char++; setText(full.slice(0, char)); if (char >= full.length) { deleting = true; timer = setTimeout(step, holdMs); return; } timer = setTimeout(step, typeMs); } else { char -= 3; if (char <= 0) { char = 0; deleting = false; line = (line + 1) % lines.length; } setText(lines[line].slice(0, Math.max(char, 0))); timer = setTimeout(step, deleting ? 14 : 240); } }; timer = setTimeout(step, 600); return () => clearTimeout(timer); }, []); return ( {text} ); } // Live evaluation terminal — a frosted mono panel that types a BRAINS // Benchmark run on loop: a system scored against the neurodivergent // access criteria. `lines` is an array of strings; `title` is the header. function EvalTerminal({ theme, title, lines, style }) { return (

{title}

); } window.Reveal = Reveal; window.SpotlightCard = SpotlightCard; window.Marquee = Marquee; window.CountUp = CountUp; window.TypeLoop = TypeLoop; window.EvalTerminal = EvalTerminal;