@juspay/svelte-ui-components 4.33.1 → 4.33.3

package/dist/ThinkingOrb/orb/modes/form.js

@@ -11,13 +11,16 @@
  * split keeps "the shape's own motion" and "the camera's fixed angle on it"
  * from tangling together in the per-dot math.
  */
-import { easeInOutCubic, hashUnit, modeSizing, project, rotateX, rotateY, rotateZ } from '../space';
+import { easeInOutCubic, hashUnit, modeSizing, project, rotateX, rotateY, rotateZ, sampleSphere } from '../space';
 const TWO_PI = Math.PI * 2;
 /** The shared "reads as a form inside a square" contract: radius as a share of `size`. */
 const FORM_RADIUS_RATIO = 0.4;
 const clamp01 = (value) => Math.max(0, Math.min(1, value));
+/** How far toward transparent the farthest dot's ink goes. `paintFrame` multiplies (1 - ink) with
+ * `alpha`, so ink reaching 1 would erase the far side of a ring or ribbon however high its alpha. */
+const FAR_INK = 0.6;
 /** Nearer dots read as more saturated tint; `paintFrame` turns low ink into more of `tint`. */
-const depthToInk = (depth) => clamp01(1 - depth);
+const depthToInk = (depth) => clamp01((1 - depth) * FAR_INK);
 /** Farther dots stay at partial opacity rather than fading to nothing, so no instant reads blank. */
 const depthToAlpha = (depth) => clamp01(0.5 + depth * 0.5);
 /** Nearer dots draw a touch larger, reinforcing the depth `paintFrame`'s draw order already implies. */
@@ -40,10 +43,17 @@ const place = (point, spinAngle, tiltAngle, originPx, worldRadius, baseRadius, s
 };
 const EMPTY_STROKES = [];
 // --- composing ---------------------------------------------------------
-const RIBBON_BASE_COUNT = 260;
-const RIBBON_BASE_DOT_RADIUS = 2.2;
-const RIBBON_THREADS = { 64: 7, 32: 5, 20: 4 };
-const RIBBON_HALF_WIDTH = 0.4;
+/** Dots along each thread at 64px; `countAlongPath` keeps their spacing as the canvas shrinks. */
+const RIBBON_PER_THREAD_BASE = 36;
+/** Reference parity (BZ-6466 follow-up): upstream thinking-orbs' `ribbon` mode resolves to a
+ * ~0.9-1.1px base dot radius at 64px (its BASE_PROFILES rBase 1.1, x0.85 for this preset's `size`
+ * multiplier). This used to carry 2.2px, exactly the radius that fused composing's dots into a
+ * solid corrugated band instead of the reference's fine, individually-visible beads. */
+const RIBBON_BASE_DOT_RADIUS = 1.2;
+/** Fewer, narrower threads than a full band: at 7 threads across 0.4 rad the 64px ribbon covered
+ * most of the sphere and read as a filled ball rather than a strip of cloth. */
+const RIBBON_THREADS = { 64: 5, 32: 4, 20: 3 };
+const RIBBON_HALF_WIDTH = 0.3;
 /** The ribbon's own great circle sits tilted off the spin axis by this much,
  * so spinning genuinely sweeps its width through the frame -- a band that
  * happened to lie flat on the equator would look identical at every spin
@@ -51,7 +61,9 @@ const RIBBON_HALF_WIDTH = 0.4;
 const RIBBON_AXIS_TILT = 0.68;
 const RIBBON_RIPPLE_WAVES = 3;
 const RIBBON_RIPPLE_SPEED = 1.15;
-const RIBBON_RIPPLE_AMPLITUDE = 0.5;
+/** Kept under RIBBON_HALF_WIDTH: a ripple wider than the band itself swings the ribbon toward
+ * the pole and folds it over itself, which reads as a knot rather than cloth. */
+const RIBBON_RIPPLE_AMPLITUDE = 0.18;
 const RIBBON_THREAD_JITTER = 0.1;
 const RIBBON_SPIN_SPEED = 0.48;
 const RIBBON_CAMERA_TILT = 0.45;
@@ -60,6 +72,16 @@ const RIBBON_CAMERA_TILT = 0.45;
  * combined ink/alpha/radius fade would collapse an edge row to a speck. */
 const RIBBON_EDGE_ALPHA_FLOOR = 0.5;
 const RIBBON_EDGE_INK_LIFT = 0.22;
+/** Reference parity (BZ-6466 follow-up): upstream's `ribbon` mode fills the sphere behind the band
+ * with a faint, fully static "ghost" texture (150 dots at 64px, this preset's `spin: 0` freezing
+ * even the shared camera precession that would otherwise turn it). Ours had no such backing layer,
+ * so the ribbon read as a thin strip floating in empty space rather than cloth wrapped on a solid
+ * form -- the ribbon's own turn was the only motion on screen, with nothing to anchor it against. */
+const RIBBON_GHOST_BASE_COUNT = 110;
+const RIBBON_GHOST_RADIUS_PX = 0.5;
+const RIBBON_GHOST_INK = 0.3;
+const RIBBON_GHOST_ALPHA_BASE = 0.16;
+const RIBBON_GHOST_ALPHA_DEPTH = 0.22;
 /**
  * A ribbon of dots looped once around the sphere on its own tilted great
  * circle -- distinct from the spin axis -- rippling along its length like a
@@ -70,9 +92,22 @@ export const composing = (t, ctx) => {
     const worldRadius = ctx.size * FORM_RADIUS_RATIO;
     const originPx = ctx.size / 2;
     const threads = RIBBON_THREADS[ctx.size];
-    const perThread = Math.max(1, Math.ceil(sizing.count(RIBBON_BASE_COUNT) / threads));
+    const perThread = sizing.countAlongPath(RIBBON_PER_THREAD_BASE);
     const total = threads * perThread;
-    const dots = [];
+    const ghostCount = Math.max(20, sizing.count(RIBBON_GHOST_BASE_COUNT));
+    const dots = Array.from({ length: ghostCount }, (_unused, i) => {
+        const point = sampleSphere(i, ghostCount, worldRadius);
+        const tilted = rotateX(point, RIBBON_CAMERA_TILT);
+        const projected = project(tilted, originPx, worldRadius);
+        return {
+            x: projected.x,
+            y: projected.y,
+            depth: projected.depth,
+            radius: sizing.radius(RIBBON_GHOST_RADIUS_PX),
+            ink: RIBBON_GHOST_INK,
+            alpha: clamp01(RIBBON_GHOST_ALPHA_BASE + RIBBON_GHOST_ALPHA_DEPTH * projected.depth)
+        };
+    });
     for (let index = 0; index < total; index += 1) {
         const thread = index % threads;
         const step = Math.floor(index / threads);
@@ -102,7 +137,9 @@ export const composing = (t, ctx) => {
     return { dots, strokes: EMPTY_STROKES };
 };
 // --- breathing -----------------------------------------------------------
-const BREATHING_BASE_COUNT = 210;
+/** Dots around the ring at 64px. A ring's length grows with `size`, not its area, so this goes
+ * through `countAlongPath`: 210 area-scaled dots sat 0.65px apart at 64px and fused into a line. */
+const BREATHING_BASE_COUNT = 32;
 const BREATHING_BASE_DOT_RADIUS = 1.7;
 /** Sits below composing/shaping's ~0.4: at the peak of its breath this ring
  * already swells by its amplitude plus its shape wobble below, so a resting
@@ -125,7 +162,7 @@ export const breathing = (t, ctx) => {
     const sizing = modeSizing(ctx.size, ctx.density, ctx.dotScale);
     const worldRadius = ctx.size * BREATHING_WORLD_RADIUS_RATIO;
     const originPx = ctx.size / 2;
-    const count = sizing.count(BREATHING_BASE_COUNT);
+    const count = sizing.countAlongPath(BREATHING_BASE_COUNT);
     const breathe = Math.sin(t * BREATHING_SPEED);
     const dots = [];
     for (let index = 0; index < count; index += 1) {
@@ -144,7 +181,8 @@ export const breathing = (t, ctx) => {
     return { dots, strokes: EMPTY_STROKES };
 };
 // --- shaping ---------------------------------------------------------------
-const SHAPING_BASE_COUNT = 210;
+/** Dots around the outline at 64px, through `countAlongPath` for the same reason as breathing. */
+const SHAPING_BASE_COUNT = 36;
 const SHAPING_BASE_DOT_RADIUS = 1.7;
 const SHAPING_CYCLE_SECONDS = 12;
 // One full turn per morph cycle, so the shape and its orientation both land
@@ -169,7 +207,7 @@ export const shaping = (t, ctx) => {
     const sizing = modeSizing(ctx.size, ctx.density, ctx.dotScale);
     const worldRadius = ctx.size * FORM_RADIUS_RATIO;
     const originPx = ctx.size / 2;
-    const count = sizing.count(SHAPING_BASE_COUNT);
+    const count = sizing.countAlongPath(SHAPING_BASE_COUNT);
     const cyclePos = (((t / SHAPING_CYCLE_SECONDS) % 1) + 1) % 1;
     const phaseFloat = cyclePos * 3;
     const phaseIndex = Math.min(2, Math.floor(phaseFloat));

package/dist/ThinkingOrb/orb/modes/network.d.ts

@@ -6,7 +6,11 @@
  * projection setup below.
  */
 import type { ModeFn } from '../types';
+import type { ModeSizing } from '../space';
 /** A few nodes on a sphere; lines to near neighbours carry small travelling pulses. */
 export declare const connecting: ModeFn;
-/** Three strands wrapped around a sphere, crossing as they spiral from top to bottom. */
+/** Exported so tests that index `weaving`'s strand dots can reproduce and slice off this count,
+ * rather than duplicating the formula as a hardcoded literal. */
+export declare const weavingGhostCount: (sizing: ModeSizing) => number;
+/** Three closed strands wrapped around a sphere, crossing over and under each other as they turn. */
 export declare const weaving: ModeFn;

package/dist/ThinkingOrb/orb/modes/network.js

@@ -25,11 +25,14 @@ const squaredDistance = (a, b) => {
 // connecting -- a few nodes on a sphere, linked to their nearest neighbours,
 // with small bright pulses running along the links.
 // ---------------------------------------------------------------------------
-const NODE_BASE_COUNT = 16;
+/** A few nodes, not a molecule: at 16 nodes x 3 neighbours the 64px graph carried ~24 edges, each
+ * with its own pulse, and the pulses were lost among the nodes. */
+const NODE_BASE_COUNT = 10;
 const MIN_NODE_COUNT = 6;
-const NEIGHBOR_COUNT = 3;
+const NEIGHBOR_COUNT = 2;
 const NODE_BASE_RADIUS = 3.4;
-const PULSE_BASE_RADIUS = 2;
+/** Well under a node's radius, so a pulse reads as something travelling a link, not another node. */
+const PULSE_BASE_RADIUS = 1.4;
 const EDGE_BASE_WIDTH = 1.1;
 const NODE_ROTATE_SPEED = 0.35;
 const NODE_TILT = 0.45;
@@ -104,63 +107,90 @@ export const connecting = (t, ctx) => {
     return { dots: [...nodeDots, ...pulses], strokes };
 };
 // ---------------------------------------------------------------------------
-// weaving -- three strands spiralling from top to bottom around a sphere, offset
-// in phase so they interleave; the depth sort in `paintFrame` is what makes
-// them cross over and under each other.
+// weaving -- three closed strands wrapped around a sphere like the windings on
+// a ball of yarn; the depth sort in `paintFrame` is what makes them cross over
+// and under each other.
 // ---------------------------------------------------------------------------
 const STRAND_COUNT = 3;
-const STRAND_POINTS_BASE_COUNT = 26;
-const MIN_STRAND_POINTS = 10;
-/** Lower than a bare spiral would use: the braid swing below is what supplies
- * the winding, so the longitude term only needs to carry the strands most of
- * the way around, not add its own extra turns on top. */
-const STRAND_WRAPS = 1.1;
+/** Points around each closed strand at 64px, through `countAlongPath`. */
+const STRAND_POINTS_BASE_COUNT = 40;
+/** Enough points that a strand still draws as a curve at 20px; at 10 its segments were long
+ * enough to show as straight edges and the three strands drew an angular cage. */
+const MIN_STRAND_POINTS = 16;
+/** Each strand is a great circle tilted this far off the horizontal, and the three are turned
+ * 120 degrees apart about the vertical axis, so every pair crosses twice per turn. A pole-to-pole
+ * spiral kept projecting two strands onto nearly the same path. */
+const STRAND_INCLINATION = 0.6;
+/** A slow wave running along each strand, so the three read as threads being worked rather than
+ * three rigid hoops. Small, so the wave never folds a strand across its neighbour's path. */
+const STRAND_WAVE_COUNT = 3;
+const STRAND_WAVE_AMPLITUDE = 0.12;
+const STRAND_WAVE_SPEED = 0.9;
 const STRAND_ROTATE_SPEED = 0.3;
-const STRAND_TILT = 0.5;
+/** How far the camera looks down on the sphere: 1.1 rad, about 63 degrees. A ring turns edge-on,
+ * and draws as a straight bar, when its axis is square to the line of sight. Each ring's axis sits
+ * STRAND_INCLINATION (about 34 degrees) off vertical, and this tilt leaves the vertical about
+ * 90 - 63 = 27 degrees off the line of sight, so a ring's axis is never more than 34 + 27 = 61
+ * degrees off it. No spin angle, and so no paused frame, draws a ring flatter than about
+ * cos 61 = 48% of its width. */
+const STRAND_TILT = 1.1;
 const STRAND_DOT_BASE_RADIUS = 1.6;
 const STRAND_STROKE_BASE_WIDTH = 1.4;
-/** How many times a strand swings past its neighbours along its own pole-to-
- * pole length -- enough that a still frame always lands inside more than one
- * crossing, not so many the braid blurs into texture. */
-const STRAND_BRAID_CYCLES = 2.5;
-/** A constant 120-degree offset alone keeps the three strands in the same
- * relative order the whole way, which reads as one thick spiral rather than
- * three distinct ones. Two strands only visibly swap places, i.e. actually
- * cross, once the swing below overtakes half their 120-degree separation;
- * this sits comfortably past that so every pair of strands crosses, not just
- * wobbles toward each other. */
-const STRAND_BRAID_SWING = 1.3;
+/** At the small sizes the strand lines carry the motif and the beads only clutter it, so lines
+ * thicken and beads shrink as the canvas does. */
+const STRAND_STROKE_SIZE_FACTOR = { 64: 1, 32: 1.2, 20: 1.5 };
+const STRAND_DOT_SIZE_FACTOR = { 64: 1, 32: 0.85, 20: 0.7 };
+/** Depth still dims a strand's far side, but only this far, so no stretch of it disappears. */
+const STRAND_DEPTH_INK = 0.45;
+/** A slight per-strand shade; the paths and their over/under crossings are what separate them. */
+const STRAND_SHADE_STEP = 0.1;
+/** Reference parity (BZ-6466 follow-up): upstream's `braid` mode fills the sphere behind the
+ * strands with a faint, static-in-object-space "ghost" texture (150 dots at 64px) that shares the
+ * strands' own turn, so the strands read as plaiting round a solid ball rather than floating loops
+ * in empty space. Ours had no such backing layer. Always appended after every strand's dots, so
+ * code and tests that index `dots` by strand can slice it off by a known, reproducible count. */
+const STRAND_GHOST_BASE_COUNT = 110;
+const STRAND_GHOST_RADIUS_PX = 0.5;
+const STRAND_GHOST_INK = 0.3;
+/** With STRAND_GHOST_INK 0.3, `inkAlpha` = (1-ink)*alpha = 0.7*alpha, so this needs to clear
+ * 0.1/0.7 for the "nothing paints below 10% opacity" contract even on a ghost dot's far side. */
+const STRAND_GHOST_ALPHA_BASE = 0.16;
+const STRAND_GHOST_ALPHA_DEPTH = 0.22;
+/** Exported so tests that index `weaving`'s strand dots can reproduce and slice off this count,
+ * rather than duplicating the formula as a hardcoded literal. */
+export const weavingGhostCount = (sizing) => Math.max(20, sizing.count(STRAND_GHOST_BASE_COUNT));
 const strandBaseAngle = (strand) => (strand / STRAND_COUNT) * Math.PI * 2;
 /**
- * The `pointIndex`-th of `pointsPerStrand` points of `strand`, spiralling
- * from the top of the sphere to the bottom. Each strand's longitude oscillates around its own
- * 120-degree slot (the braid swing) on top of the shared spiral term, so
- * strands actually change places rather than staying a fixed distance apart;
- * folding `t` into the shared longitude term spins the whole braid rigidly,
- * which is what keeps every point exactly on the sphere at every instant.
+ * The `pointIndex`-th of `pointsPerStrand` points around closed `strand`: a
+ * great circle (the first and last points meet) with a small wave in latitude
+ * travelling along it, inclined by `STRAND_INCLINATION`, turned to its own
+ * 120-degree slot and spun with the rest. Latitude and longitude keep every
+ * point exactly on the sphere, whatever the wave does.
  */
 const strandPoint = (strand, pointIndex, pointsPerStrand, sphereRadius, t) => {
-    const u = pointIndex / (pointsPerStrand - 1);
-    const phi = u * Math.PI - Math.PI / 2;
-    const y = sphereRadius * Math.sin(phi);
-    const ringRadius = sphereRadius * Math.cos(phi);
-    const base = strandBaseAngle(strand);
-    const swing = STRAND_BRAID_SWING * Math.sin(u * STRAND_BRAID_CYCLES * Math.PI * 2 + base);
-    const theta = u * STRAND_WRAPS * Math.PI * 2 + base + swing + t * STRAND_ROTATE_SPEED;
-    const spun = { x: ringRadius * Math.cos(theta), y, z: ringRadius * Math.sin(theta) };
-    return rotateX(spun, STRAND_TILT);
+    const u = (pointIndex / (pointsPerStrand - 1)) * Math.PI * 2;
+    const latitude = STRAND_WAVE_AMPLITUDE *
+        Math.sin(u * STRAND_WAVE_COUNT + t * STRAND_WAVE_SPEED + strandBaseAngle(strand));
+    const onCircle = {
+        x: sphereRadius * Math.cos(latitude) * Math.cos(u),
+        y: sphereRadius * Math.sin(latitude),
+        z: sphereRadius * Math.cos(latitude) * Math.sin(u)
+    };
+    const inclined = rotateX(onCircle, STRAND_INCLINATION);
+    const turned = rotateY(inclined, strandBaseAngle(strand) + t * STRAND_ROTATE_SPEED);
+    return rotateX(turned, STRAND_TILT);
 };
-/** Three strands wrapped around a sphere, crossing as they spiral from top to bottom. */
+/** Three closed strands wrapped around a sphere, crossing over and under each other as they turn. */
 export const weaving = (t, ctx) => {
     const { sizing, originPx, sphereRadius } = sphereGeometry(ctx);
-    const pointsPerStrand = Math.max(MIN_STRAND_POINTS, sizing.count(STRAND_POINTS_BASE_COUNT));
+    const pointsPerStrand = Math.max(MIN_STRAND_POINTS, sizing.countAlongPath(STRAND_POINTS_BASE_COUNT));
     const strands = Array.from({ length: STRAND_COUNT }, (_, strand) => Array.from({ length: pointsPerStrand }, (_, pointIndex) => project(strandPoint(strand, pointIndex, pointsPerStrand, sphereRadius, t), originPx, sphereRadius)));
     const dots = strands.flatMap((points, strand) => points.map((p) => ({
         x: p.x,
         y: p.y,
         depth: p.depth,
-        radius: sizing.radius(STRAND_DOT_BASE_RADIUS),
-        ink: clamp01(1 - p.depth * 0.8 + strand * 0.08),
+        radius: sizing.radius(STRAND_DOT_BASE_RADIUS) * STRAND_DOT_SIZE_FACTOR[ctx.size],
+        ink: clamp01((1 - p.depth) * STRAND_DEPTH_INK + strand * STRAND_SHADE_STEP),
         alpha: 0.55 + p.depth * 0.4
     })));
     const strokes = strands.flatMap((points, strand) => points.slice(1).map((p, i) => {
@@ -172,10 +202,27 @@ export const weaving = (t, ctx) => {
             x2: p.x,
             y2: p.y,
             depth,
-            width: sizing.radius(STRAND_STROKE_BASE_WIDTH),
-            ink: clamp01(1 - depth * 0.75 + strand * 0.06),
+            width: sizing.radius(STRAND_STROKE_BASE_WIDTH) * STRAND_STROKE_SIZE_FACTOR[ctx.size],
+            ink: clamp01((1 - depth) * STRAND_DEPTH_INK + strand * STRAND_SHADE_STEP),
             alpha: 0.6 + depth * 0.35
         };
     }));
-    return { dots, strokes };
+    // Shares the strands' own spin+tilt (not their per-strand inclination/phase, which is strand
+    // geometry, not camera) so the backdrop turns together with what it is behind.
+    const ghostCount = weavingGhostCount(sizing);
+    const ghosts = Array.from({ length: ghostCount }, (_unused, i) => {
+        const point = sampleSphere(i, ghostCount, sphereRadius);
+        const spun = rotateY(point, t * STRAND_ROTATE_SPEED);
+        const tilted = rotateX(spun, STRAND_TILT);
+        const projected = project(tilted, originPx, sphereRadius);
+        return {
+            x: projected.x,
+            y: projected.y,
+            depth: projected.depth,
+            radius: sizing.radius(STRAND_GHOST_RADIUS_PX),
+            ink: STRAND_GHOST_INK,
+            alpha: clamp01(STRAND_GHOST_ALPHA_BASE + STRAND_GHOST_ALPHA_DEPTH * projected.depth)
+        };
+    });
+    return { dots: [...dots, ...ghosts], strokes };
 };

package/dist/ThinkingOrb/orb/modes/sphere.js

@@ -44,23 +44,33 @@ const toStroke = (from, to, width, ink, alpha) => ({
 /** Particles travel in short trailing arcs ("trains") rather than scattering
  * independently around their orbit -- a lone random phase per particle reads
  * as noise once density thins the count out at 32/20px, while a handful of
- * particles held close together always reads as motion along a path. */
-const WORKING_TRAIN_BASE_COUNT = 22;
-/** Keeps at least this many short arcs on screen at each size. At 32/64px the
- * area scaler alone already clears this floor, so it only bites at 20px. More
- * than one train per orbit (WORKING_ORBIT_COUNT = 6) matters because depth
- * shading fades whichever half of each orbit is on the far side of the
- * sphere at a given instant almost to the background -- one train per orbit
- * left whole quadrants with no train currently on the near side to fill
- * them; two independently-phased laps around the six orbits keeps at least
- * a couple of quadrants covered at every instant, not just on average. */
-const WORKING_MIN_TRAINS = { 64: 3, 32: 3, 20: 12 };
-const WORKING_TRAIN_LENGTH = 5;
+ * particles held close together always reads as motion along a path.
+ *
+ * Reference parity (BZ-6466 follow-up): the upstream thinking-orbs `orbits`
+ * mode this was ported from draws 12 orbits x 3 particles = 36 marks at
+ * 64px, radius ~1.2px, and reads as a sparse field of distinct particles.
+ * The previous tuning here (22 trains x 5-long, radius 2.2px = 110 marks)
+ * packed 3x the marks at ~1.7x the radius into the same arcs, so consecutive
+ * dots overlapped their own diameter and the whole thing fused into a
+ * blurred scribble instead of scattered points. */
+const WORKING_TRAIN_BASE_COUNT = 12;
+/** Keeps at least this many short arcs on screen at 64px (32/20px use WORKING_SMALL_LAYOUT). The
+ * area scaler alone already clears it at the default density; it only bites when density is low. */
+const WORKING_MIN_TRAINS_64 = 3;
+const WORKING_TRAIN_LENGTH = 3;
 /** How far apart, in radians, a train's particles trail behind its lead --
  * wide enough to read as a short curved arc, short enough to stay a cluster
  * rather than smearing back into the full-orbit scatter this replaces. */
 const WORKING_TRAIN_ARC_SPAN = 0.5;
-const WORKING_BASE_RADIUS_PX = 1.6;
+/** Reference's `orbits` mode draws particles at ~1.2px on a 64px canvas but scales them back UP
+ * at smaller sizes (2.4x at 20px) rather than shrinking further, so they stay legible once there's
+ * less room for arc spacing to keep them apart. `sizing.radius`'s sub-linear shrink-with-a-floor
+ * goes the other way, so the two sizes need their own base rather than one shared constant. */
+const WORKING_BASE_RADIUS_PX = 1.3;
+/** 32/20px (WORKING_SMALL_LAYOUT): kept at this mode's original, pre-reference-parity radius --
+ * these sizes weren't the fused-blur regression 64px was, and shrinking to match 64px's new,
+ * smaller radius here would drop dots below a legible stroke width. */
+const WORKING_SMALL_BASE_RADIUS_PX = 2.2;
 const WORKING_ORBIT_COUNT = 6;
 const WORKING_ANGULAR_SPEED = 1.1;
 /** How far an orbit's `weight` can push its dots' ink away from the shared
@@ -72,6 +82,17 @@ const WORKING_ORBIT_ALPHA_FLOOR = 0.65;
 /** A train's trailing-most particle never fades past this floor, so the arc's
  * tail stays legible instead of thinning away to nothing. */
 const WORKING_TRAIL_ALPHA_FLOOR = 0.35;
+/** Reference parity (BZ-6466 follow-up): upstream's `orbits` mode traces each orbit's full circle
+ * as a faint, static "ghost" ring of many dots (40 per orbit at 64px) UNDER the few bright
+ * travelling particles -- about 13x as many ghost dots as particles, so the ring lattice anchors
+ * the silhouette and the particles read as a sparkle on top of it. Ours had no such layer: every
+ * visible dot was one of the sweeping particles, so with only 6-22 of them the whole silhouette
+ * reshaped every frame instead of holding a roughly stable shape -- the actual "fluidity" gap a
+ * static/moving frame comparison alone doesn't show. */
+const WORKING_GHOST_DOTS_PER_ORBIT = 40;
+const WORKING_GHOST_RADIUS_PX = 0.7;
+const WORKING_GHOST_INK = 0.4;
+const WORKING_GHOST_ALPHA = 0.5;
 /** Every particle's own orbital plane, radius, pace and shading weight, keyed by its orbit. */
 const workingOrbit = (orbit) => {
     const seed = orbit * 31 + 7;
@@ -83,19 +104,60 @@ const workingOrbit = (orbit) => {
         weight: 0.35 + 0.65 * hashUnit(seed + 15)
     };
 };
+/** At 32/20px six randomly tilted orbits of short arcs collapse into one busy cluster: each arc is
+ * only a few px long and the orbits overlap. These sizes instead spread a few orbits evenly around
+ * the view axis (like an atom symbol) and give each train a long arc, so every train draws a
+ * visible curve and the separate orbits stay readable. */
+const WORKING_SMALL_LAYOUT = {
+    // Shorter trains than before (was 6/7): at the smaller shared radius above, a longer train's
+    // dots sat closer together than their own diameter and fused the same way 64px did.
+    32: { orbits: 4, trainLength: 4, arcSpan: 0.75 },
+    20: { orbits: 3, trainLength: 4, arcSpan: 0.9 }
+};
+/** How far each small-size orbit tips out of edge-on. Its projection is an ellipse sin(tilt) as
+ * tall as it is wide; near 1 rad every orbit projects to nearly the same circle and rolling it
+ * about the view axis changes nothing, so the orbits merged into one ring. */
+const WORKING_SMALL_ORBIT_TILT = 0.5;
+/** At 32/20px each orbit's path is drawn as a faint thin ellipse under its trains: a 20px train
+ * alone is too short to show which ellipse it is travelling, so without the path the trains read
+ * as a pinwheel rather than as particles circling several tilted orbits. */
+const WORKING_PATH_SEGMENTS = 24;
+const WORKING_PATH_WIDTH_PX = 0.8;
+const WORKING_PATH_INK = 0.5;
+const WORKING_PATH_ALPHA = 0.45;
+const WORKING_SMALL_ORBIT_RADIUS = 0.85;
+const WORKING_SMALL_SPEEDS = [0.8, 1.15, 1.45, 1];
+/** One orbit of the small-size layout: shared tilt, rolled evenly around the view axis. */
+const workingSmallOrbit = (orbit, orbits) => ({
+    ...workingOrbit(orbit),
+    tilt: WORKING_SMALL_ORBIT_TILT,
+    roll: (orbit / orbits) * Math.PI,
+    orbitRadiusFactor: WORKING_SMALL_ORBIT_RADIUS,
+    speedFactor: WORKING_SMALL_SPEEDS[orbit % WORKING_SMALL_SPEEDS.length]
+});
 export const working = (t, ctx) => {
     const sizing = modeSizing(ctx.size, ctx.density, ctx.dotScale);
     const origin = originOf(ctx);
     const worldRadius = worldRadiusOf(ctx);
-    const trainCount = Math.max(WORKING_MIN_TRAINS[ctx.size], sizing.count(WORKING_TRAIN_BASE_COUNT));
-    const arcStep = WORKING_TRAIN_ARC_SPAN / (WORKING_TRAIN_LENGTH - 1);
+    const small = WORKING_SMALL_LAYOUT[ctx.size];
+    // Small sizes run two opposite trains per orbit (scaled by density); 64px keeps its own swarm.
+    const lapsPerOrbit = Math.max(1, Math.round(2 * ctx.density));
+    const trainCount = small
+        ? small.orbits * lapsPerOrbit
+        : Math.max(WORKING_MIN_TRAINS_64, sizing.count(WORKING_TRAIN_BASE_COUNT));
+    const trainLength = small ? small.trainLength : WORKING_TRAIN_LENGTH;
+    const arcStep = (small ? small.arcSpan : WORKING_TRAIN_ARC_SPAN) / (trainLength - 1);
     const dots = [];
     for (let train = 0; train < trainCount; train += 1) {
-        const orbit = workingOrbit(train % WORKING_ORBIT_COUNT);
-        const leadPhase = hashUnit(train * 5 + 1) * TWO_PI;
+        const orbit = small
+            ? workingSmallOrbit(train % small.orbits, small.orbits)
+            : workingOrbit(train % WORKING_ORBIT_COUNT);
+        const leadPhase = small
+            ? (Math.floor(train / small.orbits) / lapsPerOrbit) * TWO_PI + (train % small.orbits) * 0.9
+            : hashUnit(train * 5 + 1) * TWO_PI;
         const leadAngle = leadPhase + t * WORKING_ANGULAR_SPEED * orbit.speedFactor;
         const orbitRadius = worldRadius * orbit.orbitRadiusFactor;
-        for (let slot = 0; slot < WORKING_TRAIN_LENGTH; slot += 1) {
+        for (let slot = 0; slot < trainLength; slot += 1) {
             const angle = leadAngle - slot * arcStep;
             const planar = {
                 x: Math.cos(angle) * orbitRadius,
@@ -106,17 +168,57 @@ export const working = (t, ctx) => {
             const point = rotateZ(tilted, orbit.roll);
             const projected = project(point, origin, worldRadius);
             const seed = train * 13 + slot * 7 + 2;
-            const trail = 1 - slot / (WORKING_TRAIN_LENGTH - 1);
+            const trail = 1 - slot / (trainLength - 1);
             const ink = shadeByDepth(projected.depth) +
                 (hashUnit(seed) - 0.5) * 0.08 -
                 (orbit.weight - 0.5) * WORKING_ORBIT_INK_SPREAD;
             const alpha = (WORKING_TRAIL_ALPHA_FLOOR + (1 - WORKING_TRAIL_ALPHA_FLOOR) * trail) *
                 (WORKING_ORBIT_ALPHA_FLOOR + (1 - WORKING_ORBIT_ALPHA_FLOOR) * orbit.weight);
-            const radius = sizing.radius(WORKING_BASE_RADIUS_PX) * (0.75 + 0.5 * hashUnit(seed + 3));
+            const radiusBase = small ? WORKING_SMALL_BASE_RADIUS_PX : WORKING_BASE_RADIUS_PX;
+            const radius = sizing.radius(radiusBase) * (0.9 + 0.25 * hashUnit(seed + 3));
             dots.push(toDot(projected, radius, ink, alpha));
         }
     }
-    return { dots, strokes: [] };
+    // 64px only: 32/20px already anchor their orbits with the faint stroke path below, drawn for
+    // every size in WORKING_SMALL_LAYOUT.
+    if (!small) {
+        const ghostDotsPerOrbit = Math.max(8, sizing.countAlongPath(WORKING_GHOST_DOTS_PER_ORBIT));
+        for (let orbitIndex = 0; orbitIndex < WORKING_ORBIT_COUNT; orbitIndex += 1) {
+            const orbit = workingOrbit(orbitIndex);
+            const orbitRadius = worldRadius * orbit.orbitRadiusFactor;
+            for (let k = 0; k < ghostDotsPerOrbit; k += 1) {
+                const angle = (k / ghostDotsPerOrbit) * TWO_PI;
+                const planar = {
+                    x: Math.cos(angle) * orbitRadius,
+                    y: 0,
+                    z: Math.sin(angle) * orbitRadius
+                };
+                const tilted = rotateX(planar, orbit.tilt);
+                const point = rotateZ(tilted, orbit.roll);
+                const projected = project(point, origin, worldRadius);
+                dots.push(toDot(projected, sizing.radius(WORKING_GHOST_RADIUS_PX), WORKING_GHOST_INK, WORKING_GHOST_ALPHA * (0.4 + 0.6 * projected.depth)));
+            }
+        }
+    }
+    const paths = small
+        ? Array.from({ length: small.orbits }, (_unused, orbitIndex) => {
+            const orbit = workingSmallOrbit(orbitIndex, small.orbits);
+            const orbitRadius = worldRadius * orbit.orbitRadiusFactor;
+            const points = Array.from({ length: WORKING_PATH_SEGMENTS + 1 }, (_unusedPoint, j) => {
+                const angle = (j / WORKING_PATH_SEGMENTS) * TWO_PI;
+                const planar = {
+                    x: Math.cos(angle) * orbitRadius,
+                    y: 0,
+                    z: Math.sin(angle) * orbitRadius
+                };
+                return project(rotateZ(rotateX(planar, orbit.tilt), orbit.roll), origin, worldRadius);
+            });
+            return points
+                .slice(1)
+                .map((to, j) => toStroke(points[j], to, sizing.radius(WORKING_PATH_WIDTH_PX), WORKING_PATH_INK, WORKING_PATH_ALPHA));
+        }).flat()
+        : [];
+    return { dots, strokes: paths };
 };
 // ---------------------------------------------------------------------------
 // searching -- a dotted globe with a meridian band sweeping around it
@@ -183,10 +285,16 @@ export const searching = (t, ctx) => {
 };
 // ---------------------------------------------------------------------------
 // solving -- tiers that snap a quarter turn out of alignment, hold scrambled,
-// then resolve back, on a loop. Landmark dots and fixed seam rings make the
-// misalignment legible: an otherwise-uniform, evenly-sampled dot texture
-// looks identical under any rotation about the spin axis, so turning a
-// "band" of it invisibly wouldn't read as scrambling at all.
+// then resolve back, on a loop. Each tier's own texture dots rotate with it
+// (reference parity, BZ-6466 follow-up: matching upstream thinking-orbs'
+// `rubik`, which reads solved-vs-scrambled off this same per-band rotation
+// alone), so the misalignment shows as a visible discontinuity in the dot
+// pattern itself; oversized landmark dots add a brighter set of accent
+// points per tier. An earlier tuning also drew fixed seam rings and
+// per-landmark meridian strokes to make the misalignment legible, but next
+// to the reference that wireframe read as a busy skeleton the upstream
+// version doesn't have, so it's gone -- the texture's own rotation already
+// carries the same information.
 // ---------------------------------------------------------------------------
 const SOLVING_BASE_COUNT = 130;
 const SOLVING_BASE_RADIUS_PX = 1.5;
@@ -200,16 +308,13 @@ const SOLVING_TILT = -0.5;
  * cluster relative to its neighbours instead of only reshuffling texture
  * that looks the same before and after. */
 const SOLVING_LANDMARKS_PER_TIER = 3;
+/** One phase for every tier, so in the solved pose each tier's landmarks line up into the same
+ * three columns and a turned tier visibly breaks out of them. A per-tier phase scattered them
+ * even when solved, leaving nothing for a turn to disturb. */
+const SOLVING_LANDMARK_PHASE = hashUnit(5) * TWO_PI;
 const SOLVING_LANDMARK_RADIUS_PX = 3.1;
 const SOLVING_LANDMARK_INK_BOOST = 0.45;
 const SOLVING_LANDMARK_ALPHA = 0.9;
-/** A static ring of short strokes at each cut between tiers, unaffected by
- * any turn, so the "cut into bands" structure reads even while the puzzle
- * sits solved and nothing is moving. */
-const SOLVING_SEAM_SEGMENTS = 12;
-const SOLVING_SEAM_STROKE_RADIUS = 1.05;
-const SOLVING_SEAM_INK = 0.15;
-const SOLVING_SEAM_ALPHA = 0.5;
 const solvingTurnStart = (tier) => tier * SOLVING_TURN_GAP;
 const solvingTurnEnd = (tier) => solvingTurnStart(tier) + SOLVING_TURN_DURATION;
 const SOLVING_HOLD_START = solvingTurnEnd(SOLVING_TIER_COUNT - 1) + SOLVING_HOLD_GAP;
@@ -243,8 +348,6 @@ const solvingTierOf = (yUnit) => clamp(Math.floor(((1 - yUnit) / 2) * SOLVING_TI
 const solvingTierDirection = (tier) => (hashUnit(tier * 53 + 21) < 0.5 ? -1 : 1);
 /** The y-unit (-1..1) at the centre of a tier's latitude band. */
 const solvingTierCenterYUnit = (tier) => 1 - (2 * tier + 1) / SOLVING_TIER_COUNT;
-/** The y-unit (-1..1) of the fixed cut between one tier and the next. */
-const solvingSeamYUnit = (seam) => 1 - (2 * (seam + 1)) / SOLVING_TIER_COUNT;
 const solvingTurnAngle = (tier, cyclePos) => solvingTierTurn(tier, cyclePos) * solvingTierDirection(tier) * (Math.PI / 2);
 export const solving = (t, ctx) => {
     const sizing = modeSizing(ctx.size, ctx.density, ctx.dotScale);
@@ -270,8 +373,7 @@ export const solving = (t, ctx) => {
         const yUnit = solvingTierCenterYUnit(tier);
         const y = yUnit * worldRadius;
         const ringRadius = Math.sqrt(Math.max(0, 1 - yUnit * yUnit)) * worldRadius;
-        const phase = hashUnit(tier * 29 + 5) * TWO_PI;
-        const longitude = phase + (slot / SOLVING_LANDMARKS_PER_TIER) * TWO_PI;
+        const longitude = SOLVING_LANDMARK_PHASE + (slot / SOLVING_LANDMARKS_PER_TIER) * TWO_PI;
         const base = {
             x: Math.cos(longitude) * ringRadius,
             y,
@@ -283,23 +385,7 @@ export const solving = (t, ctx) => {
         const ink = shadeByDepth(projected.depth) - SOLVING_LANDMARK_INK_BOOST;
         return toDot(projected, sizing.radius(SOLVING_LANDMARK_RADIUS_PX), ink, SOLVING_LANDMARK_ALPHA);
     });
-    const seamWidth = sizing.radius(SOLVING_SEAM_STROKE_RADIUS);
-    const seams = Array.from({ length: SOLVING_TIER_COUNT - 1 }, (_unused, seam) => {
-        const yUnit = solvingSeamYUnit(seam);
-        const y = yUnit * worldRadius;
-        const ringRadius = Math.sqrt(Math.max(0, 1 - yUnit * yUnit)) * worldRadius;
-        const ringPoints = Array.from({ length: SOLVING_SEAM_SEGMENTS + 1 }, (_unusedPoint, j) => {
-            const angle = (j / SOLVING_SEAM_SEGMENTS) * TWO_PI;
-            const point = {
-                x: Math.cos(angle) * ringRadius,
-                y,
-                z: Math.sin(angle) * ringRadius
-            };
-            return project(rotateX(point, SOLVING_TILT), origin, worldRadius);
-        });
-        return Array.from({ length: SOLVING_SEAM_SEGMENTS }, (_unusedSegment, j) => toStroke(ringPoints[j], ringPoints[j + 1], seamWidth, SOLVING_SEAM_INK, SOLVING_SEAM_ALPHA));
-    }).flat();
-    return { dots: [...texture, ...landmarks], strokes: seams };
+    return { dots: [...texture, ...landmarks], strokes: [] };
 };
 // ---------------------------------------------------------------------------
 // listening -- stacked horizontal rings with a wave rolling through them
@@ -307,13 +393,17 @@ export const solving = (t, ctx) => {
 /** Fewer, fatter rings at the smaller presets read as distinct stacked bands;
  * six thin rings at 20px used to compress into a single smudge. */
 const LISTENING_RING_COUNT = { 64: 5, 32: 4, 20: 3 };
+/** Dots per ring at 64px, through `countAlongPath` so 32px keeps a denser ring than 20px
+ * instead of both falling to the minimum below. */
 const LISTENING_DOTS_PER_RING_BASE = 26;
 /** A ring below this many dots reads as a loose cluster of points rather than
  * a line, especially once it is a small ellipse at 20px. */
 const LISTENING_MIN_DOTS_PER_RING = 10;
 const LISTENING_BASE_RADIUS_PX = 1.5;
 const LISTENING_WAVE_SPEED = 0.6;
-const LISTENING_SWELL = 0.55;
+/** How much a ring's dots grow as the wave crests through it. At 0.55 the crest ate most of the
+ * gap between rings at 32/20px, where the rings sit only a few px apart. */
+const LISTENING_SWELL = 0.3;
 const LISTENING_LIFT_INK = 0.45;
 const LISTENING_SPIN_SPEED = 0.12;
 /** A ring's own vertical thickness once tilted is (its radius) x sin(tilt); a
@@ -322,10 +412,10 @@ const LISTENING_SPIN_SPEED = 0.12;
  * neighbouring rings' ellipses swallow the empty space between them. Kept
  * shallow rather than flattened to zero so a ring still reads as an ellipse
  * seen slightly from above, not a flat line. */
-const LISTENING_TILT = -0.13;
+const LISTENING_TILT = -0.1;
 /** Rings are stacked between +/- this fraction of the world radius, short of
  * the poles so the top and bottom rings stay full circles, not points. */
-const LISTENING_Y_SPAN = 0.82;
+const LISTENING_Y_SPAN = 0.86;
 const listeningRing = (ring, ringCount, worldRadius) => {
     const yUnit = (-1 + (2 * ring + 1) / ringCount) * LISTENING_Y_SPAN;
     const y = yUnit * worldRadius;
@@ -339,8 +429,7 @@ export const listening = (t, ctx) => {
     const origin = originOf(ctx);
     const worldRadius = worldRadiusOf(ctx);
     const ringCount = LISTENING_RING_COUNT[ctx.size];
-    const totalBase = ringCount * LISTENING_DOTS_PER_RING_BASE;
-    const dotsPerRing = Math.max(LISTENING_MIN_DOTS_PER_RING, Math.round(sizing.count(totalBase) / ringCount));
+    const dotsPerRing = Math.max(LISTENING_MIN_DOTS_PER_RING, sizing.countAlongPath(LISTENING_DOTS_PER_RING_BASE));
     const dots = Array.from({ length: ringCount }, (_unused, r) => {
         const ring = listeningRing(r, ringCount, worldRadius);
         const wave = ring.wave(t);

package/dist/ThinkingOrb/orb/space.d.ts

@@ -18,9 +18,13 @@ export type Projected = {
     depth: number;
     scale: number;
 };
-/** The two scalers `modeSizing` hands back: multiply a mode's own base counts and radii by them. */
+/** The scalers `modeSizing` hands back: multiply a mode's own base counts and radii by them. */
 export type ModeSizing = {
+    /** For marks spread over an area (a swarm, a globe's surface): scales with `size` squared. */
     count: (base: number) => number;
+    /** For marks spaced along a line (a ring, a thread): scales with `size`, so the gap between
+     * neighbours keeps the same share of the canvas at every size instead of closing up. */
+    countAlongPath: (base: number) => number;
     radius: (base: number) => number;
 };
 /** Rotates a point about the X axis (mixes y and z). */
@@ -57,7 +61,8 @@ export declare const hashUnit: (seed: number) => number;
 /**
  * Turns `(size, density, dotScale)` into a count scaler and a radius scaler,
  * so every mode derives its dot counts and radii the same way instead of
- * keeping its own per-size table. Counts scale with area (`size` squared);
+ * keeping its own per-size table. Counts scale with area (`size` squared) for
+ * marks spread over a surface and with `size` for marks spaced along a path;
  * radii grow sub-linearly, with a floor that keeps dots visible at 20px.
  */
 export declare const modeSizing: (size: ModeSize, density: number, dotScale: number) => ModeSizing;

package/dist/ThinkingOrb/orb/space.js

@@ -100,7 +100,8 @@ const MIN_DOT_RADIUS_PX = 0.6;
 /**
  * Turns `(size, density, dotScale)` into a count scaler and a radius scaler,
  * so every mode derives its dot counts and radii the same way instead of
- * keeping its own per-size table. Counts scale with area (`size` squared);
+ * keeping its own per-size table. Counts scale with area (`size` squared) for
+ * marks spread over a surface and with `size` for marks spaced along a path;
  * radii grow sub-linearly, with a floor that keeps dots visible at 20px.
  */
 export const modeSizing = (size, density, dotScale) => {
@@ -110,6 +111,7 @@ export const modeSizing = (size, density, dotScale) => {
     const safeDotScale = dotScale > 0 ? dotScale : 0.1;
     return {
         count: (base) => Math.max(1, Math.round(base * areaRatio * safeDensity)),
+        countAlongPath: (base) => Math.max(1, Math.round(base * sizeRatio * safeDensity)),
         radius: (base) => Math.max(MIN_DOT_RADIUS_PX, base * sizeRatio ** RADIUS_GROWTH_EXPONENT * safeDotScale)
     };
 };

package/dist-wc/index.js

@@ -24017,6 +24017,7 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 	let i = e / REFERENCE_SIZE, a = i * i, o = t > 0 ? t : .1, s = n > 0 ? n : .1;
 	return {
 		count: (e) => Math.max(1, Math.round(e * a * o)),
+		countAlongPath: (e) => Math.max(1, Math.round(e * i * o)),
 		radius: (e) => Math.max(MIN_DOT_RADIUS_PX, e * i ** RADIUS_GROWTH_EXPONENT * s)
 	};
 }, GRAVITY_DEFAULTS = {
@@ -24078,11 +24079,7 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 	width: n,
 	ink: clamp01$2(i),
 	alpha: clamp01$2(a)
-}), WORKING_TRAIN_BASE_COUNT = 22, WORKING_MIN_TRAINS = {
-	64: 3,
-	32: 3,
-	20: 12
-}, WORKING_TRAIN_LENGTH = 5, WORKING_TRAIN_ARC_SPAN = .5, WORKING_BASE_RADIUS_PX = 1.6, WORKING_ORBIT_COUNT = 6, WORKING_ANGULAR_SPEED = 1.1, WORKING_ORBIT_INK_SPREAD = .3, WORKING_ORBIT_ALPHA_FLOOR = .65, WORKING_TRAIL_ALPHA_FLOOR = .35, workingOrbit = (e) => {
+}), WORKING_TRAIN_BASE_COUNT = 12, WORKING_MIN_TRAINS_64 = 3, WORKING_TRAIN_LENGTH = 3, WORKING_TRAIN_ARC_SPAN = .5, WORKING_BASE_RADIUS_PX = 1.3, WORKING_SMALL_BASE_RADIUS_PX = 2.2, WORKING_ORBIT_COUNT = 6, WORKING_ANGULAR_SPEED = 1.1, WORKING_ORBIT_INK_SPREAD = .3, WORKING_ORBIT_ALPHA_FLOOR = .65, WORKING_TRAIL_ALPHA_FLOOR = .35, WORKING_GHOST_DOTS_PER_ORBIT = 40, WORKING_GHOST_RADIUS_PX = .7, WORKING_GHOST_INK = .4, WORKING_GHOST_ALPHA = .5, workingOrbit = (e) => {
 	let t = e * 31 + 7;
 	return {
 		tilt: (hashUnit(t) - .5) * Math.PI,
@@ -24091,22 +24088,68 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 		speedFactor: .6 + 1.3 * hashUnit(t + 9),
 		weight: .35 + .65 * hashUnit(t + 15)
 	};
-}, working = (e, t) => {
-	let n = modeSizing(t.size, t.density, t.dotScale), i = originOf(t), a = worldRadiusOf(t), o = Math.max(WORKING_MIN_TRAINS[t.size], n.count(WORKING_TRAIN_BASE_COUNT)), s = WORKING_TRAIN_ARC_SPAN / (WORKING_TRAIN_LENGTH - 1), c = [];
-	for (let t = 0; t < o; t += 1) {
-		let o = workingOrbit(t % WORKING_ORBIT_COUNT), l = hashUnit(t * 5 + 1) * TWO_PI$1 + e * WORKING_ANGULAR_SPEED * o.speedFactor, u = a * o.orbitRadiusFactor;
-		for (let e = 0; e < WORKING_TRAIN_LENGTH; e += 1) {
-			let f = l - e * s, p = project(rotateZ(rotateX({
-				x: Math.cos(f) * u,
+}, WORKING_SMALL_LAYOUT = {
+	32: {
+		orbits: 4,
+		trainLength: 4,
+		arcSpan: .75
+	},
+	20: {
+		orbits: 3,
+		trainLength: 4,
+		arcSpan: .9
+	}
+}, WORKING_SMALL_ORBIT_TILT = .5, WORKING_PATH_SEGMENTS = 24, WORKING_PATH_WIDTH_PX = .8, WORKING_PATH_INK = .5, WORKING_PATH_ALPHA = .45, WORKING_SMALL_ORBIT_RADIUS = .85, WORKING_SMALL_SPEEDS = [
+	.8,
+	1.15,
+	1.45,
+	1
+], workingSmallOrbit = (e, t) => ({
+	...workingOrbit(e),
+	tilt: WORKING_SMALL_ORBIT_TILT,
+	roll: e / t * Math.PI,
+	orbitRadiusFactor: WORKING_SMALL_ORBIT_RADIUS,
+	speedFactor: WORKING_SMALL_SPEEDS[e % WORKING_SMALL_SPEEDS.length]
+}), working = (e, t) => {
+	let n = modeSizing(t.size, t.density, t.dotScale), i = originOf(t), a = worldRadiusOf(t), o = WORKING_SMALL_LAYOUT[t.size], s = Math.max(1, Math.round(2 * t.density)), c = o ? o.orbits * s : Math.max(WORKING_MIN_TRAINS_64, n.count(WORKING_TRAIN_BASE_COUNT)), l = o ? o.trainLength : WORKING_TRAIN_LENGTH, u = (o ? o.arcSpan : WORKING_TRAIN_ARC_SPAN) / (l - 1), f = [];
+	for (let t = 0; t < c; t += 1) {
+		let c = o ? workingSmallOrbit(t % o.orbits, o.orbits) : workingOrbit(t % WORKING_ORBIT_COUNT), p = (o ? Math.floor(t / o.orbits) / s * TWO_PI$1 + t % o.orbits * .9 : hashUnit(t * 5 + 1) * TWO_PI$1) + e * WORKING_ANGULAR_SPEED * c.speedFactor, h = a * c.orbitRadiusFactor;
+		for (let e = 0; e < l; e += 1) {
+			let s = p - e * u, S = project(rotateZ(rotateX({
+				x: Math.cos(s) * h,
 				y: 0,
-				z: Math.sin(f) * u
-			}, o.tilt), o.roll), i, a), h = t * 13 + e * 7 + 2, S = 1 - e / (WORKING_TRAIN_LENGTH - 1), C = shadeByDepth(p.depth) + (hashUnit(h) - .5) * .08 - (o.weight - .5) * WORKING_ORBIT_INK_SPREAD, k = (WORKING_TRAIL_ALPHA_FLOOR + (1 - WORKING_TRAIL_ALPHA_FLOOR) * S) * (WORKING_ORBIT_ALPHA_FLOOR + (1 - WORKING_ORBIT_ALPHA_FLOOR) * o.weight), R = n.radius(WORKING_BASE_RADIUS_PX) * (.75 + .5 * hashUnit(h + 3));
-			c.push(toDot(p, R, C, k));
+				z: Math.sin(s) * h
+			}, c.tilt), c.roll), i, a), C = t * 13 + e * 7 + 2, k = 1 - e / (l - 1), R = shadeByDepth(S.depth) + (hashUnit(C) - .5) * .08 - (c.weight - .5) * WORKING_ORBIT_INK_SPREAD, te = (WORKING_TRAIL_ALPHA_FLOOR + (1 - WORKING_TRAIL_ALPHA_FLOOR) * k) * (WORKING_ORBIT_ALPHA_FLOOR + (1 - WORKING_ORBIT_ALPHA_FLOOR) * c.weight), ne = o ? WORKING_SMALL_BASE_RADIUS_PX : WORKING_BASE_RADIUS_PX, re = n.radius(ne) * (.9 + .25 * hashUnit(C + 3));
+			f.push(toDot(S, re, R, te));
+		}
+	}
+	if (!o) {
+		let e = Math.max(8, n.countAlongPath(WORKING_GHOST_DOTS_PER_ORBIT));
+		for (let t = 0; t < WORKING_ORBIT_COUNT; t += 1) {
+			let o = workingOrbit(t), s = a * o.orbitRadiusFactor;
+			for (let t = 0; t < e; t += 1) {
+				let c = t / e * TWO_PI$1, l = project(rotateZ(rotateX({
+					x: Math.cos(c) * s,
+					y: 0,
+					z: Math.sin(c) * s
+				}, o.tilt), o.roll), i, a);
+				f.push(toDot(l, n.radius(WORKING_GHOST_RADIUS_PX), WORKING_GHOST_INK, WORKING_GHOST_ALPHA * (.4 + .6 * l.depth)));
+			}
 		}
 	}
 	return {
-		dots: c,
-		strokes: []
+		dots: f,
+		strokes: o ? Array.from({ length: o.orbits }, (e, t) => {
+			let s = workingSmallOrbit(t, o.orbits), c = a * s.orbitRadiusFactor, l = Array.from({ length: 25 }, (e, t) => {
+				let n = t / WORKING_PATH_SEGMENTS * TWO_PI$1;
+				return project(rotateZ(rotateX({
+					x: Math.cos(n) * c,
+					y: 0,
+					z: Math.sin(n) * c
+				}, s.tilt), s.roll), i, a);
+			});
+			return l.slice(1).map((e, t) => toStroke(l[t], e, n.radius(WORKING_PATH_WIDTH_PX), WORKING_PATH_INK, WORKING_PATH_ALPHA));
+		}).flat() : []
 	};
 }, SEARCHING_BASE_COUNT = 150, SEARCHING_BASE_RADIUS_PX = 1.5, SEARCHING_BAND_HALF_WIDTH = .42, SEARCHING_SWEEP_SPEED = 1.15, SEARCHING_SPIN_SPEED = .18, SEARCHING_TILT = -.55, SEARCHING_ARC_SEGMENTS = 10, SEARCHING_ARC_LATITUDE_SPAN = .92, SEARCHING_BAND_INK_BOOST = .75, SEARCHING_BAND_ALPHA_BOOST = .35, SEARCHING_BAND_RADIUS_BOOST = 1.3, SEARCHING_ARC_STROKE_RADIUS = 2.2, SEARCHING_ARC_INK = 0, SEARCHING_ARC_ALPHA = .7, angleDistance = (e, t) => {
 	let n = Math.abs(e - t) % TWO_PI$1;
@@ -24127,40 +24170,30 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 		dots: c,
 		strokes: Array.from({ length: SEARCHING_ARC_SEGMENTS }, (e, t) => toStroke(l[t], l[t + 1], u, SEARCHING_ARC_INK, SEARCHING_ARC_ALPHA))
 	};
-}, SOLVING_BASE_COUNT = 130, SOLVING_BASE_RADIUS_PX = 1.5, SOLVING_TIER_COUNT = 4, SOLVING_TURN_DURATION = .16, SOLVING_TURN_GAP = .3, SOLVING_HOLD_GAP = .55, SOLVING_TILT = -.5, SOLVING_LANDMARKS_PER_TIER = 3, SOLVING_LANDMARK_RADIUS_PX = 3.1, SOLVING_LANDMARK_INK_BOOST = .45, SOLVING_LANDMARK_ALPHA = .9, SOLVING_SEAM_SEGMENTS = 12, SOLVING_SEAM_STROKE_RADIUS = 1.05, SOLVING_SEAM_INK = .15, SOLVING_SEAM_ALPHA = .5, solvingTurnStart = (e) => e * SOLVING_TURN_GAP, solvingTurnEnd = (e) => solvingTurnStart(e) + SOLVING_TURN_DURATION, SOLVING_HOLD_START = solvingTurnEnd(SOLVING_TIER_COUNT - 1) + SOLVING_HOLD_GAP, solvingReturnStart = (e) => SOLVING_HOLD_START + (SOLVING_TIER_COUNT - 1 - e) * SOLVING_TURN_GAP, solvingReturnEnd = (e) => solvingReturnStart(e) + SOLVING_TURN_DURATION, SOLVING_CYCLE = solvingReturnEnd(0) + SOLVING_HOLD_GAP, solvingTierTurn = (e, t) => {
+}, SOLVING_BASE_COUNT = 130, SOLVING_BASE_RADIUS_PX = 1.5, SOLVING_TIER_COUNT = 4, SOLVING_TURN_DURATION = .16, SOLVING_TURN_GAP = .3, SOLVING_HOLD_GAP = .55, SOLVING_TILT = -.5, SOLVING_LANDMARKS_PER_TIER = 3, SOLVING_LANDMARK_PHASE = hashUnit(5) * TWO_PI$1, SOLVING_LANDMARK_RADIUS_PX = 3.1, SOLVING_LANDMARK_INK_BOOST = .45, SOLVING_LANDMARK_ALPHA = .9, solvingTurnStart = (e) => e * SOLVING_TURN_GAP, solvingTurnEnd = (e) => solvingTurnStart(e) + SOLVING_TURN_DURATION, SOLVING_HOLD_START = solvingTurnEnd(SOLVING_TIER_COUNT - 1) + SOLVING_HOLD_GAP, solvingReturnStart = (e) => SOLVING_HOLD_START + (SOLVING_TIER_COUNT - 1 - e) * SOLVING_TURN_GAP, solvingReturnEnd = (e) => solvingReturnStart(e) + SOLVING_TURN_DURATION, SOLVING_CYCLE = solvingReturnEnd(0) + SOLVING_HOLD_GAP, solvingTierTurn = (e, t) => {
 	let n = solvingTurnStart(e), i = solvingTurnEnd(e), a = solvingReturnStart(e), o = solvingReturnEnd(e);
 	return t <= n ? 0 : t < i ? easeOutCubic((t - n) / SOLVING_TURN_DURATION) : t < a ? 1 : t < o ? 1 - easeInOutCubic((t - a) / SOLVING_TURN_DURATION) : 0;
-}, solvingTierOf = (e) => clamp$1(Math.floor((1 - e) / 2 * SOLVING_TIER_COUNT), 0, SOLVING_TIER_COUNT - 1), solvingTierDirection = (e) => hashUnit(e * 53 + 21) < .5 ? -1 : 1, solvingTierCenterYUnit = (e) => 1 - (2 * e + 1) / SOLVING_TIER_COUNT, solvingSeamYUnit = (e) => 1 - 2 * (e + 1) / SOLVING_TIER_COUNT, solvingTurnAngle = (e, t) => solvingTierTurn(e, t) * solvingTierDirection(e) * (Math.PI / 2), solving = (e, t) => {
+}, solvingTierOf = (e) => clamp$1(Math.floor((1 - e) / 2 * SOLVING_TIER_COUNT), 0, SOLVING_TIER_COUNT - 1), solvingTierDirection = (e) => hashUnit(e * 53 + 21) < .5 ? -1 : 1, solvingTierCenterYUnit = (e) => 1 - (2 * e + 1) / SOLVING_TIER_COUNT, solvingTurnAngle = (e, t) => solvingTierTurn(e, t) * solvingTierDirection(e) * (Math.PI / 2), solving = (e, t) => {
 	let n = modeSizing(t.size, t.density, t.dotScale), i = originOf(t), a = worldRadiusOf(t), o = n.count(SOLVING_BASE_COUNT), s = e - SOLVING_CYCLE * Math.floor(e / SOLVING_CYCLE), c = Array.from({ length: o }, (e, t) => {
 		let c = sampleSphere(t, o, a), l = project(rotateX(rotateY(c, solvingTurnAngle(solvingTierOf(a > 0 ? c.y / a : 0), s)), SOLVING_TILT), i, a), u = shadeByDepth(l.depth), f = .55 + .3 * hashUnit(t * 3 + 9);
 		return toDot(l, n.radius(SOLVING_BASE_RADIUS_PX), u, f);
 	}), l = Array.from({ length: SOLVING_TIER_COUNT * SOLVING_LANDMARKS_PER_TIER }, (e, t) => {
-		let o = Math.floor(t / SOLVING_LANDMARKS_PER_TIER), c = t % SOLVING_LANDMARKS_PER_TIER, l = solvingTierCenterYUnit(o), u = l * a, f = Math.sqrt(Math.max(0, 1 - l * l)) * a, p = hashUnit(o * 29 + 5) * TWO_PI$1 + c / SOLVING_LANDMARKS_PER_TIER * TWO_PI$1, h = project(rotateX(rotateY({
+		let o = Math.floor(t / SOLVING_LANDMARKS_PER_TIER), c = t % SOLVING_LANDMARKS_PER_TIER, l = solvingTierCenterYUnit(o), u = l * a, f = Math.sqrt(Math.max(0, 1 - l * l)) * a, p = SOLVING_LANDMARK_PHASE + c / SOLVING_LANDMARKS_PER_TIER * TWO_PI$1, h = project(rotateX(rotateY({
 			x: Math.cos(p) * f,
 			y: u,
 			z: Math.sin(p) * f
 		}, solvingTurnAngle(o, s)), SOLVING_TILT), i, a), S = shadeByDepth(h.depth) - SOLVING_LANDMARK_INK_BOOST;
 		return toDot(h, n.radius(SOLVING_LANDMARK_RADIUS_PX), S, SOLVING_LANDMARK_ALPHA);
-	}), u = n.radius(SOLVING_SEAM_STROKE_RADIUS), f = Array.from({ length: SOLVING_TIER_COUNT - 1 }, (e, t) => {
-		let n = solvingSeamYUnit(t), o = n * a, s = Math.sqrt(Math.max(0, 1 - n * n)) * a, c = Array.from({ length: 13 }, (e, t) => {
-			let n = t / SOLVING_SEAM_SEGMENTS * TWO_PI$1;
-			return project(rotateX({
-				x: Math.cos(n) * s,
-				y: o,
-				z: Math.sin(n) * s
-			}, SOLVING_TILT), i, a);
-		});
-		return Array.from({ length: SOLVING_SEAM_SEGMENTS }, (e, t) => toStroke(c[t], c[t + 1], u, SOLVING_SEAM_INK, SOLVING_SEAM_ALPHA));
-	}).flat();
+	});
 	return {
 		dots: [...c, ...l],
-		strokes: f
+		strokes: []
 	};
 }, LISTENING_RING_COUNT = {
 	64: 5,
 	32: 4,
 	20: 3
-}, LISTENING_DOTS_PER_RING_BASE = 26, LISTENING_MIN_DOTS_PER_RING = 10, LISTENING_BASE_RADIUS_PX = 1.5, LISTENING_WAVE_SPEED = .6, LISTENING_SWELL = .55, LISTENING_LIFT_INK = .45, LISTENING_SPIN_SPEED = .12, LISTENING_TILT = -.13, LISTENING_Y_SPAN = .82, listeningRing = (e, t, n) => {
+}, LISTENING_DOTS_PER_RING_BASE = 26, LISTENING_MIN_DOTS_PER_RING = 10, LISTENING_BASE_RADIUS_PX = 1.5, LISTENING_WAVE_SPEED = .6, LISTENING_SWELL = .3, LISTENING_LIFT_INK = .45, LISTENING_SPIN_SPEED = .12, LISTENING_TILT = -.1, LISTENING_Y_SPAN = .86, listeningRing = (e, t, n) => {
 	let i = (-1 + (2 * e + 1) / t) * LISTENING_Y_SPAN * n;
 	return {
 		y: i,
@@ -24169,15 +24202,15 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 		wave: (n) => (Math.sin(TWO_PI$1 * (e / t - n * LISTENING_WAVE_SPEED)) + 1) / 2
 	};
 }, listening = (e, t) => {
-	let n = modeSizing(t.size, t.density, t.dotScale), i = originOf(t), a = worldRadiusOf(t), o = LISTENING_RING_COUNT[t.size], s = o * LISTENING_DOTS_PER_RING_BASE, c = Math.max(LISTENING_MIN_DOTS_PER_RING, Math.round(n.count(s) / o));
+	let n = modeSizing(t.size, t.density, t.dotScale), i = originOf(t), a = worldRadiusOf(t), o = LISTENING_RING_COUNT[t.size], s = Math.max(LISTENING_MIN_DOTS_PER_RING, n.countAlongPath(LISTENING_DOTS_PER_RING_BASE));
 	return {
-		dots: Array.from({ length: o }, (t, s) => {
-			let l = listeningRing(s, o, a), u = l.wave(e);
-			return Array.from({ length: c }, (t, o) => {
-				let s = o / c * TWO_PI$1 + l.phase, f = project(rotateY(rotateX({
-					x: Math.cos(s) * l.ringRadius,
+		dots: Array.from({ length: o }, (t, c) => {
+			let l = listeningRing(c, o, a), u = l.wave(e);
+			return Array.from({ length: s }, (t, o) => {
+				let c = o / s * TWO_PI$1 + l.phase, f = project(rotateY(rotateX({
+					x: Math.cos(c) * l.ringRadius,
 					y: l.y,
-					z: Math.sin(s) * l.ringRadius
+					z: Math.sin(c) * l.ringRadius
 				}, LISTENING_TILT), e * LISTENING_SPIN_SPEED), i, a), p = shadeByDepth(f.depth) - u * LISTENING_LIFT_INK, h = .6 + u * .3;
 				return toDot(f, n.radius(LISTENING_BASE_RADIUS_PX) * (1 + u * LISTENING_SWELL), p, h);
 			});
@@ -24191,7 +24224,7 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 }), squaredDistance = (e, t) => {
 	let n = e.x - t.x, i = e.y - t.y, a = e.z - t.z;
 	return n * n + i * i + a * a;
-}, NODE_BASE_COUNT = 16, MIN_NODE_COUNT = 6, NEIGHBOR_COUNT = 3, NODE_BASE_RADIUS = 3.4, PULSE_BASE_RADIUS = 2, EDGE_BASE_WIDTH = 1.1, NODE_ROTATE_SPEED = .35, NODE_TILT = .45, EDGE_FLICKER_SPEED = .5, EDGE_MIN_ALPHA = .25, PULSE_SPEED = .6, nearestNeighborEdges = (e, t) => {
+}, NODE_BASE_COUNT = 10, MIN_NODE_COUNT = 6, NEIGHBOR_COUNT = 2, NODE_BASE_RADIUS = 3.4, PULSE_BASE_RADIUS = 1.4, EDGE_BASE_WIDTH = 1.1, NODE_ROTATE_SPEED = .35, NODE_TILT = .45, EDGE_FLICKER_SPEED = .5, EDGE_MIN_ALPHA = .25, PULSE_SPEED = .6, nearestNeighborEdges = (e, t) => {
 	let n = e.map((e, t) => t), i = n.flatMap((i) => n.filter((e) => e !== i).sort((t, n) => squaredDistance(e[i], e[t]) - squaredDistance(e[i], e[n])).slice(0, t).map((e) => i < e ? [i, e] : [e, i]));
 	return i.filter(([e, t], n) => i.findIndex(([n, i]) => n === e && i === t) === n);
 }, connecting = (e, t) => {
@@ -24229,69 +24262,97 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 		dots: [...l, ...p],
 		strokes: f
 	};
-}, STRAND_COUNT = 3, STRAND_POINTS_BASE_COUNT = 26, MIN_STRAND_POINTS = 10, STRAND_WRAPS = 1.1, STRAND_ROTATE_SPEED = .3, STRAND_TILT = .5, STRAND_DOT_BASE_RADIUS = 1.6, STRAND_STROKE_BASE_WIDTH = 1.4, STRAND_BRAID_CYCLES = 2.5, STRAND_BRAID_SWING = 1.3, strandBaseAngle = (e) => e / STRAND_COUNT * Math.PI * 2, strandPoint = (e, t, n, i, a) => {
-	let o = t / (n - 1), s = o * Math.PI - Math.PI / 2, c = i * Math.sin(s), l = i * Math.cos(s), u = strandBaseAngle(e), f = STRAND_BRAID_SWING * Math.sin(o * STRAND_BRAID_CYCLES * Math.PI * 2 + u), p = o * STRAND_WRAPS * Math.PI * 2 + u + f + a * STRAND_ROTATE_SPEED;
-	return rotateX({
-		x: l * Math.cos(p),
-		y: c,
-		z: l * Math.sin(p)
-	}, STRAND_TILT);
+}, STRAND_COUNT = 3, STRAND_POINTS_BASE_COUNT = 40, MIN_STRAND_POINTS = 16, STRAND_INCLINATION = .6, STRAND_WAVE_COUNT = 3, STRAND_WAVE_AMPLITUDE = .12, STRAND_WAVE_SPEED = .9, STRAND_ROTATE_SPEED = .3, STRAND_TILT = 1.1, STRAND_DOT_BASE_RADIUS = 1.6, STRAND_STROKE_BASE_WIDTH = 1.4, STRAND_STROKE_SIZE_FACTOR = {
+	64: 1,
+	32: 1.2,
+	20: 1.5
+}, STRAND_DOT_SIZE_FACTOR = {
+	64: 1,
+	32: .85,
+	20: .7
+}, STRAND_DEPTH_INK = .45, STRAND_SHADE_STEP = .1, STRAND_GHOST_BASE_COUNT = 110, STRAND_GHOST_RADIUS_PX = .5, STRAND_GHOST_INK = .3, STRAND_GHOST_ALPHA_BASE = .16, STRAND_GHOST_ALPHA_DEPTH = .22, weavingGhostCount = (e) => Math.max(20, e.count(STRAND_GHOST_BASE_COUNT)), strandBaseAngle = (e) => e / STRAND_COUNT * Math.PI * 2, strandPoint = (e, t, n, i, a) => {
+	let o = t / (n - 1) * Math.PI * 2, s = STRAND_WAVE_AMPLITUDE * Math.sin(o * STRAND_WAVE_COUNT + a * STRAND_WAVE_SPEED + strandBaseAngle(e));
+	return rotateX(rotateY(rotateX({
+		x: i * Math.cos(s) * Math.cos(o),
+		y: i * Math.sin(s),
+		z: i * Math.cos(s) * Math.sin(o)
+	}, STRAND_INCLINATION), strandBaseAngle(e) + a * STRAND_ROTATE_SPEED), STRAND_TILT);
 }, weaving = (e, t) => {
-	let { sizing: n, originPx: i, sphereRadius: a } = sphereGeometry(t), o = Math.max(MIN_STRAND_POINTS, n.count(STRAND_POINTS_BASE_COUNT)), s = Array.from({ length: STRAND_COUNT }, (t, n) => Array.from({ length: o }, (t, s) => project(strandPoint(n, s, o, a, e), i, a)));
+	let { sizing: n, originPx: i, sphereRadius: a } = sphereGeometry(t), o = Math.max(MIN_STRAND_POINTS, n.countAlongPath(STRAND_POINTS_BASE_COUNT)), s = Array.from({ length: STRAND_COUNT }, (t, n) => Array.from({ length: o }, (t, s) => project(strandPoint(n, s, o, a, e), i, a))), c = s.flatMap((e, i) => e.map((e) => ({
+		x: e.x,
+		y: e.y,
+		depth: e.depth,
+		radius: n.radius(STRAND_DOT_BASE_RADIUS) * STRAND_DOT_SIZE_FACTOR[t.size],
+		ink: clamp01$1((1 - e.depth) * STRAND_DEPTH_INK + i * STRAND_SHADE_STEP),
+		alpha: .55 + e.depth * .4
+	}))), l = s.flatMap((e, i) => e.slice(1).map((a, o) => {
+		let s = e[o], c = (s.depth + a.depth) / 2;
+		return {
+			x1: s.x,
+			y1: s.y,
+			x2: a.x,
+			y2: a.y,
+			depth: c,
+			width: n.radius(STRAND_STROKE_BASE_WIDTH) * STRAND_STROKE_SIZE_FACTOR[t.size],
+			ink: clamp01$1((1 - c) * STRAND_DEPTH_INK + i * STRAND_SHADE_STEP),
+			alpha: .6 + c * .35
+		};
+	})), u = weavingGhostCount(n), f = Array.from({ length: u }, (t, o) => {
+		let s = project(rotateX(rotateY(sampleSphere(o, u, a), e * STRAND_ROTATE_SPEED), STRAND_TILT), i, a);
+		return {
+			x: s.x,
+			y: s.y,
+			depth: s.depth,
+			radius: n.radius(STRAND_GHOST_RADIUS_PX),
+			ink: STRAND_GHOST_INK,
+			alpha: clamp01$1(STRAND_GHOST_ALPHA_BASE + STRAND_GHOST_ALPHA_DEPTH * s.depth)
+		};
+	});
 	return {
-		dots: s.flatMap((e, t) => e.map((e) => ({
-			x: e.x,
-			y: e.y,
-			depth: e.depth,
-			radius: n.radius(STRAND_DOT_BASE_RADIUS),
-			ink: clamp01$1(1 - e.depth * .8 + t * .08),
-			alpha: .55 + e.depth * .4
-		}))),
-		strokes: s.flatMap((e, t) => e.slice(1).map((i, a) => {
-			let o = e[a], s = (o.depth + i.depth) / 2;
-			return {
-				x1: o.x,
-				y1: o.y,
-				x2: i.x,
-				y2: i.y,
-				depth: s,
-				width: n.radius(STRAND_STROKE_BASE_WIDTH),
-				ink: clamp01$1(1 - s * .75 + t * .06),
-				alpha: .6 + s * .35
-			};
-		}))
+		dots: [...c, ...f],
+		strokes: l
 	};
-}, TWO_PI = Math.PI * 2, FORM_RADIUS_RATIO = .4, clamp01 = (e) => Math.max(0, Math.min(1, e)), depthToInk = (e) => clamp01(1 - e), depthToAlpha = (e) => clamp01(.5 + e * .5), depthToRadiusFactor = (e) => .7 + e * .3, dotFrom = (e, t, n, i) => ({
+}, TWO_PI = Math.PI * 2, FORM_RADIUS_RATIO = .4, clamp01 = (e) => Math.max(0, Math.min(1, e)), FAR_INK = .6, depthToInk = (e) => clamp01((1 - e) * FAR_INK), depthToAlpha = (e) => clamp01(.5 + e * .5), depthToRadiusFactor = (e) => .7 + e * .3, dotFrom = (e, t, n, i) => ({
 	x: e.x,
 	y: e.y,
 	depth: e.depth,
 	radius: n.radius(t) * depthToRadiusFactor(e.depth) * i,
 	ink: depthToInk(e.depth),
 	alpha: depthToAlpha(e.depth)
-}), place = (e, t, n, i, a, o, s, c) => dotFrom(project(rotateX(rotateY(e, t), n), i, a), o, s, c), EMPTY_STROKES = [], RIBBON_BASE_COUNT = 260, RIBBON_BASE_DOT_RADIUS = 2.2, RIBBON_THREADS = {
-	64: 7,
-	32: 5,
-	20: 4
-}, RIBBON_HALF_WIDTH = .4, RIBBON_AXIS_TILT = .68, RIBBON_RIPPLE_WAVES = 3, RIBBON_RIPPLE_SPEED = 1.15, RIBBON_RIPPLE_AMPLITUDE = .5, RIBBON_THREAD_JITTER = .1, RIBBON_SPIN_SPEED = .48, RIBBON_CAMERA_TILT = .45, RIBBON_EDGE_ALPHA_FLOOR = .5, RIBBON_EDGE_INK_LIFT = .22, composing = (e, t) => {
-	let n = modeSizing(t.size, t.density, t.dotScale), i = t.size * FORM_RADIUS_RATIO, a = t.size / 2, o = RIBBON_THREADS[t.size], s = Math.max(1, Math.ceil(n.count(RIBBON_BASE_COUNT) / o)), c = o * s, l = [];
+}), place = (e, t, n, i, a, o, s, c) => dotFrom(project(rotateX(rotateY(e, t), n), i, a), o, s, c), EMPTY_STROKES = [], RIBBON_PER_THREAD_BASE = 36, RIBBON_BASE_DOT_RADIUS = 1.2, RIBBON_THREADS = {
+	64: 5,
+	32: 4,
+	20: 3
+}, RIBBON_HALF_WIDTH = .3, RIBBON_AXIS_TILT = .68, RIBBON_RIPPLE_WAVES = 3, RIBBON_RIPPLE_SPEED = 1.15, RIBBON_RIPPLE_AMPLITUDE = .18, RIBBON_THREAD_JITTER = .1, RIBBON_SPIN_SPEED = .48, RIBBON_CAMERA_TILT = .45, RIBBON_EDGE_ALPHA_FLOOR = .5, RIBBON_EDGE_INK_LIFT = .22, RIBBON_GHOST_BASE_COUNT = 110, RIBBON_GHOST_RADIUS_PX = .5, RIBBON_GHOST_INK = .3, RIBBON_GHOST_ALPHA_BASE = .16, RIBBON_GHOST_ALPHA_DEPTH = .22, composing = (e, t) => {
+	let n = modeSizing(t.size, t.density, t.dotScale), i = t.size * FORM_RADIUS_RATIO, a = t.size / 2, o = RIBBON_THREADS[t.size], s = n.countAlongPath(RIBBON_PER_THREAD_BASE), c = o * s, l = Math.max(20, n.count(RIBBON_GHOST_BASE_COUNT)), u = Array.from({ length: l }, (e, t) => {
+		let o = project(rotateX(sampleSphere(t, l, i), RIBBON_CAMERA_TILT), a, i);
+		return {
+			x: o.x,
+			y: o.y,
+			depth: o.depth,
+			radius: n.radius(RIBBON_GHOST_RADIUS_PX),
+			ink: RIBBON_GHOST_INK,
+			alpha: clamp01(RIBBON_GHOST_ALPHA_BASE + RIBBON_GHOST_ALPHA_DEPTH * o.depth)
+		};
+	});
 	for (let t = 0; t < c; t += 1) {
-		let c = t % o, u = Math.floor(t / o), f = o > 1 ? c / (o - 1) * 2 - 1 : 0, p = u / s * TWO_PI, h = Math.sin(p * RIBBON_RIPPLE_WAVES + e * RIBBON_RIPPLE_SPEED) * RIBBON_RIPPLE_AMPLITUDE, S = f * RIBBON_HALF_WIDTH + h, C = rotateZ({
+		let c = t % o, l = Math.floor(t / o), f = o > 1 ? c / (o - 1) * 2 - 1 : 0, p = l / s * TWO_PI, h = Math.sin(p * RIBBON_RIPPLE_WAVES + e * RIBBON_RIPPLE_SPEED) * RIBBON_RIPPLE_AMPLITUDE, S = f * RIBBON_HALF_WIDTH + h, C = rotateZ({
 			x: Math.cos(S) * Math.cos(p) * i,
 			y: Math.sin(S) * i,
 			z: Math.cos(S) * Math.sin(p) * i
 		}, RIBBON_AXIS_TILT), k = 1 - RIBBON_THREAD_JITTER / 2 + hashUnit(t * 7 + 1) * RIBBON_THREAD_JITTER, R = place(C, e * RIBBON_SPIN_SPEED, RIBBON_CAMERA_TILT, a, i, RIBBON_BASE_DOT_RADIUS, n, k), te = Math.abs(f);
-		l.push({
+		u.push({
 			...R,
 			ink: clamp01(R.ink + te * RIBBON_EDGE_INK_LIFT),
 			alpha: clamp01(R.alpha * (1 - te * (1 - RIBBON_EDGE_ALPHA_FLOOR)))
 		});
 	}
 	return {
-		dots: l,
+		dots: u,
 		strokes: EMPTY_STROKES
 	};
-}, BREATHING_BASE_COUNT = 210, BREATHING_BASE_DOT_RADIUS = 1.7, BREATHING_WORLD_RADIUS_RATIO = .34, BREATHING_AMPLITUDE = .09, BREATHING_SPEED = .55, BREATHING_SHAPE_HARMONIC = 5, BREATHING_SHAPE_SPEED = .22, BREATHING_SHAPE_AMPLITUDE = .035, BREATHING_SPIN_SPEED = .12, BREATHING_TILT = .62, breathing = (e, t) => {
-	let n = modeSizing(t.size, t.density, t.dotScale), i = t.size * BREATHING_WORLD_RADIUS_RATIO, a = t.size / 2, o = n.count(BREATHING_BASE_COUNT), s = Math.sin(e * BREATHING_SPEED), c = [];
+}, BREATHING_BASE_COUNT = 32, BREATHING_BASE_DOT_RADIUS = 1.7, BREATHING_WORLD_RADIUS_RATIO = .34, BREATHING_AMPLITUDE = .09, BREATHING_SPEED = .55, BREATHING_SHAPE_HARMONIC = 5, BREATHING_SHAPE_SPEED = .22, BREATHING_SHAPE_AMPLITUDE = .035, BREATHING_SPIN_SPEED = .12, BREATHING_TILT = .62, breathing = (e, t) => {
+	let n = modeSizing(t.size, t.density, t.dotScale), i = t.size * BREATHING_WORLD_RADIUS_RATIO, a = t.size / 2, o = n.countAlongPath(BREATHING_BASE_COUNT), s = Math.sin(e * BREATHING_SPEED), c = [];
 	for (let t = 0; t < o; t += 1) {
 		let l = t / o * TWO_PI, u = Math.sin(l * BREATHING_SHAPE_HARMONIC + e * BREATHING_SHAPE_SPEED) * BREATHING_SHAPE_AMPLITUDE, f = 1 + s * BREATHING_AMPLITUDE + u, p = {
 			x: Math.cos(l) * f * i,
@@ -24304,11 +24365,11 @@ var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
 		dots: c,
 		strokes: EMPTY_STROKES
 	};
-}, SHAPING_BASE_COUNT = 210, SHAPING_BASE_DOT_RADIUS = 1.7, SHAPING_CYCLE_SECONDS = 12, SHAPING_SPIN_SPEED = 2 * Math.PI / SHAPING_CYCLE_SECONDS, SHAPING_TILT = .6, polygonRadius = (e, t) => {
+}, SHAPING_BASE_COUNT = 36, SHAPING_BASE_DOT_RADIUS = 1.7, SHAPING_CYCLE_SECONDS = 12, SHAPING_SPIN_SPEED = 2 * Math.PI / SHAPING_CYCLE_SECONDS, SHAPING_TILT = .6, polygonRadius = (e, t) => {
 	let n = TWO_PI / t, i = n / 2, a = (e % n + n) % n;
 	return Math.cos(i) / Math.cos(a - i);
 }, lerp = (e, t, n) => e + (t - e) * n, shaping = (e, t) => {
-	let n = modeSizing(t.size, t.density, t.dotScale), i = t.size * FORM_RADIUS_RATIO, a = t.size / 2, o = n.count(SHAPING_BASE_COUNT), s = (e / SHAPING_CYCLE_SECONDS % 1 + 1) % 1 * 3, c = Math.min(2, Math.floor(s)), l = easeInOutCubic(s - c), u = [];
+	let n = modeSizing(t.size, t.density, t.dotScale), i = t.size * FORM_RADIUS_RATIO, a = t.size / 2, o = n.countAlongPath(SHAPING_BASE_COUNT), s = (e / SHAPING_CYCLE_SECONDS % 1 + 1) % 1 * 3, c = Math.min(2, Math.floor(s)), l = easeInOutCubic(s - c), u = [];
 	for (let t = 0; t < o; t += 1) {
 		let s = t / o * TWO_PI, f = polygonRadius(s, 3), p = polygonRadius(s, 4), h;
 		h = c === 0 ? lerp(1, f, l) : c === 1 ? lerp(f, p, l) : lerp(p, 1, l);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "4.33.1",
+  "version": "4.33.3",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",