@sarmal/core 0.16.0 → 0.17.1

package/README.md

@@ -33,7 +33,7 @@ Or use directly from CDN:
 
 ```html
 <script type="module">
-  import { createSarmal, curves } from "https://cdn.jsdelivr.net/npm/@sarmal/core/+esm";
+  import { createSarmal, rose3 } from "https://cdn.jsdelivr.net/npm/@sarmal/core/+esm";
   // your code here
 </script>
 ```
@@ -41,10 +41,10 @@ Or use directly from CDN:
 ## Quick Start
 
 ```javascript
-import { createSarmal, curves } from "@sarmal/core";
+import { createSarmal, rose3 } from "@sarmal/core";
 
 const canvas = document.getElementById("my-canvas");
-const sarmal = createSarmal(canvas, curves.artemis2, {
+const sarmal = createSarmal(canvas, rose3, {
   trailLength: 30,
   strokeStyle: "#00ffaa",
   lineWidth: 2,
@@ -57,7 +57,7 @@ Or with **auto-init** without having to write any JS:
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/@sarmal/core/dist/auto-init.js"></script>
-<canvas data-sarmal="artemis2" width="200" height="200"></canvas>
+<canvas data-sarmal="rose3" width="200" height="200"></canvas>
 ```
 
 ## Standard Curves

package/dist/auto-init.cjs

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 // src/engine.ts
 var TWO_PI = Math.PI * 2;
@@ -63,13 +63,13 @@ 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);
@@ -110,7 +110,7 @@ function createEngine(curveDef, trailLength = 120) {
       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 {
@@ -134,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;
@@ -150,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);
@@ -167,16 +167,13 @@ 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;
@@ -189,7 +186,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;
       }
@@ -201,22 +198,19 @@ 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;
@@ -258,7 +252,7 @@ function createEngine(curveDef, trailLength = 120) {
         _speedTransition.reject(new Error("Speed transition cancelled"));
         _speedTransition = null;
       }
-    },
+    }
   };
 }
 
@@ -321,16 +315,13 @@ 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;
@@ -349,7 +340,7 @@ 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 scaleXProportional = logicalWidth / (w * (1 + FIT_PADDING * 2));
@@ -360,12 +351,12 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
     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) {
@@ -375,17 +366,17 @@ function enginePassthroughs(engine) {
     setSpeed: engine.setSpeed,
     getSpeed: engine.getSpeed,
     resetSpeed: engine.resetSpeed,
-    setSpeedOver: engine.setSpeedOver,
+    setSpeedOver: engine.setSpeedOver
   };
 }
 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) {
@@ -408,7 +399,7 @@ var RENDER_OPTION_KEYS = /* @__PURE__ */ new Set([
   "trailColor",
   "headColor",
   "skeletonColor",
-  "trailStyle",
+  "trailStyle"
 ]);
 function validateRenderOptions(partial) {
   for (const key of Object.keys(partial)) {
@@ -433,7 +424,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;
@@ -441,21 +432,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) {
@@ -464,7 +455,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)}`
     );
   }
 }
@@ -474,14 +465,14 @@ 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)}`
     );
   }
 }
@@ -503,13 +494,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.`
     );
   }
 }
@@ -519,7 +510,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`;
@@ -644,7 +635,7 @@ function createRenderer(options) {
         i,
         trailCount,
         toX,
-        toY,
+        toY
       );
       if (trailStyle === "default") {
         ctx.fillStyle = `rgba(${trailSolidRgb},${opacity})`;
@@ -805,7 +796,7 @@ function createRenderer(options) {
       if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
         warnIfTrailColorMismatch(trailColor, trailStyle);
       }
-    },
+    }
   };
   if (shouldAutoStart) {
     instance.play();
@@ -816,22 +807,19 @@ function createRenderer(options) {
 // 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
@@ -841,14 +829,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
@@ -856,14 +844,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
@@ -871,14 +859,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
@@ -887,14 +875,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 = {
@@ -902,7 +890,7 @@ var epitrochoid7 = {
   fn: epitrochoid7Fn,
   period: TWO_PI6,
   speed: 1.4,
-  skeletonFn: epitrochoid7SkeletonFn,
+  skeletonFn: epitrochoid7SkeletonFn
 };
 
 // src/curves/lissajous32.ts
@@ -911,7 +899,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 = {
@@ -919,7 +907,7 @@ var lissajous32 = {
   fn: lissajous32Fn,
   period: TWO_PI7,
   speed: 2,
-  skeleton: "live",
+  skeleton: "live"
 };
 
 // src/curves/lissajous43.ts
@@ -928,7 +916,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 = {
@@ -936,18 +924,17 @@ 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 = {
@@ -955,7 +942,7 @@ var lame = {
   fn: lameFn,
   period: TWO_PI9,
   speed: 1,
-  skeleton: "live",
+  skeleton: "live"
 };
 
 // src/curves/rose3.ts
@@ -964,14 +951,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
@@ -980,14 +967,78 @@ 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/rose52.ts
+var FOUR_PI = Math.PI * 4;
+function rose52Fn(t, _time, _params) {
+  const r = Math.cos(5 / 2 * t);
+  return {
+    x: r * Math.cos(t),
+    y: r * Math.sin(t)
+  };
+}
+var rose52 = {
+  name: "Rose (n=5/2)",
+  fn: rose52Fn,
+  period: FOUR_PI,
+  speed: 0.8
+};
+
+// src/curves/star.ts
+var TWO_PI12 = 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));
+  return {
+    x: r * Math.cos(t),
+    y: r * Math.sin(t)
+  };
+}
+var star = {
+  name: "Star",
+  fn: starFn,
+  period: TWO_PI12,
+  speed: 1
+};
+
+// src/curves/star4.ts
+var TWO_PI13 = 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));
+  return {
+    x: r * Math.cos(t),
+    y: r * Math.sin(t)
+  };
+}
+var star4 = {
+  name: "Star (4-arm)",
+  fn: star4Fn,
+  period: TWO_PI13,
+  speed: 1
+};
+
+// src/curves/star7.ts
+var TWO_PI14 = 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));
+  return {
+    x: r * Math.cos(t),
+    y: r * Math.sin(t)
+  };
+}
+var star7 = {
+  name: "Star (7-arm)",
+  fn: star7Fn,
+  period: TWO_PI14,
+  speed: 1
 };
 
 // src/curves/index.ts
@@ -996,12 +1047,16 @@ var curves = {
   epitrochoid7,
   astroid,
   deltoid,
-  rose5,
   rose3,
+  rose5,
+  rose52,
+  star,
+  star4,
+  star7,
   lissajous32,
   lissajous43,
   epicycloid3,
-  lame,
+  lame
 };
 
 // src/index.ts
@@ -1018,7 +1073,8 @@ function parseTrailColor(value) {
     if (Array.isArray(parsed)) {
       return parsed;
     }
-  } catch {}
+  } catch {
+  }
   return value;
 }
 function init() {
@@ -1033,16 +1089,16 @@ function init() {
       return console.error(`[sarmal] "${curveName}" is not a valid curve name`);
     }
     const instance = createSarmal(canvas, curveDef, {
-      ...(canvas.dataset.trailColor && {
-        trailColor: parseTrailColor(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.trailColor && {
+        trailColor: parseTrailColor(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
+      }
     });
     if (canvas.dataset.speed) {
       instance.setSpeed(parseFloat(canvas.dataset.speed));
@@ -1059,4 +1115,4 @@ if (document.readyState === "loading") {
 
 exports.init = init;
 //# sourceMappingURL=auto-init.cjs.map
-//# sourceMappingURL=auto-init.cjs.map
+//# sourceMappingURL=auto-init.cjs.map