/* @syvon {"canvas":{"width":1920,"height":1080}} */ /** * von-orb — von's sound-/state-reactive avatar, rebuilt as THE instrument of * spec v2 §6–§7: the two-layer synesthetic organism. * * Layer 1 — glow field (§6). A radial alpha mask containing an angled * two-colour gradient. Alpha holds at 1 out to a plateau, then falls to 0 * along an easing curve: long and soft on the bouba / low-arousal end, a * tight hard rim on the kiki / high-arousal end. Blur increases along the * falloff — sharp core, hazy edge — and the wheel angle rotates the light. * Radius breathes with energy; the centre wanders on seeded noise with * amplitude ∝ chaos and speed ∝ arousal. * * Layer 2 — polymorphic ink contour (§7). ONE canonical parametric ring, * filled with the ink token, riding on the glow. Named shapes are preset * coordinates in that parameter space, so morphing is interpolation and * never special-cased geometry. Scale follows energy with impulse kicks, * impulses squash-and-stretch (elastic on the cute end, snapping on the * violent end), and valence lifts or droops the centre of mass — joy * floats, sadness sags. * * WHAT CHANGED from the previous orb, and why: * · Colour was a three-token cycle on a fixed 4-second timer, unrelated to * what was being said. It is now the emotion itself — the wheel is read at * (θ, r), so anger and tenderness cannot come out the same colour. * · Geometry was four hand-tuned superformula presets, morphed by lerping * SAMPLED POINTS because interpolating the parameters passed through * degenerate petal counts. The contour ring has constant topology, so * parameter interpolation is always valid and the workaround is gone. * · `liveLevelRef` decayed by mutating a ref during render — one decay per * render, so the visual was frame-rate dependent and a given time did not * reproduce. Dynamics are now a causal transform of the track (§10): the * value at t is recomputed from the slice [t − 3τ, t], so the piece is * scrubbable, renderable and identical across hosts. * · It never resolved to a rest pose; it just stopped wherever it was. It * now owns its ending (§11). * * TWO HOSTINGS, ONE FILE (§2). On the live surface the host streams state: * `compEvent` cues and the `syvon:voice-level` window event feed the track's * channels. In a render nothing streams and the track comes from the SRT (or * an explicit track / mood), so every frame is deterministic. Wherever the * tracks agree, the frames agree. * * Subtitles stay OPT-IN (`showWords`) and are the one thing here that is not * spec-pure: captions belong to an overlay channel (catalog §6), never baked * into a shot. They are kept because the live companion surface relies on * them — turn them off for anything that gets re-cut. */ export const props = { // ── live-surface contract (unchanged, so existing hosts keep working) ── srt: { type: 'file', accept: ['.srt'], label: 'Subtitle file' }, state: { type: 'string', default: 'auto', label: 'State (auto/idle/listening/thinking/talking)' }, level: { type: 'number', default: 0, label: 'Sound level (0 = live signal / self-pulse)' }, accent: { type: 'color', default: 'var(--color-tertiary)', label: 'Current-word accent' }, wordSize: { type: 'number', default: 64, label: 'SRT word size (px)' }, showWords: { type: 'boolean', default: true, label: 'Render SRT words (off = timing only)' }, // ── the instrument contract (shared with every von instrument) ── track: { type: 'file', accept: ['.json'], label: 'Semantic track (JSON) — wins over SRT/mood' }, mood: { type: 'string', default: 'narration', label: 'Built-in track when no SRT: narration/lullaby/melancholy/surprise/anger/techno/manual' }, seed: { type: 'number', default: 7, label: 'Seed' }, trackOffset: { type: 'number', default: 0, label: 'Track offset (s) — this shot’s in-point' }, restSec: { type: 'number', default: 0, label: 'Terminal rest (s) — 0 = never rest (live companion)' }, // ── the semantic surface: what an author actually writes ── emotion: { type: 'string', default: 'trust', label: 'Emotion mix — "anger", or "anger 0.7, fear 0.3"' }, feeling: { type: 'number', default: 0.6, label: 'How strongly it is felt (0-1)' }, loudness: { type: 'number', default: 0.5, label: 'Silent → full (0-1)' }, sharpness: { type: 'number', default: 0.5, label: 'Soft → sharp (0.5 = as the emotion implies)' }, roughness: { type: 'number', default: 0.5, label: 'Smooth → turbulent (0.5 = as implied)' }, pace: { type: 'number', default: 0.5, label: 'Still → urgent (0.5 = as implied)' }, // Colour is deliberately NOT a prop. The emotion wheel is the declared // palette at the top of this file; ink and neutral come from brand tokens. // Per-shot colour overrides would break spec §5. // ── instrument parameters (§6, §7) ── pointCount: { type: 'number', default: 6, label: 'Star / burst corner count (3-16)' }, inkSoftness: { type: 'number', default: 0, label: 'Ink blur (0 = crisp geometry)' }, glowScale: { type: 'number', default: 1, label: 'Glow radius multiplier' }, shapeScale: { type: 'number', default: 1, label: 'Ink shape multiplier' }, inkTint: { type: 'number', default: 1, label: 'Ink tint at high intensity' }, grain: { type: 'number', default: 0.05, label: 'Grain amount (also dithers gradient banding)' }, }; /* ═══════════════════════════════════════════════════════════════════════════ KERNEL — the shared contract: track, causal dynamics, brand emotion wheel, and the polymorphic contour family. Byte-identical in every von instrument by design: a `.react` is self-contained (bare globals, no imports), so the contract lives as a duplicated prelude rather than a module. Instruments differ BELOW this line, never inside it. ═════════════════════════════════════════════════════════════════════════ */ const TAU = Math.PI * 2; const clamp = (v, lo = 0, hi = 1) => (v < lo ? lo : v > hi ? hi : v); const lerp = (a, b, t) => a + (b - a) * t; const smooth = (t) => t * t * (3 - 2 * t); const f2 = (n) => (Number.isFinite(n) ? n.toFixed(2) : '0'); /** Pure seeded hash — no fresh entropy anywhere in the system (spec §2.3). */ function hash(a, b) { const x = Math.sin(a * 127.1 + b * 311.7) * 43758.5453; return x - Math.floor(x); } /** Coherent 2D wander: f(seed, time), continuous, deterministic. */ function wander(seed, t, freq) { return [ Math.sin(t * freq * 0.73 + hash(seed, 1) * TAU) * 0.62 + Math.sin(t * freq * 1.31 + hash(seed, 2) * TAU) * 0.38, Math.cos(t * freq * 0.61 + hash(seed, 3) * TAU) * 0.62 + Math.cos(t * freq * 1.17 + hash(seed, 4) * TAU) * 0.38, ]; } /** Band-limited noise that is PERIODIC around a ring and smooth through time. */ function ringNoise(seed, i, n, t, freq) { const a = (i / n) * TAU; let s = 0, w = 0; for (let h = 1; h <= 3; h++) { s += Math.sin(h * 2 * a + hash(seed, h * 13.7) * TAU + t * freq * (0.6 + 0.25 * h)) / h; w += 1 / h; } return s / w; } /* ── the track (§4) ─────────────────────────────────────────────────────── Channels, all normalized. Each OWNS one visual family so crosstalk stays debuggable: colour from (θ, r, v, a); geometry from k; disorder from c; magnitude from e; the timescale of everything from a. */ const SECTORS = ['joy', 'trust', 'fear', 'surprise', 'sadness', 'disgust', 'anger', 'anticipation']; const sectorAngle = (name) => (Math.max(0, SECTORS.indexOf(name)) / 8) * TAU; /* ── the semantic surface: language in, channels out ────────────────────── Nothing outside this file sets θ, r, v, a, k, c or e directly. Those are the INTERNAL representation (§4); what an author — or a model — writes is a named 0–1 vocabulary: an emotion mix plus four qualities of delivery. This layer maps that vocabulary onto the channels through declared ramps and clamps, so the same words always produce the same state and the internal representation stays free to change underneath. */ /** Valence carried by each sector, in SECTORS order. */ const SECTOR_VALENCE = [1, 0.7, -0.6, 0.3, -0.8, -0.7, -0.8, 0.2]; /** Each sector already implies a delivery — anger is sharp, rough and fast * even when nothing says so; sadness is soft, ordered and slow. The dials * push away from this baseline rather than replacing it, which is why a bare * "anger" already looks angry. */ const SECTOR_CHARACTER = [ /* joy */ { k: 0.35, c: 0.2, a: 0.6 }, /* trust */ { k: 0.15, c: 0.1, a: 0.35 }, /* fear */ { k: 0.6, c: 0.55, a: 0.55 }, /* surprise */ { k: 0.78, c: 0.45, a: 0.82 }, /* sadness */ { k: 0.1, c: 0.14, a: 0.14 }, /* disgust */ { k: 0.5, c: 0.4, a: 0.35 }, /* anger */ { k: 0.9, c: 0.75, a: 0.85 }, /* anticipation */ { k: 0.45, c: 0.3, a: 0.55 }, ]; /** A declared ramp: gamma-shape the 0–1 input, then clamp it into the range * the channel is actually legible over. Never a raw pass-through. */ function ramp(x, gamma, lo, hi) { return lo + (hi - lo) * Math.pow(clamp(x), gamma); } /** Push a baseline toward either extreme. 0.5 leaves the baseline alone, 1 * drives it to the top, 0 to the bottom — so the dial cannot fight the * emotion, only colour it, and the result is always in range. */ function push(base, dial) { const d = clamp(dial) - 0.5; return clamp(base + 2 * d * (d >= 0 ? 1 - base : base)); } /** Parse an emotion mix written in words: "anger", "anger 0.7, fear 0.3", * "joy:60%, trust:40%". Unknown words are ignored; an empty mix rests on * trust rather than failing. */ function parseEmotionMix(spec) { const w = [0, 0, 0, 0, 0, 0, 0, 0]; let any = false; for (const part of String(spec || '').toLowerCase().split(/[,;]+/)) { const m = part.trim().match(/^([a-z]+)\s*[:= ]?\s*([0-9]*\.?[0-9]+)?\s*(%?)$/); if (!m) continue; const idx = SECTORS.indexOf(m[1]); if (idx < 0) continue; let val = m[2] === undefined ? 1 : parseFloat(m[2]); if (m[3] === '%') val /= 100; w[idx] = clamp(Number.isFinite(val) ? val : 1); any = true; } if (!any) w[SECTORS.indexOf('trust')] = 1; return w; } /** Resolve the named vocabulary into the channel set. The emotion mix becomes * a point on the wheel exactly the way the analyzer does it (§9): the * circular mean of the eight anchor directions, with the concentration of * the mix as radial depth — so "joy 0.5, sadness 0.5" reads as conflicted * and washed out, not as some third emotion. */ function resolveSemantics(s) { const w = parseEmotionMix(s.emotion); let sx = 0, sy = 0, total = 0, val = 0, ck = 0, cc = 0, ca = 0; for (let i = 0; i < 8; i++) { if (w[i] <= 0) continue; const ang = (i / 8) * TAU; sx += Math.cos(ang) * w[i]; sy += Math.sin(ang) * w[i]; total += w[i]; val += SECTOR_VALENCE[i] * w[i]; ck += SECTOR_CHARACTER[i].k * w[i]; cc += SECTOR_CHARACTER[i].c * w[i]; ca += SECTOR_CHARACTER[i].a * w[i]; } if (total <= 0) return { theta: sectorAngle('trust'), r: 0.3, v: 0.4, a: 0.3, k: 0.15, c: 0.1, e: 0.2 }; return { theta: Math.atan2(sy, sx), // concentration × how strongly it is felt r: clamp((Math.hypot(sx, sy) / total) * ramp(s.feeling, 0.85, 0.12, 1)), v: clamp(val / total, -1, 1), a: push(ca / total, s.pace), k: push(ck / total, s.sharpness), c: push(cc / total, s.roughness), e: ramp(s.loudness, 0.9, 0.02, 1), }; } /** Speech-like envelope: seeded, deterministic, syllabic. */ function speechEnv(seed, t, rate) { const a = 0.5 + 0.5 * Math.sin(t * rate * TAU * 0.5 + hash(seed, 21) * TAU); const b = 0.5 + 0.5 * Math.sin(t * rate * TAU * 1.37 + hash(seed, 22) * TAU); const c = 0.5 + 0.5 * Math.sin(t * rate * TAU * 0.23 + hash(seed, 23) * TAU); return clamp(0.15 + 0.55 * (a * 0.5 + b * 0.3) * (0.45 + 0.55 * c)); } /** The golden tracks of spec §13, shipped as built-in synthetic tracks so the * unit paints without an analyzer. Each is a pure function of (t, seed). */ function buildTrack(mood, seed, duration, manual) { const impulses = []; let at; if (mood === 'anger') { at = (t) => { const env = speechEnv(seed, t, 2.6); return { theta: sectorAngle('anger') + Math.sin(t * 0.7) * 0.12, r: clamp(0.6 + 0.35 * env), v: -0.8, a: clamp(0.75 + 0.2 * env), k: clamp(0.82 + 0.15 * env), c: 0.72, e: clamp(env * 1.25), }; }; for (let i = 0, t = 0.2; t < duration; i++) { impulses.push({ time: t, strength: 0.55 + 0.45 * hash(seed, i * 5.1) }); t += 0.22 + 0.34 * hash(seed, i * 2.7); } } else if (mood === 'lullaby') { at = (t) => ({ theta: lerp(sectorAngle('joy'), sectorAngle('trust'), 0.5 + 0.4 * Math.sin(t * 0.18)), r: 0.28 + 0.08 * Math.sin(t * 0.31), v: 0.75, a: 0.14, k: 0.05, c: 0.08, e: clamp(0.22 + 0.16 * Math.sin(t * 0.55)), }); for (let i = 0, t = 1.4; t < duration; i++) { impulses.push({ time: t, strength: 0.18 }); t += 2.6; } } else if (mood === 'surprise') { // One transient inside calm speech: the blob bursts into a star and // elastically returns. The event is the SHOT, not a random flourish. const hit = duration * 0.42; at = (t) => { const d = t - hit; const burst = d >= 0 ? Math.exp(-d / 0.55) : Math.exp(d / 0.06); return { theta: lerp(sectorAngle('trust'), sectorAngle('surprise'), clamp(burst)), r: clamp(0.32 + 0.6 * burst), v: lerp(0.2, 0.6, clamp(burst)), a: clamp(0.3 + 0.55 * burst), k: clamp(0.3 + 0.6 * burst), c: clamp(0.14 + 0.3 * burst), e: clamp(0.26 + 0.65 * burst + 0.08 * Math.sin(t * 3.1)), }; }; impulses.push({ time: hit, strength: 1 }); } else if (mood === 'techno') { const bpm = 128, beat = 60 / bpm; at = (t) => { const build = clamp(t / Math.max(duration * 0.8, 0.001)); const grid = Math.abs(Math.sin((t / beat) * Math.PI)); return { // Short arc: anticipation and joy are ADJACENT sectors (7 and 0). // Lerping the raw angles sweeps BACKWARD through the whole wheel — // red, plum, blue, cyan — instead of turning one sector forward. theta: sectorAngle('anticipation') + build * (TAU / 8), r: clamp(0.4 + 0.5 * build), v: 0.3, a: clamp(0.7 + 0.28 * build), k: clamp(0.5 + 0.42 * build), c: clamp(0.2 + 0.5 * build), e: clamp(0.3 + 0.6 * Math.pow(grid, 2.2) * (0.5 + 0.5 * build)), }; }; for (let i = 0; i * beat < duration; i++) { impulses.push({ time: i * beat, strength: i % 4 === 0 ? 1 : 0.6 }); } } else if (mood === 'manual') { // Manual mode is a HOSTING AFFORDANCE (§12): a fixed state source for // scrubbing and tuning, authored in the semantic vocabulary rather than // in raw channels. Resolved once — the words do not change over time. const fixed = resolveSemantics(manual); at = () => fixed; } else if (mood === 'melancholy') { at = (t) => ({ theta: sectorAngle('sadness') + Math.sin(t * 0.11) * 0.18, r: clamp(0.46 + 0.12 * Math.sin(t * 0.21)), v: -0.72, a: 0.12, k: 0.14, c: 0.16, e: clamp(0.14 + 0.12 * speechEnv(seed, t, 0.7)), }); } else { // narration — mid everything, the steady default (catalog §6 casting map) at = (t) => { const env = speechEnv(seed, t, 1.7); return { theta: (sectorAngle('trust') + t * 0.06) % TAU, r: clamp(0.38 + 0.22 * env), v: 0.2, a: clamp(0.4 + 0.18 * env), k: clamp(0.42 + 0.2 * env), c: 0.28, e: env, }; }; for (let i = 0, t = 0.5; t < duration; i++) { impulses.push({ time: t, strength: 0.3 + 0.35 * hash(seed, i * 3.3) }); t += 0.55 + 0.9 * hash(seed, i * 1.9); } } return { at, impulses }; } /** A track handed in as JSON wins over every built-in. Frames are linearly * interpolated; the angle takes the shortest arc so the wheel never spins * the long way round between samples. */ function parseTrack(raw) { if (!raw) return null; let doc; try { doc = typeof raw === 'string' ? JSON.parse(raw) : raw; } catch (_) { return null; } const frames = Array.isArray(doc) ? doc : doc && doc.frames; if (!Array.isArray(frames) || frames.length === 0) return null; const fps = (doc && doc.fps) || 30; const pts = frames.map((fr, i) => ({ t: typeof fr.t === 'number' ? fr.t : i / fps, theta: fr.emotionAngle || 0, r: clamp(fr.emotionIntensity ?? 0.5), v: clamp(fr.valence ?? 0, -1, 1), a: clamp(fr.arousal ?? 0.5), k: clamp(fr.boubaKiki ?? 0.5), c: clamp(fr.chaos ?? 0.2), e: clamp(fr.energy ?? 0.4), })).sort((x, y) => x.t - y.t); const impulses = ((doc && doc.impulses) || []).map((im) => ({ time: im.time || 0, strength: clamp(im.strength ?? 1), })); const at = (t) => { if (t <= pts[0].t) return pts[0]; if (t >= pts[pts.length - 1].t) return pts[pts.length - 1]; let lo = 0, hi = pts.length - 1; while (hi - lo > 1) { const mid = (lo + hi) >> 1; if (pts[mid].t <= t) lo = mid; else hi = mid; } const A = pts[lo], B = pts[hi]; const u = (t - A.t) / Math.max(B.t - A.t, 1e-6); let dth = ((B.theta - A.theta) % TAU + TAU + Math.PI) % TAU - Math.PI; // shortest arc return { theta: A.theta + dth * u, r: lerp(A.r, B.r, u), v: lerp(A.v, B.v, u), a: lerp(A.a, B.a, u), k: lerp(A.k, B.k, u), c: lerp(A.c, B.c, u), e: lerp(A.e, B.e, u), }; }; return { at, impulses }; } /* ── dynamics as a CAUSAL TRANSFORM (§10) ────────────────────────────────── Not accumulation across frames: the filter value at t is recomputed from the track slice [t − 3τ, t] on a grid anchored to absolute zero. Same t, same value — at any frame rate, in any order, on any host. That is what makes the piece scrubbable, renderable and re-hostable. */ const STEP = 1 / 60; function follow(at, key, t, tau, attack) { const lead = 3 * tau; // ≥ 3 time constants of warm-up (§3 slicing) const i0 = Math.ceil((t - lead) / STEP); const i1 = Math.floor(t / STEP); let y = at(i0 * STEP)[key]; for (let i = i0 + 1; i <= i1; i++) { const s = at(i * STEP)[key]; const tc = attack && s > y ? attack : tau; y += (s - y) * (1 - Math.exp(-STEP / tc)); } const rem = t - i1 * STEP; if (rem > 0) y += (at(t)[key] - y) * (1 - Math.exp(-rem / tau)); return y; } /** Circular follower — the wheel must never take the long way round. */ function followAngle(at, t, tau) { const lead = 3 * tau; const i0 = Math.ceil((t - lead) / STEP); const i1 = Math.floor(t / STEP); let y = at(i0 * STEP).theta; const k = 1 - Math.exp(-STEP / tau); for (let i = i0 + 1; i <= i1; i++) { const s = at(i * STEP).theta; y += (((s - y) % TAU + TAU + Math.PI) % TAU - Math.PI) * k; } return ((y % TAU) + TAU) % TAU; } /** Impulse channel (§10): each event stamps a decaying kernel at its own * timestamp; evaluating at t sums the kernels of past events. The kernel * SHAPE is itself expressive — elastic overshoot on the bouba end, hard * exponential snap on the kiki end. */ function impulseEnv(impulses, t, k, decay) { let sum = 0; for (let i = 0; i < impulses.length; i++) { const d = t - impulses[i].time; if (d < 0 || d > decay * 6) continue; const snap = Math.exp(-d / (decay * lerp(1.6, 0.45, k))); const elastic = snap * Math.cos(d * TAU * lerp(2.2, 6.5, k)); sum += impulses[i].strength * lerp(elastic, snap, k); } return sum; } /* ── colour: the emotion wheel (§5) ─────────────────────────────────────── DECLARED PALETTE — the single, top-of-file exception spec §5 allows. Eight colours, one per Plutchik primary, ordered so opposites are diametric (joy↔sadness, trust↔disgust, fear↔anger, surprise↔anticipation) and hue advances monotonically around the full circle. Joy and trust ARE the brand's amber and green; the other six extend them into a complete wheel. It lives here rather than in design tokens because the token → CSS variable map is a fixed set of keys: a custom color.emotion* token resolves in the Studio component editor but is DROPPED on the render path, which would show one palette in the editor and a different one in the export. Everything that is genuinely token-backed — the ink and the neutral — still resolves from the brand. Mirrored in config/design-tokens.json for brand visibility; THIS is the copy that renders. */ const EMOTION_WHEEL = [ '#F59E0B', // joy — the brand's amber '#22C55E', // trust — the brand's green '#0E7C71', // fear — cold, drained teal '#4FD2FA', // surprise — ice flash '#3F6FB5', // sadness — muted steel blue '#8A55A8', // disgust — murky plum '#DC2F2A', // anger — hot red '#F0710F', // anticipation — orange, turning back toward joy ]; function srgbToLin(c) { const v = c / 255; return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); } function linToSrgb(c) { const v = c <= 0.0031308 ? c * 12.92 : 1.055 * Math.pow(Math.max(c, 0), 1 / 2.4) - 0.055; return clamp(v, 0, 1) * 255; } function toLab(rgb) { const R = srgbToLin(rgb[0]), G = srgbToLin(rgb[1]), B = srgbToLin(rgb[2]); const l = Math.cbrt(0.4122214708 * R + 0.5363325363 * G + 0.0514459929 * B); const m = Math.cbrt(0.2119034982 * R + 0.6806995451 * G + 0.1073969566 * B); const s = Math.cbrt(0.0883024619 * R + 0.2817188376 * G + 0.6299787005 * B); return [0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s, 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s, 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s]; } function toRgb(lab) { const l = Math.pow(lab[0] + 0.3963377774 * lab[1] + 0.2158037573 * lab[2], 3); const m = Math.pow(lab[0] - 0.1055613458 * lab[1] - 0.0638541728 * lab[2], 3); const s = Math.pow(lab[0] - 0.0894841775 * lab[1] - 1.291485548 * lab[2], 3); return [linToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s), linToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s), linToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s)]; } const mixLab = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)]; const shiftL = (lab, d) => [clamp(lab[0] + d, 0, 1), lab[1], lab[2]]; const desat = (lab, amt) => [lab[0], lab[1] * (1 - amt), lab[2] * (1 - amt)]; const chromaMul = (lab, m) => [lab[0], lab[1] * m, lab[2] * m]; /** Three intensity steps per sector — serenity → the sector colour → ecstasy. * Both ends are DERIVED from the colour itself: lo drains toward the neutral, * hi adds chroma and pushes lightness further in whichever direction the * colour already leans, so a dark sector deepens and a bright one blazes. * No hand-tuned table, and it self-adjusts if the wheel is re-graded. */ function buildRamps(wheel, neutral) { const nL = toLab(neutral); return wheel.map((rgb) => { const mid = toLab(rgb); const lo = shiftL(desat(mixLab(mid, nL, 0.5), 0.4), -0.05); const hi = shiftL(chromaMul(mid, 1.3), (mid[0] - 0.5) * 0.22); return [lo, mid, hi]; }); } const sampleRamp = (ramp, r) => (r <= 0.5 ? mixLab(ramp[0], ramp[1], r * 2) : mixLab(ramp[1], ramp[2], (r - 0.5) * 2)); /** Continuous lookup at (θ, r): blend the two nearest sector ramps by angular * proximity, sample each at r. Low arousal desaturates and darkens. */ function wheelLab(ramps, theta, r, a) { const x = (((theta % TAU) + TAU) % TAU) / TAU * 8; const i = Math.floor(x) % 8, u = x - Math.floor(x); const lab = mixLab(sampleRamp(ramps[i], clamp(r)), sampleRamp(ramps[(i + 1) % 8], clamp(r)), u); return shiftL(desat(lab, (1 - clamp(a)) * 0.22), -(1 - clamp(a)) * 0.06); } const rgba = (rgb, alpha) => `rgba(${Math.round(rgb[0])}, ${Math.round(rgb[1])}, ${Math.round(rgb[2])}, ${clamp(alpha).toFixed(3)})`; function parseColor(input) { const s = String(input || '').trim(); if (s.startsWith('#')) { let h = s.slice(1); if (h.length === 3) h = h.split('').map((c) => c + c).join(''); const n = parseInt(h.slice(0, 6), 16); if (!Number.isNaN(n)) return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; } const m = s.match(/rgba?$([^)]+)$/i); if (m) { const p = m[1].split(',').map(parseFloat); return [p[0] || 0, p[1] || 0, p[2] || 0]; } return null; } /** The wheel is fixed; ink and neutral are brand tokens and only fall back to * these until they resolve. A raw var(--…) string must NEVER reach the parser. */ const FALLBACK = { wheel: EMOTION_WHEEL.map(parseColor), neutral: parseColor('#A1A1AA'), ink: parseColor('#0A0B0D'), }; const deltaTheta = (r) => (TAU / 8) * lerp(1.7, 0.35, clamp(r)); /* ── KERNEL: the polymorphic contour family (§7) ─────────────────────────── ONE canonical parametric ring generates every shape: 2N vertices, N outer tips interleaved with N inner valleys. Named shapes are preset coordinates in parameter space; morphing is parameter interpolation, never special- cased geometry. Topology is constant across the whole family. */ function contourVerts(o) { const N = Math.max(3, Math.min(16, Math.round(o.N))); const n2 = N * 2; // THE critical definition: at d = 0 the valleys sit exactly on the chord // between neighbouring tips (radius = the polygon's apothem), so the ring // reads as a clean N-gon with invisible mid-edge vertices. d < 0 bulges // them outward — gem / flower. const apothem = Math.cos(Math.PI / N); const rValley = lerp(apothem, 0.06, clamp(o.d, -0.6, 1)); const V = []; for (let i = 0; i < n2; i++) { const tip = i % 2 === 0; let rad = tip ? 1 : rValley; // asymmetry σ — stable SEEDED per-vertex variance: an irregular // hand-drawn silhouette that does not flicker frame to frame. if (o.sigma > 0) rad *= 1 + (hash(o.seed, i * 7.3) * 2 - 1) * o.sigma * 0.35; if (o.noiseAmp > 0) rad *= 1 + ringNoise(o.seed, i, n2, o.t, o.noiseFreq) * o.noiseAmp; let ang = o.phi0 + (i / n2) * TAU; if (o.sigma > 0) ang += (hash(o.seed, i * 3.1 + 11) * 2 - 1) * o.sigma * (TAU / n2) * 0.45; V.push([o.cx + Math.cos(ang) * rad * o.R * (o.sx || 1), o.cy + Math.sin(ang) * rad * o.R * (o.sy || 1), tip]); } return V; } /** Per-vertex fillet ρ as a fraction of the shorter adjacent edge, plus * edgeCurvature κ displacing each edge midpoint along the edge normal — * κ < 0 bows edges inward: the comic-burst look. */ function contourPath(o) { const V = contourVerts(o); const n = V.length; const A = [], B = []; for (let i = 0; i < n; i++) { const p = V[(i - 1 + n) % n], v = V[i], q = V[(i + 1) % n]; const d1 = Math.hypot(v[0] - p[0], v[1] - p[1]) || 1; const d2 = Math.hypot(q[0] - v[0], q[1] - v[1]) || 1; const L = Math.min(d1, d2) * 0.5 * clamp(v[2] ? o.rhoTip : o.rhoValley); A.push([v[0] + ((p[0] - v[0]) / d1) * L, v[1] + ((p[1] - v[1]) / d1) * L]); B.push([v[0] + ((q[0] - v[0]) / d2) * L, v[1] + ((q[1] - v[1]) / d2) * L]); } let d = `M${f2(B[0][0])} ${f2(B[0][1])}`; for (let i = 0; i < n; i++) { const j = (i + 1) % n; const mx = (B[i][0] + A[j][0]) / 2, my = (B[i][1] + A[j][1]) / 2; const ex = A[j][0] - B[i][0], ey = A[j][1] - B[i][1]; const len = Math.hypot(ex, ey) || 1; let nx = -ey / len, ny = ex / len; if ((mx - o.cx) * nx + (my - o.cy) * ny < 0) { nx = -nx; ny = -ny; } const bow = o.kappa * len * 0.5; d += ` Q${f2(mx + nx * bow)} ${f2(my + ny * bow)} ${f2(A[j][0])} ${f2(A[j][1])}`; d += ` Q${f2(V[j][0])} ${f2(V[j][1])} ${f2(B[j][0])} ${f2(B[j][1])}`; // fillet } return `${d}Z`; } /** Semantic → visual mapping (§8): k interpolates every geometry target * between the bouba and kiki columns. Violent ↔ cute is NOT a parameter — * it is the composite diagonal of k, c, a, sector and kernel shape. */ function geometryFor(k, c) { return { d: lerp(0, 0.8, k), rhoTip: lerp(1, 0, k), rhoValley: lerp(1, 0.08, k), kappa: lerp(0.3, -0.7, k), sigma: lerp(0, 0.4, k) * clamp(c), noiseFreq: lerp(0.35, 2.6, k), }; } /** Unique filter ids per mount — a feed grid renders many of these at once. */ let __vonSeq = 0; /* ═══════════════ instrument: THE TWO-LAYER ORGANISM (§6 + §7) ═══════════ */ const VW = 1920, VH = 1080; /** Enough stops that the falloff is smooth. Too few and the glow bands into * visible rings, which reads as a pixelated, mushy blob. */ const MASK_STOPS = 64; /** Radius samples around the silhouette. High enough that a square's corner * stays a corner. */ const PROFILE = 480; /* ── clean geometry: the preset ladder (§7) ─────────────────────────────── Named shapes are preset coordinates in the ONE contour parameter space. The shape walks this ladder as k rises — a real circle, a real square, a real star, a real burst — so it reads as recognisable geometry instead of a continuously wobbling blob. Per-vertex noise and asymmetry are NOT used here: chaos drives position, rotation and how far up the ladder we sit, never the silhouette itself. Only `burst` carries the σ its preset defines. */ const PRESETS = [ // circle — N=16 with d = −0.0209 puts the valleys back out at the tip // radius (lerp(apothem, 0.06, d) = 1 for apothem = cos(π/16)), so all 32 // vertices sit on one circle. A true circle, still a coordinate in the ring // model — spec §7 allows exactly this small negative d. // (The spec's own N=6 + ρ=1 reads as a rounded hexagon instead: filleting // cannot remove the 13% radius swing, and at ρ=1 the fillet cuts inside the // polygon, which is what made this look faceted.) { N: 16, d: -0.0209, phi0: 0, rhoTip: 0, rhoValley: 0, kappa: 0, sigma: 0, fixedN: true }, // square — φ0 = π/4 puts the tips at 45° so it sits axis-aligned on screen { N: 4, d: 0, phi0: Math.PI / 4, rhoTip: 0.06, rhoValley: 0.06, kappa: 0, sigma: 0, fixedN: true }, // regular star — N comes from pointCount, so the corner count is directable { N: 6, d: 0.55, phi0: -Math.PI / 2, rhoTip: 0.02, rhoValley: 0.02, kappa: 0, sigma: 0 }, // comic burst — concave flanks, the one preset that carries asymmetry { N: 11, d: 0.72, phi0: -Math.PI / 2, rhoTip: 0.1, rhoValley: 0, kappa: -0.7, sigma: 0.1 }, ]; /** Flatten a preset into a dense closed polyline, fillets and edge-bow * included — the same construction as contourPath, emitting points. */ function contourPolyline(o, per) { const V = contourVerts(o); const n = V.length; const A = [], B = []; for (let i = 0; i < n; i++) { const p = V[(i - 1 + n) % n], v = V[i], q = V[(i + 1) % n]; const d1 = Math.hypot(v[0] - p[0], v[1] - p[1]) || 1; const d2 = Math.hypot(q[0] - v[0], q[1] - v[1]) || 1; const L = Math.min(d1, d2) * 0.5 * clamp(v[2] ? o.rhoTip : o.rhoValley); A.push([v[0] + ((p[0] - v[0]) / d1) * L, v[1] + ((p[1] - v[1]) / d1) * L]); B.push([v[0] + ((q[0] - v[0]) / d2) * L, v[1] + ((q[1] - v[1]) / d2) * L]); } const q2 = (p0, p1, p2, t) => [ (1 - t) * (1 - t) * p0[0] + 2 * (1 - t) * t * p1[0] + t * t * p2[0], (1 - t) * (1 - t) * p0[1] + 2 * (1 - t) * t * p1[1] + t * t * p2[1], ]; const pts = []; for (let i = 0; i < n; i++) { const j = (i + 1) % n; const mx = (B[i][0] + A[j][0]) / 2, my = (B[i][1] + A[j][1]) / 2; const ex = A[j][0] - B[i][0], ey = A[j][1] - B[i][1]; const len = Math.hypot(ex, ey) || 1; let nx = -ey / len, ny = ex / len; if ((mx - o.cx) * nx + (my - o.cy) * ny < 0) { nx = -nx; ny = -ny; } const ctrl = [mx + nx * o.kappa * len * 0.5, my + ny * o.kappa * len * 0.5]; for (let s = 0; s < per; s++) pts.push(q2(B[i], ctrl, A[j], s / per)); for (let s = 0; s < per; s++) pts.push(q2(A[j], V[j], B[j], s / per)); } return pts; } /** Resample a preset to a fixed-length radius-at-angle profile. This is the * spec's rule for morphing when N differs: resample both contours to a fixed * sample count and blend point-wise. Because both profiles are indexed by the * same angles, the blend is automatically aligned — no rotation artefacts. */ /** Profiles depend only on (preset, N, seed) — never on time — so they are * computed once and reused. Without this the ray-cast would re-run for both * presets on every frame of a morph. */ const __profileCache = new Map(); function presetProfile(preset, N, seed) { const nEff = preset.fixedN ? preset.N : Math.max(3, Math.min(16, Math.round(N))); const key = `${PRESETS.indexOf(preset)}:${nEff}:${seed}`; const cached = __profileCache.get(key); if (cached) return cached; const pts = contourPolyline({ cx: 0, cy: 0, R: 1, N: nEff, d: preset.d, phi0: preset.phi0, rhoTip: preset.rhoTip, rhoValley: preset.rhoValley, kappa: preset.kappa, sigma: preset.sigma, noiseAmp: 0, noiseFreq: 1, seed, t: 0, }, 10); // RAY-CAST each sample angle against the outline and keep the farthest hit. // Angle-order resampling cannot survive the burst: κ = −0.7 bows the edges // so far inward that the boundary winds backwards in angle, and any // scheme that assumes a monotonic angle sequence collapses the shape. const n = pts.length; const out = new Array(PROFILE); for (let i = 0; i < PROFILE; i++) { const ang = (i / PROFILE) * TAU; const dx = Math.cos(ang), dy = Math.sin(ang); let best = 0; for (let j = 0; j < n; j++) { const p0 = pts[j], p1 = pts[(j + 1) % n]; const ex = p1[0] - p0[0], ey = p1[1] - p0[1]; const den = ex * dy - ey * dx; if (Math.abs(den) < 1e-12) continue; // parallel const t = (p0[1] * dx - p0[0] * dy) / den; if (t < 0 || t > 1) continue; // outside the segment const s = Math.abs(dx) > Math.abs(dy) ? (p0[0] + t * ex) / dx : (p0[1] + t * ey) / dy; if (s > best) best = s; // outer boundary } out[i] = best; } __profileCache.set(key, out); return out; } function morphProfile(from, to, t, N, seed) { const A = presetProfile(from, N, seed); if (t <= 0.001) return A; const B = presetProfile(to, N, seed); if (t >= 0.999) return B; const out = new Array(PROFILE); for (let i = 0; i < PROFILE; i++) out[i] = lerp(A[i], B[i], t); return out; } /** Straight segments between dense samples — crisp corners, no curve mush. */ function profilePath(profile, cx, cy, rx, ry) { let d = ''; for (let i = 0; i < profile.length; i++) { const a = (i / profile.length) * TAU; const x = cx + Math.cos(a) * profile[i] * rx; const y = cy + Math.sin(a) * profile[i] * ry; d += `${i === 0 ? 'M' : 'L'}${f2(x)} ${f2(y)}`; } return d + 'Z'; } /* ── SRT: the live companion's track source ──────────────────────────────── */ function parseSrt(raw) { if (!raw) return []; const toSec = (s) => { const p = s.trim().match(/^(\d+):(\d+):(\d+)[,.](\d+)$/); return p ? +p[1] * 3600 + +p[2] * 60 + +p[3] + +p[4] / 1000 : 0; }; const cues = []; for (const block of raw.trim().split(/\n\s*\n/)) { const lines = block.trim().split('\n'); if (lines.length < 2) continue; let idx = 0; const id = parseInt(lines[0], 10); if (!isNaN(id) && !lines[0].includes('-->')) idx = 1; const m = lines[idx] && lines[idx].match(/(.+?)\s*-->\s*(.+)/); if (!m) continue; cues.push({ start: toSec(m[1]), end: toSec(m[2]), text: lines.slice(idx + 1).join(' ').trim() }); } return cues.sort((a, b) => a.start - b.start); } function wordsAt(cues, time) { const cue = cues.find((c) => time >= c.start && time <= c.end); if (!cue) return null; const tokens = cue.text.split(/\s+/).filter(Boolean); if (!tokens.length) return null; const per = Math.max(cue.end - cue.start, 0.001) / tokens.length; let current = -1; const words = tokens.map((text, i) => { const p = clamp((time - (cue.start + i * per)) / Math.min(per, 0.45)); if (p > 0) current = i; return { text, p }; }); return { words, current }; } /** An SRT IS a track: speech inside a cue, rest between. Deterministic, so a * render of a subtitled orb reproduces exactly. Syllabic detail comes from * the seeded speech envelope rather than from real audio, which the unit is * forbidden to hear (§2.1). */ function trackFromSrt(cues, seed) { const impulses = []; for (const c of cues) { const n = Math.max(1, c.text.split(/\s+/).filter(Boolean).length); const per = Math.max(c.end - c.start, 0.001) / n; // one soft onset per word — the mouth opening for (let i = 0; i < n; i++) impulses.push({ time: c.start + i * per, strength: 0.3 + 0.3 * hash(seed, i + c.start) }); } const speaking = (t) => cues.some((c) => t >= c.start && t <= c.end); return { at: (t) => { const on = speaking(t); const env = speechEnv(seed, t, 2.1); return { theta: sectorAngle('trust') + Math.sin(t * 0.09) * 0.5, r: on ? clamp(0.42 + 0.3 * env) : 0.26, v: 0.35, a: on ? clamp(0.45 + 0.25 * env) : 0.16, k: on ? clamp(0.36 + 0.26 * env) : 0.1, c: on ? 0.24 : 0.1, e: on ? clamp(0.25 + 0.7 * env) : clamp(0.1 + 0.05 * Math.sin(t * 0.7)), }; }, impulses, }; } /** Live-surface states, expressed as track channels rather than as a state * machine. The host's cues select one; the follower does the blending, so * there is no separate morph timer to fall out of sync. */ const LIVE_STATE = { idle: { sector: 'trust', r: 0.26, v: 0.35, a: 0.14, k: 0.06, c: 0.08, e: 0.16 }, listening: { sector: 'anticipation', r: 0.44, v: 0.3, a: 0.4, k: 0.3, c: 0.16, e: 0.3 }, thinking: { sector: 'anticipation', r: 0.6, v: 0.1, a: 0.62, k: 0.62, c: 0.4, e: 0.4 }, talking: { sector: 'joy', r: 0.66, v: 0.5, a: 0.7, k: 0.45, c: 0.22, e: 0.7 }, }; function stateForEvent(name) { switch ((name || '').toLowerCase()) { case 'wake': case 'submit': case 'awake': case 'listening': return 'listening'; case 'thinking': case 'streaming': return 'thinking'; case 'react': case 'talking': case 'happy': case 'speaking': return 'talking'; case 'idle': case 'done': case 'rest': case 'sleep': return 'idle'; default: return null; } } /** A fixed live state, as a track. */ function trackFromState(name, seed) { const S = LIVE_STATE[name] || LIVE_STATE.idle; return { at: (t) => { const env = speechEnv(seed, t, name === 'talking' ? 2.4 : 1.1); return { theta: sectorAngle(S.sector), r: S.r, v: S.v, a: S.a, k: S.k, c: S.c, e: clamp(S.e * (0.65 + 0.5 * env)), }; }, impulses: [], }; } export default function VonOrb({ time = 0, duration = 8, srt = '', state = 'auto', level = 0, accent = 'var(--color-tertiary)', wordSize = 64, showWords = true, compEvent = null, track = '', mood = 'narration', seed = 7, trackOffset = 0, restSec = 0, emotion = 'trust', feeling = 0.6, loudness = 0.5, sharpness = 0.5, roughness = 0.5, pace = 0.5, pointCount = 6, inkSoftness = 0, glowScale = 1, shapeScale = 1, inkTint = 1, grain = 0.05, }) { const rootRef = useRef(null); const uid = useMemo(() => `von-orb-${++__vonSeq}`, []); const cues = useMemo(() => parseSrt(srt), [srt]); // Live surface: the host's cue selects a state. Absent (render), this stays // null and the track comes from the SRT / explicit track / mood. const [liveState, setLiveState] = useState(null); useEffect(() => { const s = stateForEvent(compEvent && compEvent.name); if (s) setLiveState(s); }, [compEvent]); // Live voice amplitude, broadcast by the chat surface's analyser. Headless // and render hosts never receive it and stay fully deterministic. const [liveLevel, setLiveLevel] = useState(0); useEffect(() => { if (typeof window === 'undefined') return; const onLevel = (e) => { const v = e && e.detail && typeof e.detail.level === 'number' ? e.detail.level : 0; setLiveLevel(clamp(v)); }; window.addEventListener('syvon:voice-level', onLevel); return () => window.removeEventListener('syvon:voice-level', onLevel); }, []); // Track resolution order: explicit track → live state → SRT → mood. const T = useMemo(() => { const explicit = parseTrack(track); if (explicit) return explicit; if (liveState) return trackFromState(liveState, seed); if (state !== 'auto' && LIVE_STATE[state]) return trackFromState(state, seed); if (cues.length) return trackFromSrt(cues, seed); return buildTrack(mood, seed, duration, { emotion, feeling, loudness, sharpness, roughness, pace }); }, [track, liveState, state, cues, mood, seed, duration, emotion, feeling, loudness, sharpness, roughness, pace]); // The wheel is the declared palette above. Ink and neutral are real brand // tokens, read off the mounted root so they follow the host's brand. const [palette, setPalette] = useState(FALLBACK); const [accentRgb, setAccentRgb] = useState(FALLBACK.wheel[0]); useEffect(() => { const el = rootRef.current; if (!el) return; const cs = getComputedStyle(el); const tok = (name, fb) => parseColor(cs.getPropertyValue(name)) || fb; setPalette({ wheel: FALLBACK.wheel, neutral: tok('--color-secondary', FALLBACK.neutral), ink: tok('--color-background', FALLBACK.ink), }); const a = String(accent || '').trim(); const raw = a.startsWith('var(') ? cs.getPropertyValue(a.slice(4, a.indexOf(')')).trim()) : a; setAccentRgb(parseColor(raw) || FALLBACK.wheel[0]); }, [accent]); const ramps = useMemo(() => buildRamps(palette.wheel, palette.neutral), [palette]); const tt = time + trackOffset; // Followers — different organs move at different speeds, which is why the // whole thing reads as one organism (§10). const theta = followAngle(T.at, tt, 1.4); const r = follow(T.at, 'r', tt, 1.0); const a = follow(T.at, 'a', tt, 0.8); const k = follow(T.at, 'k', tt, 0.3); const c = follow(T.at, 'c', tt, 0.45); const v = follow(T.at, 'v', tt, 1.3); let e = follow(T.at, 'e', tt, 0.3, 0.05); // The live signal is an ENERGY source, not a separate decay loop: it joins // the same channel everything else reads. const forced = clamp(Math.max(level, liveLevel)); if (forced > 0.02) e = Math.max(e, forced); const hit = impulseEnv(T.impulses, tt, k, 0.3); // Terminal state (§11). Off by default: the live companion has no ending. const rest = restSec > 0 ? smooth(clamp((time - (duration - restSec)) / restSec)) : 0; const kR = lerp(k, 0, rest), cR = lerp(c, 0, rest), aR = lerp(a, 0.1, rest); const eR = lerp(e, 0.12, rest), hitR = hit * (1 - rest); /* ── Layer 1 — glow field (§6) ── */ // Mask profile: full alpha to the plateau, then an eased falloff. Bouba and // low arousal give a long soft tail; kiki and high arousal a tight hard rim. const hard = clamp(0.55 * kR + 0.45 * aR); const plateau = clamp(lerp(0.24, 0.62, hard), 0.05, 0.85); const gamma = lerp(0.85, 5.2, hard); const maskStops = []; for (let i = 0; i <= MASK_STOPS; i++) { const u = i / MASK_STOPS; const alpha = u <= plateau ? 1 : Math.pow(1 - (u - plateau) / (1 - plateau), gamma); const g = Math.round(clamp(alpha) * 255); maskStops.push({ off: u, col: `rgb(${g}, ${g}, ${g})` }); } // Radius breathes with energy; centre wanders on seeded noise. const [gwx, gwy] = wander(seed, tt, 0.16 + aR * 0.5); const gcx = VW / 2 + gwx * 150 * cR; const gcy = VH / 2 + gwy * 100 * cR; const gR = Math.min(VW, VH) * 0.52 * clamp(glowScale, 0.2, 2) * (0.72 + 0.42 * eR + 0.1 * hitR); // Two colours off the wheel; Δθ tightens as intensity grows, so an intense // moment reads near-monochrome and a mild one spreads into its neighbours. const gradA = toRgb(wheelLab(ramps, theta, r, aR)); const gradB = toRgb(wheelLab(ramps, theta + deltaTheta(r), r * 0.85, aR)); // The wheel rotates the light, plus a slow drift scaling with arousal. The // gradient spans the GLOW's own diameter, not the frame: across the frame it // varies so little inside the visible halo that A and B read as one colour // and Plutchik's dyad is lost. const alpha = theta + tt * lerp(0.02, 0.16, aR); const ax = Math.cos(alpha), ay = Math.sin(alpha); // Softness: blur increases along the falloff — a sharp core with a hazy // edge. The sadness sector at low valence adds haze on top. const sadness = Math.max(0, Math.cos(theta - sectorAngle('sadness'))); const haze = sadness * Math.max(0, -v); const soft = clamp((1 - kR) * (1 - aR) + haze * 0.45); const coreBlur = 4 + soft * 34; const edgeBlur = 46 + soft * 130; /* ── Layer 2 — polymorphic ink contour (§7) ── */ // The shape travels the PRESET LADDER — a real circle, a real square, a real // star, a real burst — and morphs between two neighbours by blending their // radius profiles. Nothing is deformed per-vertex, so every frame is a clean // piece of geometry rather than a wobbling blob. const ladder = clamp(kR) * (PRESETS.length - 1); const li = Math.min(Math.floor(ladder), PRESETS.length - 2); // Hysteresis (§10): the shape HOLDS a clean preset across most of the range // and crosses the blend only in the middle third. Blending a 4-point square // with a 6-point star gives a hybrid carrying both point counts — fine as a // brief transition, wrong as a resting state, which is what reads as "more // points than necessary". const lf = smooth(clamp((ladder - li - 0.42) / 0.16)); const profile = useMemo( () => morphProfile(PRESETS[li], PRESETS[li + 1], lf, pointCount, seed), [li, lf, pointCount, seed], ); const [swx, swy] = wander(seed + 3.1, tt, 0.12 + aR * 0.4); const scx = VW / 2 + swx * 70 * cR; // Vertical bias — valence lifts or droops the centre of mass. const scy = VH / 2 + swy * 46 * cR - v * 52 * (1 - rest); // Sized to hold the frame the way the previous orb did — the ink covers the // glow's core, so the light reads as a halo just past its edge. const sR = Math.min(VW, VH) * 0.3 * clamp(shapeScale, 0.2, 2) * (1 + 0.2 * eR + 0.14 * hitR); // Anisotropy: squash-and-stretch on impulses, stronger on the cute end. const aniso = hitR * lerp(0.22, 0.06, kR); // Slow rotation drift, with rotational kicks on hard onsets. Chaos lives // HERE and in the position wander — never in the silhouette. const spin = tt * lerp(2, 14, aR) * (1 - rest) + hitR * lerp(14, 4, kR) + Math.sin(tt * (0.6 + aR)) * 5 * cR * (1 - rest); const shapePath = profilePath(profile, scx, scy, sR * (1 + aniso), sR * (1 - aniso)); // Ink is the near-black token by default; above a high intensity threshold // it tints toward the sector's darkest step. const inkLab = toLab(palette.ink); const tintAmt = inkTint > 0 ? clamp((r - 0.72) / 0.28) * 0.55 * clamp(inkTint) : 0; const inkRgb = toRgb(mixLab(inkLab, shiftL(wheelLab(ramps, theta, r, aR), -0.34), tintAmt)); // The ink is CRISP by default. Blurring it was what made the shape read as // mushy; softness is now opt-in per shot. const inkBlur = clamp(inkSoftness, 0, 1) * soft * 12 * (1 - rest); const active = showWords && wordSize > 0 ? wordsAt(cues, time) : null; return (

{grain > 0 && ( )} {active && (

{active.words.map((w, i) => ( {w.text} ))}

)}

); }

The map is not the territory.