nodality 1.0.192 → 1.0.194

package/lib/raster-ops.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.192
+ * nodality v1.0.194
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -181,7 +181,11 @@ const REGISTRY = {
     // inject divergence energy the field stays stable with no pressure
     // projection at all — the whole simulation is a single pass.
     //
-    //   { op: "stir", strength: 26, swirl: 2.4, decay: 0.985 }
+    //   { op: "stir", strength: 26, curl: 2.4, decay: 0.985 }
+    //
+    // The swirliness knob is `curl` (vorticity confinement). An earlier
+    // version of this line said `swirl`, which the solver never reads — it
+    // is accepted silently and leaves curl at its default.
     // Halftone: the print dot screen. Tone is carried by dot AREA on a
     // rotated grid rather than by intensity, the way offset lithography
     // reproduces a continuous-tone image with a single ink.
@@ -1950,12 +1954,20 @@ function applyRasterPipeline(el, rasterNodes) {
         const px = mouse[0] / canvas.width;
         const py = 1 - mouse[1] / canvas.height;
         let dx = 0, dy = 0;
-        if (s.primed) {
+        // Only a real pointer event counts as motion. `mouse` is stored in
+        // canvas pixels, so this normalised position also shifts whenever the
+        // canvas itself resizes or moves — an element being animated (a
+        // scroll-driven hero expanding) would otherwise inject phantom
+        // velocity every frame and stir itself with the pointer sitting
+        // still, or with the pointer nowhere near it.
+        if (s.primed && pointerMoved) {
             dx = (px - s.prevX) / Math.max(dt, 1e-3);
             dy = (py - s.prevY) / Math.max(dt, 1e-3);
         }
+        // Re-baseline regardless, so the frame after a resize does not
+        // measure its delta against a position from a different geometry.
         s.prevX = px; s.prevY = py; s.primed = true;
-        const moving = Math.abs(dx) + Math.abs(dy) > 1e-3;
+        const moving = pointerMoved && Math.abs(dx) + Math.abs(dy) > 1e-3;
 
         s.def.solver.step(S, s.node, {
             dt, px, py, dx, dy, moving,
@@ -2187,10 +2199,17 @@ function applyRasterPipeline(el, rasterNodes) {
     // Pointer -> u_mouse (listen on the host so the overlay stays
     // pointer-events: none).
     let mouse = [canvas.width * 0.5, canvas.height * 0.5];
+    // Set by a real pointer event, cleared once the solvers have consumed
+    // it. Stateful ops splat only while this is true, so nothing is stirred
+    // by the element resizing or scrolling under a stationary pointer.
+    let pointerMoved = false;
     const onMove = (e) => {
         const r = canvas.getBoundingClientRect();
         const pt = e.touches ? e.touches[0] : e;
-        mouse = [(pt.clientX - r.left) * dpr, (pt.clientY - r.top) * dpr];
+        const next = [(pt.clientX - r.left) * dpr, (pt.clientY - r.top) * dpr];
+        // Guard against move events that report the same position.
+        if (next[0] !== mouse[0] || next[1] !== mouse[1]) pointerMoved = true;
+        mouse = next;
     };
     el.addEventListener("mousemove", onMove, { passive: true });
     el.addEventListener("touchmove", onMove, { passive: true });
@@ -2236,6 +2255,10 @@ function applyRasterPipeline(el, rasterNodes) {
             // 1. Advance stateful fluid solvers into their own off-screen
             //    targets (this rebinds framebuffer/program/textures).
             for (const s of solverOps) stepSolver(s, dt);
+            // Consumed for this frame: a splat needs a fresh pointer event,
+            // not merely a pointer position that happens to differ because
+            // the canvas moved or resized beneath it.
+            pointerMoved = false;
 
             // 2. Composite pass, back on the visible framebuffer.
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
@@ -2302,19 +2325,58 @@ function applyRasterPipeline(el, rasterNodes) {
     // ResizeObserver, the window-resize fallback and the font-loading
     // recapture, so all three agree on what "resize the canvas" means.
     const remeasureAndCapture = () => {
-        if (destroyed || mode !== "snapshot") return;
+        if (destroyed) return;
         const m = measure();
+        if (m.width < 2 || m.height < 2) return;
+        const bw = Math.round(m.width * dpr);
+        const bh = Math.round(m.height * dpr);
+        rect.width = m.width;
+        rect.height = m.height;
+        canvas.style.width = m.width + "px";
+        canvas.style.height = m.height + "px";
+        // Re-allocating the buffer clears it, so skip when it already matches
+        // — syncCanvasBox may have kept the CSS box in step without needing a
+        // new buffer at all.
+        const bufferStale = canvas.width !== bw || canvas.height !== bh;
+        if (bufferStale) {
+            canvas.width = bw;
+            canvas.height = bh;
+        }
+        if (mode === "snapshot") {
+            snapshotCapture();
+        } else if (bufferStale) {
+            // Live mode re-uploads from the DOM every paint, so it needs no
+            // recapture — only a fresh upload at the new buffer size.
+            onPaint();
+        }
+    };
+
+    // Match the canvas box to the host immediately, without recapturing.
+    // Re-uploading the texture is the expensive half and stays debounced;
+    // resizing the element is cheap and must not be, because a host that is
+    // being animated (a scroll-driven hero expanding every frame) would
+    // otherwise render up to a debounce-interval behind its own layout —
+    // the canvas visibly trailing the content it is drawn over.
+    // CSS size only. Assigning canvas.width/height re-allocates the drawing
+    // buffer and CLEARS it, so doing that per frame while an element is being
+    // animated makes the whole effect flash on every scroll step. The buffer
+    // is left to the debounced recapture below; stretching the existing one
+    // for a few frames costs a little sharpness and nothing else.
+    const syncCanvasBox = () => {
+        if (destroyed) return;
+        const m = measure();
+        if (m.width < 2 || m.height < 2) return;
+        if (Math.round(m.width) === Math.round(rect.width) &&
+            Math.round(m.height) === Math.round(rect.height)) return;
         rect.width = m.width;
         rect.height = m.height;
-        canvas.width = Math.round(m.width * dpr);
-        canvas.height = Math.round(m.height * dpr);
         canvas.style.width = m.width + "px";
         canvas.style.height = m.height + "px";
-        snapshotCapture();
     };
 
     if (typeof ResizeObserver !== "undefined") {
         ro = new ResizeObserver(() => {
+            syncCanvasBox();
             clearTimeout(resizeTimer);
             resizeTimer = setTimeout(remeasureAndCapture, 150);
         });

package/lib/scroll-video.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.192
+ * nodality v1.0.194
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/seo.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.192
+ * nodality v1.0.194
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/stacker.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.192
+ * nodality v1.0.194
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/theme.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.192
+ * nodality v1.0.194
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/transform-anim.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.192
+ * nodality v1.0.194
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodality",
-  "version": "1.0.192",
+  "version": "1.0.194",
   "description": "A lightweight library for declarative UI elements.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",