/* explainer-scenes.jsx
Six-scene timeline for the Osynax explainer.
Uses globals from animations.jsx: Stage, Sprite, useTime, useSprite,
useTimeline, Easing, interpolate, animate, clamp. */
const { useEffect, useRef, useState } = React;
/* ===================== PALETTE ===================== */
const P = {
// Light bracketing palette (intro / outro) — matches landing page
light: "#FAFAF9",
ink: "#0A0A0A",
ink2: "#1F2024",
muted: "#5A5C63",
muted2: "#8A8C93",
line: "#E6E5E1",
accent: "oklch(0.52 0.055 200)",
accentInk: "oklch(0.40 0.06 200)",
accentWash:"oklch(0.96 0.012 200)",
// Dark product palette — matches dashboard/app/globals.css
dark: "#0a0a0f",
surface: "#0f0f1a",
card: "#0c0c14",
border: "#1a1a2e",
borderHi:"#1e1e2e",
text: "#e2e8f0",
dim: "#475569",
blue: "#3b82f6",
blue2: "#60a5fa",
safe: "#22c55e",
unsafe: "#ef4444",
warn: "#eab308",
remed: "#4ade80",
mono: `"JetBrains Mono", ui-monospace, monospace`,
sans: `"Inter", system-ui, sans-serif`,
};
/* ===================== ICON ATOMS ===================== */
/* Reused inline SVG primitives so we don't depend on lucide. */
const Ico = {
pr: (size=18, c="currentColor") => (
),
branch: (size=14, c="currentColor") => (
),
scan: (size=22, c="currentColor") => (
),
brain: (size=22, c="currentColor") => (
),
scale: (size=22, c="currentColor") => (
),
gavel: (size=22, c="currentColor") => (
),
zap: (size=22, c="currentColor") => (
),
wrench: (size=22, c="currentColor") => (
),
shieldX: (size=24, c="currentColor") => (
),
check: (size=18, c="currentColor") => (
),
book: (size=14, c="currentColor") => (
),
};
const STAGES = [
{ id: "init", label: "INIT", icon: "zap" },
{ id: "planner", label: "PLANNER", icon: "brain" },
{ id: "sast", label: "SAST GATE", icon: "scan" },
{ id: "evaluator", label: "EVALUATOR", icon: "scale" },
{ id: "auditor", label: "AUDITOR", icon: "gavel" },
{ id: "remediation", label: "GENERATOR", icon: "wrench" },
];
/* ===================== CAMERA WRAPPER =====================
Wraps a scene in a transform driven by useSprite() progress. */
function Camera({ from = { scale: 1, x: 0, y: 0 }, to = { scale: 1.04, x: 0, y: 0 },
ease = Easing.easeOutQuad, children }) {
const { progress } = useSprite();
const t = ease(progress);
const scale = from.scale + (to.scale - from.scale) * t;
const x = from.x + (to.x - from.x) * t;
const y = from.y + (to.y - from.y) * t;
return (
{children}
);
}
/* Crossfade-able layer — opacity ramps from 0 → 1 over entry, 1 → 0 over exit */
function FadeLayer({ children, entry = 0.4, exit = 0.4 }) {
const { localTime, duration } = useSprite();
const exitStart = Math.max(0, duration - exit);
let opacity = 1;
if (localTime < entry) opacity = Easing.easeOutCubic(clamp(localTime / entry, 0, 1));
else if (localTime > exitStart) opacity = 1 - Easing.easeInCubic(clamp((localTime - exitStart) / exit, 0, 1));
return (
{children}
);
}
/* ===================== BACKGROUND ===================== */
/* Crossfades the canvas background colour based on absolute scene timeline. */
function Background() {
const time = useTime();
// breakpoints: scene transitions
let bg = P.light;
if (time < 5.0) bg = P.light;
else if (time < 5.6) bg = mix(P.light, P.dark, (time - 5.0) / 0.6);
else if (time < 39.5) bg = P.dark;
else if (time < 40.2) bg = mix(P.dark, P.light, (time - 39.5) / 0.7);
else bg = P.light;
return
;
}
function mix(a, b, t) {
// Quick mix only for our two known palette ends — pick whichever t is closer to
return t < 0.5 ? a : b;
}
/* ===================== TIMESTAMP HUD ===================== */
/* Top-right corner: thin mono timestamp + scene label. */
function TimestampHud() {
const time = useTime();
const scene = (() => {
if (time < 5.0) return "01 · A PR is opened";
if (time < 13.0) return "02 · Osynax intercepts";
if (time < 21.0) return "03 · SAST detects PII in logs";
if (time < 31.0) return "04 · Citations ground the verdict";
if (time < 39.0) return "05 · Verdict and remediation";
return "06 · Outro";
})();
// Choose colour for HUD vs current bg so it stays readable across scenes
const onDark = time >= 5.6 && time < 40.0;
const fg = onDark ? "rgba(255,255,255,0.55)" : P.muted2;
const line = onDark ? "rgba(255,255,255,0.16)" : P.line;
const m = Math.floor(time / 60);
const s = Math.floor(time % 60);
const cs = Math.floor((time * 100) % 100);
const stamp = `${String(m).padStart(2,"0")}:${String(s).padStart(2,"0")}.${String(cs).padStart(2,"0")}`;
return (
{stamp}
{scene}
);
}
/* Osynax wordmark — small bottom-left tag throughout */
function CornerMark() {
const time = useTime();
const onDark = time >= 5.6 && time < 40.0;
const fg = onDark ? "rgba(255,255,255,0.65)" : P.ink;
const swatch = onDark ? P.blue : P.accent;
return (
);
}
/* ===================== SCENE 01 — GitHub PR opens ===================== */
function Scene01() {
return (
{/* Eyebrow */}
{() => (
)}
{/* Headline — absolute Sprite times */}
{/* The GitHub PR card itself */}
);
}
function TitleText() {
const { localTime } = useSprite();
const t = Easing.easeOutCubic(clamp(localTime / 0.6, 0, 1));
return (
A pull request opens.
Senior eng review queues up.
);
}
function PRCardLight() {
const { localTime } = useSprite();
const t = Easing.easeOutBack(clamp(localTime / 0.6, 0, 1));
return (
{Ico.pr(22, P.accent)}
#142
OPEN
just now
feat(patients): add free-text search endpoint
{Ico.branch(14, P.muted)} feat/patient-search → main
@alex-hodgson
8c4a1f2
+142 −18
);
}
/* ===================== SCENE 02 — Pipeline ===================== */
function Scene02() {
return (
{() => (
)}
{/* The pipeline */}
{/* Sub-caption */}
{() => (
Four agents · one deterministic SAST gate
)}
);
}
function Scene02Headline() {
const { localTime } = useSprite();
const t = Easing.easeOutCubic(clamp(localTime / 0.6, 0, 1));
return (
Osynax runs four agents against it
);
}
const PIPELINE_BEATS = [
{ id: "init", start: 0.0, end: 0.5 },
{ id: "planner", start: 0.4, end: 1.1 },
{ id: "sast", start: 1.0, end: 2.0 },
{ id: "evaluator", start: 1.9, end: 3.0 },
{ id: "auditor", start: 2.9, end: 3.9 },
{ id: "remediation", start: 3.8, end: 4.8 },
];
function PipelineRow() {
const { localTime } = useSprite();
return (
{STAGES.map((s, i) => {
const beat = PIPELINE_BEATS[i];
let status = null;
if (localTime >= beat.start && localTime < beat.end) status = "running";
else if (localTime >= beat.end) status = "done";
const isConn = i > 0;
return (
{isConn &&
);
})}
{status === "running" ? (
) : status === "done" ? (
Ico.check(36, icoCol)
) : (
IcoFn(36, icoCol)
)}
{stage.label}
);
}
function PipelineConn({ active }) {
return (
);
}
/* ===================== SCENE 03 — SAST detects PII ===================== */
function Scene03() {
return (
);
}
function LeftCallout() {
const { localTime } = useSprite();
const t = Easing.easeOutCubic(clamp(localTime / 0.6, 0, 1));
return (
The patient's query string ends up in the request log.
Free-text patient search · /v1/patients/search?q=… · logged at INFO level by the standard middleware.
);
}
function SastFindings() {
const { localTime } = useSprite();
const lines = [
{ sev: "CRITICAL", col: P.unsafe, txt: "Sensitive query parameter in log line" },
{ sev: "HIGH", col: P.warn, txt: "Unbound LIKE clause in patient search" },
{ sev: "HIGH", col: P.warn, txt: "No rate limit on /v1/patients/search" },
];
return (
{lines.map((l, i) => {
const at = i * 0.5;
const t = Easing.easeOutCubic(clamp((localTime - at) / 0.4, 0, 1));
return (
{l.sev}
{l.txt}
);
})}
internal/logging/middleware.go
{`func RequestLogger(next http.Handler) http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
start := time.Now()
next.ServeHTTP(w, r)
`}
{` log.Info("http",
"path", `}r.URL.RequestURI() {`,
"dur_ms", time.Since(start).Milliseconds())
`} {` })
}`}
);
}
function HighlightLine({ children, localTime }) {
// Pulse a soft red bg from t=1.4s
const pulseStart = 1.4;
const t = clamp((localTime - pulseStart) / 0.6, 0, 1);
const wave = Math.sin((localTime - pulseStart) * 4) * 0.5 + 0.5;
const intensity = t * (0.35 + 0.25 * wave);
return (
{children}
);
}
/* ===================== SCENE 04 — Citations ===================== */
function Scene04() {
return (
{() => (
)}
{() => (
Hybrid retrieval · pgvector + tsvector · RRF k=60 · 566 clauses indexed locally
)}
);
}
function Scene04Title() {
const { localTime } = useSprite();
const t = Easing.easeOutCubic(clamp(localTime / 0.6, 0, 1));
return (
Every finding cites verbatim regulatory text.
);
}
function CitationCard({ framework, clauseRef, title, text, url }) {
const { localTime } = useSprite();
const t = Easing.easeOutBack(clamp(localTime / 0.55, 0, 1));
return (
{Ico.book(16, P.blue2)}
{framework} · {clauseRef}
{title}
"{text}"
{url}
);
}
/* ===================== SCENE 05 — Verdict + remediation ===================== */
function Scene05() {
return (
{() => (
)}
);
}
function Scene05Title() {
const { localTime } = useSprite();
const t = Easing.easeOutCubic(clamp(localTime / 0.6, 0, 1));
return (
Unsafe.Here is the fix.
);
}
function VerdictBanner() {
const { localTime } = useSprite();
const t = Easing.easeOutBack(clamp(localTime / 0.5, 0, 1));
return (
{Ico.shieldX(28, P.unsafe)}
VERDICT · UNSAFE
);
}
function AuditorBlock() {
const { localTime } = useSprite();
const t = Easing.easeOutCubic(clamp(localTime / 0.6, 0, 1));
return (
[Auditor] {" "}
Adversarial review: argued the logs sit inside the UK VPC. Argument fails — Art. 32(1) is about appropriate measures regardless of egress. Verdict holds.
);
}
function FixPRCard() {
const { localTime } = useSprite();
const t = Easing.easeOutBack(clamp(localTime / 0.5, 0, 1));
return (
{Ico.pr(22, P.safe)}
#142-fix
OSYNAX DRAFT
fix(logging): redact patient paths, parameterise search, add rate limit
);
}
function DiffWindow() {
const { localTime } = useSprite();
const t = Easing.easeOutCubic(clamp(localTime / 0.6, 0, 1));
const lines = [
{ type: "head", t: "--- a/internal/logging/middleware.go" },
{ type: "head", t: "+++ b/internal/logging/middleware.go" },
{ type: "hunk", t: "@@ -32,7 +32,11 @@" },
{ type: "ctx", t: " next.ServeHTTP(w, r)" },
{ type: "remove", t: "- log.Info(\"http\", \"path\", r.URL.RequestURI(), …)" },
{ type: "add", t: "+ path := r.URL.Path" },
{ type: "add", t: "+ if matchPatient(path) {" },
{ type: "add", t: "+ path = redactPatientPath(path)" },
{ type: "add", t: "+ }" },
{ type: "add", t: "+ log.Info(\"http\", \"path\", path, …)" },
];
return (
{lines.map((l, i) => {
const at = 0.2 + i * 0.12;
const lt = Easing.easeOutCubic(clamp((localTime - at) / 0.3, 0, 1));
const col = l.type === "add" ? P.safe
: l.type === "remove" ? P.unsafe
: l.type === "hunk" ? P.blue2
: l.type === "head" ? P.text
: "#94a3b8";
return (
{l.t}
);
})}
{() => (
)}
);
}
function OutroTitle() {
const { localTime } = useSprite();
const t1 = Easing.easeOutCubic(clamp(localTime / 0.5, 0, 1));
const t2 = Easing.easeOutCubic(clamp((localTime - 0.5) / 0.5, 0, 1));
const t3 = Easing.easeOutCubic(clamp((localTime - 1.0) / 0.5, 0, 1));
return (
Catch the vulnerability.
Cite the regulation.
Open the fix.
);
}
function OutroCTA() {
const { localTime } = useSprite();
const t = Easing.easeOutCubic(clamp(localTime / 0.5, 0, 1));
return (
);
}
/* ===================== ROOT APP ===================== */
function ExplainerApp() {
return (
);
}
/* Surface a [data-screen-label] for comments at any time. */
function StageLabelSync() {
const time = useTime();
useEffect(() => {
const sec = Math.floor(time);
const stamp = `${String(Math.floor(sec/60)).padStart(2,"0")}:${String(sec%60).padStart(2,"0")}`;
document.documentElement.setAttribute("data-screen-label", `Explainer · ${stamp}`);
}, [Math.floor(time)]);
return null;
}
window.ExplainerApp = ExplainerApp;