// shared.jsx — tokens, Cajal + Comp-bio illustrations, atoms window.PALETTES = { cream: { name: 'cream', bg: 'oklch(0.97 0.012 85)', bgAlt: 'oklch(0.94 0.015 85)', ink: 'oklch(0.22 0.02 60)', inkSoft: 'oklch(0.40 0.02 60)', inkMute: 'oklch(0.60 0.015 70)', rule: 'oklch(0.82 0.02 70)', paper: 'oklch(0.99 0.008 85)', }, paper: { name: 'paper', bg: 'oklch(0.97 0.005 240)', bgAlt: 'oklch(0.94 0.008 240)', ink: 'oklch(0.22 0.015 260)', inkSoft: 'oklch(0.42 0.015 260)', inkMute: 'oklch(0.60 0.012 260)', rule: 'oklch(0.85 0.01 250)', paper: 'oklch(0.99 0.003 240)', }, }; window.ACCENTS = { sage: 'oklch(0.60 0.10 150)', periwinkle: 'oklch(0.58 0.14 265)', coral: 'oklch(0.65 0.17 28)', }; // per-page accent assignment (mode-aware; section accent differentiation) window.PAGE_ACCENT = { about: 'periwinkle', research: 'sage', work: 'coral', projects: 'periwinkle', timeline: 'coral', }; // ────────────────────────────────────────────────────────────── // Figure — hero-scale illustration (Cajal or Comp-bio) // props: mode ('neuro' | 'compbio'), page, color // ────────────────────────────────────────────────────────────── window.Figure = function Figure({ mode, page, color, style, variant = 'hero' }) { const M = mode === 'compbio' ? CompBioFigures : NeuroFigures; const Comp = M[page] || M.about; return ; }; // ────────────────────────────────────────────────────────────── // NEURO FIGURES — Cajal-inspired, hand-drawn feeling // ────────────────────────────────────────────────────────────── const strokeCommon = (color) => ({ stroke: color, fill: 'none', strokeWidth: 1, strokeLinecap: 'round', strokeLinejoin: 'round', }); const NeuroFigures = { // ABOUT — cortical microcircuit: pyramidal + interneuron + connections about: ({ color, style, variant }) => ( {/* big pyramidal cell (left) — apical tree reaching up */} {/* apical tufts */} {/* tiny terminal hairs */} {[-94,-82,-66,-58,-46,46,58,66,82,94].map((x,i)=>( ))} {/* soma — triangular pyramidal body */} {/* basal dendrites */} {/* basal twigs */} {/* axon */} {/* small interneuron (right) — bipolar, more compact */} {/* afferent fibers entering from top */} {/* connection pyramidal→interneuron (recurrent) */} ), // RESEARCH — purkinje + granule cells + parallel fibers. Lush. research: ({ color, style }) => ( {/* parallel fibers across the top (granule cell axons) */} {[40, 60, 80, 100, 120, 140, 160, 180].map((y, i) => ( ))} {/* Purkinje cell — central */} {/* soma */} {/* trunk */} {/* primary branches */} {/* secondary fan */} {Array.from({ length: 18 }).map((_, i) => { const a = (i / 17) * Math.PI * 0.95 - Math.PI * 0.47 - Math.PI/2; const r0 = 60, r1 = 120, r2 = 170; const x0 = Math.cos(a) * r0, y0 = 240 + Math.sin(a) * r0 + 10; const x1 = Math.cos(a) * r1, y1 = 240 + Math.sin(a) * r1 - 20; const x2 = Math.cos(a) * r2, y2 = 240 + Math.sin(a) * r2 - 40; return ; })} {/* tertiary twigs */} {Array.from({ length: 34 }).map((_, i) => { const a = (i / 33) * Math.PI - Math.PI/2; const r1 = 170, r2 = 210; const x1 = Math.cos(a) * r1, y1 = 200 + Math.sin(a) * r1; const x2 = Math.cos(a) * r2 + (i%2?3:-3), y2 = 180 + Math.sin(a) * r2; return ; })} {/* climbing fiber wrapping */} {/* axon */} {/* granule cells below as dots */} {Array.from({length: 14}).map((_,i)=>{ const x = 50 + i * 24 + (i%2?4:-4); return ; })} ), // WORK — myelinated axon bundle with nodes of Ranvier, branching into terminals work: ({ color, style }) => ( {/* bundle of 5 axons */} {[80, 140, 200, 260, 320].map((x, i) => ( {/* myelin segments */} {Array.from({length: 9}).map((_, k) => { const prog = (k + 1) / 10; const y = 20 + prog * 440; const xoff = x + Math.sin(prog * Math.PI * 2 + i) * 10 + (i%2?-1:1) * (prog * 6); return ; })} ))} {/* terminal arbor */} {[80, 140, 200, 260, 320].map((x, i) => ( ))} {/* top: cells of origin sketched */} {[80, 140, 200, 260, 320].map((x, i) => ( ))} ), // PROJECTS — synaptic cleft close-up with vesicles + receptors projects: ({ color, style }) => ( {/* incoming axon */} {/* presynaptic bulb */} {/* vesicles */} {Array.from({length: 26}).map((_, i) => { const a = (i/26) * Math.PI * 2 + (i%3)*0.3; const r = 18 + (i%5)*8; const cx = 200 + Math.cos(a) * r, cy = 298 + Math.sin(a) * r * 0.6; return ; })} {/* fusing vesicle at membrane */} {/* synaptic cleft — dashed bilayer */} {/* neurotransmitter cluster in cleft */} {[170, 186, 200, 214, 230].map((cx, i) => ( ))} {/* postsynaptic density */} {/* receptors — channel shapes */} {Array.from({length: 8}).map((_, i) => { const cx = 140 + i * 22; return ; })} {/* postsynaptic dendrite */} {/* labels — dotted callouts */} ), }; // ────────────────────────────────────────────────────────────── // COMP-BIO FIGURES // ────────────────────────────────────────────────────────────── const CompBioFigures = { // ABOUT — double helix, long and elegant about: ({ color, style }) => ( {(() => { const N = 44, H = 480, top = 20, cx = 200, amp = 90; const pts1 = [], pts2 = []; for (let i = 0; i < N; i++) { const y = top + (i / (N - 1)) * H; const phase = (i / (N - 1)) * Math.PI * 5; pts1.push([cx + Math.cos(phase) * amp, y]); pts2.push([cx + Math.cos(phase + Math.PI) * amp, y]); } const path = (pts) => { let d = `M${pts[0][0]} ${pts[0][1]}`; for (let i = 1; i < pts.length; i++) { const [x0, y0] = pts[i-1], [x1, y1] = pts[i]; const mx = (x0 + x1) / 2; d += ` Q ${mx} ${y0}, ${x1} ${y1}`; } return d; }; return ( <> {/* rungs */} {pts1.map((p, i) => { const q = pts2[i]; // vary base pair style const isAT = i % 2 === 0; return ( {/* mid-dots */} ); })} {/* sugar-phosphate backbone beads */} {pts1.filter((_,i)=>i%2===0).map((p,i)=>( ))} {pts2.filter((_,i)=>i%2===0).map((p,i)=>( ))} ); })()} ), // RESEARCH — protein ribbon/fold with alpha helices + beta sheets research: ({ color, style }) => ( {/* alpha helix 1 — coils */} {(() => { const coils = []; const N = 60; for (let i = 0; i < N; i++) { const t = i / (N - 1); const y = 40 + t * 140; const x = 120 + Math.cos(t * 24) * 22; coils.push([x, y]); } let d = `M${coils[0][0]} ${coils[0][1]}`; for (let i = 1; i < coils.length; i++) d += ` L${coils[i][0]} ${coils[i][1]}`; return ; })()} {/* connecting loop */} {/* beta sheet arrows (3 strands) */} {[0, 18, 36].map((dx, i) => ( ))} {/* connecting turn */} {/* alpha helix 2 */} {(() => { const coils = []; const N = 50; for (let i = 0; i < N; i++) { const t = i / (N - 1); const y = 310 + t * 120; const x = 180 + Math.cos(t * 20 + 0.5) * 20; coils.push([x, y]); } let d = `M${coils[0][0]} ${coils[0][1]}`; for (let i = 1; i < coils.length; i++) d += ` L${coils[i][0]} ${coils[i][1]}`; return ; })()} {/* terminal loop */} {/* side chain dots */} {Array.from({length: 20}).map((_, i) => { const yy = 50 + i * 22; const xx = 90 + ((i * 37) % 220); return ; })} {/* N and C termini labels as little caps */} N C ), // WORK — phylogenetic tree, dendrogram style work: ({ color, style }) => ( {/* root */} {/* first split */} {/* second splits */} {/* third splits */} {/* leaves — tips of branches */} {[80, 160, 210, 270, 330, 370, 430].map((y, i) => ( ))} {/* branch length ticks as leaf length variation */} {/* time axis at bottom */} {[30, 100, 170, 240, 310, 370].map((x, i) => ( ))} t0 now ), // PROJECTS — gene regulatory network projects: ({ color, style }) => ( {/* nodes — genes */} {(() => { const nodes = [ { id: 'A', x: 100, y: 90, label: 'GENE_A' }, { id: 'B', x: 300, y: 90, label: 'GENE_B' }, { id: 'C', x: 80, y: 240, label: 'REG_1' }, { id: 'D', x: 200, y: 200, label: 'HUB' }, { id: 'E', x: 320, y: 250, label: 'REG_2' }, { id: 'F', x: 120, y: 380, label: 'OUT_X' }, { id: 'G', x: 280, y: 380, label: 'OUT_Y' }, { id: 'H', x: 200, y: 460, label: 'OUT_Z' }, ]; const edges = [ { from: 'A', to: 'D', kind: 'pos' }, { from: 'B', to: 'D', kind: 'pos' }, { from: 'C', to: 'D', kind: 'pos' }, { from: 'E', to: 'D', kind: 'neg' }, { from: 'D', to: 'F', kind: 'pos' }, { from: 'D', to: 'G', kind: 'pos' }, { from: 'F', to: 'H', kind: 'pos' }, { from: 'G', to: 'H', kind: 'neg' }, { from: 'A', to: 'C', kind: 'pos' }, { from: 'B', to: 'E', kind: 'pos' }, ]; const nm = Object.fromEntries(nodes.map(n=>[n.id,n])); return ( <> {edges.map((e, i) => { const a = nm[e.from], b = nm[e.to]; const dx = b.x - a.x, dy = b.y - a.y; const len = Math.hypot(dx, dy); const ux = dx/len, uy = dy/len; const x1 = a.x + ux * 18, y1 = a.y + uy * 18; const x2 = b.x - ux * 20, y2 = b.y - uy * 20; return ( ); })} {nodes.map(n => ( {n.id} ))} ); })()} ), }; // legacy alias for sidebar still referencing InkNeuron window.InkNeuron = ({ kind, color, style }) => { const mapping = { network: 'about', purkinje: 'research', 'axon-bundle': 'work', synapse: 'projects' }; const page = mapping[kind] || 'about'; return ; }; // EEG trace window.EEGTrace = function EEGTrace({ t, accent, width = 260, height = 40 }) { const pts = []; const N = 160; for (let i = 0; i < N; i++) { const x = i / (N - 1); const y = 0.5 + 0.22 * Math.sin(x * 30 + t * 3.0) + 0.10 * Math.sin(x * 85 - t * 2.2) + 0.04 * Math.sin(x * 210 + t * 5.4); pts.push([x * width, y * height]); } return ( p.join(',')).join(' ')} fill="none" stroke={accent} strokeWidth="0.9" strokeLinecap="round" /> ); }; window.useTick = function useTick() { const [t, setT] = React.useState(0); React.useEffect(() => { let raf, start = performance.now(); const loop = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); return t; };