// scene.jsx — "How a sentence becomes a graph"
// 10s auto-loop, paper aesthetic.
const SENTENCE = "Brandschottung in Schacht S-04 offen — bis nächste Woche, wenn die Lieferung kommt.";
// Highlighted spans (start/end indices into SENTENCE)
//
// Brandschottung in Schacht S-04 offen — bis nächste Woche, wenn die Lieferung kommt.
// ^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// open item (Prüfgegenstand) deadline (Frist) + condition
// loc ^^^^^^^^^^
// cond (Lieferung) — folded into the Frist
//
// We highlight 4 spans → spawn 5 nodes (the open item implies two Gewerke and one Aufgabe).
const SPANS = [
{ id: "mangel", text: "Brandschottung", from: 0, to: 14, kind: "Prüfgegenstand" },
{ id: "loc", text: "Schacht S-04", from: 18, to: 30, kind: "Ort" },
{ id: "frist", text: "bis nächste Woche", from: 39, to: 56, kind: "Frist" },
{ id: "cond", text: "wenn die Lieferung kommt", from: 58, to: 82, kind: "Cond" },
];
// Node positions in a 1280×720 stage (graph area roughly 200..1080 × 230..600)
const NODES = {
mangel: { x: 360, y: 360, w: 220, h: 64, label: "Brandschottung", kind: "Prüfgegenstand" },
loc: { x: 130, y: 360, w: 180, h: 56, label: "Schacht S-04", kind: "Ort" },
gewerk1: { x: 640, y: 250, w: 180, h: 56, label: "Brandschutz", kind: "Gewerk" },
gewerk2: { x: 640, y: 470, w: 180, h: 56, label: "Lüftung", kind: "Gewerk" },
aufgabe: { x: 920, y: 360, w: 220, h: 64, label: "Schott schließen", kind: "Aufgabe" },
frist: { x: 920, y: 540, w: 220, h: 64, label: "Frist", kind: "Frist" },
};
// Edges: source, target, role label, draw-time (sec)
const EDGES = [
{ from: "loc", to: "mangel", label: "located_in", t0: 4.7 },
{ from: "mangel", to: "gewerk1", label: "trade", t0: 4.9 },
{ from: "mangel", to: "gewerk2", label: "trade", t0: 5.1 },
{ from: "mangel", to: "aufgabe", label: "resolved_by", t0: 5.4 },
{ from: "aufgabe", to: "frist", label: "due_by", t0: 5.7 },
];
// ── Helpers ──────────────────────────────────────────────────────────────
const C = {
paper: "#f6f1e7",
ink: "#1a1a18",
ink2: "#3b3b35",
ink3: "#7a7568",
rule: "#dcd4bf",
accent: "#7a5cf0", // Alago purple
accent2: "#5a3fd9",
hi: "#efe6c8", // highlight background
hi2: "#e9d96b", // highlight underline (warm)
};
// Smooth pulse ∈ [0,1]
const pulse = (t, period = 2) => 0.5 - 0.5 * Math.cos((2 * Math.PI * t) / period);
// ── Scene ────────────────────────────────────────────────────────────────
function SentenceToGraphScene() {
const t = useTime();
return (
);
}
// ── Kicker ───────────────────────────────────────────────────────────────
function Kicker({ t }) {
return (
ALAGO R&D · ANIM. 01
HOW A SENTENCE BECOMES A GRAPH
BV RIEMERSCHMIDT · MÜNCHEN · 09.02.26
00:0{Math.floor(t)}.{String(Math.floor((t * 100) % 100)).padStart(2, "0")} / 00:10.00
);
}
// ── Sentence ─────────────────────────────────────────────────────────────
// We render the sentence char-by-char in monospace so we can compute span x
// positions cheaply. ~7.2 px per char at 14px mono.
const CHAR_W = 13.4; // px width per character at fontSize 22 mono
const SENT_X = 100;
const SENT_Y = 175;
const SENT_FS = 22;
function charX(i) { return SENT_X + i * CHAR_W; }
function Sentence({ t }) {
// Type-in: 0 → 1.6
const typeProgress = clamp((t - 0.05) / 1.55, 0, 1);
const charsShown = Math.floor(typeProgress * SENTENCE.length);
const visibleText = SENTENCE.slice(0, charsShown);
const cursorOn = (Math.floor(t * 4) % 2 === 0) && t < 1.7;
// Lift phase: 2.8 → 4.6 — spans fade out of the sentence
const liftStart = 2.8;
const liftEnd = 4.6;
const liftP = clamp((t - liftStart) / (liftEnd - liftStart), 0, 1);
// Sentence whole fades out 4.4..4.9 once spans have lifted
const sentOpacity = clamp(1 - (t - 4.4) / 0.5, 0, 1);
return (
{/* Quote marks framing */}
“
{/* Highlight rects (drawn under text). Appear 1.6..2.4, fade with lift. */}
{SPANS.map((s, i) => {
const startHi = 1.6 + i * 0.18;
const endHi = 2.4 + i * 0.18;
const hiP = clamp((t - startHi) / (endHi - startHi), 0, 1);
const liftI = clamp((t - (liftStart + i * 0.12)) / 0.6, 0, 1);
const hiOpacity = hiP * (1 - liftI);
const x1 = charX(s.from);
const x2 = charX(s.to);
return (
);
})}
{/* Sentence text */}
{visibleText}
{cursorOn && (
)}
{/* Source attribution */}
— JOUR-FIXE · PROJEKTSTEUERUNG · BV RIEMERSCHMIDT · KW 16
{/* Lifting span ghosts: each highlighted phrase rises toward its node target. */}
{SPANS.map((s, i) => {
const startL = liftStart + i * 0.12;
const localP = clamp((t - startL) / (liftEnd - startL), 0, 1);
if (localP <= 0) return null;
const eased = Easing.easeInOutCubic(localP);
const xStart = charX(s.from);
const yStart = SENT_Y - 4;
const target = NODES[
s.id === "mangel" ? "mangel" :
s.id === "loc" ? "loc" :
s.id === "frist" ? "frist" :
/* cond */ "frist"
];
const xEnd = target.x - target.w / 2 + 14;
const yEnd = target.y + 4;
const x = xStart + (xEnd - xStart) * eased;
const y = yStart + (yEnd - yStart) * eased;
const opacity = (1 - localP) * 0.95;
return (
{s.text}
);
})}
);
}
// ── Caption (mono, bottom of sentence area) ─────────────────────────────
function Caption({ t }) {
const captions = [
{ from: 0.1, to: 1.7, text: "Step · Read." },
{ from: 1.7, to: 2.8, text: "Step · Detect entities." },
{ from: 2.8, to: 4.7, text: "Step · Lift to graph." },
{ from: 4.7, to: 6.3, text: "Step · Type the edges." },
{ from: 6.3, to: 7.7, text: "Step · Resolve the deadline." },
{ from: 7.7, to: 9.4, text: "5 nodes · 5 edges · 1 deadline · 1 condition." },
];
const active = captions.find(c => t >= c.from && t <= c.to);
if (!active) return null;
const local = (t - active.from) / (active.to - active.from);
const opacity = local < 0.1 ? local / 0.1 : local > 0.9 ? (1 - local) / 0.1 : 1;
return (
{active.text.toUpperCase()}
);
}
// ── Graph ────────────────────────────────────────────────────────────────
function Graph({ t }) {
// Each node has an "appear at" time tied to the lift of its source span.
const appear = {
mangel: 3.0,
loc: 3.4,
gewerk1: 4.9, // emerges from the typed edge from Prüfgegenstand
gewerk2: 5.1,
aufgabe: 5.5, // emerges as the resolution
frist: 3.8, // lifts from "bis nächste Woche"
};
return (
{/* Edges first (so they sit under nodes) */}
{EDGES.map((e, i) => (
))}
{/* Nodes */}
{Object.entries(NODES).map(([id, n]) => (
))}
);
}
function Node({ t, id, node, appearAt }) {
const localP = clamp((t - appearAt) / 0.55, 0, 1);
if (localP <= 0) return null;
const eased = Easing.easeOutBack(localP);
const opacity = clamp(localP * 1.3, 0, 1);
const scale = 0.7 + 0.3 * eased;
// Highlight the Frist when its date resolves (6.4..7.6)
const isFrist = id === "frist";
const fristGlow = isFrist ? clamp((t - 6.4) / 0.4, 0, 1) - clamp((t - 7.4) / 0.4, 0, 1) : 0;
const w = node.w;
const h = node.h;
const x = node.x - w / 2;
const y = node.y - h / 2;
const cx = node.x;
const cy = node.y;
return (
{/* Type label above */}
{node.kind.toUpperCase()}
{/* Body */}
{isFrist && fristGlow > 0 && (
)}
{/* Ticked corners */}
{[[x, y], [x + w, y], [x, y + h], [x + w, y + h]].map(([px, py], i) => (
))}
{/* Label */}
{node.label}
);
}
function Edge({ t, edge }) {
const t0 = edge.t0;
const localP = clamp((t - t0) / 0.5, 0, 1);
if (localP <= 0) return null;
const eased = Easing.easeInOutCubic(localP);
const a = NODES[edge.from];
const b = NODES[edge.to];
// Compute edge endpoints: shrink to box edges (rough box-edge approximation)
const [x1, y1, x2, y2] = lineBetweenBoxes(a, b);
const dx = x2 - x1;
const dy = y2 - y1;
const cx = x1 + dx * eased;
const cy = y1 + dy * eased;
// Label position: midpoint, perpendicular offset
const mx = x1 + dx * 0.5;
const my = y1 + dy * 0.5;
const len = Math.hypot(dx, dy) || 1;
const nx = -dy / len;
const ny = dx / len;
const labelOpacity = clamp((t - t0 - 0.3) / 0.3, 0, 1);
return (
= 0.99 ? "url(#arrow)" : undefined}
/>
{labelOpacity > 0 && (
{edge.label}
)}
);
}
// Box-edge intersection for a line between two rectangle centers.
function lineBetweenBoxes(a, b) {
const dx = b.x - a.x;
const dy = b.y - a.y;
const aP = boxEdge(a, dx, dy);
const bP = boxEdge(b, -dx, -dy);
return [aP.x, aP.y, bP.x, bP.y];
}
function boxEdge(box, dx, dy) {
const hw = box.w / 2;
const hh = box.h / 2;
if (dx === 0 && dy === 0) return { x: box.x, y: box.y };
const tx = dx === 0 ? Infinity : hw / Math.abs(dx);
const ty = dy === 0 ? Infinity : hh / Math.abs(dy);
const tt = Math.min(tx, ty);
return { x: box.x + dx * tt, y: box.y + dy * tt };
}
// ── Date badge ───────────────────────────────────────────────────────────
function DateBadge({ t }) {
const t0 = 6.4;
const localP = clamp((t - t0) / 0.6, 0, 1);
if (localP <= 0) return null;
const eased = Easing.easeOutBack(localP);
const opacity = clamp(localP * 1.5, 0, 1);
const frist = NODES.frist;
const cx = frist.x + frist.w / 2 + 30;
const cy = frist.y;
const w = 220;
const h = 80;
// Ticker — strings rolling into the resolved date.
const tickP = clamp((t - 6.5) / 0.7, 0, 1);
const candidates = ["KW 16 · Mo 14.04.", "KW 17 · Do 17.04.", "KW 18 · Mi 23.04.", "KW 18 · Do 24.04.", "KW 18 · Do 24.04."];
const idx = Math.min(candidates.length - 1, Math.floor(tickP * candidates.length));
const dateLabel = candidates[idx];
const condLocked = t > 7.0;
return (
{/* Connector tick */}
{/* Body */}
RESOLVED · INTERPRETATION
{dateLabel}
{condLocked ? "GATED · Lieferung pending" : "GATING · evaluating condition"}
);
}
// ── Footer mark ──────────────────────────────────────────────────────────
function FooterMark({ t }) {
return (
FIG. 01 · ANATOMY
ALAGO.AI/RD
);
}
// ── Loop wash ────────────────────────────────────────────────────────────
// Soft fade-to-paper at the very end so the loop isn't a hard cut.
function LoopWash({ t }) {
const opacity = t > 9.4 ? clamp((t - 9.4) / 0.5, 0, 1) * 0.95 : 0;
if (opacity <= 0) return null;
return ;
}
window.SentenceToGraphScene = SentenceToGraphScene;