/* Stethos — live, self-explanatory motion graphics for the landing page.
DataFlowLive (3+2 sources → model → score), DivergeLive, BaselineLive, HardwareLive. */
const DSG = window.LatentHealthDesignSystem_2f3a71;
const { Badge: GBadge } = DSG;
const { useState, useEffect, useRef } = React;
/* Scales a fixed-size stage to its container width. */
function ScaledStage({ w, h, children, style, maxScale = 1 }) {
const ref = useRef(null); const [scale, setScale] = useState(1);
useEffect(() => {
function fit() { if (ref.current) setScale(Math.min(maxScale, ref.current.clientWidth / w)); }
fit(); window.addEventListener('resize', fit); return () => window.removeEventListener('resize', fit);
}, []);
return (
);
}
/* ------------------------------------------------ DataFlowLive (3 left, 2 right) */
const FLOW_LEFT = [
{ n: 'Audio Intelligence', s: 'call-bell intercom mic', chips: ['prosody', 'distress', 'ambient'], tag: 'EXISTING' },
{ n: 'Request & Response', s: 'nurse-call system', chips: ['call freq', 'latency', 'repeats'], tag: 'EXISTING' },
{ n: 'Presence & Continuity', s: 'RTLS badges · door sensor', chips: ['visit cadence', 'continuity'], tag: 'EXISTING' },
];
const FLOW_RIGHT = [
{ n: 'Room Environment', s: 'one small sensor', chips: ['sleep', 'light', 'temp'], tag: 'NEW' },
{ n: 'Clinical Events', s: 'EMR · HL7/FHIR', chips: ['analgesia', 'meals', 'LOS'], tag: 'EXISTING' },
];
const WIRES = [
'M 276 84 C 380 84 410 175 456 206',
'M 276 226 C 370 226 410 224 452 224',
'M 276 368 C 380 368 410 275 456 242',
'M 724 154 C 620 154 592 190 548 210',
'M 724 318 C 620 318 592 252 548 238',
];
function FlowBox({ d, hot, style, built = true, index = 0, fromLeft = true }) {
return (
{d.n}
{d.tag}
{d.s}
{d.chips.map((c, i) => {c})}
);
}
function DataFlowLive({ maxScale = 1.32 } = {}) {
const [hot, setHot] = useState(0);
const [score, setScore] = useState(0.86);
const [built, setBuilt] = useState(0); // 0=nothing 1=nodes 2=wires 3=model 4=score 5=running
useEffect(() => {
const steps = [180, 900, 1500, 1900, 2400];
const ids = steps.map((t, i) => setTimeout(() => setBuilt(i + 1), t));
return () => ids.forEach(clearTimeout);
}, []);
useEffect(() => {
if (built < 5) return;
const a = setInterval(() => setHot(h => (h + 1) % 5), 950);
const t0 = performance.now();
const b = setInterval(() => {
const p = ((performance.now() - t0) / 9000) % 1;
setScore(Math.max(0.19, 0.86 - 0.74 * Math.pow(p, 1.4)));
}, 90);
return () => { clearInterval(a); clearInterval(b); };
}, [built]);
const flagged = score < 0.30;
const nodesBuilt = built >= 1, wiresBuilt = built >= 2, modelBuilt = built >= 3, scoreBuilt = built >= 4, running = built >= 5;
const lTops = [30, 172, 314], rTops = [100, 264];
return (
{FLOW_LEFT.map((d, i) => )}
{FLOW_RIGHT.map((d, i) => )}
STETHOS
MODEL
LIVE DISCHARGE SCORE
{score.toFixed(2)}
{flagged ? '⚠ FLAG' : '● NOMINAL'}
Sixteen signals stream into one model, and out comes the number nobody else can see.
);
}
/* ------------------------------------------------ DivergeLive */
function DivergeLive() {
const [p, setP] = useState(0);
const raf = useRef(null);
useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setP(1); return; }
const DRAW = 7000, HOLD = 2600; const start = performance.now();
function step(now) { const el = (now - start) % (DRAW + HOLD); setP(el < DRAW ? el / DRAW : 1); raf.current = requestAnimationFrame(step); }
raf.current = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf.current);
}, []);
const W = 1100, H = 430, L = 56, R = 210, TOP = 30, BOT = 48, n = 64;
const bell = [], risk = [];
for (let i = 0; i < n; i++) { const t = i / (n - 1); bell.push(0.74 - 0.60 * Math.pow(t, 1.25)); risk.push(0.12 + 0.70 * Math.pow(t, 1.5)); }
let cross = n - 1; for (let i = 0; i < n; i++) { if (risk[i] >= bell[i]) { cross = i; break; } }
const x = i => L + (i / (n - 1)) * (W - L - R);
const y = v => H - BOT - v * (H - TOP - BOT);
const end = Math.max(1, Math.floor(p * (n - 1)));
const pts = arr => arr.slice(0, end + 1).map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ');
return (
Call-bell rate — what staff notice
Risk of a bad stay — what is actually happening
);
}
/* ------------------------------------------------ BaselineLive */
function BaselinePanel({ name, note, color, scoreColor, score, badge, step, raw }) {
return (
{name}
{note}
{raw.map((v, i) => (
= 1 ? `${v * 100}%` : '4%', background: color, borderRadius: 3, opacity: 0.9, transition: `height .9s var(--ease-out) ${i * 90}ms` }}>
))}
{badge}
{score}
);
}
function BaselineLive() {
const [step, setStep] = useState(0);
useEffect(() => {
let alive = true; let ids = [];
function cycle() {
if (!alive) return;
setStep(1);
ids = [setTimeout(() => alive && setStep(2), 1900), setTimeout(() => alive && setStep(0), 5600), setTimeout(cycle, 6400)];
}
cycle();
return () => { alive = false; ids.forEach(clearTimeout); };
}, []);
const raw = [0.5, 0.7, 0.4, 0.8, 0.55, 0.75, 0.45, 0.65];
return (
The exact same raw signal · two different verdicts
Nominal} step={step} raw={raw} />
Flagged} step={step} raw={raw} />
);
}
/* ------------------------------------------------ HardwareLive */
const HW_MODS = [
{ name: 'Audio Intelligence', src: 'call-bell intercom mic' },
{ name: 'Request & Response', src: 'nurse-call system' },
{ name: 'Presence & Continuity', src: 'RTLS badges' },
{ name: 'Room Environment', src: 'one small sensor' },
{ name: 'Clinical Events', src: 'EMR · HL7/FHIR' },
];
const HW_ORDER = [0, 1, 2, 4];
function HwCard({ d, state }) {
if (state === 'empty') return (
+
ROOM SENSOR
);
const lit = state !== 'dim';
const isNew = state === 'new';
const isBlue = isNew || state === 'blue';
const c = isBlue ? 'var(--cyan-400)' : 'var(--status-nominal)';
return (
{d.name}
{d.src}
{lit ? (isNew ? '✓ ONLINE, NEW' : '✓ LIVE, ALREADY YOURS') : 'STANDBY'}
);
}
function HardwareLive() {
const [phase, setPhase] = useState(0);
const [shine, setShine] = useState(false);
useEffect(() => {
let alive = true; let ids = [];
function run() {
if (!alive) return;
setPhase(0);
setShine(false);
const steps = [[600, 1], [1250, 2], [1900, 3], [2550, 4], [3600, 5], [4900, 6]];
ids = steps.map(([t, p]) => setTimeout(() => alive && setPhase(p), t));
ids.push(setTimeout(() => alive && setShine(true), 4900));
ids.push(setTimeout(() => alive && setShine(false), 4900 + 1600));
ids.push(setTimeout(run, 8800));
}
run();
return () => { alive = false; ids.forEach(clearTimeout); };
}, []);
const complete = phase >= 6;
const litCount = Math.min(phase, 4);
const caption = phase === 0 ? 'Here’s a hospital room, as it looks today.'
: phase <= 4 ? 'We light up what’s already installed: the intercom, the nurse-call system, the badges, the EMR.'
: phase === 5 ? 'The only hardware we add is one small room sensor.'
: 'Once it’s live, sixteen signals stream continuously from a room that needed nothing new.';
return (
{shine &&
}
{HW_MODS.map((d, i) => {
if (i === 3) return = 5 ? 'new' : 'empty'} />;
const k = HW_ORDER.indexOf(i);
return k ? (complete ? 'blue' : 'green') : 'dim'} />;
})}
{caption}
{complete ? '● SYSTEM COMPLETE · 16 SIGNALS LIVE' : `${litCount}/4 EXISTING ONLINE`}