@sarmal/core 0.25.1 → 0.26.0

package/dist/index.cjs

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 // src/engine.ts
 var TWO_PI = Math.PI * 2;
@@ -63,32 +63,32 @@ function resolveCurve(curveDef) {
     period,
     speed,
     skeleton: curveDef.skeleton,
-    skeletonFn: curveDef.skeletonFn,
+    skeletonFn: curveDef.skeletonFn
   };
 }
 function createEngine(curveDef, trailLength = 120) {
   if (!Number.isFinite(trailLength) || trailLength <= 0) {
     throw new RangeError(
-      `[sarmal] trailLength must be a positive finite number, got ${trailLength}`,
+      `[sarmal] trailLength must be a positive finite number, got ${trailLength}`
     );
   }
   let curve = resolveCurve(curveDef);
   const trail = new CircularBuffer(trailLength);
-  let t = 0;
+  let phase = 0;
   let actualTime = 0;
   let userSpeedOverride = null;
   let morphCurveB = null;
   let _morphAlpha = null;
   let _morphStrategy = "normalized";
   let _speedTransition = null;
-  function sampleSkeleton(c, sampleT) {
+  function sampleSkeleton(c, samplePhase) {
     if (c.skeletonFn) {
-      return c.skeletonFn(sampleT);
+      return c.skeletonFn(samplePhase);
     }
     if (c.skeleton === "live") {
-      return c.fn(sampleT, actualTime, EMPTY_PARAMS);
+      return c.fn(samplePhase, actualTime, EMPTY_PARAMS);
     }
-    return c.fn(sampleT, 0, EMPTY_PARAMS);
+    return c.fn(samplePhase, 0, EMPTY_PARAMS);
   }
   return {
     tick(deltaTime) {
@@ -106,15 +106,15 @@ function createEngine(curveDef, trailLength = 120) {
       if (morphCurveB !== null && _morphAlpha !== null) {
         effectiveSpeed = lerp(effectiveSpeed, morphCurveB.speed, _morphAlpha);
       }
-      t = (t + effectiveSpeed * deltaTime) % curve.period;
+      phase = (phase + effectiveSpeed * deltaTime) % curve.period;
       actualTime += deltaTime;
       if (morphCurveB !== null && _morphAlpha !== null) {
-        const a = curve.fn(t, actualTime, EMPTY_PARAMS);
-        const tB = _morphStrategy === "normalized" ? (t / curve.period) * morphCurveB.period : t;
-        const b = morphCurveB.fn(tB, actualTime, EMPTY_PARAMS);
+        const a = curve.fn(phase, actualTime, EMPTY_PARAMS);
+        const phaseB = _morphStrategy === "normalized" ? phase / curve.period * morphCurveB.period : phase;
+        const b = morphCurveB.fn(phaseB, actualTime, EMPTY_PARAMS);
         trail.push(a.x + (b.x - a.x) * _morphAlpha, a.y + (b.y - a.y) * _morphAlpha);
       } else {
-        const point = curve.fn(t, actualTime, EMPTY_PARAMS);
+        const point = curve.fn(phase, actualTime, EMPTY_PARAMS);
         trail.push(point.x, point.y);
       }
       return trail.toArray();
@@ -132,30 +132,30 @@ function createEngine(curveDef, trailLength = 120) {
       return _morphAlpha;
     },
     reset() {
-      t = 0;
+      phase = 0;
       actualTime = 0;
       trail.clear();
     },
-    jump(newT, { clearTrail = false } = {}) {
-      t = ((newT % curve.period) + curve.period) % curve.period;
+    jump(newPhase, { clearTrail = false } = {}) {
+      phase = (newPhase % curve.period + curve.period) % curve.period;
       if (clearTrail) {
         trail.clear();
       }
     },
-    seek(targetT, { wrap = false, step = curve.period / trailLength } = {}) {
+    seek(targetPhase, { wrap = false, step = curve.period / trailLength } = {}) {
       const advance = curve.speed * step;
-      const target = ((targetT % curve.period) + curve.period) % curve.period;
+      const target = (targetPhase % curve.period + curve.period) % curve.period;
       const targetTime = target / curve.speed;
-      t = target;
+      phase = target;
       actualTime = targetTime;
       trail.clear();
       const pointsFromStart = Math.floor(target / advance) + 1;
       const count = wrap ? trailLength : Math.min(trailLength, pointsFromStart);
       for (let i = count - 1; i >= 0; i--) {
-        const sampleT = target - i * advance;
-        const wrappedT = ((sampleT % curve.period) + curve.period) % curve.period;
-        const time = targetTime - i * step;
-        const point = curve.fn(wrappedT, time, EMPTY_PARAMS);
+        const samplePhase = target - i * advance;
+        const wrappedPhase = (samplePhase % curve.period + curve.period) % curve.period;
+        const elapsed = targetTime - i * step;
+        const point = curve.fn(wrappedPhase, elapsed, EMPTY_PARAMS);
         trail.push(point.x, point.y);
       }
     },
@@ -168,18 +168,15 @@ function createEngine(curveDef, trailLength = 120) {
         const frozenStrategy = _morphStrategy;
         curve = {
           ...frozenB,
-          fn: (sampleT, time, params) => {
-            const a = frozenA.fn(sampleT, time, params);
-            const tB =
-              frozenStrategy === "normalized"
-                ? (sampleT / frozenA.period) * frozenB.period
-                : sampleT;
-            const b = frozenB.fn(tB, time, params);
+          fn: (samplePhase, elapsed, params) => {
+            const a = frozenA.fn(samplePhase, elapsed, params);
+            const phaseB = frozenStrategy === "normalized" ? samplePhase / frozenA.period * frozenB.period : samplePhase;
+            const b = frozenB.fn(phaseB, elapsed, params);
             return {
               x: a.x + (b.x - a.x) * frozenAlpha,
-              y: a.y + (b.y - a.y) * frozenAlpha,
+              y: a.y + (b.y - a.y) * frozenAlpha
             };
-          },
+          }
         };
       }
       _morphStrategy = strategy;
@@ -192,7 +189,7 @@ function createEngine(curveDef, trailLength = 120) {
     completeMorph() {
       if (morphCurveB !== null) {
         if (_morphStrategy === "normalized" && curve.period !== morphCurveB.period) {
-          t = (t / curve.period) * morphCurveB.period;
+          phase = phase / curve.period * morphCurveB.period;
         }
         curve = morphCurveB;
       }
@@ -204,23 +201,20 @@ function createEngine(curveDef, trailLength = 120) {
       const points2 = new Array(steps);
       if (morphCurveB !== null && _morphAlpha !== null) {
         for (let i = 0; i < steps; i++) {
-          const sampleT = (i / (steps - 1)) * curve.period;
-          const a = sampleSkeleton(curve, sampleT);
-          const tB =
-            _morphStrategy === "normalized"
-              ? (sampleT / curve.period) * morphCurveB.period
-              : sampleT;
-          const b = sampleSkeleton(morphCurveB, tB);
+          const samplePhase = i / (steps - 1) * curve.period;
+          const a = sampleSkeleton(curve, samplePhase);
+          const phaseB = _morphStrategy === "normalized" ? samplePhase / curve.period * morphCurveB.period : samplePhase;
+          const b = sampleSkeleton(morphCurveB, phaseB);
           points2[i] = {
             x: a.x + (b.x - a.x) * _morphAlpha,
-            y: a.y + (b.y - a.y) * _morphAlpha,
+            y: a.y + (b.y - a.y) * _morphAlpha
           };
         }
         return points2;
       }
       for (let i = 0; i < steps; i++) {
-        const sampleT = (i / (steps - 1)) * curve.period;
-        points2[i] = sampleSkeleton(curve, sampleT);
+        const samplePhase = i / (steps - 1) * curve.period;
+        points2[i] = sampleSkeleton(curve, samplePhase);
       }
       return points2;
     },
@@ -261,7 +255,7 @@ function createEngine(curveDef, trailLength = 120) {
         _speedTransition.reject(new Error("Speed transition cancelled"));
         _speedTransition = null;
       }
-    },
+    }
   };
 }
 
@@ -300,15 +294,7 @@ function computeNormal(trail, i) {
   const tangent = computeTangent(trail, i);
   return { x: -tangent.y, y: tangent.x };
 }
-function computeTrailQuad(
-  trail,
-  i,
-  trailCount,
-  toX,
-  toY,
-  minWidth = TRAIL_MIN_WIDTH,
-  maxWidth = TRAIL_MAX_WIDTH,
-) {
+function computeTrailQuad(trail, i, trailCount, toX, toY, minWidth = TRAIL_MIN_WIDTH, maxWidth = TRAIL_MAX_WIDTH) {
   const progress = i / (trailCount - 1);
   const nextProgress = (i + 1) / (trailCount - 1);
   const opacity = Math.pow(progress, TRAIL_FADE_CURVE) * TRAIL_MAX_OPACITY;
@@ -332,16 +318,13 @@ function computeTrailQuad(
     r1x: nx - n1.x * w1,
     r1y: ny - n1.y * w1,
     opacity,
-    progress,
+    progress
   };
 }
 function computeBoundaries(pts, logicalWidth, logicalHeight, minPaddingPx = FIT_PADDING_MIN) {
   if (pts.length === 0) return null;
   const first = pts[0];
-  let minX = first.x,
-    maxX = first.x,
-    minY = first.y,
-    maxY = first.y;
+  let minX = first.x, maxX = first.x, minY = first.y, maxY = first.y;
   for (const p of pts) {
     if (p.x < minX) {
       minX = p.x;
@@ -360,7 +343,7 @@ function computeBoundaries(pts, logicalWidth, logicalHeight, minPaddingPx = FIT_
   const h = maxY - minY;
   if (w === 0 && h === 0) {
     throw new Error(
-      "[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t.",
+      "[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t."
     );
   }
   const scaleXProportional = logicalWidth / (w * (1 + FIT_PADDING * 2));
@@ -371,12 +354,12 @@ function computeBoundaries(pts, logicalWidth, logicalHeight, minPaddingPx = FIT_
     scaleXProportional,
     scaleYProportional,
     scaleXMinPadding,
-    scaleYMinPadding,
+    scaleYMinPadding
   );
   return {
     scale,
     offsetX: (logicalWidth - w * scale) / 2 - minX * scale,
-    offsetY: (logicalHeight - h * scale) / 2 - minY * scale,
+    offsetY: (logicalHeight - h * scale) / 2 - minY * scale
   };
 }
 function enginePassthroughs(engine) {
@@ -387,7 +370,7 @@ function enginePassthroughs(engine) {
     getSpeed: engine.getSpeed,
     resetSpeed: engine.resetSpeed,
     setSpeedOver: engine.setSpeedOver,
-    getSarmalSkeleton: engine.getSarmalSkeleton,
+    getSarmalSkeleton: engine.getSarmalSkeleton
   };
 }
 var palettes = {
@@ -396,16 +379,16 @@ var palettes = {
   ocean: ["#1e3a8a", "#06b6d4", "#22d3ee", "#e0f2fe"],
   ice: ["#1e3a8a", "#67e8f9"],
   fire: ["#7f1d1d", "#fbbf24"],
-  forest: ["#14532d", "#86efac"],
+  forest: ["#14532d", "#86efac"]
 };
 function hexToRgb(hex) {
   const n = parseInt(hex.slice(1), 16);
-  return { r: n >> 16, g: (n >> 8) & 255, b: n & 255 };
+  return { r: n >> 16, g: n >> 8 & 255, b: n & 255 };
 }
 var lerpRgb = (a, b, t) => ({
   r: Math.round(a.r + (b.r - a.r) * t),
   g: Math.round(a.g + (b.g - a.g) * t),
-  b: Math.round(a.b + (b.b - a.b) * t),
+  b: Math.round(a.b + (b.b - a.b) * t)
 });
 function getPaletteColor(palette, position, timeOffset = 0) {
   if (palette.length === 0) {
@@ -414,7 +397,7 @@ function getPaletteColor(palette, position, timeOffset = 0) {
   if (palette.length === 1) {
     return hexToRgb(palette[0]);
   }
-  const cyclePos = (((position + timeOffset) % 1) + 1) % 1;
+  const cyclePos = ((position + timeOffset) % 1 + 1) % 1;
   const scaled = cyclePos * palette.length;
   const idx = Math.floor(scaled);
   const t = scaled - idx;
@@ -429,7 +412,7 @@ var RENDER_OPTION_KEYS = /* @__PURE__ */ new Set([
   "headColor",
   "skeletonColor",
   "trailStyle",
-  "headRadius",
+  "headRadius"
 ]);
 function validateRenderOptions(partial) {
   for (const key of Object.keys(partial)) {
@@ -457,7 +440,7 @@ function assertTrailColor(value) {
   if (typeof value === "string") {
     if (!HEX_COLOR_RE.test(value)) {
       throw new TypeError(
-        `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"`,
+        `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"`
       );
     }
     return;
@@ -465,21 +448,21 @@ function assertTrailColor(value) {
   if (Array.isArray(value)) {
     if (value.length < 2) {
       throw new RangeError(
-        `[sarmal] setRenderOptions: trailColor array must have at least 2 entries, got ${value.length}`,
+        `[sarmal] setRenderOptions: trailColor array must have at least 2 entries, got ${value.length}`
       );
     }
     for (let i = 0; i < value.length; i++) {
       const entry = value[i];
       if (typeof entry !== "string" || !HEX_COLOR_RE.test(entry)) {
         throw new TypeError(
-          `[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}`,
+          `[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}`
         );
       }
     }
     return;
   }
   throw new TypeError(
-    `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}`,
+    `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}`
   );
 }
 function assertHeadColor(value) {
@@ -488,7 +471,7 @@ function assertHeadColor(value) {
   }
   if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
     throw new TypeError(
-      `[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}`,
+      `[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}`
     );
   }
 }
@@ -498,26 +481,26 @@ function assertSkeletonColor(value) {
   }
   if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
     throw new TypeError(
-      `[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}`,
+      `[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}`
     );
   }
 }
 function assertTrailStyle(value) {
   if (!TRAIL_STYLES.includes(value)) {
     throw new RangeError(
-      `[sarmal] setRenderOptions: trailStyle must be one of "default", "gradient-static", "gradient-animated", got ${JSON.stringify(value)}`,
+      `[sarmal] setRenderOptions: trailStyle must be one of "default", "gradient-static", "gradient-animated", got ${JSON.stringify(value)}`
     );
   }
 }
 function assertHeadRadius(value) {
   if (typeof value !== "number") {
     throw new TypeError(
-      `[sarmal] setRenderOptions: headRadius must be a number, got ${JSON.stringify(value)}`,
+      `[sarmal] setRenderOptions: headRadius must be a number, got ${JSON.stringify(value)}`
     );
   }
   if (!Number.isFinite(value) || value <= 0) {
     throw new TypeError(
-      `[sarmal] setRenderOptions: headRadius must be a finite positive number, got ${value}`,
+      `[sarmal] setRenderOptions: headRadius must be a finite positive number, got ${value}`
     );
   }
 }
@@ -539,13 +522,13 @@ function resolveHeadColor(trailColor, trailStyle) {
 function warnIfTrailColorMismatch(trailColor, trailStyle) {
   if (trailStyle === "default" && Array.isArray(trailColor)) {
     console.warn(
-      '[sarmal] trailColor is an array but trailStyle is "default"; only the first color will be used. Pass a gradient trailStyle to use the whole palette.',
+      '[sarmal] trailColor is an array but trailStyle is "default"; only the first color will be used. Pass a gradient trailStyle to use the whole palette.'
     );
     return;
   }
   if (trailStyle !== "default" && typeof trailColor === "string") {
     console.warn(
-      `[sarmal] trailColor is a single color but trailStyle is "${trailStyle}"; the trail will render as a solid color. Pass an array of hex colors to use a real gradient.`,
+      `[sarmal] trailColor is a single color but trailStyle is "${trailStyle}"; the trail will render as a solid color. Pass an array of hex colors to use a real gradient.`
     );
   }
 }
@@ -555,7 +538,7 @@ var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160)
 var WHITE_HEX = "#ffffff";
 function hexToRgbComponents(hex) {
   const n = parseInt(hex.slice(1), 16);
-  return `${n >> 16},${(n >> 8) & 255},${n & 255}`;
+  return `${n >> 16},${n >> 8 & 255},${n & 255}`;
 }
 function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
   target.style.width = `${logicalWidth}px`;
@@ -682,7 +665,7 @@ function createRenderer(options) {
         i,
         trailCount,
         toX,
-        toY,
+        toY
       );
       if (trailStyle === "default") {
         ctx.fillStyle = `rgba(${trailSolidRgb},${opacity})`;
@@ -762,8 +745,8 @@ function createRenderer(options) {
   if (!engine.isLiveSkeleton) {
     buildSkeletonCanvas();
   }
-  if (options.initialT !== void 0) {
-    engine.seek(options.initialT);
+  if (options.initialPhase !== void 0) {
+    engine.seek(options.initialPhase);
   }
   renderFrame(0);
   const shouldAutoStart = options.autoStart !== false;
@@ -847,7 +830,7 @@ function createRenderer(options) {
       if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
         warnIfTrailColorMismatch(trailColor, trailStyle);
       }
-    },
+    }
   };
   const pauseOnHidden = options.pauseOnHidden !== false;
   function handleVisibilityChange() {
@@ -897,8 +880,8 @@ function sampleCurveSkeleton(curveDef) {
   const samples = Math.ceil(period * 50);
   const pts = Array.from({ length: samples });
   for (let i = 0; i < samples; i++) {
-    const t = (i / (samples - 1)) * period;
-    pts[i] = curveDef.skeletonFn ? curveDef.skeletonFn(t) : curveDef.fn(t, 0, EMPTY_PARAMS2);
+    const phase = i / (samples - 1) * period;
+    pts[i] = curveDef.skeletonFn ? curveDef.skeletonFn(phase) : curveDef.fn(phase, 0, EMPTY_PARAMS2);
   }
   return pts;
 }
@@ -910,7 +893,7 @@ function createSVGRenderer(options) {
   const poolSize = engine.trailLength;
   if (poolSize > HIGH_TRAIL_LENGTH_THRESHOLD) {
     console.warn(
-      `[sarmal] High trailLength in SVG renderer (${poolSize}). Consider using the canvas renderer for long trails.`,
+      `[sarmal] High trailLength in SVG renderer (${poolSize}). Consider using the canvas renderer for long trails.`
     );
   }
   let trailStyle = options.trailStyle ?? "default";
@@ -929,9 +912,9 @@ function createSVGRenderer(options) {
     return rect.width && rect.height ? Math.min(rect.width, rect.height) : 200;
   }
   const containerPx = getContainerPixelSize();
-  const svgTrailMinWidth = (TRAIL_MIN_WIDTH * viewSize) / containerPx;
-  const svgTrailMaxWidth = (TRAIL_MAX_WIDTH * viewSize) / containerPx;
-  const svgSkeletonStrokeWidth = String((SKELETON_STROKE_WIDTH_PX * viewSize) / containerPx);
+  const svgTrailMinWidth = TRAIL_MIN_WIDTH * viewSize / containerPx;
+  const svgTrailMaxWidth = TRAIL_MAX_WIDTH * viewSize / containerPx;
+  const svgSkeletonStrokeWidth = String(SKELETON_STROKE_WIDTH_PX * viewSize / containerPx);
   headRadius = options.headRadius ?? SVG_DEFAULT_HEAD_RADIUS;
   container.setAttribute("viewBox", `0 0 ${viewSize} ${viewSize}`);
   container.setAttribute("role", "img");
@@ -1019,7 +1002,7 @@ function createSVGRenderer(options) {
         px,
         py,
         svgTrailMinWidth,
-        svgTrailMaxWidth,
+        svgTrailMaxWidth
       );
       const d = `M${l0x.toFixed(2)} ${l0y.toFixed(2)} L${l1x.toFixed(2)} ${l1y.toFixed(2)} L${r1x.toFixed(2)} ${r1y.toFixed(2)} L${r0x.toFixed(2)} ${r0y.toFixed(2)} Z`;
       trailPaths[i].setAttribute("d", d);
@@ -1047,8 +1030,7 @@ function createSVGRenderer(options) {
   let animationId = null;
   let lastTime = 0;
   let pausedByVisibility = false;
-  const prefersReducedMotion =
-    typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   let morphResolve = null;
   let morphReject = null;
   let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
@@ -1066,7 +1048,7 @@ function createSVGRenderer(options) {
         skeletonPathA.setAttribute("visibility", "visible");
         skeletonPathA.setAttribute(
           "stroke-opacity",
-          String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY),
+          String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
         );
       }
       if (morphPathBBuilt) {
@@ -1109,8 +1091,8 @@ function createSVGRenderer(options) {
       animationId = requestAnimationFrame(loop);
     }
   }
-  if (options.initialT !== void 0) {
-    engine.seek(options.initialT);
+  if (options.initialPhase !== void 0) {
+    engine.seek(options.initialPhase);
   }
   renderFrame(0);
   const shouldAutoStart = options.autoStart !== false;
@@ -1220,7 +1202,7 @@ function createSVGRenderer(options) {
       if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
         warnIfTrailColorMismatch(trailColor, trailStyle);
       }
-    },
+    }
   };
   const pauseOnHidden = options.pauseOnHidden !== false;
   function handleVisibilityChange() {
@@ -1258,15 +1240,9 @@ var PERIOD = 2 * Math.PI;
 function catmullRom1D(p0, p1, p2, p3, u) {
   const u2 = u * u;
   const u3 = u2 * u;
-  return (
-    0.5 *
-    (2 * p1 +
-      (-p0 + p2) * u +
-      (2 * p0 - 5 * p1 + 4 * p2 - p3) * u2 +
-      (-p0 + 3 * p1 - 3 * p2 + p3) * u3)
-  );
+  return 0.5 * (2 * p1 + (-p0 + p2) * u + (2 * p0 - 5 * p1 + 4 * p2 - p3) * u2 + (-p0 + 3 * p1 - 3 * p2 + p3) * u3);
 }
-function evaluateCatmullRom(points2, t) {
+function evaluateCatmullRom(points2, phase) {
   const N = points2.length;
   if (N === 0) {
     return { x: 0, y: 0 };
@@ -1274,13 +1250,13 @@ function evaluateCatmullRom(points2, t) {
   if (N === 1) {
     return { x: points2[0][0], y: points2[0][1] };
   }
-  t = ((t % PERIOD) + PERIOD) % PERIOD;
+  phase = (phase % PERIOD + PERIOD) % PERIOD;
   const segmentSize = PERIOD / N;
-  let i = Math.floor(t / segmentSize);
+  let i = Math.floor(phase / segmentSize);
   if (i >= N) {
     i = N - 1;
   }
-  let u = (t - i * segmentSize) / segmentSize;
+  let u = (phase - i * segmentSize) / segmentSize;
   u = Math.max(0, Math.min(1, u));
   const p0 = points2[(i - 1 + N) % N];
   const p1 = points2[i];
@@ -1288,7 +1264,7 @@ function evaluateCatmullRom(points2, t) {
   const p3 = points2[(i + 2) % N];
   return {
     x: catmullRom1D(p0[0], p1[0], p2[0], p3[0], u),
-    y: catmullRom1D(p0[1], p1[1], p2[1], p3[1], u),
+    y: catmullRom1D(p0[1], p1[1], p2[1], p3[1], u)
   };
 }
 function drawCurve(points2, opts) {
@@ -1298,20 +1274,20 @@ function drawCurve(points2, opts) {
   const first = points2[0];
   if (points2.every((p) => p[0] === first[0] && p[1] === first[1])) {
     console.warn(
-      "[sarmal].drawCurve: all control points are identical. The curve will be a single point.",
+      "[sarmal].drawCurve: all control points are identical. The curve will be a single point."
     );
   }
   const maxAbs = points2.reduce((m, p) => Math.max(m, Math.abs(p[0]), Math.abs(p[1])), 0);
   if (maxAbs > 2) {
     console.warn(
-      `[sarmal].drawCurve: control points extend to \xB1${maxAbs.toFixed(1)}, which may render off-screen. Coordinates should be in [-1, 1].`,
+      `[sarmal].drawCurve: control points extend to \xB1${maxAbs.toFixed(1)}, which may render off-screen. Coordinates should be in [-1, 1].`
     );
   }
   const pts = points2.map(([x, y]) => [x, y]);
   return {
     name: opts?.name ?? "drawn",
-    fn: (t) => evaluateCatmullRom(pts, t),
-    period: PERIOD,
+    fn: (phase) => evaluateCatmullRom(pts, phase),
+    period: PERIOD
   };
 }
 
@@ -1337,74 +1313,74 @@ var points = [
   [-0.69, -0.84],
   [-0.87, -0.66],
   [-0.9, -0.47],
-  [-0.76, -0.35],
+  [-0.76, -0.35]
 ];
 var artemis2 = {
   ...drawCurve(points, { name: "Artemis II" }),
-  speed: 0.7,
+  speed: 0.7
 };
 
 // src/curves/astroid.ts
 var TWO_PI2 = Math.PI * 2;
-function astroidFn(t, _time, _params) {
-  const c = Math.cos(t);
-  const s = Math.sin(t);
+function astroidFn(phase, _elapsed, _params) {
+  const c = Math.cos(phase);
+  const s = Math.sin(phase);
   return {
     x: c * c * c,
-    y: s * s * s,
+    y: s * s * s
   };
 }
 var astroid = {
   name: "Astroid",
   fn: astroidFn,
   period: TWO_PI2,
-  speed: 1.1,
+  speed: 1.1
 };
 
 // src/curves/deltoid.ts
 var TWO_PI3 = Math.PI * 2;
-function deltoidFn(t, _time, _params) {
+function deltoidFn(phase, _elapsed, _params) {
   return {
-    x: 2 * Math.cos(t) + Math.cos(2 * t),
-    y: 2 * Math.sin(t) - Math.sin(2 * t),
+    x: 2 * Math.cos(phase) + Math.cos(2 * phase),
+    y: 2 * Math.sin(phase) - Math.sin(2 * phase)
   };
 }
 var deltoid = {
   name: "Deltoid",
   fn: deltoidFn,
   period: TWO_PI3,
-  speed: 0.9,
+  speed: 0.9
 };
 
 // src/curves/epicycloid3.ts
 var TWO_PI4 = Math.PI * 2;
-function epicycloid3Fn(t, _time, _params) {
+function epicycloid3Fn(phase, _elapsed, _params) {
   return {
-    x: 4 * Math.cos(t) - Math.cos(4 * t),
-    y: 4 * Math.sin(t) - Math.sin(4 * t),
+    x: 4 * Math.cos(phase) - Math.cos(4 * phase),
+    y: 4 * Math.sin(phase) - Math.sin(4 * phase)
   };
 }
 var epicycloid3 = {
   name: "Epicycloid (n=3)",
   fn: epicycloid3Fn,
   period: TWO_PI4,
-  speed: 0.75,
+  speed: 0.75
 };
 
 // src/curves/epitrochoid7.ts
 var TWO_PI5 = Math.PI * 2;
-function epitrochoid7Fn(t, _time, _params) {
-  const d = 1 + 0.55 * Math.sin(t * 0.5);
+function epitrochoid7Fn(phase, _elapsed, _params) {
+  const d = 1 + 0.55 * Math.sin(phase * 0.5);
   return {
-    x: 7 * Math.cos(t) - d * Math.cos(7 * t),
-    y: 7 * Math.sin(t) - d * Math.sin(7 * t),
+    x: 7 * Math.cos(phase) - d * Math.cos(7 * phase),
+    y: 7 * Math.sin(phase) - d * Math.sin(7 * phase)
   };
 }
-function epitrochoid7SkeletonFn(t) {
+function epitrochoid7SkeletonFn(phase) {
   const d = 1.275;
   return {
-    x: 7 * Math.cos(t) - d * Math.cos(7 * t),
-    y: 7 * Math.sin(t) - d * Math.sin(7 * t),
+    x: 7 * Math.cos(phase) - d * Math.cos(7 * phase),
+    y: 7 * Math.sin(phase) - d * Math.sin(7 * phase)
   };
 }
 var epitrochoid7 = {
@@ -1412,16 +1388,16 @@ var epitrochoid7 = {
   fn: epitrochoid7Fn,
   period: TWO_PI5,
   speed: 1.4,
-  skeletonFn: epitrochoid7SkeletonFn,
+  skeletonFn: epitrochoid7SkeletonFn
 };
 
 // src/curves/lissajous32.ts
 var TWO_PI6 = Math.PI * 2;
-function lissajous32Fn(t, time, _params) {
-  const phi = time * 0.45;
+function lissajous32Fn(phase, elapsed, _params) {
+  const phi = elapsed * 0.45;
   return {
-    x: Math.sin(3 * t + phi),
-    y: Math.sin(2 * t),
+    x: Math.sin(3 * phase + phi),
+    y: Math.sin(2 * phase)
   };
 }
 var lissajous32 = {
@@ -1429,16 +1405,16 @@ var lissajous32 = {
   fn: lissajous32Fn,
   period: TWO_PI6,
   speed: 2,
-  skeleton: "live",
+  skeleton: "live"
 };
 
 // src/curves/lissajous43.ts
 var TWO_PI7 = Math.PI * 2;
-function lissajous43Fn(t, time, _params) {
-  const phi = time * 0.38;
+function lissajous43Fn(phase, elapsed, _params) {
+  const phi = elapsed * 0.38;
   return {
-    x: Math.sin(4 * t + phi),
-    y: Math.sin(3 * t),
+    x: Math.sin(4 * phase + phi),
+    y: Math.sin(3 * phase)
   };
 }
 var lissajous43 = {
@@ -1446,18 +1422,17 @@ var lissajous43 = {
   fn: lissajous43Fn,
   period: TWO_PI7,
   speed: 1.8,
-  skeleton: "live",
+  skeleton: "live"
 };
 
 // src/curves/lame.ts
 var TWO_PI8 = Math.PI * 2;
-function lameFn(t, time, _params) {
-  const p = 1.75 + 1.25 * Math.sin(time * 0.48);
-  const c = Math.cos(t),
-    s = Math.sin(t);
+function lameFn(phase, elapsed, _params) {
+  const p = 1.75 + 1.25 * Math.sin(elapsed * 0.48);
+  const c = Math.cos(phase), s = Math.sin(phase);
   return {
     x: Math.sign(c) * Math.pow(Math.abs(c), p),
-    y: Math.sign(s) * Math.pow(Math.abs(s), p),
+    y: Math.sign(s) * Math.pow(Math.abs(s), p)
   };
 }
 var lame = {
@@ -1465,112 +1440,103 @@ var lame = {
   fn: lameFn,
   period: TWO_PI8,
   speed: 1,
-  skeleton: "live",
+  skeleton: "live"
 };
 
 // src/curves/rose3.ts
 var TWO_PI9 = Math.PI * 2;
-function rose3Fn(t, _time, _params) {
-  const r = Math.cos(3 * t);
+function rose3Fn(phase, _elapsed, _params) {
+  const r = Math.cos(3 * phase);
   return {
-    x: r * Math.cos(t),
-    y: r * Math.sin(t),
+    x: r * Math.cos(phase),
+    y: r * Math.sin(phase)
   };
 }
 var rose3 = {
   name: "Rose (n=3)",
   fn: rose3Fn,
   period: TWO_PI9,
-  speed: 1.15,
+  speed: 1.15
 };
 
 // src/curves/rose5.ts
 var TWO_PI10 = Math.PI * 2;
-function rose5Fn(t, _time, _params) {
-  const r = Math.cos(5 * t);
+function rose5Fn(phase, _elapsed, _params) {
+  const r = Math.cos(5 * phase);
   return {
-    x: r * Math.cos(t),
-    y: r * Math.sin(t),
+    x: r * Math.cos(phase),
+    y: r * Math.sin(phase)
   };
 }
 var rose5 = {
   name: "Rose (n=5)",
   fn: rose5Fn,
   period: TWO_PI10,
-  speed: 1,
+  speed: 1
 };
 
 // src/curves/rose52.ts
 var FOUR_PI = Math.PI * 4;
-function rose52Fn(t, _time, _params) {
-  const r = Math.cos((5 / 2) * t);
+function rose52Fn(phase, _elapsed, _params) {
+  const r = Math.cos(5 / 2 * phase);
   return {
-    x: r * Math.cos(t),
-    y: r * Math.sin(t),
+    x: r * Math.cos(phase),
+    y: r * Math.sin(phase)
   };
 }
 var rose52 = {
   name: "Rose (n=5/2)",
   fn: rose52Fn,
   period: FOUR_PI,
-  speed: 0.8,
+  speed: 0.8
 };
 
 // src/curves/star.ts
 var TWO_PI11 = Math.PI * 2;
-function starFn(t, _time, _params) {
-  const r =
-    Math.abs(Math.cos((5 / 2) * t)) +
-    0.35 * Math.abs(Math.cos((15 / 2) * t)) +
-    0.15 * Math.abs(Math.cos((25 / 2) * t));
+function starFn(phase, _elapsed, _params) {
+  const r = Math.abs(Math.cos(5 / 2 * phase)) + 0.35 * Math.abs(Math.cos(15 / 2 * phase)) + 0.15 * Math.abs(Math.cos(25 / 2 * phase));
   return {
-    x: r * Math.cos(t),
-    y: r * Math.sin(t),
+    x: r * Math.cos(phase),
+    y: r * Math.sin(phase)
   };
 }
 var star = {
   name: "Star",
   fn: starFn,
   period: TWO_PI11,
-  speed: 1,
+  speed: 1
 };
 
 // src/curves/star4.ts
 var TWO_PI12 = Math.PI * 2;
-function star4Fn(t, _time, _params) {
-  const r =
-    Math.abs(Math.cos(2 * t)) +
-    0.35 * Math.abs(Math.cos(6 * t)) +
-    0.15 * Math.abs(Math.cos(10 * t));
+function star4Fn(phase, _elapsed, _params) {
+  const r = Math.abs(Math.cos(2 * phase)) + 0.35 * Math.abs(Math.cos(6 * phase)) + 0.15 * Math.abs(Math.cos(10 * phase));
   return {
-    x: r * Math.cos(t),
-    y: r * Math.sin(t),
+    x: r * Math.cos(phase),
+    y: r * Math.sin(phase)
   };
 }
 var star4 = {
   name: "Star (4-arm)",
   fn: star4Fn,
   period: TWO_PI12,
-  speed: 1,
+  speed: 1
 };
 
 // src/curves/star7.ts
 var TWO_PI13 = Math.PI * 2;
-function star7Fn(t, _time, _params) {
-  const r =
-    Math.abs(Math.cos((7 / 2) * t)) +
-    0.35 * Math.abs(Math.cos((21 / 2) * t)) +
-    0.15 * Math.abs(Math.cos((35 / 2) * t));
+function star7Fn(phase, _elapsed, _params) {
+  const r = Math.abs(Math.cos(7 / 2 * phase)) + 0.35 * Math.abs(Math.cos(21 / 2 * phase)) + 0.15 * Math.abs(Math.cos(35 / 2 * phase));
   return {
-    x: r * Math.cos(t),
-    y: r * Math.sin(t),
+    x: r * Math.cos(phase),
+    y: r * Math.sin(phase)
   };
 }
 var star7 = {
   name: "Star (7-arm)",
   fn: star7Fn,
   period: TWO_PI13,
-  speed: 1,
+  speed: 1
 };
 
 // src/curves/index.ts
@@ -1588,7 +1554,7 @@ var curves = {
   lissajous32,
   lissajous43,
   epicycloid3,
-  lame,
+  lame
 };
 
 // src/index.ts
@@ -1619,4 +1585,4 @@ exports.palettes = palettes;
 exports.rose3 = rose3;
 exports.rose5 = rose5;
 //# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map