/* Biomarkr — Technology page diagrams. Hand-built SVG in the brand's
monochrome register: ink / paper / grey, with var(--signal-info) used
only for the optical/active elements and critical/positive reserved for
biomarker direction. Replaces the CSO draft's navy/teal sketches.
Exports to window for technology.jsx to compose. */
/* ---- Figure shell: card + mono caption + note (matches site cards) ---- */
function Figure({ title, note, children, padded = true }) {
const { Card } = window.BiomarkrDesignSystem_734cca;
return (
{title && {title}
}
{children}
{note && {note}
}
);
}
/* ============================================================
1 — Evanescent-wave selective excitation
Why whole blood works without separation.
============================================================ */
function EvanescentDiagram() {
// blood cells scattered in the bulk (outside the field)
const cells = [
[150, 70, 26, 16], [300, 56, 24, 15], [455, 76, 27, 16], [620, 54, 24, 15],
[770, 84, 26, 16], [228, 104, 22, 14], [545, 110, 24, 15], [690, 108, 22, 14], [380, 116, 20, 13],
];
const complexX = [250, 470, 690];
return (
{/* bulk sample region */}
Whole-blood sample — cells sit outside the light entirely
{/* blood cells: outline biconcave discs */}
{cells.map(([cx, cy, rx, ry], i) => (
))}
RBC · 6–8 µm
{/* evanescent field band ~50-150nm — the active zone (info accent) */}
EVANESCENT FIELD · ~50–150 nm
{/* waveguide */}
Guided excitation light · silicon planar waveguide
{/* chip base */}
SILICON PHOTONIC CHIP
{/* immunocomplexes: capture Y + antigen + detection Y + fluorophore */}
{complexX.map((x, i) => (
{/* capture antibody (Y rooted on surface) */}
))}
fluorophore excited at the surface
);
}
/* ============================================================
2 — Waveguide matrix: 4 inputs × 8 outputs = 32 sites
============================================================ */
function MultiplexMatrix() {
const rows = [60, 112, 164, 216];
const cols = [110, 190, 270, 350, 430, 510, 590, 670];
const cip = ['IL-6', 'TNF-α', 'IL-1β', 'IFN-γ', 'IL-10'];
return (
4 OPTICAL INPUTS
{/* input lines (horizontal) */}
{rows.map((y, i) => (
in{i + 1}
))}
{/* output lines (vertical) */}
{cols.map((x, i) => 8 OUTPUTS
{/* 32 nodes */}
{rows.map((y, ri) => cols.map((x, ci) => {
const isCip = ri === 0 && ci < 5;
return (
{isCip
?
);
}))}
{/* CIP labels */}
{cip.map((m, i) => {m} )}
controls /
standards
);
}
/* ============================================================
3 — Snapshot vs trajectory
One reading, two possible futures.
============================================================ */
function SnapshotTrajectoryChart() {
const W = 720, H = 300, pad = { l: 56, r: 30, t: 28, b: 60 };
const n = 13;
const rising = [1, 1.1, 1.3, 1.6, 2.0, 2.6, 3.3, 4.0, 4.45, 4.55, 4.35, 3.9, 3.4];
const falling = [4.55, 4.0, 3.5, 3.0, 2.6, 2.2, 1.9, 1.7, 1.5, 1.4, 1.3, 1.2, 1.15];
const max = 5, min = 0.5;
const hit = 6; // both ≈ 3.3 here
const px = (i) => pad.l + (i * (W - pad.l - pad.r)) / (n - 1);
const py = (v) => H - pad.b - ((v - min) / (max - min)) * (H - pad.t - pad.b);
const line = (d) => d.map((v, i) => `${i ? 'L' : 'M'} ${px(i).toFixed(1)} ${py(v).toFixed(1)}`).join(' ');
return (
{[1, 2, 3, 4, 5].map((g) => (
{g}×
))}
{d}
))}
Days of monitoring
{/* decision line at snapshot */}
one reading, two futures
Rising · flare
Falling · resolving
);
}
Object.assign(window, {
TECH_Figure: Figure,
TECH_EvanescentDiagram: EvanescentDiagram,
TECH_MultiplexMatrix: MultiplexMatrix,
TECH_SnapshotTrajectoryChart: SnapshotTrajectoryChart,
});