@sarmal/core 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 // src/engine.ts
 var TWO_PI = Math.PI * 2;
@@ -51,7 +51,7 @@ function resolveCurve(curveDef) {
     period: curveDef.period ?? TWO_PI,
     speed: curveDef.speed ?? 1,
     skeleton: curveDef.skeleton,
-    skeletonFn: curveDef.skeletonFn
+    skeletonFn: curveDef.skeletonFn,
   };
 }
 function createEngine(curveDef, trailLength = 120) {
@@ -77,7 +77,7 @@ function createEngine(curveDef, trailLength = 120) {
       actualTime += deltaTime;
       if (morphCurveB !== null && _morphAlpha !== null) {
         const a = curve.fn(t, actualTime, {});
-        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, {});
         trail.push(a.x + (b.x - a.x) * _morphAlpha, a.y + (b.y - a.y) * _morphAlpha);
       } else {
@@ -101,14 +101,14 @@ function createEngine(curveDef, trailLength = 120) {
       trail.clear();
     },
     seek(newT, { clearTrail = false } = {}) {
-      t = (newT % curve.period + curve.period) % curve.period;
+      t = ((newT % curve.period) + curve.period) % curve.period;
       if (clearTrail) {
         trail.clear();
       }
     },
     seekWithTrail(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;
@@ -134,13 +134,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;
@@ -153,7 +156,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;
       }
@@ -165,43 +168,74 @@ 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;
-    }
+    },
   };
 }
 
 // src/renderer.ts
 var DEFAULT_MORPH_DURATION_MS = 300;
 var DEFAULT_HEAD_RADIUS = 4;
-var DEFAULT_GLOW_SIZE = 20;
 var DEFAULT_SKELETON_COLOR = "#ffffff";
 var DEFAULT_SKELETON_OPACITY = 0.15;
 var FIT_PADDING = 0.1;
-var TRAIL_BATCH_SIZE = 20;
 var TRAIL_FADE_CURVE = 1.5;
 var TRAIL_MAX_OPACITY = 0.88;
 var TRAIL_MIN_WIDTH = 0.5;
 var TRAIL_MAX_WIDTH = 2.5;
-var GLOW_INNER_EDGE = 0.4;
-var GLOW_FALLOFF_OPACITY = 0.53;
 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 computeTangent(trail, i) {
+  const count = trail.length;
+  if (count < 2) {
+    return { x: 1, y: 0 };
+  }
+  if (i === 0) {
+    const dx2 = trail[1].x - trail[0].x;
+    const dy2 = trail[1].y - trail[0].y;
+    const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1;
+    return { x: dx2 / len2, y: dy2 / len2 };
+  }
+  if (i === count - 1) {
+    const dx2 = trail[count - 1].x - trail[count - 2].x;
+    const dy2 = trail[count - 1].y - trail[count - 2].y;
+    const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1;
+    return { x: dx2 / len2, y: dy2 / len2 };
+  }
+  const dx = trail[i + 1].x - trail[i - 1].x;
+  const dy = trail[i + 1].y - trail[i - 1].y;
+  const len = Math.sqrt(dx * dx + dy * dy) || 1;
+  return { x: dx / len, y: dy / len };
+}
+function computeNormal(trail, i) {
+  const tangent = computeTangent(trail, i);
+  return { x: -tangent.y, y: tangent.x };
+}
+function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
+  target.style.width = `${logicalWidth}px`;
+  target.style.height = `${logicalHeight}px`;
+  target.width = logicalWidth * dpr;
+  target.height = logicalHeight * dpr;
 }
 function createRenderer(options) {
   const canvas = options.canvas;
@@ -215,10 +249,19 @@ function createRenderer(options) {
     trailColor: options.trailColor ?? "#ffffff",
     headColor: options.headColor ?? "#ffffff",
     headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS,
-    glowSize: options.glowSize ?? DEFAULT_GLOW_SIZE
   };
   const trailRgb = hexToRgbComponents(opts.trailColor);
-  const headRgbFalloff = `rgba(${hexToRgbComponents(opts.headColor)},${GLOW_FALLOFF_OPACITY})`;
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+  function setupCanvas() {
+    const rect = canvas.getBoundingClientRect();
+    const lw = rect.width || 200;
+    const lh = rect.height || 200;
+    applyDprSizing(canvas, lw, lh, dpr);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  }
+  setupCanvas();
+  let logicalWidth = canvas.width / dpr;
+  let logicalHeight = canvas.height / dpr;
   let skeleton = [];
   let skeletonCanvas = null;
   let trail = [];
@@ -232,12 +275,13 @@ function createRenderer(options) {
   let morphResolve = null;
   let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
   let morphAlpha = 0;
-  let morphBoundsA = null;
-  let morphBoundsB = null;
   function computeBoundaries(pts) {
     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;
       if (p.x > maxX) maxX = p.x;
@@ -246,17 +290,15 @@ function createRenderer(options) {
     }
     const width = maxX - minX;
     const height = maxY - minY;
-    const canvasWidth = canvas.width;
-    const canvasHeight = canvas.height;
-    const scaleX = canvasWidth / (width * (1 + FIT_PADDING * 2));
-    const scaleY = canvasHeight / (height * (1 + FIT_PADDING * 2));
+    const scaleX = logicalWidth / (width * (1 + FIT_PADDING * 2));
+    const scaleY = logicalHeight / (height * (1 + FIT_PADDING * 2));
     const s = Math.min(scaleX, scaleY);
     const boundsWidth = width * s;
     const boundsHeight = height * s;
     return {
       scale: s,
-      offsetX: (canvasWidth - boundsWidth) / 2 - minX * s,
-      offsetY: (canvasHeight - boundsHeight) / 2 - minY * s
+      offsetX: (logicalWidth - boundsWidth) / 2 - minX * s,
+      offsetY: (logicalHeight - boundsHeight) / 2 - minY * s,
     };
   }
   function calculateBoundaries() {
@@ -271,6 +313,7 @@ function createRenderer(options) {
     if (skeleton.length < 2) return;
     skeletonCanvas = new OffscreenCanvas(canvas.width, canvas.height);
     const skeletonCtx = skeletonCanvas.getContext("2d");
+    skeletonCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
     skeletonCtx.strokeStyle = `rgba(${hexToRgbComponents(opts.skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
     skeletonCtx.lineWidth = 1.5;
     skeletonCtx.beginPath();
@@ -316,32 +359,41 @@ function createRenderer(options) {
       }
       ctx.stroke();
     } else if (skeletonCanvas) {
-      ctx.drawImage(skeletonCanvas, 0, 0);
+      ctx.drawImage(skeletonCanvas, 0, 0, logicalWidth, logicalHeight);
     }
   }
   function drawTrail() {
     if (trailCount < 2) {
       return;
     }
-    ctx.lineJoin = "round";
-    ctx.lineCap = "round";
-    for (let batchIndex = 0; batchIndex < trailCount - 1; batchIndex += TRAIL_BATCH_SIZE) {
-      const bEnd = Math.min(batchIndex + TRAIL_BATCH_SIZE, trailCount - 1);
-      const progress = (batchIndex + bEnd) / 2 / (trailCount - 1);
+    for (let i = 0; i < trailCount - 1; i++) {
+      const progress = i / (trailCount - 1);
+      const nextProgress = (i + 1) / (trailCount - 1);
       const alpha = Math.pow(progress, TRAIL_FADE_CURVE) * TRAIL_MAX_OPACITY;
-      const lineWidth = TRAIL_MIN_WIDTH + progress * (TRAIL_MAX_WIDTH - TRAIL_MIN_WIDTH);
+      const width = TRAIL_MIN_WIDTH + progress * (TRAIL_MAX_WIDTH - TRAIL_MIN_WIDTH);
+      const nextWidth = TRAIL_MIN_WIDTH + nextProgress * (TRAIL_MAX_WIDTH - TRAIL_MIN_WIDTH);
+      const curr = trail[i];
+      const next = trail[i + 1];
+      const n0 = computeNormal(trail, i);
+      const n1 = computeNormal(trail, i + 1);
+      const halfW0 = width / 2;
+      const halfW1 = nextWidth / 2;
+      const l0x = curr.x * scale + offsetX + n0.x * halfW0;
+      const l0y = curr.y * scale + offsetY + n0.y * halfW0;
+      const r0x = curr.x * scale + offsetX - n0.x * halfW0;
+      const r0y = curr.y * scale + offsetY - n0.y * halfW0;
+      const l1x = next.x * scale + offsetX + n1.x * halfW1;
+      const l1y = next.y * scale + offsetY + n1.y * halfW1;
+      const r1x = next.x * scale + offsetX - n1.x * halfW1;
+      const r1y = next.y * scale + offsetY - n1.y * halfW1;
+      ctx.fillStyle = `rgba(${trailRgb},${alpha})`;
       ctx.beginPath();
-      for (let i = batchIndex; i <= bEnd; i++) {
-        const point = trail[i];
-        if (i === batchIndex) {
-          ctx.moveTo(point.x * scale + offsetX, point.y * scale + offsetY);
-        } else {
-          ctx.lineTo(point.x * scale + offsetX, point.y * scale + offsetY);
-        }
-      }
-      ctx.strokeStyle = `rgba(${trailRgb},${alpha})`;
-      ctx.lineWidth = lineWidth;
-      ctx.stroke();
+      ctx.moveTo(l0x, l0y);
+      ctx.lineTo(l1x, l1y);
+      ctx.lineTo(r1x, r1y);
+      ctx.lineTo(r0x, r0y);
+      ctx.closePath();
+      ctx.fill();
     }
   }
   function drawHead() {
@@ -350,14 +402,6 @@ function createRenderer(options) {
     }
     const x = head.x * scale + offsetX;
     const y = head.y * scale + offsetY;
-    const gradient = ctx.createRadialGradient(x, y, 0, x, y, opts.glowSize);
-    gradient.addColorStop(0, opts.headColor);
-    gradient.addColorStop(GLOW_INNER_EDGE, headRgbFalloff);
-    gradient.addColorStop(1, "transparent");
-    ctx.fillStyle = gradient;
-    ctx.beginPath();
-    ctx.arc(x, y, opts.glowSize, 0, Math.PI * 2);
-    ctx.fill();
     ctx.fillStyle = opts.headColor;
     ctx.beginPath();
     ctx.arc(x, y, opts.headRadius, 0, Math.PI * 2);
@@ -370,20 +414,18 @@ function createRenderer(options) {
     if (engine.morphAlpha !== null) {
       morphAlpha = Math.min(1, morphAlpha + deltaTime / (morphDurationMs / 1e3));
       engine.setMorphAlpha(morphAlpha);
-      if (morphBoundsA && morphBoundsB) {
-        const a = morphBoundsA;
-        const b = morphBoundsB;
-        scale = a.scale + (b.scale - a.scale) * morphAlpha;
-        offsetX = a.offsetX + (b.offsetX - a.offsetX) * morphAlpha;
-        offsetY = a.offsetY + (b.offsetY - a.offsetY) * morphAlpha;
+      const interpolatedSkeleton = engine.getSarmalSkeleton();
+      const bounds = computeBoundaries(interpolatedSkeleton);
+      if (bounds) {
+        scale = bounds.scale;
+        offsetX = bounds.offsetX;
+        offsetY = bounds.offsetY;
       }
       if (morphAlpha >= 1) {
         engine.completeMorph();
         morphResolve?.();
         morphResolve = null;
         morphAlpha = 0;
-        morphBoundsA = null;
-        morphBoundsB = null;
         skeleton = engine.getSarmalSkeleton();
         if (!engine.isLiveSkeleton) {
           buildSkeletonCanvas();
@@ -393,7 +435,7 @@ function createRenderer(options) {
     trail = engine.tick(deltaTime);
     trailCount = engine.trailCount;
     head = trailCount > 0 ? trail[trailCount - 1] : null;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.clearRect(0, 0, logicalWidth, logicalHeight);
     if (engine.isLiveSkeleton && engine.morphAlpha === null) {
       skeleton = engine.getSarmalSkeleton();
       calculateBoundaries();
@@ -441,46 +483,31 @@ function createRenderer(options) {
       engine.seekWithTrail(t);
     },
     morphTo(target, options2) {
-      const interruptBounds = morphResolve !== null ? { scale, offsetX, offsetY } : null;
       if (morphResolve !== null) {
         engine.completeMorph();
         morphResolve();
         morphResolve = null;
         morphAlpha = 0;
-        morphBoundsA = null;
-        morphBoundsB = null;
       }
       morphDurationMs = options2?.duration ?? DEFAULT_MORPH_DURATION_MS;
       morphAlpha = 0;
-      morphBoundsA = interruptBounds ?? computeBoundaries(engine.getSarmalSkeleton()) ?? { scale, offsetX, offsetY };
       engine.startMorph(target, options2?.morphStrategy);
-      const period = target.period ?? Math.PI * 2;
-      const samples = Math.max(50, Math.round(period * 20));
-      const skeletonFn = target.skeletonFn ?? ((t) => target.fn(t, 0, {}));
-      const skeletonB = Array.from(
-        { length: samples + 1 },
-        (_, i) => skeletonFn(i / samples * period)
-      );
-      morphBoundsB = computeBoundaries(skeletonB) ?? { scale, offsetX, offsetY };
       return new Promise((resolve) => {
         morphResolve = resolve;
       });
-    }
+    },
   };
 }
 
 // src/renderer-svg.ts
 var DEFAULT_MORPH_DURATION_MS2 = 300;
-var TRAIL_BATCH_COUNT = 12;
+var MAX_TRAIL_SEGMENTS = 200;
 var TRAIL_FADE_CURVE2 = 1.5;
 var TRAIL_MAX_OPACITY2 = 0.88;
 var TRAIL_MIN_WIDTH2 = 0.5;
 var TRAIL_MAX_WIDTH2 = 2.5;
 var DEFAULT_SKELETON_OPACITY2 = 0.15;
-var DEFAULT_GLOW_INNER_STOP = 0.4;
-var DEFAULT_GLOW_FALLOFF_OPACITY = 0.53;
 var FIT_PADDING2 = 0.1;
-var instanceCount = 0;
 function el(tag) {
   return document.createElementNS("http://www.w3.org/2000/svg", tag);
 }
@@ -491,11 +518,8 @@ function createSVGRenderer(options) {
     trailColor: options.trailColor ?? "#ffffff",
     headColor: options.headColor ?? "#ffffff",
     headRadius: options.headRadius ?? 4,
-    glowSize: options.glowSize ?? 20,
-    ariaLabel: options.ariaLabel ?? "Loading"
+    ariaLabel: options.ariaLabel ?? "Loading",
   };
-  const uid = ++instanceCount;
-  const gradientId = `sarmal-glow-${uid}`;
   const rect = container.getBoundingClientRect();
   const width = rect.width || 200;
   const height = rect.height || 200;
@@ -508,27 +532,6 @@ function createSVGRenderer(options) {
   const titleEl = el("title");
   titleEl.textContent = opts.ariaLabel;
   svg.appendChild(titleEl);
-  const defs = el("defs");
-  const gradient = el("radialGradient");
-  gradient.id = gradientId;
-  gradient.setAttribute("cx", "50%");
-  gradient.setAttribute("cy", "50%");
-  gradient.setAttribute("r", "50%");
-  const stop0 = el("stop");
-  stop0.setAttribute("offset", "0%");
-  stop0.setAttribute("stop-color", opts.headColor);
-  stop0.setAttribute("stop-opacity", "1");
-  const stopMid = el("stop");
-  stopMid.setAttribute("offset", `${DEFAULT_GLOW_INNER_STOP * 100}%`);
-  stopMid.setAttribute("stop-color", opts.headColor);
-  stopMid.setAttribute("stop-opacity", String(DEFAULT_GLOW_FALLOFF_OPACITY));
-  const stop1 = el("stop");
-  stop1.setAttribute("offset", "100%");
-  stop1.setAttribute("stop-color", opts.headColor);
-  stop1.setAttribute("stop-opacity", "0");
-  gradient.append(stop0, stopMid, stop1);
-  defs.appendChild(gradient);
-  svg.appendChild(defs);
   const skeletonPath = el("path");
   skeletonPath.setAttribute("fill", "none");
   skeletonPath.setAttribute("stroke", opts.skeletonColor);
@@ -550,19 +553,12 @@ function createSVGRenderer(options) {
   let morphPathABuilt = "";
   let morphPathBBuilt = "";
   const trailPaths = [];
-  for (let i = 0; i < TRAIL_BATCH_COUNT; i++) {
+  for (let i = 0; i < MAX_TRAIL_SEGMENTS; i++) {
     const path = el("path");
-    path.setAttribute("fill", "none");
-    path.setAttribute("stroke", opts.trailColor);
-    path.setAttribute("stroke-linecap", "round");
-    path.setAttribute("stroke-linejoin", "round");
+    path.setAttribute("fill", opts.trailColor);
     svg.appendChild(path);
     trailPaths.push(path);
   }
-  const glowCircle = el("circle");
-  glowCircle.setAttribute("fill", `url(#${gradientId})`);
-  glowCircle.setAttribute("r", String(opts.glowSize));
-  svg.appendChild(glowCircle);
   const headCircle = el("circle");
   headCircle.setAttribute("fill", opts.headColor);
   headCircle.setAttribute("r", String(opts.headRadius));
@@ -576,7 +572,10 @@ function createSVGRenderer(options) {
       return;
     }
     const first = skeleton2[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 skeleton2) {
       if (p.x < minX) {
         minX = p.x;
@@ -629,24 +628,32 @@ function createSVGRenderer(options) {
       }
       return;
     }
-    const batchSize = Math.ceil(trailCount / TRAIL_BATCH_COUNT);
-    for (let b = 0; b < TRAIL_BATCH_COUNT; b++) {
-      const start = b * batchSize;
-      const end = Math.min(start + batchSize, trailCount - 1);
-      if (start >= trailCount - 1) {
-        trailPaths[b].setAttribute("d", "");
-        continue;
-      }
-      const progress = (start + end) / 2 / (trailCount - 1);
+    for (let i = 0; i < trailCount - 1; i++) {
+      const progress = i / (trailCount - 1);
+      const nextProgress = (i + 1) / (trailCount - 1);
       const opacity = Math.pow(progress, TRAIL_FADE_CURVE2) * TRAIL_MAX_OPACITY2;
-      const strokeWidth = TRAIL_MIN_WIDTH2 + progress * (TRAIL_MAX_WIDTH2 - TRAIL_MIN_WIDTH2);
-      let d = `M${px(trail[start])} ${py(trail[start])}`;
-      for (let i = start + 1; i <= end; i++) {
-        d += ` L${px(trail[i])} ${py(trail[i])}`;
-      }
-      trailPaths[b].setAttribute("d", d);
-      trailPaths[b].setAttribute("stroke-opacity", opacity.toFixed(3));
-      trailPaths[b].setAttribute("stroke-width", strokeWidth.toFixed(2));
+      const width2 = TRAIL_MIN_WIDTH2 + progress * (TRAIL_MAX_WIDTH2 - TRAIL_MIN_WIDTH2);
+      const nextWidth = TRAIL_MIN_WIDTH2 + nextProgress * (TRAIL_MAX_WIDTH2 - TRAIL_MIN_WIDTH2);
+      const curr = trail[i];
+      const next = trail[i + 1];
+      const n0 = computeNormal(trail, i);
+      const n1 = computeNormal(trail, i + 1);
+      const halfW0 = width2 / 2;
+      const halfW1 = nextWidth / 2;
+      const l0x = px(curr) + n0.x * halfW0;
+      const l0y = py(curr) + n0.y * halfW0;
+      const r0x = px(curr) - n0.x * halfW0;
+      const r0y = py(curr) - n0.y * halfW0;
+      const l1x = px(next) + n1.x * halfW1;
+      const l1y = py(next) + n1.y * halfW1;
+      const r1x = px(next) - n1.x * halfW1;
+      const r1y = py(next) - n1.y * halfW1;
+      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);
+      trailPaths[i].setAttribute("fill-opacity", opacity.toFixed(3));
+    }
+    for (let i = trailCount - 1; i < trailPaths.length; i++) {
+      trailPaths[i].setAttribute("d", "");
     }
   }
   function updateHead(trail, trailCount) {
@@ -656,14 +663,13 @@ function createSVGRenderer(options) {
     const head = trail[trailCount - 1];
     const x = px(head);
     const y = py(head);
-    glowCircle.setAttribute("cx", x);
-    glowCircle.setAttribute("cy", y);
     headCircle.setAttribute("cx", x);
     headCircle.setAttribute("cy", y);
   }
   let animationId = null;
   let lastTime = 0;
-  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 morphDurationMs = DEFAULT_MORPH_DURATION_MS2;
   let morphTarget = null;
@@ -673,7 +679,7 @@ function createSVGRenderer(options) {
     const samples = Math.max(50, Math.round(period * 20));
     const points = [];
     for (let i = 0; i <= samples; i++) {
-      const t = i / samples * period;
+      const t = (i / samples) * period;
       const p = target.fn(t, 0, {});
       points.push(p);
     }
@@ -701,13 +707,16 @@ function createSVGRenderer(options) {
         skeletonPathA.setAttribute("visibility", "visible");
         skeletonPathA.setAttribute(
           "stroke-opacity",
-          String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY2)
+          String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY2),
         );
       }
       if (morphPathBBuilt) {
         skeletonPathB.setAttribute("d", morphPathBBuilt);
         skeletonPathB.setAttribute("visibility", "visible");
-        skeletonPathB.setAttribute("stroke-opacity", String(morphAlpha * DEFAULT_SKELETON_OPACITY2));
+        skeletonPathB.setAttribute(
+          "stroke-opacity",
+          String(morphAlpha * DEFAULT_SKELETON_OPACITY2),
+        );
       }
       if (morphAlpha >= 1) {
         engine.completeMorph();
@@ -799,7 +808,7 @@ function createSVGRenderer(options) {
       return new Promise((resolve) => {
         morphResolve = resolve;
       });
-    }
+    },
   };
 }
 function createSarmalSVG(container, curveDef, options) {
@@ -811,26 +820,29 @@ function createSarmalSVG(container, curveDef, options) {
 // src/curves.ts
 var TWO_PI2 = Math.PI * 2;
 function artemis2(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,
   };
 }
 function epitrochoid7(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 epitrochoid7Skeleton(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),
   };
 }
 function astroid(t, _time, _params) {
@@ -838,55 +850,56 @@ function astroid(t, _time, _params) {
   const s = Math.sin(t);
   return {
     x: c * c * c,
-    y: s * s * s
+    y: s * s * s,
   };
 }
 function deltoid(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),
   };
 }
 function rose5(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),
   };
 }
 function rose3(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),
   };
 }
 function lissajous32(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),
   };
 }
 function lissajous43(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),
   };
 }
 function epicycloid3(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),
   };
 }
 function lame(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 curves = {
@@ -894,66 +907,66 @@ var curves = {
     name: "Artemis II",
     fn: artemis2,
     period: TWO_PI2,
-    speed: 0.7
+    speed: 0.7,
   },
   epitrochoid7: {
     name: "Epitrochoid",
     fn: epitrochoid7,
     period: TWO_PI2,
     speed: 1.4,
-    skeletonFn: epitrochoid7Skeleton
+    skeletonFn: epitrochoid7Skeleton,
   },
   astroid: {
     name: "Astroid",
     fn: astroid,
     period: TWO_PI2,
-    speed: 1.1
+    speed: 1.1,
   },
   deltoid: {
     name: "Deltoid",
     fn: deltoid,
     period: TWO_PI2,
-    speed: 0.9
+    speed: 0.9,
   },
   rose5: {
     name: "Rose (n=5)",
     fn: rose5,
     period: TWO_PI2,
-    speed: 1
+    speed: 1,
   },
   rose3: {
     name: "Rose (n=3)",
     fn: rose3,
     period: TWO_PI2,
-    speed: 1.15
+    speed: 1.15,
   },
   lissajous32: {
     name: "Lissajous 3:2",
     fn: lissajous32,
     period: TWO_PI2,
     speed: 2,
-    skeleton: "live"
+    skeleton: "live",
   },
   lissajous43: {
     name: "Lissajous 4:3",
     fn: lissajous43,
     period: TWO_PI2,
     speed: 1.8,
-    skeleton: "live"
+    skeleton: "live",
   },
   epicycloid3: {
     name: "Epicycloid (n=3)",
     fn: epicycloid3,
     period: TWO_PI2,
-    speed: 0.75
+    speed: 0.75,
   },
   lame: {
     name: "Lam\xE9 Curve",
     fn: lame,
     period: TWO_PI2,
     speed: 1,
-    skeleton: "live"
-  }
+    skeleton: "live",
+  },
 };
 
 // src/index.ts
@@ -970,4 +983,4 @@ exports.createSarmal = createSarmal;
 exports.createSarmalSVG = createSarmalSVG;
 exports.curves = curves;
 //# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map