@unoverse-platform/studio 0.1.25 → 0.1.27

package/vendor/sdk/lib/orb/engine/core.ts

@@ -0,0 +1,157 @@
+// Shared primitives for the dotted 3D thought-orbs. Ported from inkform
+// (PlotterLab's HalftoneSphere lineage): honestly 3D — rotated,
+// depth-shaded, z-sorted. Depth is carried by dot size and ink weight
+// alone. Plain 2D canvas fills only: no ctx.filter, no SVG filters, so
+// every mode renders identically in Chrome, Safari and Firefox.
+
+export interface Dot {
+  x: number;
+  y: number;
+  z: number;
+  r: number;
+  /** Ink value: 0 = darkest ink on paper. Mirrored on dark themes. */
+  white: number;
+  a?: number;
+}
+
+/** A stroked edge between two projected points (the `connecting` web). */
+export interface Line {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  /** Ink value, same convention as `Dot.white`. */
+  white: number;
+  a?: number;
+  w: number;
+}
+
+export type Projector = (x: number, y: number, z: number) => [number, number, number];
+
+export function lerp(a: number, b: number, f: number): number {
+  return a + (b - a) * f;
+}
+
+export function frac(x: number): number {
+  return x - Math.floor(x);
+}
+
+/** Value noise on a 2D lattice — smooth, deterministic, cheap. */
+export function vnoise(x: number, y: number): number {
+  const xi = Math.floor(x);
+  const yi = Math.floor(y);
+  let fx = x - xi;
+  let fy = y - yi;
+  fx = fx * fx * (3 - 2 * fx);
+  fy = fy * fy * (3 - 2 * fy);
+  const a = hashD(xi, yi);
+  const b = hashD(xi + 1, yi);
+  const c = hashD(xi, yi + 1);
+  const d = hashD(xi + 1, yi + 1);
+  return a + (b - a) * fx + (c - a) * fy + (a - b - c + d) * fx * fy;
+}
+
+/** Deterministic hash in [0, 1). */
+export function hashD(a: number, b: number): number {
+  const h = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;
+  return h - Math.floor(h);
+}
+
+/** Stable directions on a unit sphere (Fibonacci lattice). */
+export function fibDir(i: number, n: number): [number, number, number] {
+  const golden = Math.PI * (3 - Math.sqrt(5));
+  const y = 1 - (2 * (i + 0.5)) / n;
+  const rad = Math.sqrt(1 - y * y);
+  const a = i * golden;
+  return [rad * Math.cos(a), y, rad * Math.sin(a)];
+}
+
+/** Shortest signed angular distance, wrapped to (-π, π]. */
+export function angleDelta(a: number, b: number): number {
+  return Math.atan2(Math.sin(a - b), Math.cos(a - b));
+}
+
+/** Shared spin + tilt + orthographic projection. */
+export function makeProj(yaw: number, tilt: number, cx: number, cy: number, scale: number): Projector {
+  const st = Math.sin(tilt);
+  const ct = Math.cos(tilt);
+  const sy = Math.sin(yaw);
+  const cyw = Math.cos(yaw);
+  return (x, y, z) => {
+    const x1 = x * cyw + z * sy;
+    const z1 = -x * sy + z * cyw;
+    const y1 = y * ct - z1 * st;
+    const z2 = y * st + z1 * ct;
+    return [cx + x1 * scale, cy - y1 * scale, z2];
+  };
+}
+
+/**
+ * LOCAL EXTENSION (Unoverse): an optional brand INK the painters tint toward.
+ * The upstream engine paints matte grayscale only; the design system's LAW 1
+ * says every colour is a served token, so the host resolves its `color` token
+ * and hands the rgb here before each frame. null = the upstream neutral ink.
+ * A module-level current-ink is safe because frames draw synchronously.
+ */
+let INK: [number, number, number] | null = null;
+export function setInk(rgb: [number, number, number] | null): void {
+  INK = rgb;
+}
+/** Depth-shaded channel: neutral grayscale, or the ink mixed toward the substrate. */
+function shade(w: number, dark: boolean): [number, number, number] {
+  if (!INK) {
+    const g = Math.round((dark ? 1 - w : w) * 255);
+    return [g, g, g];
+  }
+  // Light substrate: near dots (w→0) are pure ink, far dots fade to paper.
+  // Dark substrate: the ink is pre-lightened so it pops, far dots fade to black.
+  const [r, g, b] = INK;
+  const mixTo = dark ? 0 : 255;
+  const base: [number, number, number] = dark
+    ? [r + (255 - r) * 0.35, g + (255 - g) * 0.35, b + (255 - b) * 0.35]
+    : [r, g, b];
+  return [0, 1, 2].map((i) => Math.round(base[i] + (mixTo - base[i]) * w)) as [number, number, number];
+}
+
+/**
+ * Painter: z-sort far→near, matte depth-shaded dots. On dark substrates the
+ * ink value is mirrored (1 - white) so near dots read bright — the same
+ * depth language on an inverted substrate.
+ */
+export function paint(ctx: CanvasRenderingContext2D, dots: Dot[], dark: boolean, rMin = 0.3): void {
+  dots.sort((a, b) => a.z - b.z);
+  for (const d of dots) {
+    const alpha = d.a ?? 1;
+    if (alpha < 0.02) continue;
+    const w = Math.min(1, Math.max(0, d.white));
+    const [r, g, b] = shade(w, dark);
+    ctx.fillStyle = `rgba(${r},${g},${b},${alpha})`;
+    ctx.beginPath();
+    ctx.arc(d.x, d.y, Math.max(rMin, d.r), 0, Math.PI * 2);
+    ctx.fill();
+  }
+}
+
+/** Stroke pass for edge-based modes. Runs before `paint` so nodes sit on top. */
+export function paintLines(ctx: CanvasRenderingContext2D, lines: Line[], dark: boolean): void {
+  for (const l of lines) {
+    const alpha = l.a ?? 1;
+    if (alpha < 0.02) continue;
+    const w = Math.min(1, Math.max(0, l.white));
+    const [r, g, b] = shade(w, dark);
+    ctx.strokeStyle = `rgba(${r},${g},${b},${alpha})`;
+    ctx.lineWidth = l.w;
+    ctx.beginPath();
+    ctx.moveTo(l.x1, l.y1);
+    ctx.lineTo(l.x2, l.y2);
+    ctx.stroke();
+  }
+}
+
+/**
+ * Dot radii were tuned for a 300pt frame; sub-linear scaling keeps small
+ * spinners legible. Lower pow = radii shrink less with size.
+ */
+export function radiusScale(size: number, pow: number): number {
+  return (size / 300) ** pow;
+}

package/vendor/sdk/lib/orb/engine/lattice.ts

@@ -0,0 +1,205 @@
+// The sphere-lattice modes: globe (searching), rubik (solving) and
+// wave (listening). All draw a lat/long dot field with mode-specific
+// motion, then hand off to the shared z-sorted painter.
+
+import type { Dot, ModeDraw } from './types';
+import { angleDelta, hashD, makeProj, paint, radiusScale } from './core';
+
+// --- the shared solver heartbeat (rubik) ------------------------------
+// Rapid eased moves scramble, then replay in reverse (palindrome) so
+// everything clicks back to solved, rests, repeats.
+
+interface Move {
+  axis: 0 | 1 | 2;
+  lo: number;
+  hi: number;
+  ang: number;
+}
+
+function solveCycle(time: number, count: number, slotDur: number, rest: number) {
+  const cyc = 2 * count * slotDur + rest;
+  const tc = time % cyc;
+  const amount = new Array<number>(count).fill(0);
+  let active = -1;
+  if (tc < 2 * count * slotDur) {
+    const slot = Math.floor(tc / slotDur);
+    const p = (tc - slot * slotDur) / slotDur;
+    const cl = Math.min(1, p / 0.7);
+    const ep = 1 - (1 - cl) ** 3; // machine ease-out
+    if (slot < count) {
+      for (let i = 0; i < slot; i++) amount[i] = 1;
+      amount[slot] = ep;
+      active = slot;
+    } else {
+      const u = 2 * count - 1 - slot;
+      for (let i = 0; i < u; i++) amount[i] = 1;
+      amount[u] = 1 - ep;
+      active = u;
+    }
+  }
+  return { amount, active };
+}
+
+function applyMoves(
+  pt3: [number, number, number],
+  moves: Move[],
+  sc: { amount: number[]; active: number }
+): [number, number, number, boolean] {
+  let [x, y, z] = pt3;
+  let inActive = false;
+  for (let i = 0; i < moves.length; i++) {
+    if (sc.amount[i] <= 0) continue;
+    const mv = moves[i];
+    const coord = mv.axis === 0 ? x : mv.axis === 1 ? y : z;
+    if (coord < mv.lo || coord >= mv.hi) continue;
+    if (i === sc.active) inActive = true;
+    const a = mv.ang * sc.amount[i];
+    const ca = Math.cos(a);
+    const sa = Math.sin(a);
+    if (mv.axis === 0) {
+      const y2 = y * ca - z * sa;
+      z = y * sa + z * ca;
+      y = y2;
+    } else if (mv.axis === 1) {
+      const x2 = x * ca + z * sa;
+      z = -x * sa + z * ca;
+      x = x2;
+    } else {
+      const x2 = x * ca - y * sa;
+      y = x * sa + y * ca;
+      x = x2;
+    }
+  }
+  return [x, y, z, inActive];
+}
+
+function makeMoves(count: number): Move[] {
+  const moves: Move[] = [];
+  for (let i = 0; i < count; i++) {
+    const axis = Math.min(2, Math.floor(hashD(i, 2.3) * 3)) as 0 | 1 | 2;
+    const lo = -1.0 + 0.5 * Math.min(3, Math.floor(hashD(i, 5.9) * 4));
+    const dir = hashD(i, 7.7) < 0.5 ? 1 : -1;
+    moves.push({ axis, lo, hi: lo + 0.5, ang: (dir * Math.PI) / 2 });
+  }
+  return moves;
+}
+
+// --- Globe: lat/long field, a scan meridian sweeps — searching --------
+
+export const drawGlobe: ModeDraw = (ctx, size, t, dark, o) => {
+  const spin = 0.5;
+  const cx = size / 2;
+  const cy = size / 2;
+  const radius = (size / 2) * 0.82;
+  const tilt = 0.4 + 0.06 * Math.sin(t * 0.35);
+  const pt = makeProj(t * spin, tilt, cx, cy, radius);
+  // scan sweeps relative to the spin; scanMul scales that relative rate
+  const scan = t * (spin + (1.7 - spin) * (o.scanMul ?? 1));
+  const rs = radiusScale(size, o.rsPow ?? 0.6);
+  const dimBase = o.dimBase ?? 1;
+
+  const dots: Dot[] = [];
+  const latRings = o.latRings ?? 17;
+  const lonDensity = o.lonDensity ?? 44;
+  for (let li = 0; li <= latRings; li++) {
+    const lat = -Math.PI / 2 + (li / latRings) * Math.PI;
+    const cosLat = Math.cos(lat);
+    const sinLat = Math.sin(lat);
+    const lonCount = Math.max(1, Math.round(Math.abs(cosLat) * lonDensity));
+    for (let lj = 0; lj < lonCount; lj++) {
+      const lon = (lj / lonCount) * 2 * Math.PI;
+      const [px, py, z] = pt(cosLat * Math.cos(lon), sinLat, cosLat * Math.sin(lon));
+      const depth = (z + 1) / 2;
+      // the scan: a moving meridian read as a size ripple, not a shine
+      const d = angleDelta(lon + t * spin, scan);
+      const boost = Math.exp(-(d * d) / 0.18) * Math.max(0, z);
+      dots.push({
+        x: px,
+        y: py,
+        z,
+        r: ((o.rBase ?? 0.6) + (o.rDepth ?? 1.7) * depth + (o.rBoost ?? 1) * boost) * rs,
+        white: (o.inkFar ?? 0.62) - (o.inkSpan ?? 0.54) * depth,
+        // dimBase < 1 fades un-scanned dots so the meridian reads clearly
+        a: dimBase + (1 - dimBase) * Math.min(1, boost)
+      });
+    }
+  }
+  paint(ctx, dots, dark, o.rMin);
+};
+
+// --- Rubik: bands twist in quarter turns, scramble → solve — solving --
+
+export const drawRubik: 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.55, 0.35 + 0.1 * Math.sin(t * 0.9), cx, cy, R);
+  const rs = radiusScale(size, o.rsPow ?? 0.6);
+  const moveCount = o.moveCount ?? 14;
+  const moves = makeMoves(moveCount);
+  const sc = solveCycle(t, moveCount, 0.42, 1.2);
+
+  const dots: Dot[] = [];
+  const latRings = o.latRings ?? 15;
+  const lonDensity = o.lonDensity ?? 40;
+  for (let li = 0; li <= latRings; li++) {
+    const lat = -Math.PI / 2 + (li / latRings) * Math.PI;
+    const cosLat = Math.cos(lat);
+    const sinLat = Math.sin(lat);
+    const lonCount = Math.max(1, Math.round(Math.abs(cosLat) * lonDensity));
+    for (let lj = 0; lj < lonCount; lj++) {
+      const lon = (lj / lonCount) * 2 * Math.PI;
+      const [x, y, z, inActive] = applyMoves([cosLat * Math.cos(lon), sinLat, cosLat * Math.sin(lon)], moves, sc);
+      const [px, py, zr] = pt(x, y, z);
+      const depth = (zr + 1) / 2;
+      // the band being turned inks a touch darker — the "hand"
+      dots.push({
+        x: px,
+        y: py,
+        z: zr,
+        r: ((o.rBase ?? 0.6) + (o.rDepth ?? 1.7) * depth + (inActive ? (o.rActive ?? 0.3) : 0)) * rs,
+        white: (o.inkFar ?? 0.62) - (o.inkSpan ?? 0.54) * depth - (inActive ? 0.14 : 0)
+      });
+    }
+  }
+  paint(ctx, dots, dark, o.rMin);
+};
+
+// --- Wave: a waveform rolls through the rings — listening -------------
+
+export const drawWave: ModeDraw = (ctx, size, t, dark, o) => {
+  const cx = size / 2;
+  const cy = size / 2;
+  // 0.76 base × 1.15 — the undulation pulls the sphere inward, so wave read
+  // ~15% smaller than the other lattice modes; scaled up to match them
+  const R = (size / 2) * 0.874;
+  const pt = makeProj(t * 0.18, 0.38, cx, cy, 1);
+  const rs = radiusScale(size, o.rsPow ?? 0.6);
+
+  const dots: Dot[] = [];
+  const rings = o.rings ?? 15;
+  const lonDensity = o.lonDensity ?? 40;
+  for (let ri = 0; ri <= rings; ri++) {
+    const lat = -Math.PI / 2 + (ri / rings) * Math.PI;
+    const cosLat = Math.cos(lat);
+    const sinLat = Math.sin(lat);
+    // two waves, different tempi — organic, never quite repeating
+    const w = 0.62 * Math.sin(t * 2.1 - ri * 0.52) + 0.38 * Math.sin(t * 1.27 + ri * 0.83);
+    const rr = R * (0.88 + 0.105 * w);
+    const lonCount = Math.max(1, Math.round(Math.abs(cosLat) * lonDensity));
+    for (let lj = 0; lj < lonCount; lj++) {
+      const lon = (lj / lonCount) * 2 * Math.PI;
+      const [px, py, z] = pt(cosLat * Math.cos(lon) * rr, sinLat * rr, cosLat * Math.sin(lon) * rr);
+      const depth = (z / R + 1) / 2;
+      const crest = Math.max(0, w);
+      dots.push({
+        x: px,
+        y: py,
+        z,
+        r: ((o.rBase ?? 0.6) + (o.rDepth ?? 1.7) * depth) * (1 + 0.4 * crest) * rs,
+        white: 0.66 - 0.56 * depth - 0.1 * crest
+      });
+    }
+  }
+  paint(ctx, dots, dark, o.rMin);
+};

package/vendor/sdk/lib/orb/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/vendor/sdk/lib/orb/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);
+};