@octanejs/thinking-orbs 0.1.0

package/src/engine/morph.ts

@@ -0,0 +1,138 @@
+// Morph: a dotted outline cycling circle → triangle → square → circle —
+// the "shaping" state. Each shape is a continuous closed path
+// parameterised by arc length (top-centre start, clockwise). Every
+// frame the engine blends the two neighbouring paths, then lays the
+// dots EVENLY along the blended outline — spacing stays uniform at
+// every instant of the morph, holds and transitions alike. Plain
+// circle fills only: no canvas/SVG filters, fully cross-browser.
+
+import type { Dot, ModeDraw } from './types';
+import { paint } from './core';
+
+type Path = (f: number) => [number, number];
+
+function smoothE(x: number): number {
+	return x * x * (3 - 2 * x);
+}
+
+function polyPath(verts: ReadonlyArray<readonly [number, number]>): Path {
+	const V = verts.length;
+	const L: number[] = [];
+	let total = 0;
+	for (let i = 0; i < V; i++) {
+		const a = verts[i];
+		const b = verts[(i + 1) % V];
+		const l = Math.hypot(b[0] - a[0], b[1] - a[1]);
+		L.push(l);
+		total += l;
+	}
+	return (f) => {
+		let target = f * total;
+		let i = 0;
+		while (target > L[i] && i < V - 1) {
+			target -= L[i];
+			i++;
+		}
+		const a = verts[i];
+		const b = verts[(i + 1) % V];
+		const ff = L[i] ? Math.min(1, target / L[i]) : 0;
+		return [a[0] + (b[0] - a[0]) * ff, a[1] + (b[1] - a[1]) * ff];
+	};
+}
+
+const CIRCLE: Path = (f) => {
+	const a = -Math.PI / 2 + f * 2 * Math.PI;
+	return [Math.cos(a) * 0.24, Math.sin(a) * 0.24];
+};
+const TRIANGLE = polyPath([
+	[0.0, -0.26],
+	[0.24, 0.16],
+	[-0.24, 0.16],
+]);
+// 5-vertex walk so the path STARTS at top-centre like the other shapes
+const SQUARE = polyPath([
+	[0, -0.2],
+	[0.2, -0.2],
+	[0.2, 0.2],
+	[-0.2, 0.2],
+	[-0.2, -0.2],
+]);
+const CYCLE: Path[] = [CIRCLE, TRIANGLE, SQUARE];
+
+// low floor keeps sparse outlines possible while never degenerating
+function morphN(d: number): number {
+	return Math.max(6, Math.round(34 * d));
+}
+
+const HOLD = 1.4;
+const MORPH = 0.9;
+const SEG = HOLD + MORPH;
+
+// This state was tuned in inkform, which paints it through a blur +
+// threshold "goo" filter; we draw plain circles instead, since `ctx.filter`
+// and SVG filter refs are not safe to rely on across Chrome / Safari /
+// Firefox. The dot GEOMETRY is identical either way — the threshold just
+// yields a hard edge where a plain fill has an antialiased one, so these
+// dots read a touch softer than inkform's. Don't "correct" for that by
+// shrinking the radius: it makes the mark genuinely smaller than the tuning.
+
+export const drawMorph: ModeDraw = (ctx, size, t, dark, o) => {
+	const K = CYCLE.length;
+	const tc = t % (SEG * K);
+	const k = Math.floor(tc / SEG);
+	const local = tc - k * SEG;
+	const m = local > HOLD ? smoothE((local - HOLD) / MORPH) : 0;
+	const sprd = o.spread ?? 1;
+
+	// blend the two shape PATHS at m, then measure the blended outline
+	const pA = CYCLE[k];
+	const pB = CYCLE[(k + 1) % K];
+	const M = 160;
+	const pts: Array<[number, number]> = [];
+	for (let i = 0; i < M; i++) {
+		const f = i / M;
+		const a = pA(f);
+		const b = pB(f);
+		pts.push([(a[0] + (b[0] - a[0]) * m) * sprd, (a[1] + (b[1] - a[1]) * m) * sprd]);
+	}
+	const L: number[] = [];
+	let total = 0;
+	for (let i = 0; i < M; i++) {
+		const a = pts[i];
+		const b = pts[(i + 1) % M];
+		const l = Math.hypot(b[0] - a[0], b[1] - a[1]);
+		L.push(l);
+		total += l;
+	}
+
+	// dot radius depends ONLY on rDot (the size knob); the count sets the
+	// gaps. Formed shapes breathe a little (uniform pulse).
+	const n = morphN(o.iconD ?? 1);
+	const re = (o.rDot ?? 0.021) * 1.35 * sprd;
+	const pulse = 1 + 0.02 * Math.sin(local * 3.1);
+
+	const dots: Dot[] = [];
+	const c2 = size / 2;
+	let seg = 0;
+	let acc = 0;
+	for (let k2 = 0; k2 < n; k2++) {
+		const target = (k2 / n) * total;
+		while (acc + L[seg] < target && seg < M - 1) {
+			acc += L[seg];
+			seg++;
+		}
+		const a = pts[seg];
+		const b = pts[(seg + 1) % M];
+		const f = L[seg] ? Math.min(1, (target - acc) / L[seg]) : 0;
+		const x = (a[0] + (b[0] - a[0]) * f) * pulse;
+		const y = (a[1] + (b[1] - a[1]) * f) * pulse;
+		dots.push({
+			x: c2 + x * size,
+			y: c2 + y * size,
+			z: 0,
+			r: Math.max(0.35, re * size),
+			white: 0.1,
+		});
+	}
+	paint(ctx, dots, dark, o.rMin);
+};

package/src/engine/orbits.ts

@@ -0,0 +1,80 @@
+// Orbits: particles on tilted orbits — the "working" state. No nucleus
+// (the tuned preset runs coreless): just ghost paths and the particles
+// doing the work.
+
+import type { Dot, ModeDraw } from './types';
+import { hashD, makeProj, paint, radiusScale } from './core';
+
+export const drawOrbits: ModeDraw = (ctx, size, t, dark, o) => {
+	const cx = size / 2;
+	const cy = size / 2;
+	const R = (size / 2) * 0.82;
+	const pt = makeProj(t * 0.12, 0.3, cx, cy, 1);
+	const rs = radiusScale(size, o.rsPow ?? 0.6);
+
+	const dots: Dot[] = [];
+	const orbitN = o.orbitN ?? 12;
+	const ghostN = o.ghostN ?? 40;
+	const particles = o.particles ?? 3;
+
+	// orbits: each a tilted circle — a ghost path + running particles
+	for (let orb = 0; orb < orbitN; orb++) {
+		const h1 = hashD(orb, 1.7);
+		const h2 = hashD(orb, 5.2);
+		const h3 = hashD(orb, 8.9);
+		const ro = R * (0.45 + 0.52 * h1);
+		const th = h1 * 2 * Math.PI;
+		const phi = Math.acos(2 * h2 - 1);
+		// orbit plane basis (u, v ⟂ normal n)
+		const nx = Math.sin(phi) * Math.cos(th);
+		const ny = Math.cos(phi);
+		const nz = Math.sin(phi) * Math.sin(th);
+		let ux = -ny;
+		let uy = nx;
+		const uz = 0;
+		const ul = Math.max(1e-6, Math.sqrt(ux * ux + uy * uy));
+		ux /= ul;
+		uy /= ul;
+		const vx = ny * uz - nz * uy;
+		const vy = nz * ux - nx * uz;
+		const vz = nx * uy - ny * ux;
+		const speed = (0.25 + 0.55 * h3) * (h3 > 0.5 ? 1 : -1);
+
+		// ghost path
+		for (let k = 0; k < ghostN; k++) {
+			const a = (k / ghostN) * 2 * Math.PI;
+			const [px, py, z] = pt(
+				(ux * Math.cos(a) + vx * Math.sin(a)) * ro,
+				(uy * Math.cos(a) + vy * Math.sin(a)) * ro,
+				(uz * Math.cos(a) + vz * Math.sin(a)) * ro,
+			);
+			const depth = (z / ro + 1) / 2;
+			dots.push({
+				x: px,
+				y: py,
+				z,
+				r: (o.ghostR ?? 0.9) * rs,
+				white: 0.72,
+				a: (o.ghostA ?? 0.5) * (0.4 + 0.6 * depth),
+			});
+		}
+		// the particles doing the work
+		for (let m = 0; m < particles; m++) {
+			const a = t * speed + (m / particles) * 2 * Math.PI + h2 * 6;
+			const [px, py, z] = pt(
+				(ux * Math.cos(a) + vx * Math.sin(a)) * ro,
+				(uy * Math.cos(a) + vy * Math.sin(a)) * ro,
+				(uz * Math.cos(a) + vz * Math.sin(a)) * ro,
+			);
+			const depth = (z / ro + 1) / 2;
+			dots.push({
+				x: px,
+				y: py,
+				z,
+				r: ((o.partR ?? 1.2) + (o.partRDepth ?? 1.6) * depth) * rs,
+				white: 0.3 - 0.22 * depth,
+			});
+		}
+	}
+	paint(ctx, dots, dark, o.rMin);
+};

package/src/engine/profiles.ts

@@ -0,0 +1,162 @@
+// Density profiles + the multiplier machinery that scales them. The base
+// rows are inkform's `fine` profiles; each shipped preset (state × size)
+// applies count / radius multipliers on top, resolved once per mount.
+
+export interface ModeOpts {
+	[key: string]: number | undefined;
+}
+
+// 2-D lattices (rings × dots-per-ring) come in pairs — each side takes
+// √scale so the TOTAL dot count scales by `scale`; flat lists scale
+// linearly. `iconD` sets the morph outline's sampling density.
+const COUNT_PAIRS: ReadonlyArray<readonly [string, string]> = [
+	['latRings', 'lonDensity'],
+	['rings', 'lonDensity'],
+	['lanes', 'segs'],
+];
+const COUNT_KEYS = ['orbitN', 'ghostN', 'nodeN', 'strandN', 'signals'] as const;
+const ICON_DENSITY_KEYS = ['iconD'] as const;
+
+// Every key that sets a dot's rendered radius — scaling all of them keeps
+// a dot's near/far falloff intact while shrinking or growing the mark.
+const RADIUS_KEYS = [
+	'rBase',
+	'rDepth',
+	'rActive',
+	'rDot',
+	'ghostR',
+	'partR',
+	'partRDepth',
+	'nodeR',
+	'nodeRDepth',
+] as const;
+
+export function scaleCounts(opts: ModeOpts, scale: number): ModeOpts {
+	const out: ModeOpts = { ...opts };
+	const done = new Set<string>();
+	const rt = Math.sqrt(scale);
+	for (const [a, b] of COUNT_PAIRS) {
+		const va = out[a];
+		const vb = out[b];
+		if (va != null && vb != null && !done.has(a) && !done.has(b)) {
+			out[a] = Math.max(2, Math.round(va * rt));
+			out[b] = Math.max(2, Math.round(vb * rt));
+			done.add(a);
+			done.add(b);
+		}
+	}
+	for (const k of COUNT_KEYS) {
+		const v = out[k];
+		// 0 means the mode opted out of that layer entirely (ring has no ghost
+		// sphere) — scaling must not resurrect it as a single stray dot
+		if (v != null && v !== 0 && !done.has(k)) out[k] = Math.max(1, Math.round(v * scale));
+	}
+	for (const k of ICON_DENSITY_KEYS) {
+		const v = out[k];
+		if (v != null) out[k] = Math.max(0.02, v * scale);
+	}
+	return out;
+}
+
+export function scaleRadii(opts: ModeOpts, scale: number): ModeOpts {
+	const out: ModeOpts = { ...opts };
+	for (const k of RADIUS_KEYS) {
+		const v = out[k];
+		if (v != null) out[k] = v * scale;
+	}
+	// remember the multiplier itself — spacing-derived radii (the morph
+	// outline) use it, since they aren't based on any single radius key
+	out.rSizeMul = (out.rSizeMul ?? 1) * scale;
+	return out;
+}
+
+/** Base (fine) profiles per mode, before preset multipliers. */
+export const BASE_PROFILES: Record<string, ModeOpts> = {
+	globe: {
+		latRings: 17,
+		lonDensity: 44,
+		rBase: 0.6,
+		rDepth: 1.7,
+		rBoost: 1.0,
+		inkFar: 0.62,
+		inkSpan: 0.54,
+		rsPow: 0.6,
+		rMin: 0.3,
+	},
+	orbits: {
+		orbitN: 12,
+		ghostN: 40,
+		ghostR: 0.9,
+		ghostA: 0.5,
+		particles: 3,
+		partR: 1.2,
+		partRDepth: 1.6,
+		rsPow: 0.6,
+		rMin: 0.3,
+	},
+	rubik: {
+		latRings: 15,
+		lonDensity: 40,
+		moveCount: 14,
+		rBase: 0.6,
+		rDepth: 1.7,
+		rActive: 0.3,
+		inkFar: 0.62,
+		inkSpan: 0.54,
+		rsPow: 0.6,
+		rMin: 0.3,
+	},
+	wave: {
+		rings: 15,
+		lonDensity: 40,
+		rBase: 0.6,
+		rDepth: 1.7,
+		rsPow: 0.6,
+		rMin: 0.3,
+	},
+	web: {
+		nodeN: 30,
+		thr: 0.72,
+		signals: 5,
+		nodeR: 1.4,
+		nodeRDepth: 1.8,
+		lineW: 0.8,
+		rsPow: 0.6,
+		rMin: 0.3,
+	},
+	braid: {
+		strandN: 52,
+		turns: 3.0,
+		ghostN: 150,
+		rBase: 1.2,
+		rDepth: 1.8,
+		rsPow: 0.6,
+		rMin: 0.3,
+	},
+	ribbon: {
+		lanes: 5,
+		segs: 88,
+		ghostN: 150,
+		rBase: 1.1,
+		rDepth: 1.7,
+		rsPow: 0.6,
+		rMin: 0.3,
+	},
+	// ring shares ribbon's painter; faceOn cancels the camera tilt and moves
+	// the undulation onto the radius, and there is no ghost sphere behind it
+	ring: {
+		lanes: 5,
+		segs: 88,
+		ghostN: 0,
+		faceOn: 1,
+		rBase: 1.1,
+		rDepth: 1.7,
+		rsPow: 0.6,
+		rMin: 0.3,
+	},
+	morph: {
+		rDot: 0.021,
+		iconD: 1,
+		rMin: 0.25,
+	},
+};

package/src/engine/registry.ts

@@ -0,0 +1,24 @@
+// Mode key → frame painter. Kept separate from the presets so tree
+// shaking can in principle drop unused modes in custom builds.
+
+import type { ModeKey } from '../presets';
+import type { ModeDraw } from './types';
+import { drawBraid } from './braid';
+import { drawGlobe, drawRubik, drawWave } from './lattice';
+import { drawMorph } from './morph';
+import { drawOrbits } from './orbits';
+import { drawRibbon } from './ribbon';
+import { drawWeb } from './web';
+
+export const MODE_DRAWS: Record<ModeKey, ModeDraw> = {
+	orbits: drawOrbits,
+	globe: drawGlobe,
+	rubik: drawRubik,
+	wave: drawWave,
+	web: drawWeb,
+	braid: drawBraid,
+	ribbon: drawRibbon,
+	// ring shares ribbon's painter — the `faceOn` profile flag switches it
+	ring: drawRibbon,
+	morph: drawMorph,
+};

package/src/engine/ribbon.ts

@@ -0,0 +1,94 @@
+// Ribbon: an undulating sash of parallel strands rides a great circle —
+// the "composing" state. The tuned preset freezes the 3D tumble
+// (spin 0), leaving the traveling undulation on a fixed band.
+//
+// The same painter also drives "breathing" (ring), via the `faceOn` flag:
+// a face-on circle whose radius — not its out-of-plane offset — undulates,
+// so it reads as a ring slowly morphing rather than a sash in orbit.
+
+import type { Dot, ModeDraw } from './types';
+import { fibDir, makeProj, paint, radiusScale } from './core';
+
+export const drawRibbon: ModeDraw = (ctx, size, t, dark, o) => {
+	const cx = size / 2;
+	const cy = size / 2;
+	const R = (size / 2) * 0.78;
+	// spin scales the 3D tumble; spin=0 freezes the band's orientation,
+	// leaving only the traveling undulation
+	const spin = o.spin ?? 1;
+	const camTilt = 0.3;
+	const pt = makeProj(t * 0.1 * spin, camTilt, cx, cy, 1);
+	const rs = radiusScale(size, o.rsPow ?? 0.6);
+
+	const dots: Dot[] = [];
+	const ghostN = o.ghostN ?? 150;
+	for (let i = 0; i < ghostN; i++) {
+		const d = fibDir(i, ghostN);
+		const [px, py, z] = pt(d[0] * R, d[1] * R, d[2] * R);
+		const depth = (z / R + 1) / 2;
+		dots.push({ x: px, y: py, z, r: 0.8 * rs, white: 0.78, a: 0.1 + 0.22 * depth });
+	}
+
+	// The band plane, precessing (frozen when spin=0). The projection squashes
+	// the band's great circle vertically by cos(ta + camTilt); face-on sets
+	// ta = -camTilt so that term is 1 and the band reads as a true circle
+	// rather than ribbon's tilted ellipse.
+	const ya = t * 0.24 * spin;
+	const ta = o.faceOn ? -camTilt : 0.55 + 0.3 * Math.sin(t * 0.18) * spin;
+	const ux = Math.cos(ya);
+	const uy = 0;
+	const uz = Math.sin(ya);
+	const vx = -uz * Math.sin(ta);
+	const vy = Math.cos(ta);
+	const vz = ux * Math.sin(ta);
+	// plane normal n = u × v
+	const nx = uy * vz - uz * vy;
+	const ny = uz * vx - ux * vz;
+	const nz = ux * vy - uy * vx;
+
+	// Radial lobes swell past R, so pull the base radius in by (most of) the
+	// wobble amplitude. The silhouette then stays inside the frame however far
+	// the deformation is pushed, while lobes keep getting deeper relative to
+	// the mean radius.
+	const wobAmp = 0.23 * (o.wobMul ?? 1);
+	const baseR = o.faceOn ? R / (1 + 0.85 * wobAmp) : R;
+
+	const baseLanes = o.lanes ?? 5;
+	const segs = o.segs ?? 88;
+	const lanes = Math.max(1, Math.round(baseLanes * (o.bandMul ?? 1)));
+	for (let w = 0; w < lanes; w++) {
+		const laneOff = (w - (lanes - 1) / 2) * 0.075;
+		const edge = Math.abs(w - (lanes - 1) / 2) / Math.max(1, (lanes - 1) / 2);
+		for (let k = 0; k < segs; k++) {
+			const a = (k / segs) * 2 * Math.PI;
+			// the undulation: two traveling waves along the band; wobMul
+			// scales the deformation — 0 is a clean band
+			const wob =
+				(0.16 * Math.sin(a * 3 - t * 1.7 + w * 0.22) + 0.07 * Math.sin(a * 5 + t * 1.1)) *
+				(o.wobMul ?? 1);
+			// A normal-direction wobble is cancelled by the re-normalisation below:
+			// the point lands back on the sphere, so the silhouette is pinned at R
+			// and the deformation can only ever pull dots inward. Face-on instead
+			// modulates the in-plane RADIUS, so lobes genuinely swell outward and
+			// pinch inward. Ribbon keeps the original out-of-plane sash wobble.
+			const radial = o.faceOn ? 1 + wob : 1;
+			const off = o.faceOn ? laneOff : laneOff + wob;
+			const x = ux * Math.cos(a) + vx * Math.sin(a) + nx * off;
+			const y = uy * Math.cos(a) + vy * Math.sin(a) + ny * off;
+			const z = uz * Math.cos(a) + vz * Math.sin(a) + nz * off;
+			const l = Math.sqrt(x * x + y * y + z * z);
+			const rr = baseR * radial;
+			const [px, py, zr] = pt((x / l) * rr, (y / l) * rr, (z / l) * rr);
+			const depth = (zr / R + 1) / 2;
+			dots.push({
+				x: px,
+				y: py,
+				z: zr,
+				r: ((o.rBase ?? 1.1) + (o.rDepth ?? 1.7) * depth) * (1 - 0.25 * edge) * rs,
+				white: 0.52 - 0.44 * depth + 0.18 * edge,
+				a: 0.4 + 0.6 * depth,
+			});
+		}
+	}
+	paint(ctx, dots, dark, o.rMin);
+};

package/src/engine/types.ts

@@ -0,0 +1,14 @@
+// Engine-level contracts shared by every mode implementation.
+
+import type { ModeOpts } from './profiles';
+
+export type { Dot, Line } from './core';
+
+/** One frame painter: draws a mode into a 2D context at CSS-px `size`. */
+export type ModeDraw = (
+	ctx: CanvasRenderingContext2D,
+	size: number,
+	t: number,
+	dark: boolean,
+	opts: ModeOpts,
+) => void;

package/src/engine/web.ts

@@ -0,0 +1,108 @@
+// Web: a constellation wires itself — the "connecting" state. Nodes drift
+// on the sphere under slow value noise; any pair closer than `thr` grows an
+// edge, and bright packets run along randomly re-picked node pairs.
+
+import type { Dot, Line, ModeDraw } from './types';
+import {
+	fibDir,
+	frac,
+	hashD,
+	lerp,
+	makeProj,
+	paint,
+	paintLines,
+	radiusScale,
+	vnoise,
+} from './core';
+
+export const drawWeb: ModeDraw = (ctx, size, t, dark, o) => {
+	const cx = size / 2;
+	const cy = size / 2;
+	const R = (size / 2) * 0.8 * (o.spread ?? 1);
+	// note the projector carries the radius as its scale, so node vectors stay
+	// unit-length and distances below are in unit-sphere space
+	const pt = makeProj(t * 0.12, 0.32, cx, cy, R);
+	const rs = radiusScale(size, o.rsPow ?? 0.6);
+
+	const nodeN = o.nodeN ?? 30;
+	const thr = o.thr ?? 0.72;
+	const nodeR = o.nodeR ?? 1.4;
+	const nodeRDepth = o.nodeRDepth ?? 1.8;
+
+	// nodes: fib lattice + slow noise wander, renormalised to the surface
+	const nodes: Array<[number, number, number]> = [];
+	for (let i = 0; i < nodeN; i++) {
+		const d = fibDir(i, nodeN);
+		const x = d[0] + 0.3 * (vnoise(i * 0.31 + 9, t * 0.24) - 0.5) * 2;
+		const y = d[1] + 0.3 * (vnoise(i * 0.53 + 27, t * 0.21) - 0.5) * 2;
+		const z = d[2] + 0.3 * (vnoise(i * 0.77 + 55, t * 0.27) - 0.5) * 2;
+		const l = Math.sqrt(x * x + y * y + z * z);
+		nodes.push([x / l, y / l, z / l]);
+	}
+
+	const lines: Line[] = [];
+	const dots: Dot[] = [];
+
+	// edges between close neighbours, alpha by proximity + depth
+	for (let i = 0; i < nodeN; i++) {
+		for (let j = i + 1; j < nodeN; j++) {
+			const dx = nodes[i][0] - nodes[j][0];
+			const dy = nodes[i][1] - nodes[j][1];
+			const dz = nodes[i][2] - nodes[j][2];
+			const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
+			if (dist >= thr) continue;
+			const [x1, y1, z1] = pt(nodes[i][0], nodes[i][1], nodes[i][2]);
+			const [x2, y2, z2] = pt(nodes[j][0], nodes[j][1], nodes[j][2]);
+			const depth = ((z1 + z2) / 2 + 1) / 2;
+			lines.push({
+				x1,
+				y1,
+				x2,
+				y2,
+				white: 0.42,
+				a: (1 - dist / thr) * (0.3 + 0.55 * depth),
+				w: Math.max(0.6, (o.lineW ?? 0.8) * rs),
+			});
+		}
+	}
+
+	for (let i = 0; i < nodeN; i++) {
+		const [px, py, z] = pt(nodes[i][0], nodes[i][1], nodes[i][2]);
+		const depth = (z + 1) / 2;
+		const pulse = 1 + 0.25 * Math.sin(t * 1.4 + i * 2.7);
+		dots.push({
+			x: px,
+			y: py,
+			z,
+			r: (nodeR + nodeRDepth * depth) * pulse * rs,
+			white: 0.55 - 0.45 * depth,
+		});
+	}
+
+	// signals: bright packets running between paired nodes
+	const signals = o.signals ?? 5;
+	for (let s = 0; s < signals; s++) {
+		const seg = Math.floor(t * 0.55 + s * 7.31);
+		const a = Math.floor(hashD(seg, s * 3.1 + 1.7) * nodeN);
+		const b = Math.floor(hashD(seg, s * 5.7 + 4.2) * nodeN);
+		if (a === b) continue;
+		const f = frac(t * 0.55 + s * 7.31);
+		const x = lerp(nodes[a][0], nodes[b][0], f);
+		const y = lerp(nodes[a][1], nodes[b][1], f);
+		const z = lerp(nodes[a][2], nodes[b][2], f);
+		const l = Math.max(1e-6, Math.sqrt(x * x + y * y + z * z));
+		const [px, py, zr] = pt(x / l, y / l, z / l);
+		const depth = (zr + 1) / 2;
+		dots.push({
+			x: px,
+			y: py,
+			z: zr,
+			r: (nodeR * 1.5 + nodeRDepth * depth) * rs,
+			white: 0.05,
+			a: 0.5 + 0.5 * depth,
+		});
+	}
+
+	paintLines(ctx, lines, dark);
+	paint(ctx, dots, dark, o.rMin);
+};

package/src/index.ts

@@ -0,0 +1,6 @@
+export { ThinkingOrb } from './ThinkingOrb.tsrx';
+
+export type { ThinkingOrbProps, OrbState, OrbSize, OrbTheme } from './types';
+
+export { resolvePreset, STATE_TO_MODE, type ModeKey, type Resolved } from './presets';
+export { MODE_DRAWS } from './engine/registry';