// scene.jsx — Two systems converging into one
// Engineering (left) ↔ Behavioral (right) → Unified
const DUR = 24;
// ── Palette ─────────────────────────────────────────────────────────────
const BG = '#F4F1EA'; // warm off-white
const INK = '#16161A'; // deep ink
const RULE = 'rgba(22,22,26,0.10)'; // hairlines
const FAINT = 'rgba(22,22,26,0.045)'; // grid
const ENG = 'oklch(58% 0.08 255)'; // muted indigo
const ENG_SOFT = 'oklch(58% 0.08 255 / 0.18)';
const BEH = 'oklch(62% 0.09 50)'; // warm clay
const BEH_SOFT = 'oklch(62% 0.09 50 / 0.18)';
const UNI = 'oklch(40% 0.04 280)'; // converged graphite-violet
// Phase weights from time (each 0..1, smoothed, summing roughly across overlap)
function phases(t) {
// independent → complexify → cross → unify
const p1 = animate({ from: 0, to: 1, start: 0, end: 5, ease: Easing.easeInOutCubic })(t); // emerge
const p2 = animate({ from: 0, to: 1, start: 5, end: 11, ease: Easing.easeInOutCubic })(t); // complexify
const cross = animate({ from: 0, to: 1, start: 10, end: 17, ease: Easing.easeInOutCubic })(t); // mutual influence
const unify = animate({ from: 0, to: 1, start: 16, end: 22.5, ease: Easing.easeInOutCubic })(t); // merge
return { p1, p2, cross, unify };
}
// Smoothly mix between left/right anchored layout and a centered shared layout
function lerp(a, b, t) { return a + (b - a) * t; }
// Deterministic pseudo-random (so layout is stable)
function rand(seed) {
const x = Math.sin(seed * 9301 + 49297) * 233280;
return x - Math.floor(x);
}
// ── Engineering layout: orthogonal grid of nodes ────────────────────────
const ENG_NODES = (() => {
const cols = 4, rows = 4;
const x0 = 110, y0 = 180;
const dx = 130, dy = 130;
const nodes = [];
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
nodes.push({
id: `e${r}${c}`,
x: x0 + c * dx,
y: y0 + r * dy,
col: c, row: r,
});
}
}
return nodes;
})();
// Engineering edges: orthogonal lattice + a few feedback loops
const ENG_EDGES = (() => {
const e = [];
// grid neighbors right/down
for (let r = 0; r < 4; r++) {
for (let c = 0; c < 4; c++) {
const i = r * 4 + c;
if (c < 3) e.push([i, i + 1, 'h']);
if (r < 3) e.push([i, i + 4, 'v']);
}
}
// a couple of diagonal feedback edges
e.push([5, 10, 'fb']);
e.push([2, 9, 'fb']);
e.push([12, 7, 'fb']);
return e;
})();
// ── Behavioral layout: scattered organic nodes ──────────────────────────
const BEH_NODES = (() => {
const cx = 1180, cy = 450;
const nodes = [];
// 16 scattered, irregular positions
const seeds = [
[-220, -200], [-90, -250], [60, -210], [200, -180],
[-260, -60], [-110, -90], [50, -50], [220, -30],
[-240, 80], [-100, 60], [80, 90], [240, 60],
[-200, 220], [-60, 200], [110, 230], [230, 200],
];
seeds.forEach(([dx, dy], i) => {
// jitter for organic feel
const jx = (rand(i + 1) - 0.5) * 18;
const jy = (rand(i + 7) - 0.5) * 18;
nodes.push({ id: `b${i}`, x: cx + dx + jx, y: cy + dy + jy, idx: i });
});
return nodes;
})();
// Behavioral edges: probabilistic-feeling, longer-range, no grid
const BEH_EDGES = [
[0, 1], [1, 2], [2, 3],
[0, 5], [1, 6], [3, 7],
[4, 5], [5, 6], [6, 7],
[4, 9], [5, 10], [7, 11],
[8, 9], [9, 10], [10, 11],
[8, 13], [10, 14], [11, 15],
[12, 13], [13, 14], [14, 15],
// probabilistic skips
[1, 9], [3, 10], [6, 13], [10, 7], [4, 13],
];
// ── Unified target layout (where both sets converge to) ─────────────────
// Slight hex-ish lattice centered, blending rectilinear with organic offset.
const UNI_LEFT = (() => {
// 16 positions on the left half of stage
const cx = 540, cy = 450;
const out = [];
const cols = 4, rows = 4;
const dx = 110, dy = 110;
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
// half-step row offset for hex feel
const offX = (r % 2 === 0 ? 0 : dx / 2);
out.push({
x: cx - (cols - 1) * dx / 2 + c * dx + offX - dx / 4,
y: cy - (rows - 1) * dy / 2 + r * dy,
});
}
}
return out;
})();
const UNI_RIGHT = (() => {
const cx = 1060, cy = 450;
const out = [];
const cols = 4, rows = 4;
const dx = 110, dy = 110;
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
const offX = (r % 2 === 0 ? dx / 2 : 0);
out.push({
x: cx - (cols - 1) * dx / 2 + c * dx + offX - dx / 4,
y: cy - (rows - 1) * dy / 2 + r * dy,
});
}
}
return out;
})();
// ── Drawing helpers ─────────────────────────────────────────────────────
// Returns a node's animated position at time t
function engPos(i, t, ph) {
const n = ENG_NODES[i];
const u = UNI_LEFT[i];
// gentle breathing (logical, small)
const breath = Math.sin(t * 0.7 + i * 0.4) * 1.2;
// soften grid: under cross influence, introduce small organic jitter
const softX = Math.sin(t * 0.8 + i * 1.3) * 6 * ph.cross;
const softY = Math.cos(t * 0.9 + i * 1.7) * 5 * ph.cross;
// converge toward unified target
const k = ph.unify;
const x = lerp(n.x, u.x, k) + softX;
const y = lerp(n.y, u.y, k) + softY + breath;
return { x, y };
}
function behPos(i, t, ph) {
const n = BEH_NODES[i];
const u = UNI_RIGHT[i];
// organic drift always present
const driftX = Math.sin(t * 0.55 + i * 0.9) * 6;
const driftY = Math.cos(t * 0.45 + i * 1.1) * 6;
// structure encroaching from cross influence — drift dampens
const damp = 1 - 0.7 * ph.cross;
const k = ph.unify;
const x = lerp(n.x, u.x, k) + driftX * damp;
const y = lerp(n.y, u.y, k) + driftY * damp;
return { x, y };
}
// Curvature of behavioral edges shrinks as system structuralizes
function behPath(p1, p2, t, idx, ph) {
const mx = (p1.x + p2.x) / 2;
const my = (p1.y + p2.y) / 2;
const dx = p2.x - p1.x;
const dy = p2.y - p1.y;
const len = Math.hypot(dx, dy) || 1;
const nx = -dy / len, ny = dx / len;
// curvature decreases as cross/unify rises
const baseCurve = (Math.sin(t * 0.6 + idx * 1.7) * 0.5 + 0.5) * 28 + 14;
const curve = baseCurve * (1 - 0.85 * Math.max(ph.cross, ph.unify));
// direction of curve flips by edge index for variety
const sign = (idx % 2 === 0) ? 1 : -1;
const cx = mx + nx * curve * sign;
const cy = my + ny * curve * sign;
return `M ${p1.x} ${p1.y} Q ${cx} ${cy} ${p2.x} ${p2.y}`;
}
// Engineering edges: orthogonal early, gain slight curve later
function engPath(p1, p2, t, kind, idx, ph) {
// small added curvature comes from cross influence (organic creep)
const mx = (p1.x + p2.x) / 2;
const my = (p1.y + p2.y) / 2;
const dx = p2.x - p1.x;
const dy = p2.y - p1.y;
const len = Math.hypot(dx, dy) || 1;
const nx = -dy / len, ny = dx / len;
const sign = (idx % 2 === 0) ? 1 : -1;
const orgCurve = (Math.sin(t * 0.5 + idx * 0.9) * 0.5 + 0.5) * 18;
const curve = orgCurve * ph.cross * 0.9 + (kind === 'fb' ? 22 : 0);
if (kind === 'fb') {
// feedback edges always curved a bit
const cx = mx + nx * curve * sign;
const cy = my + ny * curve * sign;
return `M ${p1.x} ${p1.y} Q ${cx} ${cy} ${p2.x} ${p2.y}`;
}
if (ph.cross < 0.05) {
// pure orthogonal: L-route via shared corner
if (kind === 'h') return `M ${p1.x} ${p1.y} L ${p2.x} ${p2.y}`;
if (kind === 'v') return `M ${p1.x} ${p1.y} L ${p2.x} ${p2.y}`;
}
const cx = mx + nx * curve * sign;
const cy = my + ny * curve * sign;
return `M ${p1.x} ${p1.y} Q ${cx} ${cy} ${p2.x} ${p2.y}`;
}
// ── Components ──────────────────────────────────────────────────────────
function Backdrop() {
// subtle grid that softens over time
const t = useTime();
const ph = phases(t);
// grid opacity max early, fades a bit by unify
const gridOpacity = lerp(0.7, 0.25, ph.unify);
return (
);
}
function CenterDivider() {
const t = useTime();
const ph = phases(t);
// divider hairline fades as systems converge
const op = lerp(0.18, 0, Math.max(ph.cross * 0.6, ph.unify));
return (
);
}
function Header() {
const t = useTime();
const ph = phases(t);
// labels fade
const engOp = lerp(1, 0.0, Math.min(1, ph.unify * 1.4));
const behOp = lerp(1, 0.0, Math.min(1, ph.unify * 1.4));
const uniOp = ph.unify;
return (
<>
{/* Top eyebrow */}
Convergence — 0{Math.floor(t).toString().padStart(2,'0')} / 0{DUR}
{/* Engineering label */}
System A · Engineering
Structured · Deterministic
{/* Behavioral label */}
System B · Behavioral
Adaptive · Probabilistic
{/* Unified label appears */}
Unified
Structured · Adaptive
{/* Bottom caption — phase indicator */}
);
}
function PhaseCaption() {
const t = useTime();
let label = 'Independent emergence';
if (t > 5) label = 'Growing complexity';
if (t > 11) label = 'Mutual influence';
if (t > 17) label = 'Unified system';
return (
Phase ·
{label}
);
}
// Engineering side
function EngSystem() {
const t = useTime();
const ph = phases(t);
// node reveal staggered
const positions = ENG_NODES.map((_, i) => engPos(i, t, ph));
// edges revealed in waves: grid first, feedback later, organic creep with cross
return (
);
}
// Behavioral side
function BehSystem() {
const t = useTime();
const ph = phases(t);
const positions = BEH_NODES.map((_, i) => behPos(i, t, ph));
return (
);
}
// ── Bridges: edges that cross the divider during the cross/unify phases ─
function Bridges() {
const t = useTime();
const ph = phases(t);
if (ph.cross <= 0.01) return null;
// pair up engineering and behavioral nodes for bridges
const pairs = [
[3, 0], // top row
[7, 4],
[11, 8],
[15, 12], // bottom row
[6, 5],
[10, 9],
[2, 1],
[14, 13],
];
const engPositions = ENG_NODES.map((_, i) => engPos(i, t, ph));
const behPositions = BEH_NODES.map((_, i) => behPos(i, t, ph));
return (
);
}
// ── Color mixing utility ───────────────────────────────────────────────
// Blend two oklch strings by parsing them. Falls back to CSS color-mix.
function mix(a, b, t) {
return `color-mix(in oklch, ${a} ${(1 - t) * 100}%, ${b} ${t * 100}%)`;
}
// ── Composition counter (lower-right meta) ─────────────────────────────
function Meta() {
const t = useTime();
const ph = phases(t);
const eng = (4 + Math.floor(ph.p1 * 12 + ph.p2 * 4));
const beh = (4 + Math.floor(ph.p1 * 12 + ph.p2 * 4));
const links = Math.floor((ph.cross * 8) + (ph.unify * 4));
const Row = ({ label, val, color = INK }) => (
{label}
{val}
);
return (
|
|
|
);
}
function CornerMark() {
return (
Two systems · One network
);
}
// ── Root scene ─────────────────────────────────────────────────────────
function Scene() {
return (
<>
);
}
window.Scene = Scene;
window.SCENE_DUR = DUR;
window.SCENE_BG = BG;