// ═══════════════════════════════════════════════════════════════════════════
// FOUR ROOM ARCHETYPES
//
// A · Band full-bleed espresso, one enormous gold number
// B · Split 40% statement on paper / 60% product UI bleeding off-frame
// C · Field a dense glyph field that carries the argument without prose
// D · Statement centred serif and air — used twice only, as punctuation
//
// Adjacent rooms never share an archetype. That alternation is the point:
// ten rooms in one composition is ten rooms nobody remembers.
// ═══════════════════════════════════════════════════════════════════════════
const { useState: useAS, useEffect: useAE, useRef: useAR } = React;
// ?static=1 freezes every animation so a headless render can settle. Without
// it the rAF loops keep Chrome's virtual clock from ever going idle and the
// PDF captures a blank first paint.
const isStatic = (function () {
try { return new URLSearchParams(location.search).get('static') === '1'; }
catch (e) { return false; }
})();
window.__STATIC = isStatic;
const reduceMotion = () => {
if (isStatic) return true;
try { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; }
catch (e) { return false; }
};
// ── Hero numbers arrive rather than appear. Nothing sells a number like
// watching it count. Parses whatever numeric part a string contains and
// preserves the prefix/suffix around it ($1.7 trillion, $300 000, 1%).
function useHeroCount(text, ms) {
const [out, setOut] = useAS(text);
useAE(() => {
const s = String(text == null ? '' : text);
const m = s.match(/([^\d]*)([\d]+(?:[.,][\d]+)?)(.*)$/s);
if (!m || reduceMotion()) { setOut(s); return; }
const pre = m[1], raw = m[2], post = m[3];
const dec = (raw.split(/[.,]/)[1] || '').length;
const sep = raw.indexOf(',') > -1 ? ',' : '.';
const target = parseFloat(raw.replace(',', '.'));
if (!isFinite(target)) { setOut(s); return; }
let frame = 0, done = false;
const t0 = performance.now();
const step = (now) => {
const p = Math.min(1, (now - t0) / (ms || 700));
const eased = 1 - Math.pow(1 - p, 3); // ease-out cubic
const v = (target * eased).toFixed(dec).replace('.', sep);
setOut(pre + v + post);
if (p < 1) frame = requestAnimationFrame(step);
else done = true;
};
frame = requestAnimationFrame(step);
// Never leave a partial number on screen if the animation is interrupted.
const safety = setTimeout(() => { if (!done) setOut(s); }, (ms || 700) + 400);
return () => { cancelAnimationFrame(frame); clearTimeout(safety); };
}, [text, ms]);
return out;
}
window.__useCountUp = useHeroCount;
// ───────────────────────── A · THE BAND
// The product's KPI strip at full-screen scale. Edge to edge, no margins.
function Band({ value, line, label, figId, room }) {
const shown = useHeroCount(value, 700);
const Fig = window.Fig;
const num = (
{shown}
);
return (
{label && (
{label}
)}
{figId ? {num} : num}
{/* The gold rule draws in under the number. */}
{line && (
{line}
)}
{room && }
);
}
// ───────────────────────── B · THE SPLIT
// Statement left on paper, real product UI right, bleeding off the frame edge.
// The screenshot is the argument that the thing exists.
function Split({ label, headline, body, img, imgAlt, imgW, room, foot, dense }) {
return (
{label && (
{label}
)}
{headline}
{body && (
{body}
)}
{foot}
{room && }
{/* Bleeds off the right edge — never a floating mockup. */}
);
}
// ───────────────────────── C · THE FIELD
// The viewer sees the proportion instead of reading it. The mark is the
// product's own level-bar glyph from the Nivå column, not a new chart style.
function Field({ label, headline, total, filled, unit, note, room, figId, cap, foot }) {
const [on, setOn] = useAS(reduceMotion());
useAE(() => {
if (reduceMotion()) return;
const t = setTimeout(() => setOn(true), 120);
return () => clearTimeout(t);
}, []);
const Fig = window.Fig;
// One mark per unit up to `cap`, then each mark stands for several. Keeps
// 125 000 legible without pretending to draw 125 000 elements.
const marks = Math.min(total, cap || 600);
const scale = total / marks;
const goldMarks = Math.max(1, Math.round(filled / scale));
const headEl = (
{headline}
);
return (
{label && (
{label}
)}
{figId ? {headEl} : headEl}
{Array.from({ length: marks }).map((_, i) => (
))}
{note && (
{note}
)}
{unit}
{foot}
{room && }
);
}
// ───────────────────────── D · THE STATEMENT
// Punctuation. Used twice in the whole deck, which is where its force comes
// from — it was the default for all ten rooms, and defaults are invisible.
function Statement({ children, sub, room }) {
return (