// CompilePipeline.jsx — INXM plan-creation pipeline.
//
// Visual vocabulary: circles, dots, arcs, hairlines. Only the
// currently-running scene carries the accent colour — inactive
// scenes desaturate via the --accent override in site-v4.css.
// No UI literalism (no buttons, no checklists, no docs) — each
// scene tells its step through one geometric action.
const PHASES = [
{ key: "INTENT", label: "State the intent" },
{ key: "COMPILE", label: "Compile the Plan" },
{ key: "APPROVE", label: "Approve the Plan" },
{ key: "EXECUTE", label: "Execute the Plan" },
{ key: "RESULT", label: "Audit the result" },
];
const PHASE_DUR = 2400; // ms — duration of the animated portion of each scene
const HOLD_DUR = 1200; // ms — pause at progress=1 before advancing to the next scene
// =====================================================================
// Real-use-case snippets — shown under each scene as the concrete
// version of what the abstract illustration depicts. Story: one Plan,
// RUN-4412, April vendor reconciliation.
//
// Content is split into atomic "lines" so they can fade in sequentially
// when the scene becomes active. Each line carries a --i custom prop
// that drives its animation-delay in site-v4.css.
// =====================================================================
// Helper to wrap a string of code lines into individually-animated spans.
function CodeLines({ lines, baseIndex = 0 }) {
return (
{lines.map((ln, i) => (
{ln || "\u00a0"}
))}
);
}
function CaseSnippet({ phase }) {
switch (phase) {
case "INTENT":
return (
// jana@inxm.ai · slack
14:00 UTC
“
Reconcile April vendor invoices against open POs.
{" "}Email controller by 18:00.
”
);
case "COMPILE":
return (
// PLAN-mthend-recon-v3
€0.42 · 2m04s
);
case "APPROVE":
return (
// v3 vs v2 · 4 changes
alex@inxm.ai
);
case "EXECUTE":
return (
// RUN-4412 · live
duration 2:09
);
case "RESULT":
return (
// audit · sealed
14:02:09 UTC
{[
["Matched", "847 / 850 · 99.6%"],
["Excepts", "3 · resolved"],
["Emailed", "controller@inxm.ai"],
["Cost", "€0.42 · 12 ops"],
["Hash", "0x9c2b·f4a1"],
].map(([k, v], i) => (
{k}
{v}
))}
);
default:
return null;
}
}
// Shared primitive classes — see site-v4.css for the .cp-ink-*
// and .cp-accent-* rules. `cp-ink-*` always reads currentColor;
// `cp-accent-*` reads var(--accent), which is muted to grey in
// inactive scenes by the global override.
// ───────────────────────────────────────────────────────────────────
// 1 · INTENT — sender dot → dashed line → receiver circle.
// "A plain-language request flows into the engine."
// ───────────────────────────────────────────────────────────────────
function SceneIntent({ active, progress }) {
const p = active ? progress : 1;
// Dashed connector draws in 0 → 1
const connectorP = Math.min(1, p / 0.8);
// Receiver dot lands at the end
const arrived = p > 0.85;
// Sound-wave arcs on the left of the sender dot — three of them,
// staggered so the wave looks like it's "speaking" while active.
const waves = [
{ d: "M 40 56 Q 36 60 40 64", k: 1 },
{ d: "M 36 52 Q 28 60 36 68", k: 2 },
{ d: "M 32 48 Q 20 60 32 72", k: 3 },
];
return (
{/* Sender dot */}
);
}
// ───────────────────────────────────────────────────────────────────
// 2 · COMPILE — 6 spokes draw outward from a centre dot to vertices.
// "Scattered intent becomes a structured Plan."
// ───────────────────────────────────────────────────────────────────
function SceneCompile({ active, progress }) {
const p = active ? progress : 1;
const cx = 100, cy = 60, r = 32;
const verts = Array.from({ length: 6 }, (_, i) => {
const a = (Math.PI * 2 / 6) * i - Math.PI / 2;
return { x: cx + Math.cos(a) * r, y: cy + Math.sin(a) * r };
});
return (
{/* Spokes — drawn sequentially, one per sixth of progress */}
{verts.map((v, i) => {
const segP = Math.max(0, Math.min(1, p * 6 - i));
return (
);
}
// ───────────────────────────────────────────────────────────────────
// 3 · APPROVE — four corner brackets close inward around a dot.
// "The Plan is committed. The frame snaps shut."
// ───────────────────────────────────────────────────────────────────
function SceneApprove({ active, progress }) {
const p = active ? progress : 1;
// Brackets travel from outside-the-frame to their final inner positions.
const travel = (1 - p) * 22;
const cx = 100, cy = 60;
const TL = { x: cx - 36, y: cy - 22 };
const TR = { x: cx + 36, y: cy - 22 };
const BL = { x: cx - 36, y: cy + 22 };
const BR = { x: cx + 36, y: cy + 22 };
const len = 8; // arm length of each bracket
const ease = p > 0.95 ? 1 : 0;
return (
{/* Centre Plan dot — the thing being framed */}
);
}
// ───────────────────────────────────────────────────────────────────
// 4 · EXECUTE — clock face. 24 ticks fill clockwise. A sweep hand
// marks "now". "The Plan runs through real time."
// ───────────────────────────────────────────────────────────────────
function SceneExecute({ active, progress }) {
const p = active ? progress : 1;
const N = 24;
const cx = 100, cy = 60;
const rOuter = 38;
const rInner = 32;
// Sweep hand angle — at p=0 points up (12 o'clock), rotates clockwise
const handA = Math.PI * 2 * p - Math.PI / 2;
const handLen = rInner - 3;
return (
{/* 24 radial ticks. Filled clockwise as p advances. */}
{Array.from({ length: N }, (_, i) => {
const a = (Math.PI * 2 / N) * i - Math.PI / 2;
const filled = i / N <= p + 0.001;
const x1 = cx + Math.cos(a) * rInner;
const y1 = cy + Math.sin(a) * rInner;
const x2 = cx + Math.cos(a) * rOuter;
const y2 = cy + Math.sin(a) * rOuter;
return (
);
}
// ───────────────────────────────────────────────────────────────────
// 5 · RESULT — three concentric rings draw inward to a bullseye.
// "Every signal lands at the centre. Auditable, sealed."
// ───────────────────────────────────────────────────────────────────
function SceneResult({ active, progress }) {
const p = active ? progress : 1;
const cx = 100, cy = 60;
// Three rings — outer fills first, then middle, then inner (accent).
const rings = [
{ r: 36, accent: false, t: Math.max(0, Math.min(1, p * 3)) },
{ r: 24, accent: false, t: Math.max(0, Math.min(1, p * 3 - 1)) },
{ r: 12, accent: true, t: Math.max(0, Math.min(1, p * 3 - 2)) },
];
return (
{rings.map((ring, i) => {
const circ = 2 * Math.PI * ring.r;
return (
0.95 ? 3.4 : 2.6}
className={p > 0.95 ? "cp-accent-fill" : "cp-ink-fill"}
style={{ transition: "r 200ms ease" }}
/>
);
}
const SCENES = {
INTENT: SceneIntent,
COMPILE: SceneCompile,
APPROVE: SceneApprove,
EXECUTE: SceneExecute,
RESULT: SceneResult,
};
function CompilePipeline() {
const [phaseIdx, setPhaseIdx] = React.useState(0);
const [progress, setProgress] = React.useState(0);
// Gate the animation on visibility so it doesn't burn cycles
// (and looks broken on mobile) before the user scrolls to it.
const containerRef = React.useRef(null);
const [inView, setInView] = React.useState(false);
// When true, every scene renders at progress=1 (full state) and
// the auto-cycle is paused. The single "Show all" button toggles
// this. Resuming restarts the cycle from step 1.
const [pinAll, setPinAll] = React.useState(false);
// On mobile, the sequential reveal doesn't read well — the user
// is already vertically scrolling, so animations off-screen feel
// broken. Show every scene at its final state.
const [isMobile, setIsMobile] = React.useState(() => {
if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
return false;
}
return window.matchMedia("(max-width: 640px)").matches;
});
React.useEffect(() => {
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
const mq = window.matchMedia("(max-width: 640px)");
const onChange = (e) => setIsMobile(e.matches);
if (mq.addEventListener) mq.addEventListener("change", onChange);
else mq.addListener(onChange);
return () => {
if (mq.removeEventListener) mq.removeEventListener("change", onChange);
else mq.removeListener(onChange);
};
}, []);
React.useEffect(() => {
const el = containerRef.current;
if (!el || typeof IntersectionObserver === "undefined") {
setInView(true);
return;
}
const io = new IntersectionObserver(
(entries) => {
for (const e of entries) {
if (e.isIntersecting) setInView(true);
else setInView(false);
}
},
{ rootMargin: "0px 0px -20% 0px", threshold: 0.15 }
);
io.observe(el);
return () => io.disconnect();
}, []);
React.useEffect(() => {
if (!inView || pinAll || isMobile) return;
let raf;
let alive = true;
let cur = phaseIdx;
let stepStart = performance.now() - progress * PHASE_DUR;
const tick = (now) => {
if (!alive) return;
const elapsed = now - stepStart;
const p = Math.min(1, elapsed / PHASE_DUR);
setProgress(p);
if (elapsed >= PHASE_DUR + HOLD_DUR) {
cur = (cur + 1) % PHASES.length;
stepStart = now;
setPhaseIdx(cur);
setProgress(0);
}
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => {
alive = false;
cancelAnimationFrame(raf);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [inView, pinAll]);
const toggleShowAll = () => {
if (pinAll) {
// Resume: restart the cycle from step 1.
setPinAll(false);
setPhaseIdx(0);
setProgress(0);
} else {
// Pin all scenes at their final state.
setPinAll(true);
}
};
// Per-scene state when pinAll is active vs normal cycling.
// On mobile, behave as if pinAll is on.
const allOn = pinAll || isMobile;
const effectivePhaseIdx = allOn ? PHASES.length - 1 : phaseIdx;
return (
{PHASES.map((ph, i) => {
const Scene = SCENES[ph.key];
const isActive = allOn || i === phaseIdx;
const stateCls = allOn
? " is-active"
: i === phaseIdx
? " is-active"
: i < phaseIdx
? " is-past"
: " is-future";
const sceneProgress = allOn
? 1
: i === phaseIdx
? progress
: i < phaseIdx
? 1
: 0;
return (
phaseIdx}>
{"/" + String(i + 1).padStart(2, "0")}
{ph.label}
);
})}
{/* Timeline underneath — desktop / tablet only. On mobile,
every scene renders at full state simultaneously, so the
timeline is pointless. */}
{!isMobile && (
{PHASES.map((ph, i) => {
const fillScale = pinAll
? 1
: i < phaseIdx
? 1
: i === phaseIdx
? progress
: 0;
return (
{
setPinAll(false);
setPhaseIdx(i);
setProgress(1);
}}
>
);
})}
{pinAll ? "↻ Restart" : "Show all"}
)}
);
}
window.CompilePipeline = CompilePipeline;