animejs 4.3.6 → 4.4.1

package/dist/modules/layout/layout.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - layout - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -11,7 +11,7 @@ import { parseEase } from '../easings/eases/parser.js';
 import { setValue, getFunctionValue } from '../core/values.js';
 import { createTimeline } from '../timeline/timeline.js';
 import { waapi } from '../waapi/waapi.js';
-import { scope, defaults } from '../core/globals.js';
+import { scope, defaults, globals } from '../core/globals.js';
 
 /**
  * @import {
@@ -77,6 +77,7 @@ import { scope, defaults } from '../core/globals.js';
 
 /**
  * @typedef {Object} LayoutSpecificAnimationParams
+ * @property {Number|String} [id]
  * @property {Number|FunctionValue} [delay]
  * @property {Number|FunctionValue} [duration]
  * @property {EasingParam|FunctionValue} [ease]
@@ -119,7 +120,7 @@ import { scope, defaults } from '../core/globals.js';
  * @property {String} id
  * @property {DOMTarget} $el
  * @property {Number} index
- * @property {Number} total
+ * @property {Array<DOMTarget>} targets
  * @property {Number} delay
  * @property {Number} duration
  * @property {EasingParam} ease
@@ -263,7 +264,7 @@ const createNode = ($el, parentNode, state, recycledNode) => {
   node.$measure = $el;
   node.id = dataId;
   node.index = 0;
-  node.total = 1;
+  node.targets = null;
   node.delay = 0;
   node.duration = 0;
   node.ease = null;
@@ -449,12 +450,12 @@ const updateNodeProperties = (node, props) => {
  * @param  {LayoutAnimationTimingsParams} params
  */
 const updateNodeTimingParams = (node, params) => {
-  const easeFunctionResult = getFunctionValue(params.ease, node.$el, node.index, node.total);
+  const easeFunctionResult = getFunctionValue(params.ease, node.$el, node.index, node.targets, null, null);
   const keyEasing = isFnc(easeFunctionResult) ? easeFunctionResult : params.ease;
   const hasSpring = !isUnd(keyEasing) && !isUnd(/** @type {Spring} */(keyEasing).ease);
   node.ease = hasSpring ? /** @type {Spring} */(keyEasing).ease : keyEasing;
-  node.duration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : getFunctionValue(params.duration, node.$el, node.index, node.total);
-  node.delay = getFunctionValue(params.delay, node.$el, node.index, node.total);
+  node.duration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : getFunctionValue(params.duration, node.$el, node.index, node.targets, null, null);
+  node.delay = getFunctionValue(params.delay, node.$el, node.index, node.targets, null, null);
 };
 
 /**
@@ -827,10 +828,12 @@ class LayoutSnapshot {
 
     const inRootNodeIds = new Set();
     // Update index and total for inital timing calculation
-    let index = 0, total = this.nodes.size;
+    let index = 0;
+    const allNodeTargets = [];
+    this.nodes.forEach((node) => { allNodeTargets.push(node.$el); });
     this.nodes.forEach((node, id) => {
       node.index = index++;
-      node.total = total;
+      node.targets = allNodeTargets;
       // Track ids of nodes that belong to the current root to filter detached matches
       if (node && node.measuredIsInsideRoot) {
         inRootNodeIds.add(id);
@@ -942,8 +945,8 @@ class AutoLayout {
     this.params = params;
     /** @type {DOMTarget} */
     this.root = /** @type {DOMTarget} */(registerTargets(root)[0]);
-    /** @type {Number} */
-    this.id = layoutId++;
+    /** @type {Number|String} */
+    this.id = params.id || layoutId++;
     /** @type {LayoutChildrenParam} */
     this.children = params.children || '*';
     /** @type {Boolean} */
@@ -1066,7 +1069,9 @@ class AutoLayout {
       duration: setValue(params.duration, this.params.duration),
     };
     /** @type {TimelineParams} */
-    const tlParams = {};
+    const tlParams = {
+      id: this.id
+    };
     const onComplete = setValue(params.onComplete, this.params.onComplete);
     const onPause = setValue(params.onPause, this.params.onPause);
     for (let name in defaults) {
@@ -1080,7 +1085,8 @@ class AutoLayout {
     }
     tlParams.onComplete = () => {
       const ap = /** @type {ScrollObserver} */(params.autoplay);
-      const isScrollControled = ap && ap.linked;
+      const ed = globals.editor;
+      const isScrollControled = (ap && ap.linked) || (ed && ed.showPanel);
       if (isScrollControled) {
         if (onComplete) onComplete(this.timeline);
         return;
@@ -1279,41 +1285,39 @@ class AutoLayout {
         animatedParent = animatedParent.parentNode;
       }
 
-      const animatingTotal = animating.length;
-
       // Root is always animated first in sync with the first child (animating.length is the total of children)
       if (node === rootNode) {
         node.index = 0;
-        node.total = animatingTotal;
+        node.targets = animating;
         updateNodeTimingParams(node, animationTimings);
       } else if (node.isEntering) {
         node.index = animatedParent ? animatedParent.index : enteringIndex;
-        node.total = animatedParent ? animatingTotal : entering.length;
+        node.targets = animatedParent ? animating : entering;
         updateNodeTimingParams(node, enterFromTimings);
         enteringIndex++;
       } else if (node.isLeaving) {
         node.index = animatedParent ? animatedParent.index : leavingIndex;
-        node.total = animatedParent ? animatingTotal : leaving.length;
+        node.targets = animatedParent ? animating : leaving;
         leavingIndex++;
         updateNodeTimingParams(node, leaveToTimings);
       } else if (node.isTarget) {
         node.index = animatingIndex++;
-        node.total = animatingTotal;
+        node.targets = animating;
         updateNodeTimingParams(node, animationTimings);
       } else {
         node.index = animatedParent ? animatedParent.index : 0;
-        node.total = animatingTotal;
+        node.targets = animating;
         updateNodeTimingParams(node, swapAtTimings);
       }
 
       // Make sure the old state node has its inex and total values up to date for valid "from" function values calculation
       oldStateNode.index = node.index;
-      oldStateNode.total = node.total;
+      oldStateNode.targets = node.targets;
 
       // Computes all values up front so we can check for changes and we don't have to re-compute them inside the animation props
       for (let prop in nodeProperties) {
-        nodeProperties[prop] = getFunctionValue(nodeProperties[prop], $el, node.index, node.total);
-        oldStateNodeProperties[prop] = getFunctionValue(oldStateNodeProperties[prop], $el, oldStateNode.index, oldStateNode.total);
+        nodeProperties[prop] = getFunctionValue(nodeProperties[prop], $el, node.index, node.targets, null, null);
+        oldStateNodeProperties[prop] = getFunctionValue(oldStateNodeProperties[prop], $el, oldStateNode.index, oldStateNode.targets, null, null);
       }
 
       // Use a 1px tolerance to detect dimensions changes to prevent width / height animations on barelly visible elements
@@ -1539,8 +1543,8 @@ class AutoLayout {
         }
         $el.style.transform = oldState.getComputedValue($el, 'transform');
         if (animatedSwap.includes($el)) {
-          node.ease = getFunctionValue(swapAtParams.ease, $el, node.index, node.total);
-          node.duration = getFunctionValue(swapAtParams.duration, $el, node.index, node.total);
+          node.ease = getFunctionValue(swapAtParams.ease, $el, node.index, node.targets, null, null);
+          node.duration = getFunctionValue(swapAtParams.duration, $el, node.index, node.targets, null, null);
         }
       }
       this.transformAnimation = waapi.animate(transformed, {
@@ -1555,7 +1559,7 @@ class AutoLayout {
           if (!animatedSwap.includes($el)) return newValue;
           const oldValue = oldState.getComputedValue($el, 'transform');
           const node = newState.getNode($el);
-          return [oldValue, getFunctionValue(swapAtProps.transform, $el, node.index, node.total), newValue]
+          return [oldValue, getFunctionValue(swapAtProps.transform, $el, node.index, node.targets, null, null), newValue]
         },
         autoplay: false,
         // persist: true,

package/dist/modules/scope/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - scope - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/scope/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - scope - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/scope/scope.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - scope - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/scope/scope.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - scope - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/drawable.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/drawable.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/helpers.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/helpers.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/index.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/morphto.cjs

@@ -1,13 +1,12 @@
 /**
  * Anime.js - svg - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
 'use strict';
 
-var consts = require('../core/consts.cjs');
 var helpers$1 = require('../core/helpers.cjs');
 var helpers = require('./helpers.cjs');
 
@@ -23,7 +22,7 @@ var helpers = require('./helpers.cjs');
  * @param  {Number} [precision]
  * @return {FunctionValue}
  */
-const morphTo = (path2, precision = .33) => ($path1) => {
+const morphTo = (path2, precision = .33) => ($path1, index, total, prevTween) => {
   const tagName1 = ($path1.tagName || '').toLowerCase();
   if (!tagName1.match(/^(path|polygon|polyline)$/)) {
     throw new Error(`Can't morph a <${$path1.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
@@ -38,7 +37,7 @@ const morphTo = (path2, precision = .33) => ($path1) => {
   }
   const isPath = $path1.tagName === 'path';
   const separator = isPath ? ' ' : ',';
-  const previousPoints = $path1[consts.morphPointsSymbol];
+  const previousPoints = prevTween ? prevTween._value : null;
   if (previousPoints) $path1.setAttribute(isPath ? 'd' : 'points', previousPoints);
 
   let v1 = '', v2 = '';
@@ -60,8 +59,6 @@ const morphTo = (path2, precision = .33) => ($path1) => {
     }
   }
 
-  $path1[consts.morphPointsSymbol] = v2;
-
   return [v1, v2];
 };
 

package/dist/modules/svg/morphto.js

@@ -1,11 +1,10 @@
 /**
  * Anime.js - svg - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
-import { morphPointsSymbol } from '../core/consts.js';
 import { round } from '../core/helpers.js';
 import { getPath } from './helpers.js';
 
@@ -21,7 +20,7 @@ import { getPath } from './helpers.js';
  * @param  {Number} [precision]
  * @return {FunctionValue}
  */
-const morphTo = (path2, precision = .33) => ($path1) => {
+const morphTo = (path2, precision = .33) => ($path1, index, total, prevTween) => {
   const tagName1 = ($path1.tagName || '').toLowerCase();
   if (!tagName1.match(/^(path|polygon|polyline)$/)) {
     throw new Error(`Can't morph a <${$path1.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
@@ -36,7 +35,7 @@ const morphTo = (path2, precision = .33) => ($path1) => {
   }
   const isPath = $path1.tagName === 'path';
   const separator = isPath ? ' ' : ',';
-  const previousPoints = $path1[morphPointsSymbol];
+  const previousPoints = prevTween ? prevTween._value : null;
   if (previousPoints) $path1.setAttribute(isPath ? 'd' : 'points', previousPoints);
 
   let v1 = '', v2 = '';
@@ -58,8 +57,6 @@ const morphTo = (path2, precision = .33) => ($path1) => {
     }
   }
 
-  $path1[morphPointsSymbol] = v2;
-
   return [v1, v2];
 };
 

package/dist/modules/svg/motionpath.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/svg/motionpath.js

@@ -1,6 +1,6 @@
 /**
  * Anime.js - svg - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */

package/dist/modules/text/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Anime.js - text - CJS
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
@@ -8,9 +8,11 @@
 'use strict';
 
 var split = require('./split.cjs');
+var scramble = require('./scramble.cjs');
 
 
 
 exports.TextSplitter = split.TextSplitter;
 exports.split = split.split;
 exports.splitText = split.splitText;
+exports.scrambleText = scramble.scrambleText;

package/dist/modules/text/index.d.ts

@@ -1 +1,2 @@
 export * from "./split.js";
+export * from "./scramble.js";

package/dist/modules/text/index.js

@@ -1,8 +1,9 @@
 /**
  * Anime.js - text - ESM
- * @version v4.3.6
+ * @version v4.4.1
  * @license MIT
  * @copyright 2026 - Julian Garnier
  */
 
 export { TextSplitter, split, splitText } from './split.js';
+export { scrambleText } from './scramble.js';

package/dist/modules/text/scramble.cjs

@@ -0,0 +1,272 @@
+/**
+ * Anime.js - text - CJS
+ * @version v4.4.1
+ * @license MIT
+ * @copyright 2026 - Julian Garnier
+ */
+
+'use strict';
+
+var random = require('../utils/random.cjs');
+var globals = require('../core/globals.cjs');
+var helpers = require('../core/helpers.cjs');
+var parser = require('../easings/eases/parser.cjs');
+var consts = require('../core/consts.cjs');
+
+/**
+ * @import {
+ *   ScrambleTextParams,
+ *   FunctionValue,
+ * } from '../types/index.js'
+*/
+
+/**
+ * '-' is the range operator; place it at the start or end of the string to use it as a literal (e.g. '-abc' or 'abc-')
+ * @param {String} str
+ * @return {String}
+ */
+const expandCharRanges = (str) => {
+  let result = '';
+  for (let i = 0, l = str.length; i < l; i++) {
+    if (i + 2 < l && str[i + 1] === '-' && str.charCodeAt(i) < str.charCodeAt(i + 2)) {
+      const start = str.charCodeAt(i);
+      const end = str.charCodeAt(i + 2);
+      for (let c = start; c <= end; c++) result += String.fromCharCode(c);
+      i += 2;
+    } else {
+      result += str[i];
+    }
+  }
+  return result;
+};
+
+const charSets = {
+  lowercase: 'a-z',
+  uppercase: 'A-Z',
+  numbers: '0-9',
+  symbols: '!%#_|*+=',
+  braille: '⠀-⣿',
+  blocks: '▀-▟',
+  shades: '░-▓',
+};
+
+const originalTexts = new WeakMap();
+
+/**
+ * Returns a function-based tween value that scrambles the target's text content,
+ * progressively revealing the original text.
+ *
+ * @param {ScrambleTextParams} [params]
+ * @return {FunctionValue}
+ */
+const scrambleText = (params = {}) => {
+  if (!params) params = {};
+  const charsParam = params.chars;
+  const easeFn = parser.parseEase(params.ease || 'linear');
+  const text = params.text;
+  const fromParam = params.from;
+  const reversed = params.reversed || false;
+  const perturbation = params.perturbation || 0;
+  const cursorParam = params.cursor;
+  const cursorChars = cursorParam === true ? '_'
+                    : typeof cursorParam === 'number' ? String.fromCharCode(cursorParam)
+                    : typeof cursorParam === 'string' ? cursorParam
+                    : '';
+  const cursorLen = cursorChars.length;
+  const seed = params.seed || 0;
+  const override = params.override !== undefined ? params.override : true;
+  const revealRate = params.revealRate || 60;
+  const interval = 1000 * globals.globals.timeScale / revealRate;
+  const settleDuration = params.settleDuration || 300 * globals.globals.timeScale;
+  const settleRate = params.settleRate || 30;
+  const durationParam = params.duration;
+  const revealDelayParam = params.revealDelay;
+  const delayParam = params.delay;
+  const onChange = params.onChange || consts.noop;
+
+  return (target, index, targets, prevTween) => {
+    const rawChars = typeof charsParam === 'function' ? charsParam(target, index, targets) : (charsParam || 'a-zA-Z0-9!%#_');
+    const characters = expandCharRanges(charSets[rawChars] || rawChars);
+    const totalChars = characters.length - 1;
+    const duration = typeof durationParam === 'function' ? durationParam(target, index, targets) : durationParam;
+    const revealDelay = typeof revealDelayParam === 'function' ? revealDelayParam(target, index, targets) : (revealDelayParam || 0);
+    const delay = typeof delayParam === 'function' ? delayParam(target, index, targets) : (delayParam || 0);
+    const rng = seed ? random.createSeededRandom(seed) : random.createSeededRandom();
+    if (!originalTexts.has(target)) originalTexts.set(target, target.textContent);
+    const startingText = prevTween ? prevTween._value : target.textContent;
+    const targetText = text !== undefined
+                       ? (typeof text === 'function' ? text(target, index, targets) : text)
+                       : prevTween ? prevTween._value
+                       : originalTexts.get(target);
+    const settledText = targetText === ' ' || targetText === '&nbsp;' ? ' ' : targetText;
+    const startLength = startingText === ' ' ? 0 : startingText.length;
+    const endLength = settledText.length;
+    const overrideChars = override === true ? characters
+                        : typeof override === 'string' && override.length > 0 ? expandCharRanges(charSets[/** @type {String} */(override)] || /** @type {String} */(override))
+                        : null;
+    const totalOverrideChars = overrideChars ? overrideChars.length - 1 : 0;
+    // Space override uses &nbsp; so the browser doesn't collapse consecutive spaces in innerHTML
+    const overrideChar = override === ' ' ? ' ' : null;
+    // When starting from blank, only animate the target text length to avoid padding beyond it
+    const animLength = override === '' ? endLength : Math.max(startLength, endLength);
+    // Compute total duration from interval spacing and settle time, or use the explicit duration
+    const animDuration = duration > 0 ? duration : (animLength - 1) * interval + settleDuration;
+    const computedDuration = helpers.round((animDuration + revealDelay) / globals.globals.timeScale, 0) * globals.globals.timeScale;
+    const revealDelayRatio = revealDelay > 0 ? helpers.round(revealDelay / computedDuration, 12) : 0;
+    // Auto-resolve reveal direction: shrinking text reveals from right, growing from left
+    const resolvedFrom = fromParam === undefined || fromParam === 'auto' ? (endLength < startLength ? 'right' : 'left') : fromParam;
+    const charOrder = new Int32Array(animLength);
+    if (resolvedFrom === 'random') {
+      for (let i = 0; i < animLength; i++) charOrder[i] = i;
+      for (let i = animLength - 1; i > 0; i--) {
+        const j = rng(0, i);
+        const t = charOrder[i]; charOrder[i] = charOrder[j]; charOrder[j] = t;
+      }
+    } else {
+      const ref = resolvedFrom === 'right' ? (override === '' || !startLength ? animLength : startLength) - 1
+                : resolvedFrom === 'center' ? ((override === '' || !startLength ? animLength : startLength) - 1) / 2
+                : typeof resolvedFrom === 'number' ? resolvedFrom
+                : 0;
+      const abs = Math.abs;
+      const indices = new Array(animLength);
+      for (let i = 0; i < animLength; i++) indices[i] = i;
+      indices.sort((a, b) => abs(a - ref) - abs(b - ref));
+      for (let i = 0; i < animLength; i++) charOrder[indices[i]] = i;
+    }
+    if (reversed) {
+      const last = animLength - 1;
+      for (let i = 0; i < animLength; i++) charOrder[i] = last - charOrder[i];
+    }
+    // settleRatio is the fraction of the animation each character spends in the active scrambling zone
+    const settleRatio = helpers.round(settleDuration / animDuration, 12);
+    // settleSpacing is the time gap between consecutive characters entering the active zone
+    const settleSpacing = helpers.round((1 - settleRatio) / animLength, 12);
+    const cursorZone = cursorLen * settleSpacing;
+    // stepRatio controls how often scramble characters refresh (based on settleRate)
+    const stepRatio = helpers.round(1000 * globals.globals.timeScale / (settleRate * computedDuration), 12);
+    // Pre-compute per-character start and settle times
+    const charStarts = new Float32Array(animLength);
+    const charEnds = new Float32Array(animLength);
+    const scale = perturbation > 0 ? perturbation * settleRatio : 0;
+    for (let c = 0; c < animLength; c++) {
+      const so = scale > 0 ? (rng(0, 2000) - 1000) / 1000 * scale : 0;
+      const eo = scale > 0 ? (rng(0, 2000) - 1000) / 1000 * scale : 0;
+      charStarts[c] = charOrder[c] * settleSpacing + so;
+      charEnds[c] = Math.ceil((charStarts[c] + settleRatio + eo) / stepRatio) * stepRatio;
+    }
+    // When text shrinks with non-sequential from modes, delay target settle times past all extras
+    if (endLength < animLength && resolvedFrom !== 'left' && resolvedFrom !== 'right' && resolvedFrom !== 'random') {
+      let maxExtraEnd = 0;
+      for (let c = endLength; c < animLength; c++) {
+        if (charEnds[c] > maxExtraEnd) maxExtraEnd = charEnds[c];
+      }
+      const targets = new Array(endLength);
+      for (let c = 0; c < endLength; c++) targets[c] = c;
+      targets.sort((a, b) => charOrder[a] - charOrder[b]);
+      const targetSpacing = (1 - maxExtraEnd) / endLength;
+      for (let i = 0; i < endLength; i++) {
+        const revealTime = maxExtraEnd + i * targetSpacing;
+        if (revealTime > charEnds[targets[i]]) {
+          charEnds[targets[i]] = revealTime;
+        }
+      }
+    }
+    // charCache holds the current scramble character for each position, refreshed at settleRate
+    const charCache = new Array(animLength);
+    for (let c = 0; c < animLength; c++) {
+      charCache[c] = characters[rng(0, totalChars)];
+    }
+    // overrideCache holds scramble characters for the starting text (override: true or custom string)
+    const overrideCache = overrideChars ? (overrideChars === characters ? charCache : new Array(animLength)) : null;
+    if (overrideCache && overrideCache !== charCache) {
+      for (let c = 0; c < animLength; c++) {
+        overrideCache[c] = overrideChar || /** @type {String} */(overrideChars)[rng(0, overrideChars.length - 1)];
+      }
+    }
+    // Build the initial display text based on override mode
+    let fillStartText = startingText;
+    if (!prevTween) {
+      if (override === '') {
+        fillStartText = '';
+      } else if (overrideChars) {
+        fillStartText = '';
+        for (let c = 0; c < startLength; c++) {
+          fillStartText += startingText[c] === ' ' ? ' ' : /** @type {Array<String>} */(overrideCache)[c];
+        }
+      }
+    }
+
+    let lastValue = -1;
+    let lastStep = -1;
+    let scrambled = '';
+    const hasOverride = override !== '';
+    const hasOverrideChars = !!overrideChars;
+    const hasCursor = cursorLen > 0;
+
+    return {
+      from: 0,
+      to: 1,
+      duration: computedDuration,
+      delay: delay,
+      ease: 'linear',
+      modifier: (v) => {
+        if (v === lastValue) return scrambled;
+        lastValue = v;
+        if (delay > 0 && v <= 0) { scrambled = startingText; return startingText; }
+        if (v <= 0) { scrambled = fillStartText; return fillStartText; }
+        if (v >= 1) { scrambled = settledText; return settledText; }
+        scrambled = '';
+        // Only refresh scramble characters when we cross a settleRate step boundary
+        const currentStep = (v / stepRatio) | 0;
+        const refreshChars = currentStep !== lastStep;
+        if (refreshChars) lastStep = currentStep;
+        // Subtract delay ratio to get the effective animation progress
+        const linear = revealDelayRatio > 0 ? (v - revealDelayRatio) / (1 - revealDelayRatio) : v;
+        const t = linear > 0 ? easeFn(linear) : 0;
+        for (let c = 0; c < animLength; c++) {
+          // Each character has its own start/end window based on its reveal order
+          const charStart = charStarts[c];
+          const charEnd = charEnds[c];
+          // Settled zone: character has finished its transition
+          if (t >= charEnd) {
+            if (c < endLength) scrambled += settledText[c];
+            continue;
+          }
+          // Pre-transition zone: reveal wave hasn't reached this character yet
+          if (t <= 0 || t < charStart) {
+            if (hasOverride && c < startLength) {
+              if (hasOverrideChars) {
+                if (startingText[c] === ' ') {
+                  scrambled += ' ';
+                } else {
+                  if (refreshChars) /** @type {Array<String>} */(overrideCache)[c] = overrideChar || /** @type {String} */(overrideChars)[rng(0, totalOverrideChars)];
+                  scrambled += /** @type {Array<String>} */(overrideCache)[c];
+                }
+              } else {
+                // Default (override: false): show the original starting text
+                scrambled += startingText[c];
+              }
+            }
+            continue;
+          }
+          // Active zone: character is between charStart and charEnd
+          const isSpace = (c < endLength && settledText[c] === ' ') || (c < startLength && startingText[c] === ' ');
+          if (isSpace) {
+            scrambled += ' ';
+          } else if (hasCursor && t - charStart < cursorZone) {
+            // Cursor sub-zone: show cursor character based on position within cursor width
+            scrambled += cursorChars[cursorLen - 1 - (((t - charStart) / settleSpacing) | 0)];
+          } else {
+            // Scramble zone: show cycling random characters
+            if (refreshChars) charCache[c] = characters[rng(0, totalChars)];
+            scrambled += charCache[c];
+          }
+        }
+        if (refreshChars) onChange(scrambled, t);
+        return scrambled;
+      }
+    }
+  }
+};
+
+exports.scrambleText = scrambleText;