@sarmal/core 0.17.1 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/dist/auto-init.cjs +113 -89
  2. package/dist/auto-init.cjs.map +1 -1
  3. package/dist/auto-init.js +112 -88
  4. package/dist/auto-init.js.map +1 -1
  5. package/dist/curves/artemis2.cjs +10 -7
  6. package/dist/curves/artemis2.d.cts +1 -1
  7. package/dist/curves/artemis2.d.ts +1 -1
  8. package/dist/curves/artemis2.js +9 -6
  9. package/dist/curves/astroid.cjs +4 -4
  10. package/dist/curves/astroid.d.cts +1 -1
  11. package/dist/curves/astroid.d.ts +1 -1
  12. package/dist/curves/astroid.js +3 -3
  13. package/dist/curves/deltoid.cjs +4 -4
  14. package/dist/curves/deltoid.d.cts +1 -1
  15. package/dist/curves/deltoid.d.ts +1 -1
  16. package/dist/curves/deltoid.js +3 -3
  17. package/dist/curves/epicycloid3.cjs +4 -4
  18. package/dist/curves/epicycloid3.d.cts +1 -1
  19. package/dist/curves/epicycloid3.d.ts +1 -1
  20. package/dist/curves/epicycloid3.js +3 -3
  21. package/dist/curves/epitrochoid7.cjs +5 -5
  22. package/dist/curves/epitrochoid7.d.cts +1 -1
  23. package/dist/curves/epitrochoid7.d.ts +1 -1
  24. package/dist/curves/epitrochoid7.js +4 -4
  25. package/dist/curves/index.cjs +53 -40
  26. package/dist/curves/index.d.cts +29 -29
  27. package/dist/curves/index.d.ts +29 -29
  28. package/dist/curves/index.js +69 -40
  29. package/dist/curves/lame.cjs +6 -5
  30. package/dist/curves/lame.d.cts +1 -1
  31. package/dist/curves/lame.d.ts +1 -1
  32. package/dist/curves/lame.js +5 -4
  33. package/dist/curves/lissajous32.cjs +4 -4
  34. package/dist/curves/lissajous32.d.cts +1 -1
  35. package/dist/curves/lissajous32.d.ts +1 -1
  36. package/dist/curves/lissajous32.js +3 -3
  37. package/dist/curves/lissajous43.cjs +4 -4
  38. package/dist/curves/lissajous43.d.cts +1 -1
  39. package/dist/curves/lissajous43.d.ts +1 -1
  40. package/dist/curves/lissajous43.js +3 -3
  41. package/dist/curves/rose3.cjs +4 -4
  42. package/dist/curves/rose3.d.cts +1 -1
  43. package/dist/curves/rose3.d.ts +1 -1
  44. package/dist/curves/rose3.js +3 -3
  45. package/dist/curves/rose5.cjs +4 -4
  46. package/dist/curves/rose5.d.cts +1 -1
  47. package/dist/curves/rose5.d.ts +1 -1
  48. package/dist/curves/rose5.js +3 -3
  49. package/dist/curves/rose52.cjs +5 -5
  50. package/dist/curves/rose52.d.cts +1 -1
  51. package/dist/curves/rose52.d.ts +1 -1
  52. package/dist/curves/rose52.js +4 -4
  53. package/dist/curves/star.cjs +8 -5
  54. package/dist/curves/star.d.cts +1 -1
  55. package/dist/curves/star.d.ts +1 -1
  56. package/dist/curves/star.js +7 -4
  57. package/dist/curves/star4.cjs +8 -5
  58. package/dist/curves/star4.d.cts +1 -1
  59. package/dist/curves/star4.d.ts +1 -1
  60. package/dist/curves/star4.js +7 -4
  61. package/dist/curves/star7.cjs +8 -5
  62. package/dist/curves/star7.d.cts +1 -1
  63. package/dist/curves/star7.d.ts +1 -1
  64. package/dist/curves/star7.js +7 -4
  65. package/dist/index.cjs +125 -93
  66. package/dist/index.cjs.map +1 -1
  67. package/dist/index.d.cts +74 -35
  68. package/dist/index.d.ts +74 -35
  69. package/dist/index.js +143 -93
  70. package/dist/index.js.map +1 -1
  71. package/dist/types-frtEoAq6.d.cts +317 -0
  72. package/dist/types-frtEoAq6.d.ts +317 -0
  73. package/package.json +1 -1
  74. package/dist/types-BL9HhEmk.d.cts +0 -299
  75. package/dist/types-BL9HhEmk.d.ts +0 -299
package/dist/index.cjs CHANGED
@@ -1,4 +1,4 @@
1
- 'use strict';
1
+ "use strict";
2
2
 
3
3
  // src/engine.ts
4
4
  var TWO_PI = Math.PI * 2;
@@ -63,13 +63,13 @@ function resolveCurve(curveDef) {
63
63
  period,
64
64
  speed,
65
65
  skeleton: curveDef.skeleton,
66
- skeletonFn: curveDef.skeletonFn
66
+ skeletonFn: curveDef.skeletonFn,
67
67
  };
68
68
  }
69
69
  function createEngine(curveDef, trailLength = 120) {
70
70
  if (!Number.isFinite(trailLength) || trailLength <= 0) {
71
71
  throw new RangeError(
72
- `[sarmal] trailLength must be a positive finite number, got ${trailLength}`
72
+ `[sarmal] trailLength must be a positive finite number, got ${trailLength}`,
73
73
  );
74
74
  }
75
75
  let curve = resolveCurve(curveDef);
@@ -110,7 +110,7 @@ function createEngine(curveDef, trailLength = 120) {
110
110
  actualTime += deltaTime;
111
111
  if (morphCurveB !== null && _morphAlpha !== null) {
112
112
  const a = curve.fn(t, actualTime, EMPTY_PARAMS);
113
- const tB = _morphStrategy === "normalized" ? t / curve.period * morphCurveB.period : t;
113
+ const tB = _morphStrategy === "normalized" ? (t / curve.period) * morphCurveB.period : t;
114
114
  const b = morphCurveB.fn(tB, actualTime, EMPTY_PARAMS);
115
115
  trail.push(a.x + (b.x - a.x) * _morphAlpha, a.y + (b.y - a.y) * _morphAlpha);
116
116
  } else {
@@ -122,6 +122,9 @@ function createEngine(curveDef, trailLength = 120) {
122
122
  get trailCount() {
123
123
  return trail.length;
124
124
  },
125
+ get trailLength() {
126
+ return trailLength;
127
+ },
125
128
  get isLiveSkeleton() {
126
129
  return curve.skeleton === "live";
127
130
  },
@@ -134,14 +137,14 @@ function createEngine(curveDef, trailLength = 120) {
134
137
  trail.clear();
135
138
  },
136
139
  jump(newT, { clearTrail = false } = {}) {
137
- t = (newT % curve.period + curve.period) % curve.period;
140
+ t = ((newT % curve.period) + curve.period) % curve.period;
138
141
  if (clearTrail) {
139
142
  trail.clear();
140
143
  }
141
144
  },
142
145
  seek(targetT, { wrap = false, step = curve.period / trailLength } = {}) {
143
146
  const advance = curve.speed * step;
144
- const target = (targetT % curve.period + curve.period) % curve.period;
147
+ const target = ((targetT % curve.period) + curve.period) % curve.period;
145
148
  const targetTime = target / curve.speed;
146
149
  t = target;
147
150
  actualTime = targetTime;
@@ -150,7 +153,7 @@ function createEngine(curveDef, trailLength = 120) {
150
153
  const count = wrap ? trailLength : Math.min(trailLength, pointsFromStart);
151
154
  for (let i = count - 1; i >= 0; i--) {
152
155
  const sampleT = target - i * advance;
153
- const wrappedT = (sampleT % curve.period + curve.period) % curve.period;
156
+ const wrappedT = ((sampleT % curve.period) + curve.period) % curve.period;
154
157
  const time = targetTime - i * step;
155
158
  const point = curve.fn(wrappedT, time, EMPTY_PARAMS);
156
159
  trail.push(point.x, point.y);
@@ -167,13 +170,16 @@ function createEngine(curveDef, trailLength = 120) {
167
170
  ...frozenB,
168
171
  fn: (sampleT, time, params) => {
169
172
  const a = frozenA.fn(sampleT, time, params);
170
- const tB = frozenStrategy === "normalized" ? sampleT / frozenA.period * frozenB.period : sampleT;
173
+ const tB =
174
+ frozenStrategy === "normalized"
175
+ ? (sampleT / frozenA.period) * frozenB.period
176
+ : sampleT;
171
177
  const b = frozenB.fn(tB, time, params);
172
178
  return {
173
179
  x: a.x + (b.x - a.x) * frozenAlpha,
174
- y: a.y + (b.y - a.y) * frozenAlpha
180
+ y: a.y + (b.y - a.y) * frozenAlpha,
175
181
  };
176
- }
182
+ },
177
183
  };
178
184
  }
179
185
  _morphStrategy = strategy;
@@ -186,7 +192,7 @@ function createEngine(curveDef, trailLength = 120) {
186
192
  completeMorph() {
187
193
  if (morphCurveB !== null) {
188
194
  if (_morphStrategy === "normalized" && curve.period !== morphCurveB.period) {
189
- t = t / curve.period * morphCurveB.period;
195
+ t = (t / curve.period) * morphCurveB.period;
190
196
  }
191
197
  curve = morphCurveB;
192
198
  }
@@ -198,19 +204,22 @@ function createEngine(curveDef, trailLength = 120) {
198
204
  const points = new Array(steps);
199
205
  if (morphCurveB !== null && _morphAlpha !== null) {
200
206
  for (let i = 0; i < steps; i++) {
201
- const sampleT = i / (steps - 1) * curve.period;
207
+ const sampleT = (i / (steps - 1)) * curve.period;
202
208
  const a = sampleSkeleton(curve, sampleT);
203
- const tB = _morphStrategy === "normalized" ? sampleT / curve.period * morphCurveB.period : sampleT;
209
+ const tB =
210
+ _morphStrategy === "normalized"
211
+ ? (sampleT / curve.period) * morphCurveB.period
212
+ : sampleT;
204
213
  const b = sampleSkeleton(morphCurveB, tB);
205
214
  points[i] = {
206
215
  x: a.x + (b.x - a.x) * _morphAlpha,
207
- y: a.y + (b.y - a.y) * _morphAlpha
216
+ y: a.y + (b.y - a.y) * _morphAlpha,
208
217
  };
209
218
  }
210
219
  return points;
211
220
  }
212
221
  for (let i = 0; i < steps; i++) {
213
- const sampleT = i / (steps - 1) * curve.period;
222
+ const sampleT = (i / (steps - 1)) * curve.period;
214
223
  points[i] = sampleSkeleton(curve, sampleT);
215
224
  }
216
225
  return points;
@@ -252,7 +261,7 @@ function createEngine(curveDef, trailLength = 120) {
252
261
  _speedTransition.reject(new Error("Speed transition cancelled"));
253
262
  _speedTransition = null;
254
263
  }
255
- }
264
+ },
256
265
  };
257
266
  }
258
267
 
@@ -315,13 +324,16 @@ function computeTrailQuad(trail, i, trailCount, toX, toY) {
315
324
  r1x: nx - n1.x * w1,
316
325
  r1y: ny - n1.y * w1,
317
326
  opacity,
318
- progress
327
+ progress,
319
328
  };
320
329
  }
321
330
  function computeBoundaries(pts, logicalWidth, logicalHeight) {
322
331
  if (pts.length === 0) return null;
323
332
  const first = pts[0];
324
- let minX = first.x, maxX = first.x, minY = first.y, maxY = first.y;
333
+ let minX = first.x,
334
+ maxX = first.x,
335
+ minY = first.y,
336
+ maxY = first.y;
325
337
  for (const p of pts) {
326
338
  if (p.x < minX) {
327
339
  minX = p.x;
@@ -340,7 +352,7 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
340
352
  const h = maxY - minY;
341
353
  if (w === 0 && h === 0) {
342
354
  throw new Error(
343
- "[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t."
355
+ "[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t.",
344
356
  );
345
357
  }
346
358
  const scaleXProportional = logicalWidth / (w * (1 + FIT_PADDING * 2));
@@ -351,12 +363,12 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
351
363
  scaleXProportional,
352
364
  scaleYProportional,
353
365
  scaleXMinPadding,
354
- scaleYMinPadding
366
+ scaleYMinPadding,
355
367
  );
356
368
  return {
357
369
  scale,
358
370
  offsetX: (logicalWidth - w * scale) / 2 - minX * scale,
359
- offsetY: (logicalHeight - h * scale) / 2 - minY * scale
371
+ offsetY: (logicalHeight - h * scale) / 2 - minY * scale,
360
372
  };
361
373
  }
362
374
  function enginePassthroughs(engine) {
@@ -366,7 +378,7 @@ function enginePassthroughs(engine) {
366
378
  setSpeed: engine.setSpeed,
367
379
  getSpeed: engine.getSpeed,
368
380
  resetSpeed: engine.resetSpeed,
369
- setSpeedOver: engine.setSpeedOver
381
+ setSpeedOver: engine.setSpeedOver,
370
382
  };
371
383
  }
372
384
  var palettes = {
@@ -375,16 +387,16 @@ var palettes = {
375
387
  ocean: ["#1e3a8a", "#06b6d4", "#22d3ee", "#e0f2fe"],
376
388
  ice: ["#1e3a8a", "#67e8f9"],
377
389
  fire: ["#7f1d1d", "#fbbf24"],
378
- forest: ["#14532d", "#86efac"]
390
+ forest: ["#14532d", "#86efac"],
379
391
  };
380
392
  function hexToRgb(hex) {
381
393
  const n = parseInt(hex.slice(1), 16);
382
- return { r: n >> 16, g: n >> 8 & 255, b: n & 255 };
394
+ return { r: n >> 16, g: (n >> 8) & 255, b: n & 255 };
383
395
  }
384
396
  var lerpRgb = (a, b, t) => ({
385
397
  r: Math.round(a.r + (b.r - a.r) * t),
386
398
  g: Math.round(a.g + (b.g - a.g) * t),
387
- b: Math.round(a.b + (b.b - a.b) * t)
399
+ b: Math.round(a.b + (b.b - a.b) * t),
388
400
  });
389
401
  function getPaletteColor(palette, position, timeOffset = 0) {
390
402
  if (palette.length === 0) {
@@ -393,7 +405,7 @@ function getPaletteColor(palette, position, timeOffset = 0) {
393
405
  if (palette.length === 1) {
394
406
  return hexToRgb(palette[0]);
395
407
  }
396
- const cyclePos = (position + timeOffset) % 1;
408
+ const cyclePos = (((position + timeOffset) % 1) + 1) % 1;
397
409
  const scaled = cyclePos * palette.length;
398
410
  const idx = Math.floor(scaled);
399
411
  const t = scaled - idx;
@@ -407,7 +419,7 @@ var RENDER_OPTION_KEYS = /* @__PURE__ */ new Set([
407
419
  "trailColor",
408
420
  "headColor",
409
421
  "skeletonColor",
410
- "trailStyle"
422
+ "trailStyle",
411
423
  ]);
412
424
  function validateRenderOptions(partial) {
413
425
  for (const key of Object.keys(partial)) {
@@ -432,7 +444,7 @@ function assertTrailColor(value) {
432
444
  if (typeof value === "string") {
433
445
  if (!HEX_COLOR_RE.test(value)) {
434
446
  throw new TypeError(
435
- `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"`
447
+ `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"`,
436
448
  );
437
449
  }
438
450
  return;
@@ -440,21 +452,21 @@ function assertTrailColor(value) {
440
452
  if (Array.isArray(value)) {
441
453
  if (value.length < 2) {
442
454
  throw new RangeError(
443
- `[sarmal] setRenderOptions: trailColor array must have at least 2 entries, got ${value.length}`
455
+ `[sarmal] setRenderOptions: trailColor array must have at least 2 entries, got ${value.length}`,
444
456
  );
445
457
  }
446
458
  for (let i = 0; i < value.length; i++) {
447
459
  const entry = value[i];
448
460
  if (typeof entry !== "string" || !HEX_COLOR_RE.test(entry)) {
449
461
  throw new TypeError(
450
- `[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}`
462
+ `[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}`,
451
463
  );
452
464
  }
453
465
  }
454
466
  return;
455
467
  }
456
468
  throw new TypeError(
457
- `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}`
469
+ `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}`,
458
470
  );
459
471
  }
460
472
  function assertHeadColor(value) {
@@ -463,7 +475,7 @@ function assertHeadColor(value) {
463
475
  }
464
476
  if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
465
477
  throw new TypeError(
466
- `[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}`
478
+ `[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}`,
467
479
  );
468
480
  }
469
481
  }
@@ -473,14 +485,14 @@ function assertSkeletonColor(value) {
473
485
  }
474
486
  if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
475
487
  throw new TypeError(
476
- `[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}`
488
+ `[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}`,
477
489
  );
478
490
  }
479
491
  }
480
492
  function assertTrailStyle(value) {
481
493
  if (!TRAIL_STYLES.includes(value)) {
482
494
  throw new RangeError(
483
- `[sarmal] setRenderOptions: trailStyle must be one of "default", "gradient-static", "gradient-animated", got ${JSON.stringify(value)}`
495
+ `[sarmal] setRenderOptions: trailStyle must be one of "default", "gradient-static", "gradient-animated", got ${JSON.stringify(value)}`,
484
496
  );
485
497
  }
486
498
  }
@@ -502,13 +514,13 @@ function resolveHeadColor(trailColor, trailStyle) {
502
514
  function warnIfTrailColorMismatch(trailColor, trailStyle) {
503
515
  if (trailStyle === "default" && Array.isArray(trailColor)) {
504
516
  console.warn(
505
- '[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.'
517
+ '[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.',
506
518
  );
507
519
  return;
508
520
  }
509
521
  if (trailStyle !== "default" && typeof trailColor === "string") {
510
522
  console.warn(
511
- `[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.`
523
+ `[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.`,
512
524
  );
513
525
  }
514
526
  }
@@ -518,7 +530,7 @@ var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160)
518
530
  var WHITE_HEX = "#ffffff";
519
531
  function hexToRgbComponents(hex) {
520
532
  const n = parseInt(hex.slice(1), 16);
521
- return `${n >> 16},${n >> 8 & 255},${n & 255}`;
533
+ return `${n >> 16},${(n >> 8) & 255},${n & 255}`;
522
534
  }
523
535
  function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
524
536
  target.style.width = `${logicalWidth}px`;
@@ -643,7 +655,7 @@ function createRenderer(options) {
643
655
  i,
644
656
  trailCount,
645
657
  toX,
646
- toY
658
+ toY,
647
659
  );
648
660
  if (trailStyle === "default") {
649
661
  ctx.fillStyle = `rgba(${trailSolidRgb},${opacity})`;
@@ -804,7 +816,7 @@ function createRenderer(options) {
804
816
  if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
805
817
  warnIfTrailColorMismatch(trailColor, trailStyle);
806
818
  }
807
- }
819
+ },
808
820
  };
809
821
  if (shouldAutoStart) {
810
822
  instance.play();
@@ -813,10 +825,12 @@ function createRenderer(options) {
813
825
  }
814
826
 
815
827
  // src/renderer-svg.ts
816
- var MAX_TRAIL_SEGMENTS = 200;
817
828
  var EMPTY_PARAMS2 = {};
829
+ var HIGH_TRAIL_LENGTH_THRESHOLD = 5e3;
818
830
  function pointsToPathString(pts, scale, offsetX, offsetY) {
819
- if (pts.length < 2) return "";
831
+ if (pts.length < 2) {
832
+ return "";
833
+ }
820
834
  const px = (p) => (p.x * scale + offsetX).toFixed(2);
821
835
  const py = (p) => (p.y * scale + offsetY).toFixed(2);
822
836
  let d = `M${px(pts[0])} ${py(pts[0])}`;
@@ -830,7 +844,7 @@ function sampleCurveSkeleton(curveDef) {
830
844
  const samples = Math.ceil(period * 50);
831
845
  const pts = Array.from({ length: samples });
832
846
  for (let i = 0; i < samples; i++) {
833
- const t = i / (samples - 1) * period;
847
+ const t = (i / (samples - 1)) * period;
834
848
  pts[i] = curveDef.skeletonFn ? curveDef.skeletonFn(t) : curveDef.fn(t, 0, EMPTY_PARAMS2);
835
849
  }
836
850
  return pts;
@@ -840,6 +854,12 @@ function el(tag) {
840
854
  }
841
855
  function createSVGRenderer(options) {
842
856
  const { container, engine } = options;
857
+ const poolSize = engine.trailLength;
858
+ if (poolSize > HIGH_TRAIL_LENGTH_THRESHOLD) {
859
+ console.warn(
860
+ `[sarmal] High trailLength in SVG renderer (${poolSize}). Consider using the canvas renderer for long trails.`,
861
+ );
862
+ }
843
863
  let trailStyle = options.trailStyle ?? "default";
844
864
  let trailColor = options.trailColor ?? "#ffffff";
845
865
  let skeletonColor = options.skeletonColor ?? "#ffffff";
@@ -887,7 +907,7 @@ function createSVGRenderer(options) {
887
907
  let morphPathABuilt = "";
888
908
  let morphPathBBuilt = "";
889
909
  const trailPaths = [];
890
- for (let i = 0; i < MAX_TRAIL_SEGMENTS; i++) {
910
+ for (let i = 0; i < poolSize; i++) {
891
911
  const path = el("path");
892
912
  path.setAttribute("fill", trailSolid);
893
913
  svg.appendChild(path);
@@ -932,24 +952,22 @@ function createSVGRenderer(options) {
932
952
  }
933
953
  return;
934
954
  }
935
- const startIdx = Math.max(0, trailCount - 1 - MAX_TRAIL_SEGMENTS);
936
- const drawnCount = trailCount - 1 - startIdx;
937
- for (let i = startIdx; i < trailCount - 1; i++) {
938
- const j = i - startIdx;
955
+ const drawnCount = trailCount - 1;
956
+ for (let i = 0; i < drawnCount; i++) {
939
957
  const { l0x, l0y, r0x, r0y, l1x, l1y, r1x, r1y, opacity, progress } = computeTrailQuad(
940
958
  trail,
941
959
  i,
942
960
  trailCount,
943
961
  px,
944
- py
962
+ py,
945
963
  );
946
964
  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`;
947
- trailPaths[j].setAttribute("d", d);
948
- trailPaths[j].setAttribute("fill-opacity", opacity.toFixed(3));
965
+ trailPaths[i].setAttribute("d", d);
966
+ trailPaths[i].setAttribute("fill-opacity", opacity.toFixed(3));
949
967
  if (trailStyle !== "default") {
950
968
  const timeOffset = trailStyle === "gradient-animated" ? gradientAnimTime * 5e-4 : 0;
951
969
  const { r, g, b } = getPaletteColor(trailPalette, progress, timeOffset);
952
- trailPaths[j].setAttribute("fill", `rgb(${r},${g},${b})`);
970
+ trailPaths[i].setAttribute("fill", `rgb(${r},${g},${b})`);
953
971
  }
954
972
  }
955
973
  for (let i = drawnCount; i < trailPaths.length; i++) {
@@ -968,7 +986,8 @@ function createSVGRenderer(options) {
968
986
  }
969
987
  let animationId = null;
970
988
  let lastTime = 0;
971
- const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
989
+ const prefersReducedMotion =
990
+ typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
972
991
  let morphResolve = null;
973
992
  let morphReject = null;
974
993
  let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
@@ -986,7 +1005,7 @@ function createSVGRenderer(options) {
986
1005
  skeletonPathA.setAttribute("visibility", "visible");
987
1006
  skeletonPathA.setAttribute(
988
1007
  "stroke-opacity",
989
- String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
1008
+ String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY),
990
1009
  );
991
1010
  }
992
1011
  if (morphPathBBuilt) {
@@ -1135,7 +1154,7 @@ function createSVGRenderer(options) {
1135
1154
  if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
1136
1155
  warnIfTrailColorMismatch(trailColor, trailStyle);
1137
1156
  }
1138
- }
1157
+ },
1139
1158
  };
1140
1159
  if (shouldAutoStart) {
1141
1160
  instance.play();
@@ -1151,19 +1170,22 @@ function createSarmalSVG(container, curveDef, options) {
1151
1170
  // src/curves/artemis2.ts
1152
1171
  var TWO_PI2 = Math.PI * 2;
1153
1172
  function artemis2Fn(t, _time, _params) {
1154
- const a = 0.35, b = 0.15, ox = 0.175;
1155
- const s = Math.sin(t), c = Math.cos(t);
1173
+ const a = 0.35,
1174
+ b = 0.15,
1175
+ ox = 0.175;
1176
+ const s = Math.sin(t),
1177
+ c = Math.cos(t);
1156
1178
  const denom = 1 + s * s;
1157
1179
  return {
1158
- x: c * (1 + a * c) / denom - ox,
1159
- y: s * c * (1 + b * c) / denom
1180
+ x: (c * (1 + a * c)) / denom - ox,
1181
+ y: (s * c * (1 + b * c)) / denom,
1160
1182
  };
1161
1183
  }
1162
1184
  var artemis2 = {
1163
1185
  name: "Artemis II",
1164
1186
  fn: artemis2Fn,
1165
1187
  period: TWO_PI2,
1166
- speed: 0.7
1188
+ speed: 0.7,
1167
1189
  };
1168
1190
 
1169
1191
  // src/curves/astroid.ts
@@ -1173,14 +1195,14 @@ function astroidFn(t, _time, _params) {
1173
1195
  const s = Math.sin(t);
1174
1196
  return {
1175
1197
  x: c * c * c,
1176
- y: s * s * s
1198
+ y: s * s * s,
1177
1199
  };
1178
1200
  }
1179
1201
  var astroid = {
1180
1202
  name: "Astroid",
1181
1203
  fn: astroidFn,
1182
1204
  period: TWO_PI3,
1183
- speed: 1.1
1205
+ speed: 1.1,
1184
1206
  };
1185
1207
 
1186
1208
  // src/curves/deltoid.ts
@@ -1188,14 +1210,14 @@ var TWO_PI4 = Math.PI * 2;
1188
1210
  function deltoidFn(t, _time, _params) {
1189
1211
  return {
1190
1212
  x: 2 * Math.cos(t) + Math.cos(2 * t),
1191
- y: 2 * Math.sin(t) - Math.sin(2 * t)
1213
+ y: 2 * Math.sin(t) - Math.sin(2 * t),
1192
1214
  };
1193
1215
  }
1194
1216
  var deltoid = {
1195
1217
  name: "Deltoid",
1196
1218
  fn: deltoidFn,
1197
1219
  period: TWO_PI4,
1198
- speed: 0.9
1220
+ speed: 0.9,
1199
1221
  };
1200
1222
 
1201
1223
  // src/curves/epicycloid3.ts
@@ -1203,14 +1225,14 @@ var TWO_PI5 = Math.PI * 2;
1203
1225
  function epicycloid3Fn(t, _time, _params) {
1204
1226
  return {
1205
1227
  x: 4 * Math.cos(t) - Math.cos(4 * t),
1206
- y: 4 * Math.sin(t) - Math.sin(4 * t)
1228
+ y: 4 * Math.sin(t) - Math.sin(4 * t),
1207
1229
  };
1208
1230
  }
1209
1231
  var epicycloid3 = {
1210
1232
  name: "Epicycloid (n=3)",
1211
1233
  fn: epicycloid3Fn,
1212
1234
  period: TWO_PI5,
1213
- speed: 0.75
1235
+ speed: 0.75,
1214
1236
  };
1215
1237
 
1216
1238
  // src/curves/epitrochoid7.ts
@@ -1219,14 +1241,14 @@ function epitrochoid7Fn(t, _time, _params) {
1219
1241
  const d = 1 + 0.55 * Math.sin(t * 0.5);
1220
1242
  return {
1221
1243
  x: 7 * Math.cos(t) - d * Math.cos(7 * t),
1222
- y: 7 * Math.sin(t) - d * Math.sin(7 * t)
1244
+ y: 7 * Math.sin(t) - d * Math.sin(7 * t),
1223
1245
  };
1224
1246
  }
1225
1247
  function epitrochoid7SkeletonFn(t) {
1226
1248
  const d = 1.275;
1227
1249
  return {
1228
1250
  x: 7 * Math.cos(t) - d * Math.cos(7 * t),
1229
- y: 7 * Math.sin(t) - d * Math.sin(7 * t)
1251
+ y: 7 * Math.sin(t) - d * Math.sin(7 * t),
1230
1252
  };
1231
1253
  }
1232
1254
  var epitrochoid7 = {
@@ -1234,7 +1256,7 @@ var epitrochoid7 = {
1234
1256
  fn: epitrochoid7Fn,
1235
1257
  period: TWO_PI6,
1236
1258
  speed: 1.4,
1237
- skeletonFn: epitrochoid7SkeletonFn
1259
+ skeletonFn: epitrochoid7SkeletonFn,
1238
1260
  };
1239
1261
 
1240
1262
  // src/curves/lissajous32.ts
@@ -1243,7 +1265,7 @@ function lissajous32Fn(t, time, _params) {
1243
1265
  const phi = time * 0.45;
1244
1266
  return {
1245
1267
  x: Math.sin(3 * t + phi),
1246
- y: Math.sin(2 * t)
1268
+ y: Math.sin(2 * t),
1247
1269
  };
1248
1270
  }
1249
1271
  var lissajous32 = {
@@ -1251,7 +1273,7 @@ var lissajous32 = {
1251
1273
  fn: lissajous32Fn,
1252
1274
  period: TWO_PI7,
1253
1275
  speed: 2,
1254
- skeleton: "live"
1276
+ skeleton: "live",
1255
1277
  };
1256
1278
 
1257
1279
  // src/curves/lissajous43.ts
@@ -1260,7 +1282,7 @@ function lissajous43Fn(t, time, _params) {
1260
1282
  const phi = time * 0.38;
1261
1283
  return {
1262
1284
  x: Math.sin(4 * t + phi),
1263
- y: Math.sin(3 * t)
1285
+ y: Math.sin(3 * t),
1264
1286
  };
1265
1287
  }
1266
1288
  var lissajous43 = {
@@ -1268,17 +1290,18 @@ var lissajous43 = {
1268
1290
  fn: lissajous43Fn,
1269
1291
  period: TWO_PI8,
1270
1292
  speed: 1.8,
1271
- skeleton: "live"
1293
+ skeleton: "live",
1272
1294
  };
1273
1295
 
1274
1296
  // src/curves/lame.ts
1275
1297
  var TWO_PI9 = Math.PI * 2;
1276
1298
  function lameFn(t, time, _params) {
1277
1299
  const p = 1.75 + 1.25 * Math.sin(time * 0.48);
1278
- const c = Math.cos(t), s = Math.sin(t);
1300
+ const c = Math.cos(t),
1301
+ s = Math.sin(t);
1279
1302
  return {
1280
1303
  x: Math.sign(c) * Math.pow(Math.abs(c), p),
1281
- y: Math.sign(s) * Math.pow(Math.abs(s), p)
1304
+ y: Math.sign(s) * Math.pow(Math.abs(s), p),
1282
1305
  };
1283
1306
  }
1284
1307
  var lame = {
@@ -1286,7 +1309,7 @@ var lame = {
1286
1309
  fn: lameFn,
1287
1310
  period: TWO_PI9,
1288
1311
  speed: 1,
1289
- skeleton: "live"
1312
+ skeleton: "live",
1290
1313
  };
1291
1314
 
1292
1315
  // src/curves/rose3.ts
@@ -1295,14 +1318,14 @@ function rose3Fn(t, _time, _params) {
1295
1318
  const r = Math.cos(3 * t);
1296
1319
  return {
1297
1320
  x: r * Math.cos(t),
1298
- y: r * Math.sin(t)
1321
+ y: r * Math.sin(t),
1299
1322
  };
1300
1323
  }
1301
1324
  var rose3 = {
1302
1325
  name: "Rose (n=3)",
1303
1326
  fn: rose3Fn,
1304
1327
  period: TWO_PI10,
1305
- speed: 1.15
1328
+ speed: 1.15,
1306
1329
  };
1307
1330
 
1308
1331
  // src/curves/rose5.ts
@@ -1311,78 +1334,87 @@ function rose5Fn(t, _time, _params) {
1311
1334
  const r = Math.cos(5 * t);
1312
1335
  return {
1313
1336
  x: r * Math.cos(t),
1314
- y: r * Math.sin(t)
1337
+ y: r * Math.sin(t),
1315
1338
  };
1316
1339
  }
1317
1340
  var rose5 = {
1318
1341
  name: "Rose (n=5)",
1319
1342
  fn: rose5Fn,
1320
1343
  period: TWO_PI11,
1321
- speed: 1
1344
+ speed: 1,
1322
1345
  };
1323
1346
 
1324
1347
  // src/curves/rose52.ts
1325
1348
  var FOUR_PI = Math.PI * 4;
1326
1349
  function rose52Fn(t, _time, _params) {
1327
- const r = Math.cos(5 / 2 * t);
1350
+ const r = Math.cos((5 / 2) * t);
1328
1351
  return {
1329
1352
  x: r * Math.cos(t),
1330
- y: r * Math.sin(t)
1353
+ y: r * Math.sin(t),
1331
1354
  };
1332
1355
  }
1333
1356
  var rose52 = {
1334
1357
  name: "Rose (n=5/2)",
1335
1358
  fn: rose52Fn,
1336
1359
  period: FOUR_PI,
1337
- speed: 0.8
1360
+ speed: 0.8,
1338
1361
  };
1339
1362
 
1340
1363
  // src/curves/star.ts
1341
1364
  var TWO_PI12 = Math.PI * 2;
1342
1365
  function starFn(t, _time, _params) {
1343
- 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));
1366
+ const r =
1367
+ Math.abs(Math.cos((5 / 2) * t)) +
1368
+ 0.35 * Math.abs(Math.cos((15 / 2) * t)) +
1369
+ 0.15 * Math.abs(Math.cos((25 / 2) * t));
1344
1370
  return {
1345
1371
  x: r * Math.cos(t),
1346
- y: r * Math.sin(t)
1372
+ y: r * Math.sin(t),
1347
1373
  };
1348
1374
  }
1349
1375
  var star = {
1350
1376
  name: "Star",
1351
1377
  fn: starFn,
1352
1378
  period: TWO_PI12,
1353
- speed: 1
1379
+ speed: 1,
1354
1380
  };
1355
1381
 
1356
1382
  // src/curves/star4.ts
1357
1383
  var TWO_PI13 = Math.PI * 2;
1358
1384
  function star4Fn(t, _time, _params) {
1359
- const r = Math.abs(Math.cos(2 * t)) + 0.35 * Math.abs(Math.cos(6 * t)) + 0.15 * Math.abs(Math.cos(10 * t));
1385
+ const r =
1386
+ Math.abs(Math.cos(2 * t)) +
1387
+ 0.35 * Math.abs(Math.cos(6 * t)) +
1388
+ 0.15 * Math.abs(Math.cos(10 * t));
1360
1389
  return {
1361
1390
  x: r * Math.cos(t),
1362
- y: r * Math.sin(t)
1391
+ y: r * Math.sin(t),
1363
1392
  };
1364
1393
  }
1365
1394
  var star4 = {
1366
1395
  name: "Star (4-arm)",
1367
1396
  fn: star4Fn,
1368
1397
  period: TWO_PI13,
1369
- speed: 1
1398
+ speed: 1,
1370
1399
  };
1371
1400
 
1372
1401
  // src/curves/star7.ts
1373
1402
  var TWO_PI14 = Math.PI * 2;
1374
1403
  function star7Fn(t, _time, _params) {
1375
- 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));
1404
+ const r =
1405
+ Math.abs(Math.cos((7 / 2) * t)) +
1406
+ 0.35 * Math.abs(Math.cos((21 / 2) * t)) +
1407
+ 0.15 * Math.abs(Math.cos((35 / 2) * t));
1376
1408
  return {
1377
1409
  x: r * Math.cos(t),
1378
- y: r * Math.sin(t)
1410
+ y: r * Math.sin(t),
1379
1411
  };
1380
1412
  }
1381
1413
  var star7 = {
1382
1414
  name: "Star (7-arm)",
1383
1415
  fn: star7Fn,
1384
1416
  period: TWO_PI14,
1385
- speed: 1
1417
+ speed: 1,
1386
1418
  };
1387
1419
 
1388
1420
  // src/curves/index.ts
@@ -1400,7 +1432,7 @@ var curves = {
1400
1432
  lissajous32,
1401
1433
  lissajous43,
1402
1434
  epicycloid3,
1403
- lame
1435
+ lame,
1404
1436
  };
1405
1437
 
1406
1438
  // src/index.ts
@@ -1428,4 +1460,4 @@ exports.palettes = palettes;
1428
1460
  exports.rose3 = rose3;
1429
1461
  exports.rose5 = rose5;
1430
1462
  //# sourceMappingURL=index.cjs.map
1431
- //# sourceMappingURL=index.cjs.map
1463
+ //# sourceMappingURL=index.cjs.map