@mkbabb/glass-ui 4.1.0 → 4.2.0

package/dist/goo-dot-matrix.js

@@ -1,22 +1,30 @@
-import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { t } from "./usePointerVelocityField-QLsy3_kv.js";
-import { a as n, t as r } from "./useGpuSubstrate-4pTcp6mX.js";
-import { n as i, t as a } from "./compile-nZ1xVYTp.js";
-import { s as o, t as s } from "./color-Cs0-oxYL.js";
-import { t as c } from "./useIntersectionPause-Dbozzjgm.js";
-import { u as l } from "./dotMatrixField-D_x9_1qq.js";
-import { a as u, c as d, d as f, i as p, l as m, n as h, o as g, r as _, s as v, t as y, u as b } from "./uniformBridgeWGPU-CtAKl45L.js";
-import { computed as x, createElementBlock as S, createElementVNode as C, defineComponent as w, normalizeStyle as T, onScopeDispose as E, openBlock as D, ref as ee, useTemplateRef as O, watch as k } from "vue";
+import { t as e } from "./_plugin-vue_export-helper-gLzyemvl.js";
+import { t } from "./usePointerVelocityField-BrkqZFhj.js";
+import { a as n, t as r } from "./useGpuSubstrate-Ceet70xq.js";
+import { n as i, t as a } from "./compile-INR_tPk_.js";
+import { s as o, t as s } from "./color-B9jZdhJX.js";
+import { t as c } from "./useIntersectionPause-DO8Vl4gs.js";
+import { u as l } from "./dotMatrixField-CRO0ZFk4.js";
+import { a as u, c as d, d as f, i as p, l as m, n as h, o as g, r as _, s as v, t as y, u as b } from "./uniformBridgeWGPU-BCse1SHU.js";
+import { computed as x, createElementBlock as S, createElementVNode as C, defineComponent as w, normalizeStyle as T, onScopeDispose as ee, openBlock as E, ref as D, useTemplateRef as O, watch as k } from "vue";
 //#region src/components/custom/goo-dot-matrix/constants.ts
-var A = 4, j = 96, M = [{
-	L: .92,
-	C: .03,
-	h: 78
-}, {
-	L: .84,
-	C: .07,
-	h: 62
-}], N = {
+var A = 4, j = [
+	{
+		L: .96,
+		C: .13,
+		h: 85
+	},
+	{
+		L: .82,
+		C: .18,
+		h: 45
+	},
+	{
+		L: .72,
+		C: .15,
+		h: 62
+	}
+], M = {
 	variant: "dot-field",
 	field: {
 		...f,
@@ -27,60 +35,71 @@ var A = 4, j = 96, M = [{
 	dotMax: .42,
 	fieldFloor: .06,
 	dotBrightFloor: .35,
-	cols: 56,
+	presenceFloor: .2,
+	weldSwell: .5,
+	weldSpecular: .25,
 	flowAmt: .35,
-	palette: M,
+	palette: j,
 	background: "transparent",
+	fieldGround: "transparent",
 	interactive: !1,
 	pointerMode: "repel",
 	pointerRadius: .35,
 	respectReducedMotion: !0
-}, P = {
+}, N = .1, P = .45, F = {
 	s8: 0,
 	s9: 4,
 	s10: 8,
-	s11: 12
+	s11: 12,
+	s12: 16,
+	s13: 20
 };
-function F(e) {
+function I(e) {
 	return +(e === "dot-dither");
 }
-function I(e) {
+function L(e) {
 	return e === "attract" ? -1 : 1;
 }
-function L() {
+function R() {
 	return {
 		x: 0,
 		y: 0,
 		active: 0,
-		bloom: 0
+		bloom: 0,
+		timeSec: 0,
+		latticeSquash: 1
 	};
 }
-function R() {
-	let e = /* @__PURE__ */ new ArrayBuffer(64);
+function z() {
+	let e = /* @__PURE__ */ new ArrayBuffer(96);
 	return {
 		buffer: e,
 		f32: new Float32Array(e)
 	};
 }
-function z(e, t, n, r, i) {
+function B(e, t, n, r, i) {
 	let { f32: a } = e;
-	return a[P.s8 + 0] = F(t.variant), a[P.s8 + 1] = Math.max(t.dotPixelSize * r, 4), a[P.s8 + 2] = t.fieldFloor, a[P.s8 + 3] = t.dotBrightFloor, a[P.s9 + 0] = t.dotMin, a[P.s9 + 1] = t.dotMax, a[P.s9 + 2] = t.pointerRadius, a[P.s9 + 3] = I(t.pointerMode), a[P.s10 + 0] = n.w, a[P.s10 + 1] = n.h, a[P.s10 + 2] = r, a[P.s10 + 3] = 0, a[P.s11 + 0] = t.interactive ? i.active : 0, a[P.s11 + 1] = i.x, a[P.s11 + 2] = i.y, a[P.s11 + 3] = i.bloom, e;
+	return a[F.s8 + 0] = I(t.variant), a[F.s8 + 1] = Math.max(t.dotPixelSize * r, 4), a[F.s8 + 2] = t.fieldFloor, a[F.s8 + 3] = t.dotBrightFloor, a[F.s9 + 0] = t.dotMin, a[F.s9 + 1] = t.dotMax, a[F.s9 + 2] = t.pointerRadius, a[F.s9 + 3] = L(t.pointerMode), a[F.s10 + 0] = n.w, a[F.s10 + 1] = n.h, a[F.s10 + 2] = r, a[F.s10 + 3] = t.fieldGround === "transparent" ? 0 : 1, a[F.s11 + 0] = t.interactive ? i.active : 0, a[F.s11 + 1] = i.x, a[F.s11 + 2] = i.y, a[F.s11 + 3] = i.bloom, a[F.s12 + 0] = t.presenceFloor, a[F.s12 + 1] = N, a[F.s12 + 2] = P, a[F.s12 + 3] = i.timeSec, a[F.s13 + 0] = t.weldSwell, a[F.s13 + 1] = t.weldSpecular, a[F.s13 + 2] = t.flowAmt, a[F.s13 + 3] = i.latticeSquash, e;
 }
 //#endregion
 //#region src/components/custom/goo-dot-matrix/shaders/goo-dot.wgsl.ts
-var B = p.indexOf("// ── Full-screen triangle vertex stage"), V = `
-${B >= 0 ? p.slice(0, B) : p}
+var V = p.indexOf("// ── Full-screen triangle vertex stage"), H = `
+${V >= 0 ? p.slice(0, V) : p}
 
-// ── Dot-grid uniforms (the s8/s9 lanes — see uniformBridgeWGPU.ts; the SoT extend) ──
+// ── Dot-grid uniforms (the s8–s13 lanes — see uniformBridgeWGPU.ts; the SoT extend) ──
 struct DotUniforms {
   // s8: (uDotMode, uDotPixelSize, uFieldFloor, uDotBrightFloor)
   s8: vec4<f32>,
   // s9: (uDotMin, uDotMax, uPointerRadius, uPointerMode)
   s9: vec4<f32>,
-  // s10: (uResX, uResY, uDpr, _pad) — the device-px resolution the cell grid quantizes to
+  // s10: (uResX, uResY, uDpr, uShadowGate) — res + the opaque-ground cartoon-shadow gate
   s10: vec4<f32>,
   // s11: (uPointerActive, uPointerX, uPointerY, uBloom) — the dot-cursor influence
   s11: vec4<f32>,
+  // s12: (uPresenceFloor, uWeldLo, uWeldHi, uTime) — Move 1 floor + Move 2 weld band + twinkle clock
+  s12: vec4<f32>,
+  // s13: (uWeldSwell, uWeldSpecular, uFlowAmt, uLatticeSquash) — Move 2 ridge + Move 4b lattice
+  s13: vec4<f32>,
 };
 @group(0) @binding(1) var<uniform> dg: DotUniforms;
 
@@ -127,9 +146,18 @@ fn fs_main(in: DotVSOut) -> @location(0) vec4<f32> {
   let uPointerRadius  = max(dg.s9.z, 1e-4);
   let uPointerMode    = dg.s9.w;          // +1 repel (push out), -1 attract (pull in)
   let uRes            = dg.s10.xy;
+  let uShadowGate     = dg.s10.w;         // 1 when an opaque ground is present (cast shadow), else 0
   let pAct            = dg.s11.x;
   let cursor          = dg.s11.yz;        // NDC-ish [-0.5,0.5] (the field's uv space)
   let uBloom          = dg.s11.w;
+  let uPresenceFloor  = dg.s12.x;         // Move 1 — the base-lattice floor
+  let uWeldLo         = dg.s12.y;         // Move 2 — the weld band lower fCell
+  let uWeldHi         = dg.s12.z;         // Move 2 — the weld band upper fCell
+  let uTime           = dg.s12.w;         // the φ-twinkle clock (s)
+  let uWeldSwell      = dg.s13.x;         // Move 2 — the neck-ridge radius swell
+  let uWeldSpecular   = dg.s13.y;         // Move 2 — the multiplicative HDR weld pop
+  let uFlowAmt        = dg.s13.z;         // Move 4b — the liquid-lattice advection
+  let uLatticeSquash  = dg.s13.w;         // Move 4b — the volume-preserving squash
 
   let bodyR = u.s0.y + breath(u.s0.z) * u.s0.w;
 
@@ -137,6 +165,7 @@ fn fs_main(in: DotVSOut) -> @location(0) vec4<f32> {
   //    pixel coordinate is in.pos.xy (device px).
   let fragCoord = in.pos.xy;
   let cell      = floor(fragCoord / uDotPixelSize);
+  let cellHalf  = uDotPixelSize * 0.5;
   let cellCtr   = (cell + 0.5) * uDotPixelSize;
 
   // 2. The field AT THE CELL CENTER (so every fragment in a cell agrees on ONE dot). The cell
@@ -150,24 +179,53 @@ fn fs_main(in: DotVSOut) -> @location(0) vec4<f32> {
   let toCursor   = cellCtrUv - cursor;
   let cdist      = length(toCursor);
   let influence  = (1.0 - smoothstep(0.0, uPointerRadius, cdist)) * pAct;
-  let sampleUv   = cellCtrUv + normalize(toCursor + vec2<f32>(1e-6)) * influence * uPointerMode * 0.03;
+  let cursorUv   = cellCtrUv + normalize(toCursor + vec2<f32>(1e-6)) * influence * uPointerMode * 0.03;
+
+  // MOVE 4b — the LIQUID LATTICE. Probe the field once at the cursor-shifted cell to get the
+  //    local gradient, then advect the sample DOWN that gradient toward the forming core (the
+  //    dots migrate INTO the goo, not a screen-locked grid). The volume-preserving squash leans
+  //    the cell on the pulse + a fast drag (X·Y ≈ 1, a liquid lean not a balloon).
+  let probe      = sceneDistG(cursorUv);
+  let probeF     = clamp(-probe.x / max(bodyR, 1e-4), 0.0, 1.0);
+  let flowDir    = normalize(probe.yz + vec2<f32>(1e-6));
+  let sq         = max(uLatticeSquash, 1e-3);
+  let leanUv     = vec2<f32>(cursorUv.x / sq, cursorUv.y * sq);  // vol-preserving X·Y ≈ 1
+  let sampleUv   = leanUv - flowDir * uFlowAmt * probeF * 0.06;
 
   // 4. The field value at the cell — thickness = clamp(-d/bodyR, 0, 1) (metaball.wgsl line 500,
   //    the one-line re-use). 0 at the silhouette → 1 deep in the core — the goo↔dot bridge.
   let scene = sceneDistG(sampleUv);
   let fCell = clamp(-scene.x / max(bodyR, 1e-4), 0.0, 1.0);
 
-  // 5. The dot radius (px) — field-driven: dense+big inside, small at the rim, 0 outside the
-  //    floor. The cursor swells the near-cursor dots (mix toward 1.5× + the accel bloom).
-  let cellHalf = uDotPixelSize * 0.5;
-  let baseR    = (uDotMin + (uDotMax - uDotMin) * smoothstep(uFieldFloor, 1.0, fCell)) * cellHalf;
-  let dotR     = baseR * (1.0 + influence * 0.5 + uBloom * influence);
+  // MOVE 1 — the phi-banded PRESENCE FLOOR. band is the meniscus rise the old step() deleted;
+  //    core is the body rise. present NEVER drops below uPresenceFloor -> a living lattice
+  //    fills the card corner-to-corner. uPresenceFloor = 0 => byte-identical to the old gate.
+  let band    = smoothstep(0.0, max(uFieldFloor, 1e-4), fCell);
+  let core    = smoothstep(uFieldFloor, 1.0, fCell);
+  let present = max(uPresenceFloor, band);
+
+  // MOVE 2 — the NECK-RIDGE. The weld is gated on the rim/iso BAND (where two membranes meet),
+  //    NOT on core (lower at the waist), AND on a shallow field gradient (a flat welding
+  //    membrane). At a weld the dots get the field's biggest+brightest swell — the climax.
+  let gradMag = length(scene.yz);
+  let inBand  = smoothstep(uWeldLo, (uWeldLo + uWeldHi) * 0.5, fCell)
+              * (1.0 - smoothstep((uWeldLo + uWeldHi) * 0.5, uWeldHi, fCell));
+  let weld    = inBand * (1.0 - smoothstep(0.0, 0.25, gradMag));
+
+  // 5. The dot radius (px). The presence floor sets the base; core ramps the body; the weld
+  //    swells the neck dots ~1+uWeldSwell (pinned sub-cell so they stay ROUND, not clipped
+  //    squares); the cursor swell + accel bloom ride on top.
+  let coreR   = (uDotMin + (uDotMax - uDotMin) * core);
+  let baseR   = mix(uDotMin, coreR, present)
+              * (1.0 + uWeldSwell * weld)
+              * (1.0 + influence * 0.5 + uBloom * influence);
+  let dotR    = clamp(baseR, 0.0, 0.98) * cellHalf;  // the √φ cell-clip ceiling — round dots
 
   var mask = 1.0;
   if (uDotMode > 0.5) {
     // §T2 Register-A dither: ORDERED-dither the field thickness into ON/OFF dots — denser at
     // the core, sparser at the rim (the classic halftone). The dot still AA-stamps below.
-    mask = step(0.5, fCell + bayer8(cell) - 0.5);
+    mask = step(0.5, max(uPresenceFloor, fCell) + bayer8(cell) - 0.5);
   }
 
   // 6. The antialiased circle at the cell center (the fwidth-feathered Book-of-Shaders dot —
@@ -176,30 +234,47 @@ fn fs_main(in: DotVSOut) -> @location(0) vec4<f32> {
   let aa  = max(fwidth(pd), 1e-4);
   let dot = (1.0 - smoothstep(dotR - aa, dotR + aa, pd)) * mask;
 
-  // 7. The brightness/color ALSO reads fCell (dim outside, bright inside) on the SAME OKLCh
-  //    ramp the metaball pass samples (the ONE color source). The tone reads DEPTH (the core
-  //    is the bright cream stop, the rim the amber stop) so the field reads TONALLY on both
-  //    grounds; the brightness multiplies the sampled stop's luminance.
-  let bright = uDotBrightFloor + (1.0 - uDotBrightFloor) * fCell + uBloom * influence * 0.6;
-  let tone   = clamp(1.0 - fCell, 0.0, 1.0);
-  var oklch  = samplePaletteOklch(tone);
-  oklch.x    = clamp(oklch.x * clamp(bright, 0.0, 1.6), 0.0, 1.0);
-  let lin    = oklabToLinearSrgb(oklchToOklab(gamutClampOklch(oklch)));
-  let rgb    = clamp(linearToSrgb(lin), vec3<f32>(0.0), vec3<f32>(1.0));
-
-  // No dot where the field is below the floor (the dots stop at the silhouette band).
-  let alpha = dot * step(uFieldFloor, fCell);
-  if (alpha < 0.002) { discard; }
-
-  // Premultiplied-alpha output (the warm-cream dots additive over the clear).
-  return vec4<f32>(rgb * alpha, alpha);
-}
-`, H = g.indexOf("void main()"), U = H >= 0 ? g.slice(0, H) : g, W = "#version 300 es\nprecision highp float;\nin vec2 aPosition;\nout vec2 vUv;\nvoid main() {\n  vUv = aPosition * 0.5 + 0.5;\n  gl_Position = vec4(aPosition, 0.0, 1.0);\n}", G = `${U}
+  // MOVE 3 — the GATED CARTOON SHADOW. A larger, darker disc UNDER the bright dot, offset by
+  //    the cursor burst (the velocity tell). GATED on uShadowGate (an opaque ground to cast
+  //    onto — no dark halos on a light/transparent host). Premultiplied UNDER the dot.
+  let twinkle = 0.85 + 0.15 * sin(uTime * 0.6 + hash21(cell) * 6.2831853);
+  let shOff   = normalize(toCursor + vec2<f32>(1e-6)) * (0.6 + uBloom * 2.2) * uShadowGate;
+  let shPd    = length(fragCoord - (cellCtr + shOff * cellHalf));
+  let shadowR = dotR * 1.45;
+  let shadow  = (1.0 - smoothstep(shadowR - aa, shadowR + aa, shPd)) * mask
+              * uShadowGate * (present * 0.55);
+
+  // 7. The TECHNICOLOR read (Move 3). The tone maps fCell over the 3-stop warm ramp: deep core
+  //    = hot butter-gold (stop 0), the weld band = molten coral (stop 1), the base lattice =
+  //    deep amber (stop 2). On a light host the FLOOR dots read coral/amber (not the L0.96 core
+  //    stop) so the resting lattice carries chroma. The weld specular is a MULTIPLICATIVE HDR
+  //    pop that can exceed the core ceiling — the waist is the brightest band.
+  let bright  = (uDotBrightFloor + (1.0 - uDotBrightFloor) * core + uBloom * influence * 0.6)
+              * (1.0 + uWeldSpecular * weld) * twinkle;
+  // tone: 0 deep core → 1 base lattice; the weld pulls toward the coral stop (~0.5).
+  let tone    = clamp(mix(1.0 - core, 0.5, weld), 0.0, 1.0);
+  var oklch   = samplePaletteOklch(tone);
+  oklch.x     = clamp(oklch.x * clamp(bright, 0.0, 1.8), 0.0, 1.0);
+  let lin     = oklabToLinearSrgb(oklchToOklab(gamutClampOklch(oklch)));
+  let rgb     = clamp(linearToSrgb(lin), vec3<f32>(0.0), vec3<f32>(1.0));
+
+  let alpha = dot * present * twinkle;
+  if (alpha < 0.002 && shadow < 0.002) { discard; }
+
+  // The cartoon shadow (a warm-dark disc) composited UNDER, then the bright dot OVER. Both
+  // premultiplied. The dot wins where it stamps; the shadow shows in the offset crescent.
+  let shadowRgb = vec3<f32>(0.10, 0.05, 0.02);
+  let outRgb    = rgb * alpha + shadowRgb * shadow * (1.0 - alpha);
+  let outA      = alpha + shadow * (1.0 - alpha);
+  return vec4<f32>(outRgb, outA);
+}`, U = "\nstruct GroundUniforms {\n  // g0: (uGroundTime, uGroundAspect, _pad, _pad)\n  g0: vec4<f32>,\n};\n@group(0) @binding(0) var<uniform> gu: GroundUniforms;\n\nstruct GVSOut {\n  @builtin(position) pos: vec4<f32>,\n  @location(0) uv: vec2<f32>,\n};\n\n@vertex\nfn vs_main(@builtin(vertex_index) vi: u32) -> GVSOut {\n  var p = vec2<f32>(-1.0, -1.0);\n  if (vi == 1u) { p = vec2<f32>(3.0, -1.0); }\n  else if (vi == 2u) { p = vec2<f32>(-1.0, 3.0); }\n  var out: GVSOut;\n  out.pos = vec4<f32>(p, 0.0, 1.0);\n  out.uv = p * 0.5 + 0.5;\n  return out;\n}\n\n@fragment\nfn fs_main(in: GVSOut) -> @location(0) vec4<f32> {\n  let t   = gu.g0.x;\n  let uv  = in.uv;\n  // Two slow warm drifts — the centroid moves so the ground is LIVING (G3c).\n  let d1  = 0.5 + 0.5 * sin(t * 0.11 + uv.x * 2.1);\n  let d2  = 0.5 + 0.5 * sin(t * 0.07 - uv.y * 1.7 + 1.3);\n  let amber = vec3<f32>(0.99, 0.86, 0.62);   // warm gold high\n  let coral = vec3<f32>(0.95, 0.62, 0.42);   // molten coral mid\n  let deep  = vec3<f32>(0.86, 0.50, 0.30);   // deep amber low\n  let g     = mix(deep, coral, d1);\n  let rgb   = mix(g, amber, d2 * (1.0 - uv.y) * 0.8);\n  return vec4<f32>(rgb, 1.0);\n}", W = g.indexOf("void main()"), G = W >= 0 ? g.slice(0, W) : g, K = "#version 300 es\nprecision highp float;\nin vec2 aPosition;\nout vec2 vUv;\nvoid main() {\n  vUv = aPosition * 0.5 + 0.5;\n  gl_Position = vec4(aPosition, 0.0, 1.0);\n}", q = `${G}
 
-// ── Dot-grid uniforms (the s8/s9 lanes — see uniformBridgeWGPU.ts; the SoT extend) ──
+// ── Dot-grid uniforms (the s8–s13 lanes — see uniformBridgeWGPU.ts; the SoT extend) ──
+// The GLSL twin sets these as N named scalars (the WGSL packs vec4 lanes); a unit asserts the
+// dU.* count == the WGSL lane-field count (a dropped uniform reds parity).
 uniform float uDotMode;        // 0 = smooth field-driven dot, 1 = Bayer dither
 uniform float uDotPixelSize;   // device-px cell size
-uniform float uFieldFloor;     // no dot below this field value
+uniform float uFieldFloor;     // the meniscus rise begins here
 uniform float uDotBrightFloor; // dim-outside brightness floor
 uniform float uDotMin;         // rim dot radius (fraction of the cell)
 uniform float uDotMax;         // core dot radius (fraction of the cell)
@@ -207,7 +282,16 @@ uniform float uDotPointerRadius;
 uniform float uDotPointerMode; // +1 repel, -1 attract
 uniform float uDotPointerActive;
 uniform vec2  uDotCursor;      // field-uv cursor [-0.5,0.5]
-uniform float uDotBloom;       // accel-burst bloom
+uniform float uDotBloom;       // accel-burst bloom (the velocity tell)
+uniform float uDotShadowGate;  // 1 when an opaque ground is present (cast the cartoon shadow)
+uniform float uPresenceFloor;  // Move 1 — the base-lattice floor
+uniform float uWeldLo;         // Move 2 — the weld band lower fCell
+uniform float uWeldHi;         // Move 2 — the weld band upper fCell
+uniform float uDotTime;        // the φ-twinkle clock (s)
+uniform float uWeldSwell;      // Move 2 — the neck-ridge radius swell
+uniform float uWeldSpecular;   // Move 2 — the multiplicative HDR weld pop
+uniform float uFlowAmt;        // Move 4b — the liquid-lattice advection
+uniform float uLatticeSquash;  // Move 4b — the volume-preserving squash
 
 // The Codrops Bayer8 ordered-dither macros (the §T2 halftone).
 float bayer2(vec2 a0){ vec2 a = floor(a0); return fract(a.x / 2.0 + a.y * a.y * 0.75); }
@@ -221,6 +305,7 @@ void main() {
   vec2 fragCoord = gl_FragCoord.xy;
   float pix = max(uDotPixelSize, 1.0);
   vec2 cell = floor(fragCoord / pix);
+  float cellHalf = pix * 0.5;
   vec2 cellCtr = (cell + 0.5) * pix;
 
   // 2. The field uv at the cell center (the SAME uv the metaball pass uses).
@@ -230,20 +315,42 @@ void main() {
   vec2 toCursor = cellCtrUv - uDotCursor;
   float cdist = length(toCursor);
   float influence = (1.0 - smoothstep(0.0, max(uDotPointerRadius, 1e-4), cdist)) * uDotPointerActive;
-  vec2 sampleUv = cellCtrUv + normalize(toCursor + vec2(1e-6)) * influence * uDotPointerMode * 0.03;
+  vec2 cursorUv = cellCtrUv + normalize(toCursor + vec2(1e-6)) * influence * uDotPointerMode * 0.03;
+
+  // MOVE 4b — the LIQUID LATTICE. Probe the field, advect down the gradient toward the forming
+  //    core, lean the cell volume-preservingly (X·Y ≈ 1).
+  vec3 probe = sceneDistG(cursorUv);
+  float probeF = clamp(-probe.x / max(bodyR, 1e-4), 0.0, 1.0);
+  vec2 flowDir = normalize(probe.yz + vec2(1e-6));
+  float sq = max(uLatticeSquash, 1e-3);
+  vec2 leanUv = vec2(cursorUv.x / sq, cursorUv.y * sq);
+  vec2 sampleUv = leanUv - flowDir * uFlowAmt * probeF * 0.06;
 
   // 4. The field value at the cell — thickness = clamp(-d/bodyR, 0, 1) (the goo↔dot bridge).
   vec3 scene = sceneDistG(sampleUv);
   float fCell = clamp(-scene.x / max(bodyR, 1e-4), 0.0, 1.0);
 
-  // 5. The field-driven dot radius (px) + the cursor swell + the accel bloom.
-  float cellHalf = pix * 0.5;
-  float baseR = (uDotMin + (uDotMax - uDotMin) * smoothstep(uFieldFloor, 1.0, fCell)) * cellHalf;
-  float dotR = baseR * (1.0 + influence * 0.5 + uDotBloom * influence);
+  // MOVE 1 — the φ-banded PRESENCE FLOOR (uPresenceFloor = 0 ⇒ byte-identical to the old gate).
+  float band = smoothstep(0.0, max(uFieldFloor, 1e-4), fCell);
+  float core = smoothstep(uFieldFloor, 1.0, fCell);
+  float present = max(uPresenceFloor, band);
+
+  // MOVE 2 — the NECK-RIDGE (weld gated on the rim/iso band + a shallow gradient, not on core).
+  float gradMag = length(scene.yz);
+  float inBand = smoothstep(uWeldLo, (uWeldLo + uWeldHi) * 0.5, fCell)
+               * (1.0 - smoothstep((uWeldLo + uWeldHi) * 0.5, uWeldHi, fCell));
+  float weld = inBand * (1.0 - smoothstep(0.0, 0.25, gradMag));
+
+  // 5. The field-driven dot radius (px) + the neck-ridge swell + the cursor swell + accel bloom.
+  float coreR = (uDotMin + (uDotMax - uDotMin) * core);
+  float baseR = mix(uDotMin, coreR, present)
+              * (1.0 + uWeldSwell * weld)
+              * (1.0 + influence * 0.5 + uDotBloom * influence);
+  float dotR = clamp(baseR, 0.0, 0.98) * cellHalf;
 
   float mask = 1.0;
   if (uDotMode > 0.5) {
-    mask = step(0.5, fCell + bayer8(cell) - 0.5);
+    mask = step(0.5, max(uPresenceFloor, fCell) + bayer8(cell) - 0.5);
   }
 
   // 6. The crisp fwidth-feathered SDF dot (the ONE AA canon, ~1px band at any DPR).
@@ -251,91 +358,143 @@ void main() {
   float aa = max(fwidth(pd), 1e-4);
   float dot = (1.0 - smoothstep(dotR - aa, dotR + aa, pd)) * mask;
 
-  // 7. The brightness/color reads fCell on the SAME OKLCh ramp (the ONE color source).
-  float bright = uDotBrightFloor + (1.0 - uDotBrightFloor) * fCell + uDotBloom * influence * 0.6;
-  float tone = clamp(1.0 - fCell, 0.0, 1.0);
+  // MOVE 3 — the GATED CARTOON SHADOW (offset by the cursor burst — the velocity tell — gated
+  //    on uDotShadowGate so no dark halos paint on a light/transparent host).
+  float twinkle = 0.85 + 0.15 * sin(uDotTime * 0.6 + hash21(cell) * 6.2831853);
+  vec2 shOff = normalize(toCursor + vec2(1e-6)) * (0.6 + uDotBloom * 2.2) * uDotShadowGate;
+  float shPd = length(fragCoord - (cellCtr + shOff * cellHalf));
+  float shadowR = dotR * 1.45;
+  float shadow = (1.0 - smoothstep(shadowR - aa, shadowR + aa, shPd)) * mask
+               * uDotShadowGate * (present * 0.55);
+
+  // 7. The TECHNICOLOR read (Move 3) — core gold, weld coral (the multiplicative HDR specular
+  //    pop), base lattice amber; the floor dots carry chroma.
+  float bright = (uDotBrightFloor + (1.0 - uDotBrightFloor) * core + uDotBloom * influence * 0.6)
+               * (1.0 + uWeldSpecular * weld) * twinkle;
+  float tone = clamp(mix(1.0 - core, 0.5, weld), 0.0, 1.0);
   vec3 oklch = samplePaletteOklch(tone);
-  oklch.x = clamp(oklch.x * clamp(bright, 0.0, 1.6), 0.0, 1.0);
+  oklch.x = clamp(oklch.x * clamp(bright, 0.0, 1.8), 0.0, 1.0);
   vec3 lin = oklabToLinearSrgb(oklchToOklab(gamutClampOklch(oklch)));
   vec3 rgb = clamp(linearToSrgb(lin), vec3(0.0), vec3(1.0));
 
-  float alpha = dot * step(uFieldFloor, fCell);
-  if (alpha < 0.002) discard;
+  float alpha = dot * present * twinkle;
+  if (alpha < 0.002 && shadow < 0.002) discard;
 
-  fragColor = vec4(rgb * alpha, alpha);
-}`, K = 64, q = 8, J = 1, Y = 2, X = "[GooDotMatrix]";
-function Z(e, t) {
+  vec3 shadowRgb = vec3(0.10, 0.05, 0.02);
+  vec3 outRgb = rgb * alpha + shadowRgb * shadow * (1.0 - alpha);
+  float outA = alpha + shadow * (1.0 - alpha);
+  fragColor = vec4(outRgb, outA);
+}`, J = "#version 300 es\nprecision highp float;\nin vec2 aPosition;\nout vec2 vUv;\nvoid main() {\n  vUv = aPosition * 0.5 + 0.5;\n  gl_Position = vec4(aPosition, 0.0, 1.0);\n}", te = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nout vec4 fragColor;\nuniform float uGroundTime;\nvoid main() {\n  float d1 = 0.5 + 0.5 * sin(uGroundTime * 0.11 + vUv.x * 2.1);\n  float d2 = 0.5 + 0.5 * sin(uGroundTime * 0.07 - vUv.y * 1.7 + 1.3);\n  vec3 amber = vec3(0.99, 0.86, 0.62);\n  vec3 coral = vec3(0.95, 0.62, 0.42);\n  vec3 deep  = vec3(0.86, 0.50, 0.30);\n  vec3 g = mix(deep, coral, d1);\n  vec3 rgb = mix(g, amber, d2 * (1.0 - vUv.y) * 0.8);\n  fragColor = vec4(rgb, 1.0);\n}", Y = 64, X = 8, ne = 1, Z = 2, Q = "[GooDotMatrix]";
+function re(e, t) {
 	let n = e.createShaderModule({
-		label: `${X} goo-dot.wgsl`,
-		code: V
+		label: `${Q} goo-dot.wgsl`,
+		code: H
 	}), r = e.createBuffer({
-		label: `${X} field-uniforms`,
+		label: `${Q} field-uniforms`,
 		size: y,
-		usage: K | q
+		usage: Y | X
 	}), i = e.createBuffer({
-		label: `${X} dot-uniforms`,
-		size: 64,
-		usage: K | q
+		label: `${Q} dot-uniforms`,
+		size: 96,
+		usage: Y | X
 	}), a = e.createBindGroupLayout({
-		label: `${X} bgl`,
+		label: `${Q} bgl`,
 		entries: [{
 			binding: 0,
-			visibility: J | Y,
+			visibility: ne | Z,
 			buffer: { type: "uniform" }
 		}, {
 			binding: 1,
-			visibility: Y,
+			visibility: Z,
+			buffer: { type: "uniform" }
+		}]
+	}), o = e.createRenderPipeline({
+		label: `${Q} pipeline`,
+		layout: e.createPipelineLayout({ bindGroupLayouts: [a] }),
+		vertex: {
+			module: n,
+			entryPoint: "vs_main"
+		},
+		fragment: {
+			module: n,
+			entryPoint: "fs_main",
+			targets: [{
+				format: t,
+				blend: {
+					color: {
+						srcFactor: "one",
+						dstFactor: "one-minus-src-alpha",
+						operation: "add"
+					},
+					alpha: {
+						srcFactor: "one",
+						dstFactor: "one-minus-src-alpha",
+						operation: "add"
+					}
+				}
+			}]
+		},
+		primitive: { topology: "triangle-list" }
+	}), s = e.createBindGroup({
+		label: `${Q} bg`,
+		layout: a,
+		entries: [{
+			binding: 0,
+			resource: { buffer: r }
+		}, {
+			binding: 1,
+			resource: { buffer: i }
+		}]
+	}), c = e.createShaderModule({
+		label: `${Q} goo-dot-ground.wgsl`,
+		code: U
+	}), l = e.createBuffer({
+		label: `${Q} ground-uniforms`,
+		size: 16,
+		usage: Y | X
+	}), u = e.createBindGroupLayout({
+		label: `${Q} ground-bgl`,
+		entries: [{
+			binding: 0,
+			visibility: Z,
 			buffer: { type: "uniform" }
 		}]
 	});
 	return {
-		pipeline: e.createRenderPipeline({
-			label: `${X} pipeline`,
-			layout: e.createPipelineLayout({ bindGroupLayouts: [a] }),
+		pipeline: o,
+		bindGroup: s,
+		groundPipeline: e.createRenderPipeline({
+			label: `${Q} ground-pipeline`,
+			layout: e.createPipelineLayout({ bindGroupLayouts: [u] }),
 			vertex: {
-				module: n,
+				module: c,
 				entryPoint: "vs_main"
 			},
 			fragment: {
-				module: n,
+				module: c,
 				entryPoint: "fs_main",
-				targets: [{
-					format: t,
-					blend: {
-						color: {
-							srcFactor: "one",
-							dstFactor: "one-minus-src-alpha",
-							operation: "add"
-						},
-						alpha: {
-							srcFactor: "one",
-							dstFactor: "one-minus-src-alpha",
-							operation: "add"
-						}
-					}
-				}]
+				targets: [{ format: t }]
 			},
 			primitive: { topology: "triangle-list" }
 		}),
-		bindGroup: e.createBindGroup({
-			label: `${X} bg`,
-			layout: a,
+		groundBindGroup: e.createBindGroup({
+			label: `${Q} ground-bg`,
+			layout: u,
 			entries: [{
 				binding: 0,
-				resource: { buffer: r }
-			}, {
-				binding: 1,
-				resource: { buffer: i }
+				resource: { buffer: l }
 			}]
 		}),
+		groundBuffer: l,
+		groundScratch: new Float32Array(16 / 4),
 		fieldBuffer: r,
 		dotBuffer: i,
 		fieldScratch: h(),
-		dotScratch: R()
+		dotScratch: z()
 	};
 }
-function Q(e) {
-	let t = a(e, e.VERTEX_SHADER, W, X), n = a(e, e.FRAGMENT_SHADER, G, X), r = i(e, t, n, X);
+function ie(e) {
+	let t = a(e, e.VERTEX_SHADER, K, Q), n = a(e, e.FRAGMENT_SHADER, q, Q), r = i(e, t, n, Q);
 	e.useProgram(r);
 	let o = e.createVertexArray();
 	e.bindVertexArray(o);
@@ -383,127 +542,183 @@ function Q(e) {
 		pm: e.getUniformLocation(r, "uDotPointerMode"),
 		pa: e.getUniformLocation(r, "uDotPointerActive"),
 		cursor: e.getUniformLocation(r, "uDotCursor"),
-		bloom: e.getUniformLocation(r, "uDotBloom")
+		bloom: e.getUniformLocation(r, "uDotBloom"),
+		shadowGate: e.getUniformLocation(r, "uDotShadowGate"),
+		presenceFloor: e.getUniformLocation(r, "uPresenceFloor"),
+		weldLo: e.getUniformLocation(r, "uWeldLo"),
+		weldHi: e.getUniformLocation(r, "uWeldHi"),
+		time: e.getUniformLocation(r, "uDotTime"),
+		weldSwell: e.getUniformLocation(r, "uWeldSwell"),
+		weldSpecular: e.getUniformLocation(r, "uWeldSpecular"),
+		flowAmt: e.getUniformLocation(r, "uFlowAmt"),
+		latticeSquash: e.getUniformLocation(r, "uLatticeSquash")
+	}, v = a(e, e.VERTEX_SHADER, J, Q), y = a(e, e.FRAGMENT_SHADER, te, Q), x = i(e, v, y, Q), S = e.createVertexArray();
+	e.bindVertexArray(S);
+	let C = e.createBuffer();
+	e.bindBuffer(e.ARRAY_BUFFER, C), e.bufferData(e.ARRAY_BUFFER, new Float32Array([
+		-1,
+		-1,
+		1,
+		-1,
+		-1,
+		1,
+		-1,
+		1,
+		1,
+		-1,
+		1,
+		1
+	]), e.STATIC_DRAW);
+	let w = e.getAttribLocation(x, "aPosition");
+	e.enableVertexAttribArray(w), e.vertexAttribPointer(w, 2, e.FLOAT, !1, 0, 0);
+	let T = {
+		prog: x,
+		vs: v,
+		fs: y,
+		vao: S,
+		buf: C,
+		uTime: e.getUniformLocation(x, "uGroundTime")
 	};
-	return e.enable(e.BLEND), e.blendFunc(e.ONE, e.ONE_MINUS_SRC_ALPHA), {
+	return e.bindVertexArray(null), e.enable(e.BLEND), e.blendFunc(e.ONE, e.ONE_MINUS_SRC_ALPHA), {
 		prog: r,
 		vs: t,
 		fs: n,
 		buf: s,
 		vao: o,
 		locs: g,
-		dU: _
+		dU: _,
+		ground: T
 	};
 }
 //#endregion
 //#region src/components/custom/goo-dot-matrix/composables/useGooDotMatrix.ts
+function ae(e) {
+	return .5 + .5 * Math.sin(e / 1e3 * .5);
+}
+var oe = 4200;
 function $(e, i) {
-	let { config: a } = i, l = i.mode ?? "live", f = a.field, p = ee(null), h = m(), g = d(p), y = v(f, "goo-dot"), b = t({ respectReducedMotion: a.respectReducedMotion }), x = L(), S = /* @__PURE__ */ new Map();
-	function C(e) {
-		let t = S.get(e);
+	let { config: a } = i, l = i.mode ?? "live", f = () => a.field, p = a.field, h = D(null), g = m(), y = d(h), b = v(p, "goo-dot"), x = t({ respectReducedMotion: a.respectReducedMotion }), S = R(), C = /* @__PURE__ */ new Map();
+	function w(e) {
+		let t = C.get(e);
 		if (t) return t;
 		let n = o(s(e));
-		return S.size > 256 && S.clear(), S.set(e, n), n;
+		return C.size > 256 && C.clear(), C.set(e, n), n;
 	}
-	let w = a.palette.map((e) => `oklch(${e.L} ${e.C} ${e.h})`), T = w[w.length - 1] ?? "oklch(0.92 0.03 78)", D = null, O = !1, k = 0, A = 0;
-	function j(e) {
-		let t = k ? (e - k) * 1e3 : 16;
-		k = e;
-		let n = Math.max(0, Math.min(t, 50)), r = D?.reducedMotion ?? !1, i = r || O ? 0 : f.tempo, o = i * n;
-		if (A += o, i > 0 && g.active.value) {
-			let e = g.pointer.value;
-			b.setPointer(e.x * .5 + .5, e.y * .5 + .5);
+	let T = a.palette.map((e) => `oklch(${e.L} ${e.C} ${e.h})`), E = T[T.length - 1] ?? "oklch(0.92 0.03 78)", O = null, k = !1, A = 0, j = 0, M = !1;
+	function F(e) {
+		let t = A ? (e - A) * 1e3 : 16;
+		A = e;
+		let n = Math.max(0, Math.min(t, 50)), r = O?.reducedMotion ?? !1, i = r || k ? 0 : f().tempo, o = i * n;
+		if (j += o, r && !M && (j = oe, M = !0), r || (M = !1), i > 0 && y.active.value) {
+			let e = y.pointer.value;
+			x.setPointer(e.x * .5 + .5, e.y * .5 + .5);
 		}
-		if (b.tick(i === 0 ? 0 : n), r || h.update({
-			pointerActive: g.active.value,
-			clicked: g.consumeClick(),
-			idleMs: g.idleMs()
-		}), h.tick(o), r ? g.rest() : g.tick(o), y.tick(A, h.params.value), a.interactive && g.active.value && i > 0) {
-			let e = g.pointer.value;
-			x.x = e.x * .5, x.y = e.y * .5, x.active += (1 - x.active) * .2, a.pointerMode, x.bloom = Math.max(x.bloom * .9, b.burst.value);
-		} else x.active += (0 - x.active) * .12, x.bloom *= .9;
-		return {
-			params: h.params.value,
-			rgb: C(T),
-			simTimeMs: A,
+		if (x.tick(i === 0 ? 0 : n), r || g.update({
+			pointerActive: y.active.value,
+			clicked: y.consumeClick(),
+			idleMs: y.idleMs()
+		}), g.tick(o), r ? y.rest() : y.tick(o), b.tick(j, g.params.value), a.interactive && y.active.value && i > 0) {
+			let e = y.pointer.value;
+			S.x = e.x * .5, S.y = e.y * .5, S.active += (1 - S.active) * .2, a.pointerMode, S.bloom = Math.max(S.bloom * .9, x.burst.value);
+		} else S.active += (0 - S.active) * .12, S.bloom *= .9;
+		return S.timeSec = r ? 0 : j / 1e3, S.latticeSquash = 1 + (r ? 0 : ae(j)) * .08 + S.bloom * .18, {
+			params: g.params.value,
+			rgb: w(E),
+			simTimeMs: j,
 			timeSec: e,
-			resolveColor: C,
-			rimColor: f.surface.rimColor,
-			paletteStops: w
+			resolveColor: w,
+			rimColor: f().surface.rimColor,
+			paletteStops: T
 		};
 	}
-	function M() {
-		return O ? !1 : !h.isSettled() || !g.isAtRest() || !y.isQuiescent() || x.active > .001 || x.bloom > .001;
+	function I() {
+		return k ? !1 : !g.isSettled() || !y.isAtRest() || !b.isQuiescent() || S.active > .001 || S.bloom > .001;
 	}
-	function N(e) {
+	function z(e) {
 		return function(t, r, i) {
-			let o = Z(t, i);
+			let o = re(t, i);
 			function s() {
-				let t = n(), r = e.clientWidth || f.geometry.canvasSize, i = e.clientHeight || f.geometry.canvasSize, a = Math.max(1, Math.round(r * t)), o = Math.max(1, Math.round(i * t));
+				let t = n(), r = e.clientWidth || f().geometry.canvasSize, i = e.clientHeight || f().geometry.canvasSize, a = Math.max(1, Math.round(r * t)), o = Math.max(1, Math.round(i * t));
 				(e.width !== a || e.height !== o) && (e.width = a, e.height = o);
 			}
 			function c(i) {
-				let s = j(i);
-				_(o.fieldScratch, e, f, g, y, s), t.queue.writeBuffer(o.fieldBuffer, 0, o.fieldScratch.buffer), z(o.dotScratch, a, {
+				let s = F(i);
+				_(o.fieldScratch, e, f(), y, b, s), t.queue.writeBuffer(o.fieldBuffer, 0, o.fieldScratch.buffer), B(o.dotScratch, a, {
 					w: e.width || 1,
 					h: e.height || 1
-				}, n(), x), t.queue.writeBuffer(o.dotBuffer, 0, o.dotScratch.buffer);
-				let c = r.getCurrentTexture().createView(), l = t.createCommandEncoder({ label: `${X} frame` }), u = l.beginRenderPass({ colorAttachments: [{
-					view: c,
+				}, n(), S), t.queue.writeBuffer(o.dotBuffer, 0, o.dotScratch.buffer);
+				let c = a.fieldGround === "warm", l = r.getCurrentTexture().createView(), u = t.createCommandEncoder({ label: `${Q} frame` });
+				if (c) {
+					o.groundScratch[0] = s.simTimeMs / 1e3, o.groundScratch[1] = (e.width || 1) / (e.height || 1), t.queue.writeBuffer(o.groundBuffer, 0, o.groundScratch.buffer);
+					let n = u.beginRenderPass({ colorAttachments: [{
+						view: l,
+						clearValue: {
+							r: 0,
+							g: 0,
+							b: 0,
+							a: 0
+						},
+						loadOp: "clear",
+						storeOp: "store"
+					}] });
+					n.setPipeline(o.groundPipeline), n.setBindGroup(0, o.groundBindGroup), n.draw(3, 1, 0, 0), n.end();
+				}
+				let d = u.beginRenderPass({ colorAttachments: [{
+					view: l,
 					clearValue: {
 						r: 0,
 						g: 0,
 						b: 0,
 						a: 0
 					},
-					loadOp: "clear",
+					loadOp: c ? "load" : "clear",
 					storeOp: "store"
 				}] });
-				u.setPipeline(o.pipeline), u.setBindGroup(0, o.bindGroup), u.draw(3, 1, 0, 0), u.end(), t.queue.submit([l.finish()]);
+				d.setPipeline(o.pipeline), d.setBindGroup(0, o.bindGroup), d.draw(3, 1, 0, 0), d.end(), t.queue.submit([u.finish()]);
 			}
 			return {
 				frame: c,
-				shouldContinue: M,
+				shouldContinue: I,
 				resize: s,
 				teardown: () => {
-					o.fieldBuffer.destroy(), o.dotBuffer.destroy();
+					o.fieldBuffer.destroy(), o.dotBuffer.destroy(), o.groundBuffer.destroy();
 				}
 			};
 		};
 	}
-	function P(e) {
+	function V(e) {
 		return function(t) {
-			let r = Q(t), { prog: i, vao: o, locs: s, dU: c } = r;
+			let r = ie(t), { prog: i, vao: o, locs: s, dU: c } = r;
 			function l() {
-				let r = n(), i = e.clientWidth || f.geometry.canvasSize, a = e.clientHeight || f.geometry.canvasSize, o = Math.max(1, Math.round(i * r)), s = Math.max(1, Math.round(a * r));
+				let r = n(), i = e.clientWidth || f().geometry.canvasSize, a = e.clientHeight || f().geometry.canvasSize, o = Math.max(1, Math.round(i * r)), s = Math.max(1, Math.round(a * r));
 				(e.width !== o || e.height !== s) && (e.width = o, e.height = s), t.viewport(0, 0, e.width, e.height);
 			}
-			function d(r) {
-				let l = j(r);
-				t.useProgram(i);
-				let d = n();
-				t.uniform1f(c.mode, +(a.variant === "dot-dither")), t.uniform1f(c.pix, Math.max(a.dotPixelSize * d, 4)), t.uniform1f(c.floor, a.fieldFloor), t.uniform1f(c.bright, a.dotBrightFloor), t.uniform1f(c.min, a.dotMin), t.uniform1f(c.max, a.dotMax), t.uniform1f(c.pr, a.pointerRadius), t.uniform1f(c.pm, I(a.pointerMode)), t.uniform1f(c.pa, a.interactive ? x.active : 0), t.uniform2f(c.cursor, x.x, x.y), t.uniform1f(c.bloom, x.bloom), u(t, i, o, s, e, f, g, y, l);
+			function d(l) {
+				let d = F(l), p = a.fieldGround === "warm";
+				p && (t.disable(t.BLEND), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), t.useProgram(r.ground.prog), t.bindVertexArray(r.ground.vao), t.uniform1f(r.ground.uTime, d.simTimeMs / 1e3), t.drawArrays(t.TRIANGLES, 0, 6), t.bindVertexArray(null), t.enable(t.BLEND), t.blendFunc(t.ONE, t.ONE_MINUS_SRC_ALPHA)), t.useProgram(i);
+				let m = n();
+				t.uniform1f(c.mode, +(a.variant === "dot-dither")), t.uniform1f(c.pix, Math.max(a.dotPixelSize * m, 4)), t.uniform1f(c.floor, a.fieldFloor), t.uniform1f(c.bright, a.dotBrightFloor), t.uniform1f(c.min, a.dotMin), t.uniform1f(c.max, a.dotMax), t.uniform1f(c.pr, a.pointerRadius), t.uniform1f(c.pm, L(a.pointerMode)), t.uniform1f(c.pa, a.interactive ? S.active : 0), t.uniform2f(c.cursor, S.x, S.y), t.uniform1f(c.bloom, S.bloom), t.uniform1f(c.shadowGate, +!!p), t.uniform1f(c.presenceFloor, a.presenceFloor), t.uniform1f(c.weldLo, N), t.uniform1f(c.weldHi, P), t.uniform1f(c.time, S.timeSec), t.uniform1f(c.weldSwell, a.weldSwell), t.uniform1f(c.weldSpecular, a.weldSpecular), t.uniform1f(c.flowAmt, a.flowAmt), t.uniform1f(c.latticeSquash, S.latticeSquash), u(t, i, o, s, e, f(), y, b, d);
 			}
 			return {
 				frame: d,
-				shouldContinue: M,
+				shouldContinue: I,
 				resize: l,
 				teardown: () => {
-					t.deleteProgram(r.prog), t.deleteShader(r.vs), t.deleteShader(r.fs), t.deleteBuffer(r.buf), t.deleteVertexArray(r.vao);
+					t.deleteProgram(r.prog), t.deleteShader(r.vs), t.deleteShader(r.fs), t.deleteBuffer(r.buf), t.deleteVertexArray(r.vao), t.deleteProgram(r.ground.prog), t.deleteShader(r.ground.vs), t.deleteShader(r.ground.fs), t.deleteBuffer(r.ground.buf), t.deleteVertexArray(r.ground.vao);
 				}
 			};
 		};
 	}
 	c(e, {
-		pause: () => D?.suspend("off-screen-io"),
-		resume: () => D?.resume("off-screen-io")
+		pause: () => O?.suspend("off-screen-io"),
+		resume: () => O?.resume("off-screen-io")
 	}, {
 		rootMargin: "200px",
 		pauseWhenHidden: !1
 	});
-	let F = () => {
+	let H = () => {
 		let t = e.value;
-		return t ? (D || (p.value = t.parentElement ?? t, D = r(t, {
+		return t ? (O || (h.value = t.parentElement ?? t, O = r(t, {
 			mode: l,
 			contextAttrs: {
 				alpha: !0,
@@ -512,38 +727,38 @@ function $(e, i) {
 				preserveDrawingBuffer: !1
 			},
 			respectReducedMotion: a.respectReducedMotion,
-			setupWGPU: N(t),
-			setupGL: P(t)
-		}), D.armAsync()), D) : null;
+			setupWGPU: z(t),
+			setupGL: V(t)
+		}), O.armAsync()), O) : null;
 	};
-	queueMicrotask(() => F());
-	let R = {
+	queueMicrotask(() => H());
+	let U = {
 		get backend() {
-			return F()?.backend ?? "webgpu";
+			return H()?.backend ?? "webgpu";
 		},
 		pause: () => {
-			O = !0, F()?.suspend("manual");
+			k = !0, H()?.suspend("manual");
 		},
 		resume: () => {
-			O = !1, F()?.resume("manual");
+			k = !1, H()?.resume("manual");
 		},
-		wake: () => F()?.wake(),
-		renderAt: (e) => F()?.renderAt(e),
+		wake: () => H()?.wake(),
+		renderAt: (e) => H()?.renderAt(e),
 		get reducedMotion() {
-			return D?.reducedMotion ?? !1;
+			return O?.reducedMotion ?? !1;
 		},
 		dispose: () => {
-			b.dispose(), D?.dispose(), D = null;
+			x.dispose(), O?.dispose(), O = null;
 		}
 	};
-	return E(() => R.dispose()), R;
+	return ee(() => U.dispose()), U;
 }
 //#endregion
 //#region src/components/custom/goo-dot-matrix/GooDotMatrix.vue
-var te = /* @__PURE__ */ e(/* @__PURE__ */ w({
+var se = /* @__PURE__ */ e(/* @__PURE__ */ w({
 	__name: "GooDotMatrix",
 	props: {
-		config: { default: () => N },
+		config: { default: () => M },
 		paused: {
 			type: Boolean,
 			default: !1
@@ -551,8 +766,13 @@ var te = /* @__PURE__ */ e(/* @__PURE__ */ w({
 	},
 	emits: ["update:paused"],
 	setup(e, { expose: t }) {
-		let n = O("canvasRef"), r = $(n, { config: e.config });
-		k(() => e.paused, (e) => e ? r.pause() : r.resume(), { immediate: !0 });
+		let n = O("canvasRef"), r = $(n, { config: new Proxy({}, {
+			get: (t, n) => Reflect.get(e.config, n),
+			has: (t, n) => Reflect.has(e.config, n),
+			ownKeys: () => Reflect.ownKeys(e.config),
+			getOwnPropertyDescriptor: (t, n) => Reflect.getOwnPropertyDescriptor(e.config, n)
+		}) });
+		k(() => e.config, () => r.wake(), { deep: !0 }), k(() => e.paused, (e) => e ? r.pause() : r.resume(), { immediate: !0 });
 		let i = x(() => {
 			let t = e.config.background;
 			if (t !== "transparent") return `oklch(${t.L} ${t.C} ${t.h})`;
@@ -562,7 +782,7 @@ var te = /* @__PURE__ */ e(/* @__PURE__ */ w({
 			resume: r.resume,
 			wake: r.wake,
 			renderAt: r.renderAt
-		}), (e, t) => (D(), S("div", {
+		}), (e, t) => (E(), S("div", {
 			class: "goo-dot-matrix-wrapper",
 			style: T(i.value ? { background: i.value } : void 0)
 		}, [C("canvas", {
@@ -573,19 +793,19 @@ var te = /* @__PURE__ */ e(/* @__PURE__ */ w({
 			"data-testid": "goo-dot-matrix-canvas"
 		}, null, 512)], 4));
 	}
-}), [["__scopeId", "data-v-2580c8f0"]]);
+}), [["__scopeId", "data-v-8b833d12"]]);
 //#endregion
 //#region src/components/custom/goo-dot-matrix/composables/gooDotLattice.ts
-function ne(e, t, n) {
+function ce(e, t, n) {
 	let r = Math.max(t, 1), i = e % r, a = Math.floor(e / r), o = (r - 1) / 2;
 	return {
 		x: (i - o) * n,
 		y: (a - o) * n
 	};
 }
-function re(e) {
+function le(e) {
 	let t = Math.max(e, 1);
 	return t * t;
 }
 //#endregion
-export { N as DEFAULT_GOO_DOT_CONFIG, te as GooDotMatrix, j as MAX_LATTICE_COLS, A as MIN_DOT_PIXEL_SIZE, M as WARM_IDENTITY_PALETTE, l as fibonacciDot, ne as gridOrigin, re as latticeInstanceCount, $ as useGooDotMatrix };
+export { M as DEFAULT_GOO_DOT_CONFIG, se as GooDotMatrix, A as MIN_DOT_PIXEL_SIZE, j as WARM_IDENTITY_PALETTE, l as fibonacciDot, ce as gridOrigin, le as latticeInstanceCount, $ as useGooDotMatrix };