// scene-primitives.jsx — Gold Bank flow animation primitives
// Node glyphs, gold tokens, mSSP chips, silhouettes, arcs.
const GB = {
bg: '#0a0a0f',
surface: 'rgba(255,255,255,0.06)',
border: 'rgba(255,255,255,0.10)',
borderStrong: 'rgba(255,255,255,0.18)',
gold: '#c49a3c',
goldHi: '#e3c06a',
goldLo: '#8a6a24',
goldGlow: 'rgba(196,154,60,0.35)',
fg: '#e8e6e3',
muted: '#a0a3ad',
dim: '#6b7280',
};
// ── Silhouette (producer, recipient) ────────────────────────────────────────
// A simple head-and-shoulders SVG portrait, mono-gold linework, inside a glass ring.
function Silhouette({ variant = 'person', size = 72, stroke = GB.gold, opacity = 1, kind }) {
// Different head/shoulder shapes by variant — cheap, readable at small sizes.
const paths = {
person: (
),
miner: (
{/* hard hat */}
),
merchant: (
{/* apron v-collar */}
),
worker: (
{/* tool handle over shoulder */}
),
family: (
),
};
const variantKey = kind || variant;
const body = paths[variantKey] || paths.person;
return (
);
}
// ── Node: silhouette + optional account card frame around it ────────────────
// onboarded=true adds the gold hairline ring + mono account number under the silhouette.
function Node({ x, y, variant = 'person', size = 72, onboarded = false, label, sublabel, accent = false, scale = 1, opacity = 1 }) {
const ringColor = onboarded ? GB.gold : GB.border;
const ringWidth = onboarded ? 1.2 : 1;
const glow = onboarded ? `0 0 24px ${GB.goldGlow}` : 'none';
return (
{label ? (
{label}
) : null}
{sublabel ? (
{sublabel}
) : null}
);
}
// ── Gold nugget glyph — a small faceted gold token ──────────────────────────
function GoldNugget({ x, y, size = 36, rot = 0, opacity = 1 }) {
return (
);
}
// ── mSSP chip — a small digital token with gold ring + "m" mark ─────────────
function MsspChip({ x, y, size = 34, opacity = 1, pulse = 0 }) {
const r = size / 2;
const glow = 0.3 + 0.2 * Math.sin(pulse * Math.PI * 2);
return (
);
}
// ── Bank node — glass card containing the seal, at center ───────────────────
function BankNode({ x, y, size = 180, scale = 1, opacity = 1, glow = false, sealSrc = '/animations/gold-bank-seal.svg' }) {
return (
);
}
// ── Arc path between two points (for traveling tokens) ──────────────────────
// Returns a function t∈[0,1] → {x, y}
function arcPath(x1, y1, x2, y2, curvature = 0.25) {
const mx = (x1 + x2) / 2;
const my = (y1 + y2) / 2;
const dx = x2 - x1, dy = y2 - y1;
const len = Math.sqrt(dx * dx + dy * dy);
// Perpendicular offset
const nx = -dy / len, ny = dx / len;
const cx = mx + nx * len * curvature;
const cy = my + ny * len * curvature;
return (t) => {
const u = 1 - t;
return {
x: u * u * x1 + 2 * u * t * cx + t * t * x2,
y: u * u * y1 + 2 * u * t * cy + t * t * y2,
};
};
}
// ── Static arc line drawn as an SVG path ────────────────────────────────────
function ArcLine({ x1, y1, x2, y2, curvature = 0.25, dash = '4 6', opacity = 0.45, strokeWidth = 1, color = GB.gold, progress = 1 }) {
const mx = (x1 + x2) / 2, my = (y1 + y2) / 2;
const dx = x2 - x1, dy = y2 - y1;
const len = Math.sqrt(dx * dx + dy * dy) || 1;
const nx = -dy / len, ny = dx / len;
const cx = mx + nx * len * curvature;
const cy = my + ny * len * curvature;
const d = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`;
return (
);
}
// ── Caption — minimal two-line label slab, fades in + out ───────────────────
function Caption({ kicker, line }) {
const { progress, duration, localTime } = useSprite();
const entry = 0.5, exit = 0.5;
const fadeInT = clamp(localTime / entry, 0, 1);
const fadeOutT = clamp((duration - localTime) / exit, 0, 1);
const o = Math.min(fadeInT, fadeOutT);
const ty = (1 - fadeInT) * 10;
return (
{kicker ? (
{kicker}
) : null}
{line}