@sarmal/core 0.10.0 → 0.13.0

package/dist/auto-init.cjs

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 // src/engine.ts
 var TWO_PI = Math.PI * 2;
@@ -63,22 +63,24 @@ 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 actualTime = 0;
+  let userSpeedOverride = null;
   let morphCurveB = null;
   let _morphAlpha = null;
   let _morphStrategy = "normalized";
+  let _speedTransition = null;
   function sampleSkeleton(c, sampleT) {
     if (c.skeletonFn) {
       return c.skeletonFn(sampleT);
@@ -90,15 +92,25 @@ function createEngine(curveDef, trailLength = 120) {
   }
   return {
     tick(deltaTime) {
-      let effectiveSpeed = curve.speed;
+      if (_speedTransition !== null) {
+        _speedTransition.elapsed += deltaTime * 1e3;
+        const alpha = Math.min(_speedTransition.elapsed / _speedTransition.duration, 1);
+        userSpeedOverride = lerp(_speedTransition.from, _speedTransition.to, alpha);
+        if (alpha >= 1) {
+          userSpeedOverride = _speedTransition.to;
+          _speedTransition.resolve();
+          _speedTransition = null;
+        }
+      }
+      let effectiveSpeed = userSpeedOverride ?? curve.speed;
       if (morphCurveB !== null && _morphAlpha !== null) {
-        effectiveSpeed = lerp(curve.speed, morphCurveB.speed, _morphAlpha);
+        effectiveSpeed = lerp(effectiveSpeed, morphCurveB.speed, _morphAlpha);
       }
       t = (t + 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 tB = _morphStrategy === "normalized" ? (t / curve.period) * morphCurveB.period : t;
         const b = morphCurveB.fn(tB, actualTime, EMPTY_PARAMS);
         trail.push(a.x + (b.x - a.x) * _morphAlpha, a.y + (b.y - a.y) * _morphAlpha);
       } else {
@@ -122,14 +134,14 @@ function createEngine(curveDef, trailLength = 120) {
       trail.clear();
     },
     jump(newT, { clearTrail = false } = {}) {
-      t = (newT % curve.period + curve.period) % curve.period;
+      t = ((newT % curve.period) + curve.period) % curve.period;
       if (clearTrail) {
         trail.clear();
       }
     },
     seek(targetT, { wrap = false, step = curve.period / trailLength } = {}) {
       const advance = curve.speed * step;
-      const target = (targetT % curve.period + curve.period) % curve.period;
+      const target = ((targetT % curve.period) + curve.period) % curve.period;
       const targetTime = target / curve.speed;
       t = target;
       actualTime = targetTime;
@@ -138,7 +150,7 @@ function createEngine(curveDef, trailLength = 120) {
       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 wrappedT = ((sampleT % curve.period) + curve.period) % curve.period;
         const time = targetTime - i * step;
         const point = curve.fn(wrappedT, time, EMPTY_PARAMS);
         trail.push(point.x, point.y);
@@ -155,13 +167,16 @@ function createEngine(curveDef, trailLength = 120) {
           ...frozenB,
           fn: (sampleT, time, params) => {
             const a = frozenA.fn(sampleT, time, params);
-            const tB = frozenStrategy === "normalized" ? sampleT / frozenA.period * frozenB.period : sampleT;
+            const tB =
+              frozenStrategy === "normalized"
+                ? (sampleT / frozenA.period) * frozenB.period
+                : sampleT;
             const b = frozenB.fn(tB, time, 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;
@@ -174,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;
+          t = (t / curve.period) * morphCurveB.period;
         }
         curve = morphCurveB;
       }
@@ -186,23 +201,64 @@ function createEngine(curveDef, trailLength = 120) {
       const points = new Array(steps);
       if (morphCurveB !== null && _morphAlpha !== null) {
         for (let i = 0; i < steps; i++) {
-          const sampleT = i / (steps - 1) * curve.period;
+          const sampleT = (i / (steps - 1)) * curve.period;
           const a = sampleSkeleton(curve, sampleT);
-          const tB = _morphStrategy === "normalized" ? sampleT / curve.period * morphCurveB.period : sampleT;
+          const tB =
+            _morphStrategy === "normalized"
+              ? (sampleT / curve.period) * morphCurveB.period
+              : sampleT;
           const b = sampleSkeleton(morphCurveB, tB);
           points[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 points;
       }
       for (let i = 0; i < steps; i++) {
-        const sampleT = i / (steps - 1) * curve.period;
+        const sampleT = (i / (steps - 1)) * curve.period;
         points[i] = sampleSkeleton(curve, sampleT);
       }
       return points;
-    }
+    },
+    setSpeed(speed) {
+      if (!Number.isFinite(speed)) {
+        throw new Error("speed must be a finite number");
+      }
+      if (_speedTransition !== null) {
+        _speedTransition.reject(new Error("Speed transition cancelled"));
+        _speedTransition = null;
+      }
+      userSpeedOverride = speed;
+    },
+    getSpeed() {
+      return userSpeedOverride ?? curve.speed;
+    },
+    resetSpeed() {
+      userSpeedOverride = null;
+    },
+    setSpeedOver(speed, duration) {
+      if (!Number.isFinite(speed)) {
+        throw new Error("speed must be a finite number");
+      }
+      if (!Number.isFinite(duration) || duration <= 0) {
+        throw new Error("duration must be a finite number greater than 0");
+      }
+      if (_speedTransition !== null) {
+        _speedTransition.reject(new Error("Speed transition cancelled"));
+        _speedTransition = null;
+      }
+      const from = userSpeedOverride ?? curve.speed;
+      return new Promise((resolve, reject) => {
+        _speedTransition = { from, to: speed, elapsed: 0, duration, resolve, reject };
+      });
+    },
+    cancelSpeedTransition() {
+      if (_speedTransition !== null) {
+        _speedTransition.reject(new Error("Speed transition cancelled"));
+        _speedTransition = null;
+      }
+    },
   };
 }
 
@@ -210,6 +266,7 @@ function createEngine(curveDef, trailLength = 120) {
 var DEFAULT_MORPH_DURATION_MS = 300;
 var DEFAULT_SKELETON_OPACITY = 0.15;
 var FIT_PADDING = 0.1;
+var FIT_PADDING_MIN = 4;
 var TRAIL_FADE_CURVE = 1.5;
 var TRAIL_MAX_OPACITY = 0.88;
 var TRAIL_MIN_WIDTH = 0.5;
@@ -264,13 +321,16 @@ function computeTrailQuad(trail, i, trailCount, toX, toY) {
     r1x: nx - n1.x * w1,
     r1y: ny - n1.y * w1,
     opacity,
-    progress
+    progress,
   };
 }
 function computeBoundaries(pts, logicalWidth, logicalHeight) {
   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;
@@ -289,21 +349,37 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
   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 scaleX = logicalWidth / (w * (1 + FIT_PADDING * 2));
-  const scaleY = logicalHeight / (h * (1 + FIT_PADDING * 2));
-  const scale = Math.min(scaleX, scaleY);
+  const scaleXProportional = logicalWidth / (w * (1 + FIT_PADDING * 2));
+  const scaleYProportional = logicalHeight / (h * (1 + FIT_PADDING * 2));
+  const scaleXMinPadding = (logicalWidth - FIT_PADDING_MIN * 2) / w;
+  const scaleYMinPadding = (logicalHeight - FIT_PADDING_MIN * 2) / h;
+  const scale = Math.min(
+    scaleXProportional,
+    scaleYProportional,
+    scaleXMinPadding,
+    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) {
+  return {
+    jump: engine.jump,
+    seek: engine.seek,
+    setSpeed: engine.setSpeed,
+    getSpeed: engine.getSpeed,
+    resetSpeed: engine.resetSpeed,
+    setSpeedOver: engine.setSpeedOver,
   };
 }
 
 // src/renderer.ts
-var DEFAULT_HEAD_RADIUS = 4;
 var DEFAULT_SKELETON_COLOR = "#ffffff";
 var GRADIENT = {
   bard: ["#a855f7", "#3b82f6", "#14b8a6", "#ec4899"],
@@ -311,7 +387,7 @@ var GRADIENT = {
   ocean: ["#1e3a8a", "#06b6d4", "#22d3ee", "#e0f2fe"],
   ice: ["#1e3a8a", "#67e8f9"],
   fire: ["#7f1d1d", "#fbbf24"],
-  forest: ["#14532d", "#86efac"]
+  forest: ["#14532d", "#86efac"],
 };
 var PRESETS = {
   bard: GRADIENT.bard,
@@ -319,16 +395,16 @@ var PRESETS = {
   ocean: GRADIENT.ocean,
   ice: GRADIENT.ice,
   fire: GRADIENT.fire,
-  forest: GRADIENT.forest
+  forest: GRADIENT.forest,
 };
 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) return { r: 255, g: 255, b: 255 };
@@ -348,7 +424,7 @@ function resolvePalette(palette, trailStyle) {
 }
 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`;
@@ -363,14 +439,21 @@ function createRenderer(options) {
   }
   const ctx = canvas.getContext("2d");
   const engine = options.engine;
+  const trailStyle = options.trailStyle ?? "default";
+  const trailColor = options.trailColor ?? "#ffffff";
+  const palette = resolvePalette(options.palette, trailStyle);
+  function defaultHeadColor() {
+    if (trailStyle !== "default") {
+      const { r, g, b } = getPaletteColor(palette, 1);
+      return `rgb(${r},${g},${b})`;
+    }
+    return trailColor;
+  }
   const opts = {
     skeletonColor: options.skeletonColor ?? DEFAULT_SKELETON_COLOR,
-    trailColor: options.trailColor ?? "#ffffff",
-    headColor: options.headColor ?? "#ffffff",
-    headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS
+    trailColor,
+    headColor: options.headColor ?? defaultHeadColor(),
   };
-  const trailStyle = options.trailStyle ?? "default";
-  const palette = resolvePalette(options.palette, trailStyle);
   const trailRgb = hexToRgbComponents(opts.trailColor);
   const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
   function setupCanvas() {
@@ -470,7 +553,7 @@ function createRenderer(options) {
         i,
         trailCount,
         toX,
-        toY
+        toY,
       );
       if (trailStyle === "default") {
         ctx.fillStyle = `rgba(${trailRgb},${opacity})`;
@@ -494,15 +577,14 @@ function createRenderer(options) {
     }
     const x = head.x * scale + offsetX;
     const y = head.y * scale + offsetY;
+    const r =
+      options.headRadius ?? Math.max(2, 3 * Math.sqrt(Math.min(logicalWidth, logicalHeight) / 160));
     ctx.fillStyle = opts.headColor;
     ctx.beginPath();
-    ctx.arc(x, y, opts.headRadius, 0, Math.PI * 2);
+    ctx.arc(x, y, r, 0, Math.PI * 2);
     ctx.fill();
   }
-  function render() {
-    const now = performance.now();
-    const deltaTime = Math.min((now - lastTime) / 1e3, 1 / 30);
-    lastTime = now;
+  function renderFrame(deltaTime) {
     if (trailStyle === "gradient-animated") {
       gradientAnimTime += deltaTime * 1e3;
     }
@@ -538,27 +620,39 @@ function createRenderer(options) {
     drawSkeleton();
     drawTrail();
     drawHead();
-    animationId = requestAnimationFrame(render);
+  }
+  function loop() {
+    const now = performance.now();
+    const deltaTime = Math.min((now - lastTime) / 1e3, 1 / 30);
+    lastTime = now;
+    renderFrame(deltaTime);
+    animationId = requestAnimationFrame(loop);
   }
   skeleton = engine.getSarmalSkeleton();
   calculateBoundaries();
   if (!engine.isLiveSkeleton) {
     buildSkeletonCanvas();
   }
-  return {
-    start() {
+  if (options.initialT !== void 0) {
+    engine.seek(options.initialT);
+  }
+  renderFrame(0);
+  const shouldAutoStart = options.autoStart !== false;
+  const instance = {
+    play() {
       if (animationId !== null) {
         return;
       }
       lastTime = performance.now();
-      render();
+      loop();
     },
-    stop() {
+    pause() {
       if (animationId === null) {
         return;
       }
       cancelAnimationFrame(animationId);
       animationId = null;
+      engine.cancelSpeedTransition();
     },
     reset() {
       engine.reset();
@@ -571,12 +665,7 @@ function createRenderer(options) {
         animationId = null;
       }
     },
-    jump(t, options2) {
-      engine.jump(t, options2);
-    },
-    seek(t, options2) {
-      engine.seek(t, options2);
-    },
+    ...enginePassthroughs(engine),
     morphTo(target, options2) {
       if (morphResolve !== null) {
         engine.completeMorph();
@@ -590,26 +679,33 @@ function createRenderer(options) {
       return new Promise((resolve) => {
         morphResolve = resolve;
       });
-    }
+    },
   };
+  if (shouldAutoStart) {
+    instance.play();
+  }
+  return instance;
 }
 
 // src/curves/artemis2.ts
 var TWO_PI2 = Math.PI * 2;
 function artemis2Fn(t, _time, _params) {
-  const a = 0.35, b = 0.15, ox = 0.175;
-  const s = Math.sin(t), c = Math.cos(t);
+  const a = 0.35,
+    b = 0.15,
+    ox = 0.175;
+  const s = Math.sin(t),
+    c = Math.cos(t);
   const denom = 1 + s * s;
   return {
-    x: c * (1 + a * c) / denom - ox,
-    y: s * c * (1 + b * c) / denom
+    x: (c * (1 + a * c)) / denom - ox,
+    y: (s * c * (1 + b * c)) / denom,
   };
 }
 var artemis2 = {
   name: "Artemis II",
   fn: artemis2Fn,
   period: TWO_PI2,
-  speed: 0.7
+  speed: 0.7,
 };
 
 // src/curves/astroid.ts
@@ -619,14 +715,14 @@ function astroidFn(t, _time, _params) {
   const s = Math.sin(t);
   return {
     x: c * c * c,
-    y: s * s * s
+    y: s * s * s,
   };
 }
 var astroid = {
   name: "Astroid",
   fn: astroidFn,
   period: TWO_PI3,
-  speed: 1.1
+  speed: 1.1,
 };
 
 // src/curves/deltoid.ts
@@ -634,14 +730,14 @@ var TWO_PI4 = Math.PI * 2;
 function deltoidFn(t, _time, _params) {
   return {
     x: 2 * Math.cos(t) + Math.cos(2 * t),
-    y: 2 * Math.sin(t) - Math.sin(2 * t)
+    y: 2 * Math.sin(t) - Math.sin(2 * t),
   };
 }
 var deltoid = {
   name: "Deltoid",
   fn: deltoidFn,
   period: TWO_PI4,
-  speed: 0.9
+  speed: 0.9,
 };
 
 // src/curves/epicycloid3.ts
@@ -649,14 +745,14 @@ var TWO_PI5 = Math.PI * 2;
 function epicycloid3Fn(t, _time, _params) {
   return {
     x: 4 * Math.cos(t) - Math.cos(4 * t),
-    y: 4 * Math.sin(t) - Math.sin(4 * t)
+    y: 4 * Math.sin(t) - Math.sin(4 * t),
   };
 }
 var epicycloid3 = {
   name: "Epicycloid (n=3)",
   fn: epicycloid3Fn,
   period: TWO_PI5,
-  speed: 0.75
+  speed: 0.75,
 };
 
 // src/curves/epitrochoid7.ts
@@ -665,14 +761,14 @@ function epitrochoid7Fn(t, _time, _params) {
   const d = 1 + 0.55 * Math.sin(t * 0.5);
   return {
     x: 7 * Math.cos(t) - d * Math.cos(7 * t),
-    y: 7 * Math.sin(t) - d * Math.sin(7 * t)
+    y: 7 * Math.sin(t) - d * Math.sin(7 * t),
   };
 }
 function epitrochoid7SkeletonFn(t) {
   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)
+    y: 7 * Math.sin(t) - d * Math.sin(7 * t),
   };
 }
 var epitrochoid7 = {
@@ -680,7 +776,7 @@ var epitrochoid7 = {
   fn: epitrochoid7Fn,
   period: TWO_PI6,
   speed: 1.4,
-  skeletonFn: epitrochoid7SkeletonFn
+  skeletonFn: epitrochoid7SkeletonFn,
 };
 
 // src/curves/lissajous32.ts
@@ -689,7 +785,7 @@ function lissajous32Fn(t, time, _params) {
   const phi = time * 0.45;
   return {
     x: Math.sin(3 * t + phi),
-    y: Math.sin(2 * t)
+    y: Math.sin(2 * t),
   };
 }
 var lissajous32 = {
@@ -697,7 +793,7 @@ var lissajous32 = {
   fn: lissajous32Fn,
   period: TWO_PI7,
   speed: 2,
-  skeleton: "live"
+  skeleton: "live",
 };
 
 // src/curves/lissajous43.ts
@@ -706,7 +802,7 @@ function lissajous43Fn(t, time, _params) {
   const phi = time * 0.38;
   return {
     x: Math.sin(4 * t + phi),
-    y: Math.sin(3 * t)
+    y: Math.sin(3 * t),
   };
 }
 var lissajous43 = {
@@ -714,17 +810,18 @@ var lissajous43 = {
   fn: lissajous43Fn,
   period: TWO_PI8,
   speed: 1.8,
-  skeleton: "live"
+  skeleton: "live",
 };
 
 // src/curves/lame.ts
 var TWO_PI9 = 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);
+  const c = Math.cos(t),
+    s = Math.sin(t);
   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 = {
@@ -732,7 +829,7 @@ var lame = {
   fn: lameFn,
   period: TWO_PI9,
   speed: 1,
-  skeleton: "live"
+  skeleton: "live",
 };
 
 // src/curves/rose3.ts
@@ -741,14 +838,14 @@ function rose3Fn(t, _time, _params) {
   const r = Math.cos(3 * t);
   return {
     x: r * Math.cos(t),
-    y: r * Math.sin(t)
+    y: r * Math.sin(t),
   };
 }
 var rose3 = {
   name: "Rose (n=3)",
   fn: rose3Fn,
   period: TWO_PI10,
-  speed: 1.15
+  speed: 1.15,
 };
 
 // src/curves/rose5.ts
@@ -757,14 +854,14 @@ function rose5Fn(t, _time, _params) {
   const r = Math.cos(5 * t);
   return {
     x: r * Math.cos(t),
-    y: r * Math.sin(t)
+    y: r * Math.sin(t),
   };
 }
 var rose5 = {
   name: "Rose (n=5)",
   fn: rose5Fn,
   period: TWO_PI11,
-  speed: 1
+  speed: 1,
 };
 
 // src/curves/index.ts
@@ -778,7 +875,7 @@ var curves = {
   lissajous32,
   lissajous43,
   epicycloid3,
-  lame
+  lame,
 };
 
 // src/index.ts
@@ -795,8 +892,7 @@ function parsePalette(value) {
     if (Array.isArray(parsed)) {
       return parsed;
     }
-  } catch {
-  }
+  } catch {}
   return value;
 }
 function init() {
@@ -810,18 +906,17 @@ function init() {
     if (!curveDef) {
       return console.error(`[sarmal] "${curveName}" is not a valid curve name`);
     }
-    const sarmal = createSarmal(canvas, curveDef, {
-      ...canvas.dataset.trailColor && { trailColor: canvas.dataset.trailColor },
-      ...canvas.dataset.skeletonColor && { skeletonColor: canvas.dataset.skeletonColor },
-      ...canvas.dataset.headColor && { headColor: canvas.dataset.headColor },
-      ...canvas.dataset.headRadius && { headRadius: parseFloat(canvas.dataset.headRadius) },
-      ...canvas.dataset.trailLength && { trailLength: parseInt(canvas.dataset.trailLength, 10) },
-      ...canvas.dataset.trailStyle && {
-        trailStyle: canvas.dataset.trailStyle
-      },
-      ...canvas.dataset.palette && { palette: parsePalette(canvas.dataset.palette) }
+    createSarmal(canvas, curveDef, {
+      ...(canvas.dataset.trailColor && { trailColor: canvas.dataset.trailColor }),
+      ...(canvas.dataset.skeletonColor && { skeletonColor: canvas.dataset.skeletonColor }),
+      ...(canvas.dataset.headColor && { headColor: canvas.dataset.headColor }),
+      ...(canvas.dataset.headRadius && { headRadius: parseFloat(canvas.dataset.headRadius) }),
+      ...(canvas.dataset.trailLength && { trailLength: parseInt(canvas.dataset.trailLength, 10) }),
+      ...(canvas.dataset.trailStyle && {
+        trailStyle: canvas.dataset.trailStyle,
+      }),
+      ...(canvas.dataset.palette && { palette: parsePalette(canvas.dataset.palette) }),
     });
-    sarmal.start();
   });
 }
 if (document.readyState === "loading") {
@@ -832,4 +927,4 @@ if (document.readyState === "loading") {
   requestAnimationFrame(init);
 }
 //# sourceMappingURL=auto-init.cjs.map
-//# sourceMappingURL=auto-init.cjs.map
+//# sourceMappingURL=auto-init.cjs.map