@mkbabb/glass-ui 4.1.0 → 4.2.0

package/dist/dot-matrix.js

@@ -1,9 +1,9 @@
-import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { t } from "./usePointerVelocityField-QLsy3_kv.js";
-import { n, o as r, r as i, s as a } from "./procedural-color.wgsl-m7Zgv35j.js";
-import { a as o, t as s } from "./useGpuSubstrate-4pTcp6mX.js";
-import { c } from "./color-Cs0-oxYL.js";
-import { a as l, c as u, d, i as f, l as p, n as m, o as h, r as g, s as _, t as v, u as y } from "./dotMatrixField-D_x9_1qq.js";
+import { t as e } from "./_plugin-vue_export-helper-gLzyemvl.js";
+import { t } from "./usePointerVelocityField-BrkqZFhj.js";
+import { n, o as r, r as i, s as a } from "./procedural-color.wgsl-C1Y5PkM6.js";
+import { a as o, t as s } from "./useGpuSubstrate-Ceet70xq.js";
+import { c } from "./color-B9jZdhJX.js";
+import { a as l, c as u, d, i as f, l as p, n as m, o as h, r as g, s as _, t as v, u as y } from "./dotMatrixField-CRO0ZFk4.js";
 import { computed as b, createElementBlock as x, createElementVNode as S, defineComponent as C, normalizeStyle as w, onScopeDispose as T, openBlock as E, useTemplateRef as D, watch as O } from "vue";
 //#region src/components/custom/dot-matrix/shaders/dot-matrix.wgsl.ts
 var k = `
@@ -13,6 +13,25 @@ const MAX_DOT_STOPS: i32 = 4;
 // The golden-angle constant (transcribes dotMatrixField.ts GOLDEN_ANGLE = PI*(3-sqrt5)).
 const GOLDEN_ANGLE: f32 = 2.399963229728653;
 
+// ── The √φ proportion ladder (the liquid-lens constants; Aristotelian, no magic numbers) ──
+const PHI: f32 = 1.618033988749895;        // the golden ratio φ
+const SQRT_PHI: f32 = 1.272019649514069;   // √φ
+const INV_SQRT_PHI: f32 = 0.7861513777574233;  // 1/√φ ≈ the squash/stretch cap
+const INV_PHI2: f32 = 0.3819660112501051;  // 1/φ² ≈ the anticipation-lead rung
+// The velocity (normalized-host/sec) → NDC/lens-frame scale: a sweep across the host reads as a
+// strong-but-bounded ellipse. The lens constants ladder off √φ off this scaled vmag.
+const VEL_SCALE: f32 = 0.18;
+const STRETCH_GAIN: f32 = 2.4;             // vmag → ellipse eccentricity gain
+const WAKE_GAIN: f32 = 12.0;               // the comet-tail displacement gain (spike-calibrated)
+const LENS_MAGNIFY: f32 = SQRT_PHI;        // the dot SWELLS √φ× under the lens core (over the 0.8 base)
+const RIM_CHROMA: f32 = 1.0;               // the chromatic-rim tone gain (samples the warmer amber stop)
+const VIGNETTE_FLOOR: f32 = INV_PHI2;      // the resting center-clear floor (dense edges, clear center)
+// The cartoon 1940s offset-cast: a darkened, lower-α, offset duplicate billboard (the SAME
+// instanced draw, verts 6..11). The light vector is a √φ-proportioned down-right cast.
+const CAST_OFFSET: f32 = 0.9;              // the cast displacement (× dot radius), down-right
+const CAST_DARK: f32 = 0.0;               // the cast samples pure-dark (a shadow lobe, not a tint)
+const CAST_ALPHA: f32 = 0.55;             // the cast's lower opacity (under the lit dot)
+
 struct Dot {
   // (unitPos.xyz, sphereIdx)
   data: vec4<f32>,
@@ -32,6 +51,10 @@ struct Uniforms {
   u4: vec4<f32>,
   // u5: (uSphere2OffsetX, uSphere2OffsetY, uHasBackground, _pad)
   u5: vec4<f32>,
+  // u6: (uLayout, uGravityStrength, uGravityRadius, uPlaneScale)  // layout: 0 sphere · 1 plane
+  u6: vec4<f32>,
+  // u7: (uVelX, uVelY, uTwinkleRate, uWakeStrength)  // the reclaimed travel-velocity lane
+  u7: vec4<f32>,
   spin: mat3x3<f32>,
   // ints: (uStopCount, uDotCount, uSpheres, _pad)
   ints: vec4<i32>,
@@ -52,6 +75,12 @@ fn facingTerm(n: vec3<f32>) -> f32 {
   return clamp(n.z * 0.5 + 0.5, 0.0, 1.0);   // 1 = dead-front, 0 = dead-back
 }
 
+// A 2D dot product — the local 'let dot = dots[ii].data' SHADOWS the WGSL 'dot()' builtin
+// inside vs_main, so the lens math calls this helper instead (the same value, un-shadowed).
+fn dot2(a: vec2<f32>, b: vec2<f32>) -> f32 {
+  return a.x * b.x + a.y * b.y;
+}
+
 // Sample the multi-stop palette (linear-sRGB stops, OKLab mix). t in [0,1].
 fn samplePaletteLin(t: f32) -> vec3<f32> {
   let stopCount = u.ints.x;
@@ -72,6 +101,7 @@ struct VSOut {
   @location(1) bright: f32,        // facing-driven brightness [0, ~1.6]
   @location(2) alpha: f32,         // facing-driven opacity
   @location(3) tone: f32,          // palette tone (0 = bright cream near-front, 1 = amber rim)
+  @location(4) cast: f32,          // 1 = the cartoon offset-cast shadow billboard, 0 = the lit dot
 };
 
 @vertex
@@ -80,81 +110,166 @@ fn vs_main(
   @builtin(instance_index) ii: u32,
 ) -> VSOut {
   // Two-triangle quad corners in billboard-local space (camera-facing by construction).
+  // 12 verts/instance: 0..5 the LIT dot, 6..11 the cartoon offset-CAST shadow duplicate (the
+  // SAME instanced draw, zero new buffer — the 1940s layered-offset cast as a binding precept).
   var corners = array<vec2<f32>, 6>(
     vec2<f32>(-1.0, -1.0), vec2<f32>(1.0, -1.0), vec2<f32>(-1.0, 1.0),
     vec2<f32>(-1.0, 1.0), vec2<f32>(1.0, -1.0), vec2<f32>(1.0, 1.0),
   );
-  let local = corners[vi];
+  let isCast = vi >= 6u;
+  let local = corners[vi % 6u];
 
   let dot = dots[ii].data;
   var unitPos = dot.xyz;          // the STATIC phyllotaxis position (JS-computed)
   let sphereIdx = dot.w;
 
-  // The breathing radius pulse (transcribes breathRadius — 1 at rest).
   let breath = u.u4.w;
-  // Per-sphere offset/scale (the reference two-globe composition).
-  var sphereScale = u.u1.x;       // uRadius
-  var sphereOffset = vec2<f32>(0.0, 0.0);
-  if (sphereIdx > 0.5) {
-    sphereScale = u.u1.x * u.u4.z;             // uRadius * uSphere2Scale
-    sphereOffset = vec2<f32>(u.u5.x, u.u5.y);  // uSphere2Offset
-  }
-
-  // The rotated surface NORMAL = spin · unitPos (the §T2 facing source). The spin matrix
-  // is the slow tilted Y-rotation (dotMatrixField.ts spinMatrix).
-  let n = u.spin * unitPos;
-  let facing = facingTerm(n);
-
-  // Pointer-repel/attract — a soft Gaussian dimple lifts the dot radially off the surface
-  // near the cursor (the §T7 local perturbation). The pointer is in NDC (-1..1); a repel
-  // (push>0) pushes the dot OUT, an attract (push<0) pulls IN. Velocity scales the push.
   let pAct = u.u3.w;
   let pointerNdc = vec2<f32>(u.u4.x * 2.0 - 1.0, 1.0 - u.u4.y * 2.0);
-  let screenN = n.xy * sphereScale + sphereOffset;
-  let toPointer = screenN - pointerNdc;
-  let pd = length(toPointer);
-  let dimple = exp(-pd * pd * 18.0) * u.u3.y * pAct;   // soft Gaussian falloff × push
-  // Lift along the rotated normal's screen projection (radially through the shell).
-  let lift = n.xy * dimple;
-
-  // Project the rotated normal to the screen (orthographic — the §T5 flat hero look),
-  // scaled by the sphere radius + the breathing, plus the per-sphere offset + the dimple
-  // lift + the pointer-parallax screen-center track.
-  let parallaxOff = (pointerNdc) * u.u3.x * pAct;       // uParallax · pointer · active
-  let center2d = n.xy * sphereScale * breath + sphereOffset + lift + parallaxOff;
-
-  // The depth-of-field dot-size taper (transcribes facingFade size): 0.6 + 0.4·facing,
-  // plus the accel-burst bloom scale near the cursor.
-  let sizeTaper = u.u2.z + u.u2.w * facing;
-  let burstScale = 1.0 + u.u3.z * exp(-pd * pd * 12.0);
-  let dotR = u.u1.y * sizeTaper * burstScale;            // uDotSize · taper · burst
+  let isPlane = u.u6.x > 0.5;
+  let gravStrength = u.u6.y;
+  let gravRadius = max(u.u6.z, 1e-3);
+  let planeScale = u.u6.w;
+  // The reclaimed travel velocity → the lens-frame vector (host +y is DOWN → flip to NDC +up).
+  let velRaw = vec2<f32>(u.u7.x, -u.u7.y);
+  let vmag = length(velRaw) * VEL_SCALE;
+  let vdir = select(vec2<f32>(0.0, 0.0), velRaw / max(length(velRaw), 1e-5), length(velRaw) > 1e-5);
+  let wake = u.u7.w;             // the spring-engaged active (ζ=0.7) → the wake LAGS + overshoots
+  let twkRate = u.u7.z;
+  // The per-dot twinkle phase — an on-GPU instance_index hash (no new buffer); the resting
+  // field becomes a LIVING warm constellation. uTime is pinned under PRM (deterministic capture).
+  let twkPhase = fract(sin(f32(ii) * 12.9898) * 43758.5453) * TAU;
+  let twk = twkRate * sin(u.u0.w * (twkRate + 0.6) + twkPhase);
+
+  var center2d: vec2<f32>;
+  var facing: f32;
+  var sizeTaper: f32;
+  var burstScale: f32;
+  var facingOpacity: f32;
+  var burstBright: f32;
+  var castLobe: f32 = 0.0;       // the cartoon-cast strength (nearness·pAct), set per-register
+
+  if (isPlane) {
+    // ── The 2D-PLANE register → the DIRECTIONAL LIQUID LENS ──────────────────────
+    // A heavy liquid-glass lens dragged across a taut warm membrane: it LEADS its travel,
+    // STRETCHES the gathered dots along the travel axis, drags an ember comet-tail WAKE behind,
+    // and MAGNIFIES+refracts the lattice beneath it. (Replaces the symmetric 'toCursor*well' —
+    // clean break, no alias, no dual path; the reclaimed velocity makes the warp directional.)
+    let base2d = unitPos.xy * planeScale;
+
+    // 1. ANTICIPATION — the lens LEADS its math-center along travel (dots ahead feel it early).
+    let wellC = pointerNdc + vdir * wake * (gravRadius * INV_PHI2 * 0.4);
+    let toLens = wellC - base2d;
+
+    // 2. SQUASH / STRETCH — measure distance in a frame STRETCHED along travel (vol-preserving).
+    let along = dot2(toLens, vdir);
+    let perp = dot2(toLens, vec2<f32>(-vdir.y, vdir.x));
+    let stretch = 1.0 + clamp(vmag * STRETCH_GAIN, 0.0, INV_SQRT_PHI);
+    let dE = length(vec2<f32>(along / stretch, perp * stretch));
+    let well = gravStrength * exp(-(dE * dE) / (2.0 * gravRadius * gravRadius)) * pAct;
+    var lift = toLens * well;
+
+    // 3. COMET-TAIL WAKE — a pull streamed BEHIND the lens (overlapping action; follow-through).
+    let behind = max(0.0, -along);
+    let tail = wake * exp(-(behind * behind) / (gravRadius * gravRadius)) * vmag * WAKE_GAIN;
+    lift = lift - vdir * tail * gravRadius;
+    // The flick BURST over-extends the gather then the spring snaps it (the cartoon take).
+    let burstPull = toLens * (u.u3.z * 0.4 * exp(-(dE * dE) / (gravRadius * gravRadius))) * pAct;
+    center2d = base2d + lift + burstPull;
 
+    // 4. LENS OPTICS — the ellipse nearness drives magnify + brightness + the chromatic rim.
+    let nearness = exp(-(dE * dE) / (2.0 * gravRadius * gravRadius));
+    facing = nearness;
+    sizeTaper = 0.8 + LENS_MAGNIFY * nearness * pAct;        // the dot SWELLS (a lens magnifies)
+    burstScale = 1.0 + u.u3.z * 0.6 * nearness;
+    // the comet-tail also reads via LUMINANCE (trailing dots glow ∝ behind·vmag — the PRIMARY
+    // wake witness; the displacement alone is fragile, the spike proved).
+    let wakeGlow = behind * vmag * 1.4 * pAct;
+    // 5. CONTENT-DEFERENTIAL VIGNETTE — dense edges, clear center (the field FRAMES the content);
+    // the cursor-lens RE-DENSIFIES the center it enters (the calm-until-touched duality).
+    var presence = mix(VIGNETTE_FLOOR, 1.0, smoothstep(0.0, 1.0, length(base2d) / max(planeScale, 1e-3)));
+    presence = max(presence, nearness * pAct);
+    // the resting TWINKLE floor + the lens bloom; the vignette modulates the whole field.
+    facingOpacity = (u.u2.x + u.u2.y * (0.5 + twk + 0.6 * nearness * pAct)) * presence;
+    burstBright = 1.0 + (0.5 * nearness + wakeGlow + u.u3.z * 0.8 * nearness) * pAct;
+    castLobe = nearness * pAct;   // the cartoon offset-cast under the magnified lozenge
+  } else {
+    // ── The 3D-SPHERE register (the KEPT preset — "good") ────────────────────────
+    var sphereScale = u.u1.x;       // uRadius
+    var sphereOffset = vec2<f32>(0.0, 0.0);
+    if (sphereIdx > 0.5) {
+      sphereScale = u.u1.x * u.u4.z;             // uRadius * uSphere2Scale
+      sphereOffset = vec2<f32>(u.u5.x, u.u5.y);  // uSphere2Offset
+    }
+    let n = u.spin * unitPos;       // the rotated surface NORMAL (the §T2 facing source)
+    facing = facingTerm(n);
+    let screenN = n.xy * sphereScale + sphereOffset;
+    // The SAME screen-space DIRECTIONAL LENS as the plane (one warp idiom, both registers —
+    // the dim-idiom, no second mechanism): the surface dots smear toward the cursor ALONG
+    // travel + carry a wake (a finger pressing a dot-globe through glass). Bounded by 'facing'
+    // so the near hemisphere leads + the silhouette can't tear.
+    let toLensS = pointerNdc - screenN;
+    let alongS = dot2(toLensS, vdir);
+    let perpS = dot2(toLensS, vec2<f32>(-vdir.y, vdir.x));
+    let stretchS = 1.0 + clamp(vmag * STRETCH_GAIN, 0.0, INV_SQRT_PHI);
+    let dES = length(vec2<f32>(alongS / stretchS, perpS * stretchS));
+    let pd = dES;
+    // A repel pushes OUT, an attract pulls IN (u.u3.y sign); facing bounds the near hemisphere.
+    let well = exp(-(dES * dES) / (2.0 * gravRadius * gravRadius)) * gravStrength * u.u3.y * pAct * facing;
+    var lift = -toLensS * well;     // toward (attract) / away (repel) per the u3.y sign baked above
+    // The comet-tail WAKE on the near hemisphere (streams behind the cursor along travel).
+    let behindS = max(0.0, -alongS);
+    let tailS = wake * exp(-(behindS * behindS) / (gravRadius * gravRadius)) * vmag * WAKE_GAIN * facing;
+    lift = lift - vdir * tailS * gravRadius * sign(u.u3.y);
+    let parallaxOff = pointerNdc * u.u3.x * pAct;
+    center2d = n.xy * sphereScale * breath + sphereOffset + lift + parallaxOff;
+    let nearnessS = exp(-(dES * dES) / (2.0 * gravRadius * gravRadius)) * facing;
+    sizeTaper = u.u2.z + u.u2.w * facing + LENS_MAGNIFY * 0.4 * nearnessS * pAct;  // the lens magnify
+    burstScale = 1.0 + u.u3.z * exp(-(dES * dES) / (gravRadius * gravRadius));
+    let wakeGlowS = behindS * vmag * 1.0 * pAct * facing;
+    facingOpacity = u.u2.x + u.u2.y * facing + u.u2.y * twk * facing;  // the twinkle rides the facing
+    burstBright = 1.0 + (u.u3.z * 0.8 * exp(-(dES * dES) / (gravRadius * gravRadius)) + wakeGlowS) * pAct;
+    castLobe = nearnessS * pAct;    // the cartoon offset-cast under the smeared near-hemisphere
+  }
+
+  let dotR = u.u1.y * sizeTaper * burstScale;            // uDotSize · taper · burst
   let offX = local.x * dotR;
   let offY = local.y * dotR;
 
-  // The opacity ramp (transcribes facingFade opacity): facingLo + facingHi·facing, scaled
-  // by the base opacity + a faint burst brightness lift near the cursor.
-  let facingOpacity = u.u2.x + u.u2.y * facing;          // facingLo + facingHi·facing
-  let burstBright = 1.0 + u.u3.z * 0.8 * exp(-pd * pd * 12.0);
+  // THE CARTOON OFFSET-CAST (the 1940s layered-offset shadow, a binding precept). Verts 6..11
+  // are a darkened, lower-α duplicate billboard offset along a √φ light vector (down-right),
+  // keyed off castLobe (nearness·pAct) so the shadow lobe appears ONLY under the magnified lens
+  // lozenge. When castLobe ≈ 0 the cast collapses to alpha 0 (the fragment discards it).
+  let lightVec = normalize(vec2<f32>(SQRT_PHI, -1.0)) * CAST_OFFSET * dotR;
+  let castShift = select(vec2<f32>(0.0, 0.0), lightVec, isCast);
+  let castStrength = select(1.0, smoothstep(0.05, 0.5, castLobe), isCast);
 
   // The whole sphere + quad is built in a SQUARE space (so the globe stays circular); the
   // final clip-space x divides by aspect so a wide canvas does not squash it into an
   // ellipse (aspect ≥ 1 → x shrinks; aspect < 1 → x grows). This keeps the dot quads round
   // AND the sphere circular in PIXELS regardless of the canvas aspect.
   let aspect = max(u.u1.w, 1e-4);
-  let clipX = (center2d.x + offX) / aspect;
-  let clipY = center2d.y + offY;
+  let clipX = (center2d.x + offX + castShift.x) / aspect;
+  let clipY = center2d.y + offY + castShift.y;
 
   var out: VSOut;
   out.pos = vec4<f32>(clipX, clipY, 0.0, 1.0);
   out.local = local;
-  out.bright = facingOpacity * burstBright;
-  out.alpha = clamp(u.u1.z * facingOpacity * burstBright, 0.0, 1.0);
-  // The palette tone reads the DEPTH (not the opacity): the near-front samples the bright
-  // cream stop[0] (tone 0), the rim/far the darker amber stop (tone → 1), so the depth-shell
-  // reads TONALLY on BOTH a dark AND a light ground (a light-ground globe can't lean on the
-  // opacity fade alone — over a light card a faded dot reads brighter, inverting the shell).
-  out.tone = clamp(1.0 - facing, 0.0, 1.0);
+  out.cast = select(0.0, 1.0, isCast);
+  if (isCast) {
+    // The cast is a dark shadow lobe — full dark tone, lower α, gated by the cast strength.
+    out.bright = CAST_DARK;
+    out.alpha = clamp(u.u1.z * CAST_ALPHA * facingOpacity * castStrength, 0.0, 1.0);
+    out.tone = 1.0;
+  } else {
+    out.bright = facingOpacity * burstBright;
+    out.alpha = clamp(u.u1.z * facingOpacity * burstBright, 0.0, 1.0);
+    // The chromatic RIM refraction (REPLACES the old depth-only '1.0 - facing' tone — EXCISED,
+    // no double-write, no legacy). At rest the tone reads the depth/edge; under the lens a faint
+    // RIM band glows the warmer-amber stop (tone → 1), the iOS-27 glass chromatic refraction.
+    let rim = smoothstep(0.25, 0.6, 1.0 - facing) * RIM_CHROMA;
+    out.tone = clamp(max(1.0 - facing, rim * facing), 0.0, 1.0);
+  }
   return out;
 }
 
@@ -166,6 +281,8 @@ fn fs_main(in: VSOut) -> @location(0) vec4<f32> {
   let aa = max(fwidth(d), 1e-4);
   let coverage = 1.0 - smoothstep(-aa, aa, d);
   if (coverage < 0.002) { discard; }
+  // The cartoon-cast billboard collapses to nothing away from the lens — drop the dead quads.
+  if (in.cast > 0.5 && in.alpha < 0.003) { discard; }
 
   // The palette tints the dot by DEPTH (near-front cream → rim amber); the brightness lights
   // the core. The near hemisphere reads as the bright warm-cream stop, the rim/far fading to
@@ -176,7 +293,7 @@ fn fs_main(in: VSOut) -> @location(0) vec4<f32> {
   // Premultiplied-alpha output (the translucent dot-shell additive over the clear).
   return vec4<f32>(rgb * alpha, alpha);
 }
-`, A = "#version 300 es\nprecision highp float;\n\n#define MAX_DOT_STOPS 4\n#define GOLDEN_ANGLE 2.399963229728653\n\n// The static quad corner (6 verts: two triangles) + the instanced per-dot data.\nin vec2 aCorner;          // billboard-local [-1,1]\nin vec4 aDot;             // (unitPos.xyz, sphereIdx) — instanced (divisor 1)\n\nuniform vec4 uU0;         // (resX, resY, dpr, time)\nuniform vec4 uU1;         // (radius, dotSize, baseOpacity, aspect)\nuniform vec4 uU2;         // (facingLo, facingHi, sizeLo, sizeHi)\nuniform vec4 uU3;         // (parallax, pointerPush, pointerBloom, pointerActive)\nuniform vec4 uU4;         // (pointerX, pointerY, sphere2Scale, breathRadius)\nuniform vec4 uU5;         // (sphere2OffsetX, sphere2OffsetY, hasBackground, _pad)\nuniform mat3 uSpin;       // the slow tilted Y-rotation\n\nout vec2 vLocal;          // [-1,1] billboard-local for the SDF circle\nout float vBright;        // facing-driven brightness\nout float vAlpha;         // facing-driven opacity\nout float vTone;          // palette tone (0 = bright cream near-front, 1 = amber rim)\n\nfloat facingTerm(vec3 n) {\n  return clamp(n.z * 0.5 + 0.5, 0.0, 1.0);   // 1 = dead-front\n}\n\nvoid main() {\n  vec3 unitPos = aDot.xyz;\n  float sphereIdx = aDot.w;\n\n  float breath = uU4.w;\n  float sphereScale = uU1.x;\n  vec2 sphereOffset = vec2(0.0);\n  if (sphereIdx > 0.5) {\n    sphereScale = uU1.x * uU4.z;\n    sphereOffset = vec2(uU5.x, uU5.y);\n  }\n\n  // The rotated surface normal = spin · unitPos (the §T2 facing source).\n  vec3 n = uSpin * unitPos;\n  float facing = facingTerm(n);\n\n  // Pointer-repel/attract dimple (the §T7 local perturbation).\n  float pAct = uU3.w;\n  vec2 pointerNdc = vec2(uU4.x * 2.0 - 1.0, 1.0 - uU4.y * 2.0);\n  vec2 screenN = n.xy * sphereScale + sphereOffset;\n  vec2 toPointer = screenN - pointerNdc;\n  float pd = length(toPointer);\n  float dimple = exp(-pd * pd * 18.0) * uU3.y * pAct;\n  vec2 lift = n.xy * dimple;\n\n  vec2 parallaxOff = pointerNdc * uU3.x * pAct;\n  vec2 center2d = n.xy * sphereScale * breath + sphereOffset + lift + parallaxOff;\n\n  // The depth-of-field size taper + the accel-burst bloom scale.\n  float sizeTaper = uU2.z + uU2.w * facing;\n  float burstScale = 1.0 + uU3.z * exp(-pd * pd * 12.0);\n  float dotR = uU1.y * sizeTaper * burstScale;\n\n  float offX = aCorner.x * dotR;\n  float offY = aCorner.y * dotR;\n\n  float facingOpacity = uU2.x + uU2.y * facing;\n  float burstBright = 1.0 + uU3.z * 0.8 * exp(-pd * pd * 12.0);\n\n  vLocal = aCorner;\n  vBright = facingOpacity * burstBright;\n  vAlpha = clamp(uU1.z * facingOpacity * burstBright, 0.0, 1.0);\n  // The palette tone reads the DEPTH (near-front bright cream → rim amber) so the depth-shell\n  // reads tonally on BOTH a dark AND a light ground.\n  vTone = clamp(1.0 - facing, 0.0, 1.0);\n\n  // The whole sphere + quad is built in a SQUARE space (so the globe stays circular); the\n  // final clip-space x divides by aspect so a wide canvas does not squash it into an ellipse.\n  float aspect = max(uU1.w, 1e-4);\n  gl_Position = vec4((center2d.x + offX) / aspect, center2d.y + offY, 0.0, 1.0);\n}", j = `#version 300 es
+`, A = "#version 300 es\nprecision highp float;\n\n#define MAX_DOT_STOPS 4\n#define GOLDEN_ANGLE 2.399963229728653\n\n// ── The √φ proportion ladder (the liquid-lens constants; the line-for-line WGSL twin) ──\n#define PI_CONST 3.141592653589793\n#define TAU 6.283185307179586\n#define PHI 1.618033988749895\n#define SQRT_PHI 1.272019649514069\n#define INV_SQRT_PHI 0.7861513777574233\n#define INV_PHI2 0.3819660112501051\n#define VEL_SCALE 0.18\n#define STRETCH_GAIN 2.4\n#define WAKE_GAIN 12.0\n#define LENS_MAGNIFY SQRT_PHI\n#define RIM_CHROMA 1.0\n#define VIGNETTE_FLOOR INV_PHI2\n#define CAST_OFFSET 0.9\n#define CAST_DARK 0.0\n#define CAST_ALPHA 0.55\n\n// The static quad corner (6 verts: two triangles) + the instanced per-dot data. The draw is\n// 12 verts/instance: gl_VertexID 0..5 the lit dot, 6..11 the cartoon offset-CAST shadow (the\n// SAME instanced draw, zero new buffer). The corner is re-derived from gl_VertexID % 6.\nin vec4 aDot;             // (unitPos.xyz, sphereIdx) — instanced (divisor 1)\n\nuniform vec4 uU0;         // (resX, resY, dpr, time)\nuniform vec4 uU1;         // (radius, dotSize, baseOpacity, aspect)\nuniform vec4 uU2;         // (facingLo, facingHi, sizeLo, sizeHi)\nuniform vec4 uU3;         // (parallax, pointerPush, pointerBloom, pointerActive)\nuniform vec4 uU4;         // (pointerX, pointerY, sphere2Scale, breathRadius)\nuniform vec4 uU5;         // (sphere2OffsetX, sphere2OffsetY, hasBackground, _pad)\nuniform vec4 uU6;         // (layout, gravityStrength, gravityRadius, planeScale)\nuniform vec4 uU7;         // (velX, velY, twinkleRate, wakeStrength)\nuniform mat3 uSpin;       // the slow tilted Y-rotation\n\nout vec2 vLocal;          // [-1,1] billboard-local for the SDF circle\nout float vBright;        // facing-driven brightness\nout float vAlpha;         // facing-driven opacity\nout float vTone;          // palette tone (0 = bright cream near-front, 1 = amber rim)\nout float vCast;          // 1 = the cartoon offset-cast shadow billboard, 0 = the lit dot\n\nfloat facingTerm(vec3 n) {\n  return clamp(n.z * 0.5 + 0.5, 0.0, 1.0);   // 1 = dead-front\n}\n\nvoid main() {\n  // The two-triangle quad corners (6 verts), re-derived per gl_VertexID (no aCorner buffer).\n  vec2 cornerLUT[6] = vec2[6](\n    vec2(-1.0, -1.0), vec2(1.0, -1.0), vec2(-1.0, 1.0),\n    vec2(-1.0, 1.0), vec2(1.0, -1.0), vec2(1.0, 1.0)\n  );\n  bool isCast = gl_VertexID >= 6;\n  vec2 aCorner = cornerLUT[gl_VertexID % 6];\n\n  vec3 unitPos = aDot.xyz;\n  float sphereIdx = aDot.w;\n\n  float breath = uU4.w;\n  float pAct = uU3.w;\n  vec2 pointerNdc = vec2(uU4.x * 2.0 - 1.0, 1.0 - uU4.y * 2.0);\n  bool isPlane = uU6.x > 0.5;\n  float gravStrength = uU6.y;\n  float gravRadius = max(uU6.z, 1e-3);\n  float planeScale = uU6.w;\n  // The reclaimed travel velocity → the lens-frame vector (host +y is DOWN → flip to NDC +up).\n  vec2 velRaw = vec2(uU7.x, -uU7.y);\n  float vmag = length(velRaw) * VEL_SCALE;\n  vec2 vdir = length(velRaw) > 1e-5 ? velRaw / max(length(velRaw), 1e-5) : vec2(0.0);\n  float wake = uU7.w;       // the spring-engaged active (ζ=0.7) → the wake LAGS + overshoots\n  float twkRate = uU7.z;\n  // The per-dot twinkle phase — an on-GPU instance hash (no new buffer); uTime pinned under PRM.\n  float twkPhase = fract(sin(float(gl_InstanceID) * 12.9898) * 43758.5453) * TAU;\n  float twk = twkRate * sin(uU0.w * (twkRate + 0.6) + twkPhase);\n\n  vec2 center2d;\n  float facing;\n  float sizeTaper;\n  float burstScale;\n  float facingOpacity;\n  float burstBright;\n  float castLobe = 0.0;\n\n  if (isPlane) {\n    // ── The 2D-PLANE register → the DIRECTIONAL LIQUID LENS ──────────────────────\n    vec2 base2d = unitPos.xy * planeScale;\n\n    // 1. ANTICIPATION — the lens LEADS its math-center along travel.\n    vec2 wellC = pointerNdc + vdir * wake * (gravRadius * INV_PHI2 * 0.4);\n    vec2 toLens = wellC - base2d;\n\n    // 2. SQUASH / STRETCH — measure distance in a frame STRETCHED along travel.\n    float along = dot(toLens, vdir);\n    float perp = dot(toLens, vec2(-vdir.y, vdir.x));\n    float stretch = 1.0 + clamp(vmag * STRETCH_GAIN, 0.0, INV_SQRT_PHI);\n    float dE = length(vec2(along / stretch, perp * stretch));\n    float well = gravStrength * exp(-(dE * dE) / (2.0 * gravRadius * gravRadius)) * pAct;\n    vec2 lift = toLens * well;\n\n    // 3. COMET-TAIL WAKE — a pull streamed BEHIND the lens (follow-through).\n    float behind = max(0.0, -along);\n    float tail = wake * exp(-(behind * behind) / (gravRadius * gravRadius)) * vmag * WAKE_GAIN;\n    lift -= vdir * tail * gravRadius;\n    vec2 burstPull = toLens * (uU3.z * 0.4 * exp(-(dE * dE) / (gravRadius * gravRadius))) * pAct;\n    center2d = base2d + lift + burstPull;\n\n    // 4. LENS OPTICS — magnify + brightness + the chromatic rim.\n    float nearness = exp(-(dE * dE) / (2.0 * gravRadius * gravRadius));\n    facing = nearness;\n    sizeTaper = 0.8 + LENS_MAGNIFY * nearness * pAct;\n    burstScale = 1.0 + uU3.z * 0.6 * nearness;\n    float wakeGlow = behind * vmag * 1.4 * pAct;\n    // 5. CONTENT-DEFERENTIAL VIGNETTE — dense edges, clear center; the lens re-densifies it.\n    float presence = mix(VIGNETTE_FLOOR, 1.0, smoothstep(0.0, 1.0, length(base2d) / max(planeScale, 1e-3)));\n    presence = max(presence, nearness * pAct);\n    facingOpacity = (uU2.x + uU2.y * (0.5 + twk + 0.6 * nearness * pAct)) * presence;\n    burstBright = 1.0 + (0.5 * nearness + wakeGlow + uU3.z * 0.8 * nearness) * pAct;\n    castLobe = nearness * pAct;\n  } else {\n    // ── The 3D-SPHERE register → the SAME directional lens (one warp idiom) ───────\n    float sphereScale = uU1.x;\n    vec2 sphereOffset = vec2(0.0);\n    if (sphereIdx > 0.5) {\n      sphereScale = uU1.x * uU4.z;\n      sphereOffset = vec2(uU5.x, uU5.y);\n    }\n    vec3 n = uSpin * unitPos;\n    facing = facingTerm(n);\n    vec2 screenN = n.xy * sphereScale + sphereOffset;\n    vec2 toLensS = pointerNdc - screenN;\n    float alongS = dot(toLensS, vdir);\n    float perpS = dot(toLensS, vec2(-vdir.y, vdir.x));\n    float stretchS = 1.0 + clamp(vmag * STRETCH_GAIN, 0.0, INV_SQRT_PHI);\n    float dES = length(vec2(alongS / stretchS, perpS * stretchS));\n    float pd = dES;\n    float well = exp(-(dES * dES) / (2.0 * gravRadius * gravRadius)) * gravStrength * uU3.y * pAct * facing;\n    vec2 lift = -toLensS * well;\n    float behindS = max(0.0, -alongS);\n    float tailS = wake * exp(-(behindS * behindS) / (gravRadius * gravRadius)) * vmag * WAKE_GAIN * facing;\n    lift -= vdir * tailS * gravRadius * sign(uU3.y);\n    vec2 parallaxOff = pointerNdc * uU3.x * pAct;\n    center2d = n.xy * sphereScale * breath + sphereOffset + lift + parallaxOff;\n    float nearnessS = exp(-(dES * dES) / (2.0 * gravRadius * gravRadius)) * facing;\n    sizeTaper = uU2.z + uU2.w * facing + LENS_MAGNIFY * 0.4 * nearnessS * pAct;\n    burstScale = 1.0 + uU3.z * exp(-(dES * dES) / (gravRadius * gravRadius));\n    float wakeGlowS = behindS * vmag * 1.0 * pAct * facing;\n    facingOpacity = uU2.x + uU2.y * facing + uU2.y * twk * facing;\n    burstBright = 1.0 + (uU3.z * 0.8 * exp(-(dES * dES) / (gravRadius * gravRadius)) + wakeGlowS) * pAct;\n    castLobe = nearnessS * pAct;\n  }\n\n  float dotR = uU1.y * sizeTaper * burstScale;\n  float offX = aCorner.x * dotR;\n  float offY = aCorner.y * dotR;\n\n  // THE CARTOON OFFSET-CAST — verts 6..11 are a dark, lower-α duplicate offset along a √φ\n  // light vector (down-right), gated by castLobe so the lobe appears only under the lens.\n  vec2 lightVec = normalize(vec2(SQRT_PHI, -1.0)) * CAST_OFFSET * dotR;\n  vec2 castShift = isCast ? lightVec : vec2(0.0);\n  float castStrength = isCast ? smoothstep(0.05, 0.5, castLobe) : 1.0;\n\n  vLocal = aCorner;\n  vCast = isCast ? 1.0 : 0.0;\n  if (isCast) {\n    vBright = CAST_DARK;\n    vAlpha = clamp(uU1.z * CAST_ALPHA * facingOpacity * castStrength, 0.0, 1.0);\n    vTone = 1.0;\n  } else {\n    vBright = facingOpacity * burstBright;\n    vAlpha = clamp(uU1.z * facingOpacity * burstBright, 0.0, 1.0);\n    // The chromatic RIM refraction (REPLACES the old depth-only 1.0-facing tone — EXCISED).\n    float rim = smoothstep(0.25, 0.6, 1.0 - facing) * RIM_CHROMA;\n    vTone = clamp(max(1.0 - facing, rim * facing), 0.0, 1.0);\n  }\n\n  // The whole sphere + quad is built in a SQUARE space (so the globe stays circular); the\n  // final clip-space x divides by aspect so a wide canvas does not squash it into an ellipse.\n  float aspect = max(uU1.w, 1e-4);\n  gl_Position = vec4((center2d.x + offX + castShift.x) / aspect, center2d.y + offY + castShift.y, 0.0, 1.0);\n}", j = `#version 300 es
 precision highp float;
 
 #define MAX_DOT_STOPS 4
@@ -185,6 +302,7 @@ in vec2 vLocal;
 in float vBright;
 in float vAlpha;
 in float vTone;
+in float vCast;
 out vec4 fragColor;
 
 uniform vec4 uBg;                       // (background.rgb, hasBackground)
@@ -193,6 +311,11 @@ uniform vec3 uPalette[MAX_DOT_STOPS];   // linear-sRGB stops
 
 const mat2 FBM_ROT = mat2(0.8, 0.6, -0.6, 0.8);
 
+// PI in scope for the spliced OKLCH hue fns (the procedural-color chunk contract:
+// the consumer splices the matrices chunk + DEFINES PI FIRST — see
+// procedural-color.glsl.ts §"PI being in scope"). The dot SDF main() reads only the
+// OKLAB path, but the whole spliced chunk still compiles, so PI must be declared.
+#define PI 3.141592653589793
 ${r}
 ${a}
 
@@ -216,6 +339,8 @@ void main() {
   float aa = max(fwidth(d), 1e-4);
   float coverage = 1.0 - smoothstep(-aa, aa, d);
   if (coverage < 0.002) discard;
+  // The cartoon-cast billboard collapses to nothing away from the lens — drop the dead quads.
+  if (vCast > 0.5 && vAlpha < 0.003) discard;
 
   vec3 lin = samplePaletteLin(vTone) * clamp(vBright, 0.0, 1.6);
   float alpha = vAlpha * coverage;
@@ -241,9 +366,13 @@ void main() {
 	breathing: 0,
 	palette: P,
 	background: "transparent",
-	interactive: !1,
-	pointerMode: "repel",
+	layout: "plane",
+	interactive: !0,
+	pointerMode: "attract",
 	parallax: .08,
+	gravityStrength: .62,
+	gravityRadius: .34,
+	twinkle: 0,
 	respectReducedMotion: !0
 }, I = {
 	x: .62,
@@ -255,22 +384,27 @@ function R() {
 		y: .5,
 		active: 0,
 		push: 0,
-		bloom: 0
+		bloom: 0,
+		velX: 0,
+		velY: 0,
+		accelMag: 0
 	};
 }
-var z = 240, B = {
+var z = 272, B = {
 	u0: 0,
 	u1: 4,
 	u2: 8,
 	u3: 12,
 	u4: 16,
 	u5: 20,
-	spin0: 24,
-	spin1: 28,
-	spin2: 32,
-	ints: 36,
-	bg: 40,
-	palette: 44
+	u6: 24,
+	u7: 28,
+	spin0: 32,
+	spin1: 36,
+	spin2: 40,
+	ints: 44,
+	bg: 48,
+	palette: 52
 };
 function V() {
 	let e = new ArrayBuffer(z);
@@ -281,85 +415,101 @@ function V() {
 	};
 }
 function H(e) {
-	let t = Math.min(Math.max(Math.floor(e.dotCount), 1), 4e3), n = e.spheres === 2 ? 2 : 1, r = t * n, i = new Float32Array(r * 4), a = 0;
+	let t = Math.min(Math.max(Math.floor(e.dotCount), 1), 4e3);
+	if (e.layout === "plane") {
+		let e = new Float32Array(t * 4), n = Math.max(1, Math.round(Math.sqrt(t))), r = Math.max(1, Math.ceil(t / n)), i = 0;
+		for (let a = 0; a < t; a++) {
+			let t = a % n, o = Math.floor(a / n), s = G((a + .5) * U), c = G((a + .5) * W), l = (t + s) / n, u = (o + c) / r;
+			e[i + 0] = l * 2 - 1, e[i + 1] = u * 2 - 1, e[i + 2] = 0, e[i + 3] = 0, i += 4;
+		}
+		return e;
+	}
+	let n = e.spheres === 2 ? 2 : 1, r = t * n, i = new Float32Array(r * 4), a = 0;
 	for (let e = 0; e < n; e++) for (let n = 0; n < t; n++) {
 		let r = y(n, t);
 		i[a + 0] = r.x, i[a + 1] = r.y, i[a + 2] = r.z, i[a + 3] = e, a += 4;
 	}
 	return i;
 }
-function U(e) {
-	return Math.min(Math.max(Math.floor(e.dotCount), 1), 4e3) * (e.spheres === 2 ? 2 : 1);
+var U = .7548776662466927, W = .5698402909980532;
+function G(e) {
+	return e - Math.floor(e);
 }
-function W(e, t, n) {
+function K(e) {
+	let t = Math.min(Math.max(Math.floor(e.dotCount), 1), 4e3);
+	return e.layout === "plane" ? t : t * (e.spheres === 2 ? 2 : 1);
+}
+function q(e, t, n) {
 	return e * t * 2 / Math.max(n, 1);
 }
-function G(e, t, n, r, i, a, o, s) {
+function J(e, t, n, r, i, a, o, s) {
 	let { f32: l, i32: u } = e, f = Math.min(r.w, r.h) || 1, p = r.w / Math.max(r.h, 1);
-	l[B.u0 + 0] = r.w, l[B.u0 + 1] = r.h, l[B.u0 + 2] = i, l[B.u0 + 3] = n, l[B.u1 + 0] = t.radius, l[B.u1 + 1] = W(t.dotSize, i, f), l[B.u1 + 2] = t.baseOpacity, l[B.u1 + 3] = p, l[B.u2 + 0] = .15, l[B.u2 + 1] = .85 * t.depthFade, l[B.u2 + 2] = .6, l[B.u2 + 3] = .4, l[B.u3 + 0] = t.parallax, l[B.u3 + 1] = a.push, l[B.u3 + 2] = a.bloom, l[B.u3 + 3] = a.active, l[B.u4 + 0] = a.x, l[B.u4 + 1] = a.y, l[B.u4 + 2] = L, l[B.u4 + 3] = o, l[B.u5 + 0] = I.x, l[B.u5 + 1] = I.y, l[B.u5 + 2] = t.background === "transparent" ? 0 : 1, l[B.u5 + 3] = 0;
-	let m = d(n, t.axisTilt * Math.PI / 180, t.rotationSpeed);
-	l[B.spin0 + 0] = m[0], l[B.spin0 + 1] = m[3], l[B.spin0 + 2] = m[6], l[B.spin0 + 3] = 0, l[B.spin1 + 0] = m[1], l[B.spin1 + 1] = m[4], l[B.spin1 + 2] = m[7], l[B.spin1 + 3] = 0, l[B.spin2 + 0] = m[2], l[B.spin2 + 1] = m[5], l[B.spin2 + 2] = m[8], l[B.spin2 + 3] = 0;
-	let h = Math.min(s.length, 4);
-	if (u[B.ints + 0] = h, u[B.ints + 1] = U(t), u[B.ints + 2] = t.spheres === 2 ? 2 : 1, u[B.ints + 3] = 0, t.background === "transparent") l[B.bg + 0] = 0, l[B.bg + 1] = 0, l[B.bg + 2] = 0, l[B.bg + 3] = 0;
+	l[B.u0 + 0] = r.w, l[B.u0 + 1] = r.h, l[B.u0 + 2] = i, l[B.u0 + 3] = n, l[B.u1 + 0] = t.radius, l[B.u1 + 1] = q(t.dotSize, i, f), l[B.u1 + 2] = t.baseOpacity, l[B.u1 + 3] = p, l[B.u2 + 0] = .15, l[B.u2 + 1] = .85 * t.depthFade, l[B.u2 + 2] = .6, l[B.u2 + 3] = .4, l[B.u3 + 0] = t.parallax, l[B.u3 + 1] = a.push, l[B.u3 + 2] = a.bloom, l[B.u3 + 3] = a.active, l[B.u4 + 0] = a.x, l[B.u4 + 1] = a.y, l[B.u4 + 2] = L, l[B.u4 + 3] = o, l[B.u5 + 0] = I.x, l[B.u5 + 1] = I.y, l[B.u5 + 2] = t.background === "transparent" ? 0 : 1, l[B.u5 + 3] = 0;
+	let m = 1.18 * Math.max(p, 1);
+	l[B.u6 + 0] = +(t.layout === "plane"), l[B.u6 + 1] = t.gravityStrength, l[B.u6 + 2] = t.gravityRadius, l[B.u6 + 3] = m, l[B.u7 + 0] = a.velX, l[B.u7 + 1] = a.velY, l[B.u7 + 2] = t.twinkle, l[B.u7 + 3] = a.active;
+	let h = d(n, t.axisTilt * Math.PI / 180, t.rotationSpeed);
+	l[B.spin0 + 0] = h[0], l[B.spin0 + 1] = h[3], l[B.spin0 + 2] = h[6], l[B.spin0 + 3] = 0, l[B.spin1 + 0] = h[1], l[B.spin1 + 1] = h[4], l[B.spin1 + 2] = h[7], l[B.spin1 + 3] = 0, l[B.spin2 + 0] = h[2], l[B.spin2 + 1] = h[5], l[B.spin2 + 2] = h[8], l[B.spin2 + 3] = 0;
+	let g = Math.min(s.length, 4);
+	if (u[B.ints + 0] = g, u[B.ints + 1] = K(t), u[B.ints + 2] = t.spheres === 2 ? 2 : 1, u[B.ints + 3] = 0, t.background === "transparent") l[B.bg + 0] = 0, l[B.bg + 1] = 0, l[B.bg + 2] = 0, l[B.bg + 3] = 0;
 	else {
 		let e = c(t.background);
 		l[B.bg + 0] = e[0], l[B.bg + 1] = e[1], l[B.bg + 2] = e[2], l[B.bg + 3] = 1;
 	}
 	for (let e = 0; e < 4; e++) {
-		let t = B.palette + e * 4, n = c(s[Math.min(e, h - 1)] ?? s[0]);
+		let t = B.palette + e * 4, n = c(s[Math.min(e, g - 1)] ?? s[0]);
 		l[t + 0] = n[0], l[t + 1] = n[1], l[t + 2] = n[2], l[t + 3] = 0;
 	}
 	return e;
 }
 //#endregion
 //#region src/components/custom/dot-matrix/composables/useDotSphere.ts
-var K = 64, q = 128, J = 8, Y = 1, X = 2;
-function Z(e) {
+var ee = 64, te = 128, Y = 8, X = 1, ne = 2, Z = 1.272019649514069;
+function re(e) {
 	return {
 		w: e.width || 1,
 		h: e.height || 1
 	};
 }
-function ee(e) {
-	let { canvas: t, config: n, getPalette: r, pointer: i, shouldContinue: a, onFrame: s } = e;
-	return function(e, c, l) {
-		let d = e.createShaderModule({
+function ie(e) {
+	let { canvas: t, config: n, getPalette: r, pointer: i, shouldContinue: a, onFrame: s, getReducedMotion: c } = e;
+	return function(e, l, d) {
+		let f = e.createShaderModule({
 			label: "[DotMatrix] dot-matrix.wgsl",
 			code: k
-		}), f = H(n), p = U(n), m = e.createBuffer({
+		}), p = H(n), m = K(n), h = e.createBuffer({
 			label: "[DotMatrix] dots",
-			size: p * 16,
-			usage: q | J,
+			size: m * 16,
+			usage: te | Y,
 			mappedAtCreation: !0
 		});
-		new Float32Array(m.getMappedRange()).set(f), m.unmap();
-		let h = e.createBuffer({
+		new Float32Array(h.getMappedRange()).set(p), h.unmap();
+		let g = e.createBuffer({
 			label: "[DotMatrix] render-uniforms",
 			size: V().buffer.byteLength,
-			usage: K | J
-		}), g = e.createBindGroupLayout({
+			usage: ee | Y
+		}), _ = e.createBindGroupLayout({
 			label: "[DotMatrix] bgl",
 			entries: [{
 				binding: 0,
-				visibility: Y | X,
+				visibility: X | ne,
 				buffer: { type: "uniform" }
 			}, {
 				binding: 1,
-				visibility: Y,
+				visibility: X,
 				buffer: { type: "read-only-storage" }
 			}]
-		}), _ = e.createRenderPipeline({
+		}), v = e.createRenderPipeline({
 			label: "[DotMatrix] render-pipeline",
-			layout: e.createPipelineLayout({ bindGroupLayouts: [g] }),
+			layout: e.createPipelineLayout({ bindGroupLayouts: [_] }),
 			vertex: {
-				module: d,
+				module: f,
 				entryPoint: "vs_main"
 			},
 			fragment: {
-				module: d,
+				module: f,
 				entryPoint: "fs_main",
 				targets: [{
-					format: l,
+					format: d,
 					blend: {
 						color: {
 							srcFactor: "one",
@@ -375,44 +525,44 @@ function ee(e) {
 				}]
 			},
 			primitive: { topology: "triangle-list" }
-		}), v = e.createBindGroup({
+		}), y = e.createBindGroup({
 			label: "[DotMatrix] bg",
-			layout: g,
+			layout: _,
 			entries: [{
 				binding: 0,
-				resource: { buffer: h }
+				resource: { buffer: g }
 			}, {
 				binding: 1,
-				resource: { buffer: m }
+				resource: { buffer: h }
 			}]
-		}), y = V();
-		function b() {
+		}), b = V();
+		function x() {
 			let e = o(), n = t.clientWidth || 320, r = t.clientHeight || 320, i = Math.max(1, Math.round(n * e)), a = Math.max(1, Math.round(r * e));
 			(t.width !== i || t.height !== a) && (t.width = i, t.height = a);
 		}
-		function x(a) {
+		function S(a) {
 			s?.(a);
-			let l = o(), d = u(a, n.breathing, .6);
-			G(y, n, a, Z(t), l, i, d, r()), e.queue.writeBuffer(h, 0, y.buffer);
-			let f = c.getCurrentTexture().createView(), m = e.createCommandEncoder({ label: "[DotMatrix] frame" }), g = m.beginRenderPass({ colorAttachments: [{
-				view: f,
-				clearValue: te(n),
+			let d = c?.() ? Z : a, f = o(), p = u(d, n.breathing, .6);
+			J(b, n, d, re(t), f, i, p, r()), e.queue.writeBuffer(g, 0, b.buffer);
+			let h = l.getCurrentTexture().createView(), _ = e.createCommandEncoder({ label: "[DotMatrix] frame" }), x = _.beginRenderPass({ colorAttachments: [{
+				view: h,
+				clearValue: ae(n),
 				loadOp: "clear",
 				storeOp: "store"
 			}] });
-			g.setPipeline(_), g.setBindGroup(0, v), g.draw(6, p, 0, 0), g.end(), e.queue.submit([m.finish()]);
+			x.setPipeline(v), x.setBindGroup(0, y), x.draw(12, m, 0, 0), x.end(), e.queue.submit([_.finish()]);
 		}
 		return {
-			frame: x,
+			frame: S,
 			shouldContinue: a,
-			resize: b,
+			resize: x,
 			teardown: () => {
-				m.destroy(), h.destroy();
+				h.destroy(), g.destroy();
 			}
 		};
 	};
 }
-function te(e) {
+function ae(e) {
 	if (e.background === "transparent") return {
 		r: 0,
 		g: 0,
@@ -435,161 +585,155 @@ function Q(e, t, n) {
 	}
 	return r;
 }
-function ne(e) {
-	let { canvas: t, config: n, getPalette: r, pointer: i, shouldContinue: a, onFrame: s } = e;
+function oe(e) {
+	let { canvas: t, config: n, getPalette: r, pointer: i, shouldContinue: a, onFrame: s, getReducedMotion: l } = e;
 	return function(e) {
-		let l = Q(e, e.VERTEX_SHADER, A), f = Q(e, e.FRAGMENT_SHADER, j), p = e.createProgram();
-		if (e.attachShader(p, l), e.attachShader(p, f), e.linkProgram(p), !e.getProgramParameter(p, e.LINK_STATUS)) throw Error(`[DotMatrix] link failed: ${e.getProgramInfoLog(p)}`);
-		e.deleteShader(l), e.deleteShader(f);
-		let m = H(n), h = U(n), g = e.createVertexArray();
-		e.bindVertexArray(g);
-		let _ = e.createBuffer();
-		e.bindBuffer(e.ARRAY_BUFFER, _), e.bufferData(e.ARRAY_BUFFER, new Float32Array([
-			-1,
-			-1,
-			1,
-			-1,
-			-1,
-			1,
-			-1,
-			1,
-			1,
-			-1,
-			1,
-			1
-		]), e.STATIC_DRAW);
-		let v = e.getAttribLocation(p, "aCorner");
-		e.enableVertexAttribArray(v), e.vertexAttribPointer(v, 2, e.FLOAT, !1, 0, 0);
-		let y = e.createBuffer();
-		e.bindBuffer(e.ARRAY_BUFFER, y), e.bufferData(e.ARRAY_BUFFER, m, e.STATIC_DRAW);
-		let b = e.getAttribLocation(p, "aDot");
-		e.enableVertexAttribArray(b), e.vertexAttribPointer(b, 4, e.FLOAT, !1, 0, 0), e.vertexAttribDivisor(b, 1), e.bindVertexArray(null);
-		let x = (t) => e.getUniformLocation(p, t), S = x("uU0"), C = x("uU1"), w = x("uU2"), T = x("uU3"), E = x("uU4"), D = x("uU5"), O = x("uSpin"), k = x("uBg"), M = x("uStopCount"), N = x("uPalette[0]");
-		function P() {
+		let f = Q(e, e.VERTEX_SHADER, A), p = Q(e, e.FRAGMENT_SHADER, j), m = e.createProgram();
+		if (e.attachShader(m, f), e.attachShader(m, p), e.linkProgram(m), !e.getProgramParameter(m, e.LINK_STATUS)) throw Error(`[DotMatrix] link failed: ${e.getProgramInfoLog(m)}`);
+		e.deleteShader(f), e.deleteShader(p);
+		let h = H(n), g = K(n), _ = e.createVertexArray();
+		e.bindVertexArray(_);
+		let v = e.createBuffer();
+		e.bindBuffer(e.ARRAY_BUFFER, v), e.bufferData(e.ARRAY_BUFFER, h, e.STATIC_DRAW);
+		let y = e.getAttribLocation(m, "aDot");
+		e.enableVertexAttribArray(y), e.vertexAttribPointer(y, 4, e.FLOAT, !1, 0, 0), e.vertexAttribDivisor(y, 1), e.bindVertexArray(null);
+		let b = (t) => e.getUniformLocation(m, t), x = b("uU0"), S = b("uU1"), C = b("uU2"), w = b("uU3"), T = b("uU4"), E = b("uU5"), D = b("uU6"), O = b("uU7"), k = b("uSpin"), M = b("uBg"), N = b("uStopCount"), P = b("uPalette[0]");
+		function F() {
 			let n = o(), r = t.clientWidth || 320, i = t.clientHeight || 320, a = Math.max(1, Math.round(r * n)), s = Math.max(1, Math.round(i * n));
 			(t.width !== a || t.height !== s) && (t.width = a, t.height = s), e.viewport(0, 0, t.width, t.height);
 		}
-		function F(a) {
+		function R(a) {
 			s?.(a);
-			let l = o(), f = t.width || 1, m = t.height || 1, _ = Math.min(f, m) || 1, v = f / Math.max(m, 1), y = u(a, n.breathing, .6);
-			if (e.useProgram(p), e.bindVertexArray(g), e.enable(e.BLEND), e.blendFunc(e.ONE, e.ONE_MINUS_SRC_ALPHA), n.background === "transparent") e.clearColor(0, 0, 0, 0);
+			let f = l?.() ? Z : a, p = o(), h = t.width || 1, v = t.height || 1, y = Math.min(h, v) || 1, b = h / Math.max(v, 1), A = u(f, n.breathing, .6);
+			if (e.useProgram(m), e.bindVertexArray(_), e.enable(e.BLEND), e.blendFunc(e.ONE, e.ONE_MINUS_SRC_ALPHA), n.background === "transparent") e.clearColor(0, 0, 0, 0);
 			else {
 				let t = c(n.background);
 				e.clearColor(t[0], t[1], t[2], 1);
 			}
 			e.clear(e.COLOR_BUFFER_BIT);
-			let b = n.dotSize * l * 2 / _;
-			e.uniform4f(S, f, m, l, a), e.uniform4f(C, n.radius, b, n.baseOpacity, v), e.uniform4f(w, .15, .85 * n.depthFade, .6, .4), e.uniform4f(T, n.parallax, i.push, i.bloom, i.active), e.uniform4f(E, i.x, i.y, L, y), e.uniform4f(D, I.x, I.y, n.background === "transparent" ? 0 : 1, 0);
-			let x = d(a, n.axisTilt * Math.PI / 180, n.rotationSpeed);
-			e.uniformMatrix3fv(O, !1, [
-				x[0],
-				x[3],
-				x[6],
-				x[1],
-				x[4],
-				x[7],
-				x[2],
-				x[5],
-				x[8]
+			let j = n.dotSize * p * 2 / y;
+			e.uniform4f(x, h, v, p, f), e.uniform4f(S, n.radius, j, n.baseOpacity, b), e.uniform4f(C, .15, .85 * n.depthFade, .6, .4), e.uniform4f(w, n.parallax, i.push, i.bloom, i.active), e.uniform4f(T, i.x, i.y, L, A), e.uniform4f(E, I.x, I.y, n.background === "transparent" ? 0 : 1, 0);
+			let F = 1.18 * Math.max(b, 1);
+			e.uniform4f(D, +(n.layout === "plane"), n.gravityStrength, n.gravityRadius, F), e.uniform4f(O, i.velX, i.velY, n.twinkle, i.active);
+			let R = d(f, n.axisTilt * Math.PI / 180, n.rotationSpeed);
+			e.uniformMatrix3fv(k, !1, [
+				R[0],
+				R[3],
+				R[6],
+				R[1],
+				R[4],
+				R[7],
+				R[2],
+				R[5],
+				R[8]
 			]);
-			let A = r(), j = Math.min(A.length, 4);
-			if (e.uniform1i(M, j), n.background === "transparent") e.uniform4f(k, 0, 0, 0, 0);
+			let z = r(), B = Math.min(z.length, 4);
+			if (e.uniform1i(N, B), n.background === "transparent") e.uniform4f(M, 0, 0, 0, 0);
 			else {
 				let t = c(n.background);
-				e.uniform4f(k, t[0], t[1], t[2], 1);
+				e.uniform4f(M, t[0], t[1], t[2], 1);
 			}
-			let P = new Float32Array(12);
+			let V = new Float32Array(12);
 			for (let e = 0; e < 4; e++) {
-				let t = c(A[Math.min(e, j - 1)] ?? A[0]);
-				P[e * 3 + 0] = t[0], P[e * 3 + 1] = t[1], P[e * 3 + 2] = t[2];
+				let t = c(z[Math.min(e, B - 1)] ?? z[0]);
+				V[e * 3 + 0] = t[0], V[e * 3 + 1] = t[1], V[e * 3 + 2] = t[2];
 			}
-			e.uniform3fv(N, P), e.drawArraysInstanced(e.TRIANGLES, 0, 6, h), e.bindVertexArray(null);
+			e.uniform3fv(P, V), e.drawArraysInstanced(e.TRIANGLES, 0, 12, g), e.bindVertexArray(null);
 		}
 		return {
-			frame: F,
+			frame: R,
 			shouldContinue: a,
-			resize: P,
+			resize: F,
 			teardown: () => {
-				e.deleteProgram(p), e.deleteVertexArray(g), e.deleteBuffer(_), e.deleteBuffer(y);
+				e.deleteProgram(m), e.deleteVertexArray(_), e.deleteBuffer(v);
 			}
 		};
 	};
 }
 //#endregion
 //#region src/components/custom/dot-matrix/composables/useDotMatrix.ts
-function re(e) {
+function se(e) {
 	return e === "attract" ? -1 : 1;
 }
 function $(e, n) {
-	let { config: r, getPalette: i } = n, a = n.mode ?? "live", o = t({ respectReducedMotion: r.respectReducedMotion }), c = R(), l = null, u = 0;
-	function d(e) {
-		let t = u > 0 ? (e - u) * 1e3 : 16.7;
+	let { config: r, getPalette: i } = n, a = n.mode ?? "live", o = t({ respectReducedMotion: r.respectReducedMotion }), c = R(), l = null, u = 0, d = 0, f = 0;
+	function p(e, t, n, r, i, a) {
+		let o = 2 * Math.PI / Math.max(r, .001), s = t + (o * o * (n - e) - 2 * i * o * t) * a;
+		return [e + s * a, s];
+	}
+	function m(e) {
+		let t = u > 0 ? (e - u) * 1e3 : 16.7, n = Math.min(t / 1e3, .05);
 		if (u = e, o.tick(t), !r.interactive || !o.active.value) {
-			c.active += (0 - c.active) * .12, c.push *= .9, c.bloom *= .9;
+			[c.active, f] = p(c.active, f, 0, .5, .7, n), [c.push, d] = p(c.push, d, 0, .5, .7, n), c.bloom *= .9, c.velX *= .9, c.velY *= .9, c.accelMag *= .9;
 			return;
 		}
-		let n = o.smoothedPosition.value;
-		c.x = n.x, c.y = n.y, c.active += (1 - c.active) * .2;
-		let i = o.speed.value, a = re(r.pointerMode) * Math.min(.35, .08 + i * .6);
-		c.push += (a - c.push) * .2, c.bloom = Math.max(c.bloom * .9, o.burst.value);
+		let i = o.smoothedPosition.value;
+		c.x = i.x, c.y = i.y, [c.active, f] = p(c.active, f, 1, .42, .7, n);
+		let a = o.speed.value, s = se(r.pointerMode) * Math.min(1, .7 + a * .6);
+		[c.push, d] = p(c.push, d, s, .42, .7, n), c.bloom = Math.max(c.bloom * .9, o.burst.value);
+		let l = o.velocity.value;
+		c.velX = l.x, c.velY = l.y;
+		let m = o.acceleration.value;
+		c.accelMag = Math.hypot(m.x, m.y);
 	}
-	let f = () => {
+	let h = () => {
 		o.onPointerEnter(), r.interactive && l?.wake();
-	}, p = (e) => {
+	}, g = (e) => {
 		o.onPointerMove(e), r.interactive && l?.wake();
-	}, m = (e) => e.parentElement ?? e;
-	function h(e) {
-		let t = m(e);
-		t.addEventListener("pointermove", p), t.addEventListener("pointerenter", f), t.addEventListener("pointerleave", o.onPointerLeave);
+	}, _ = (e) => e.parentElement ?? e;
+	function v(e) {
+		let t = _(e);
+		t.addEventListener("pointermove", g), t.addEventListener("pointerenter", h), t.addEventListener("pointerleave", o.onPointerLeave);
 	}
-	function g(e) {
-		let t = m(e);
-		t.removeEventListener("pointermove", p), t.removeEventListener("pointerenter", f), t.removeEventListener("pointerleave", o.onPointerLeave);
+	function y(e) {
+		let t = _(e);
+		t.removeEventListener("pointermove", g), t.removeEventListener("pointerenter", h), t.removeEventListener("pointerleave", o.onPointerLeave);
 	}
-	let _ = () => {
+	let b = () => {
 		let t = e.value;
 		if (!t) return null;
 		if (!l) {
-			h(t);
+			v(t);
 			let e = {
 				canvas: t,
 				config: r,
 				getPalette: i,
 				pointer: c,
 				shouldContinue: () => !0,
-				onFrame: d
+				onFrame: m,
+				getReducedMotion: () => l?.reducedMotion ?? !1
 			};
 			l = s(t, {
 				mode: a,
 				respectReducedMotion: r.respectReducedMotion,
-				setupWGPU: ee(e),
-				setupGL: ne(e)
+				setupWGPU: ie(e),
+				setupGL: oe(e)
 			}), l.armAsync();
 		}
 		return l;
 	};
-	queueMicrotask(() => _());
-	let v = {
+	queueMicrotask(() => b());
+	let x = {
 		get backend() {
-			return _()?.backend ?? "webgpu";
+			return b()?.backend ?? "webgpu";
 		},
-		pause: () => _()?.suspend("manual"),
-		resume: () => _()?.resume("manual"),
-		wake: () => _()?.wake(),
-		renderAt: (e) => _()?.renderAt(e),
+		pause: () => b()?.suspend("manual"),
+		resume: () => b()?.resume("manual"),
+		wake: () => b()?.wake(),
+		renderAt: (e) => b()?.renderAt(e),
 		get reducedMotion() {
 			return l?.reducedMotion ?? !1;
 		},
 		dispose: () => {
 			let t = e.value;
-			t && g(t), o.dispose(), l?.dispose();
+			t && y(t), o.dispose(), l?.dispose();
 		}
 	};
-	return T(() => v.dispose()), v;
+	return T(() => x.dispose()), x;
 }
 //#endregion
 //#region src/components/custom/dot-matrix/DotMatrix.vue
-var ie = /* @__PURE__ */ e(/* @__PURE__ */ C({
+var ce = /* @__PURE__ */ e(/* @__PURE__ */ C({
 	__name: "DotMatrix",
 	props: {
 		config: { default: () => F },
@@ -627,4 +771,4 @@ var ie = /* @__PURE__ */ e(/* @__PURE__ */ C({
 	}
 }), [["__scopeId", "data-v-1f36e34c"]]);
 //#endregion
-export { F as DEFAULT_DOT_MATRIX_CONFIG, ie as DotMatrix, v as FACING_HI, m as FACING_LO, g as GOLDEN_ANGLE, f as GOLDEN_RATIO, M as MAX_DOTS, N as MAX_DOT_STOPS, l as SIZE_TAPER_BASE, h as SIZE_TAPER_GAIN, P as WARM_IDENTITY_PALETTE, _ as applyMat3, u as breathRadius, p as facingFade, y as fibonacciDot, d as spinMatrix, $ as useDotMatrix };
+export { F as DEFAULT_DOT_MATRIX_CONFIG, ce as DotMatrix, v as FACING_HI, m as FACING_LO, g as GOLDEN_ANGLE, f as GOLDEN_RATIO, M as MAX_DOTS, N as MAX_DOT_STOPS, l as SIZE_TAPER_BASE, h as SIZE_TAPER_GAIN, P as WARM_IDENTITY_PALETTE, _ as applyMat3, u as breathRadius, p as facingFade, y as fibonacciDot, d as spinMatrix, $ as useDotMatrix };