pixi-effects 0.28.0 → 0.28.2

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 (35) hide show
  1. package/CHANGELOG.md +22 -1
  2. package/README.md +6 -6
  3. package/ai/chat-template.html +3 -3
  4. package/ai/tools/view.mjs +102 -14
  5. package/dist/Composition-H7UNR5F5.js +7 -0
  6. package/dist/{Composition-HFEVIYHN.js.map → Composition-H7UNR5F5.js.map} +1 -1
  7. package/dist/Composition-K6B3APM5.cjs +16 -0
  8. package/dist/{Composition-NI74UJT3.cjs.map → Composition-K6B3APM5.cjs.map} +1 -1
  9. package/dist/{chunk-WEJAQAFX.js → chunk-5MZWXVTT.js} +3 -3
  10. package/dist/{chunk-WEJAQAFX.js.map → chunk-5MZWXVTT.js.map} +1 -1
  11. package/dist/{chunk-AK54FIWM.js → chunk-7VN2KI3U.js} +6 -3
  12. package/dist/chunk-7VN2KI3U.js.map +1 -0
  13. package/dist/{chunk-SBOVUZZY.cjs → chunk-KBH33IQX.cjs} +61 -61
  14. package/dist/{chunk-SBOVUZZY.cjs.map → chunk-KBH33IQX.cjs.map} +1 -1
  15. package/dist/{chunk-MZCDBRTY.cjs → chunk-MJW7KILM.cjs} +6 -3
  16. package/dist/chunk-MJW7KILM.cjs.map +1 -0
  17. package/dist/index.cjs +35 -33
  18. package/dist/index.cjs.map +1 -1
  19. package/dist/index.js +7 -5
  20. package/dist/index.js.map +1 -1
  21. package/dist/loader.css +1 -1
  22. package/dist/three.cjs +5 -5
  23. package/dist/three.js +1 -1
  24. package/llms-full.txt +180 -2
  25. package/llms.txt +1 -0
  26. package/package.json +1 -1
  27. package/skills/pixi-effects/SKILL.md +12 -2
  28. package/skills/pixi-effects/reference/direction.md +136 -0
  29. package/skills/pixi-effects/reference/pitfalls.md +3 -0
  30. package/skills/pixi-effects/reference/recipes.md +25 -0
  31. package/skills/pixi-effects/template.html +6 -6
  32. package/dist/Composition-HFEVIYHN.js +0 -7
  33. package/dist/Composition-NI74UJT3.cjs +0 -16
  34. package/dist/chunk-AK54FIWM.js.map +0 -1
  35. package/dist/chunk-MZCDBRTY.cjs.map +0 -1
package/dist/index.cjs CHANGED
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var chunkSBOVUZZY_cjs = require('./chunk-SBOVUZZY.cjs');
4
- var chunkMZCDBRTY_cjs = require('./chunk-MZCDBRTY.cjs');
3
+ var chunkKBH33IQX_cjs = require('./chunk-KBH33IQX.cjs');
4
+ var chunkMJW7KILM_cjs = require('./chunk-MJW7KILM.cjs');
5
5
  var chunkP4GY3Z4G_cjs = require('./chunk-P4GY3Z4G.cjs');
6
6
  var chunkZMAD3KJU_cjs = require('./chunk-ZMAD3KJU.cjs');
7
7
  var chunkTWZNOUM7_cjs = require('./chunk-TWZNOUM7.cjs');
@@ -1485,8 +1485,8 @@ function expandTransitions(spec) {
1485
1485
  }
1486
1486
  const transitions = out.transitions;
1487
1487
  const sequences = out.sequences ?? [];
1488
- const remap = out.duration !== void 0 ? chunkMZCDBRTY_cjs.timeRemapOf(out) : null;
1489
- const parentDuration = remap ? chunkMZCDBRTY_cjs.contentLength(remap, out.duration) : out.duration ?? Infinity;
1488
+ const remap = out.duration !== void 0 ? chunkMJW7KILM_cjs.timeRemapOf(out) : null;
1489
+ const parentDuration = remap ? chunkMJW7KILM_cjs.contentLength(remap, out.duration) : out.duration ?? Infinity;
1490
1490
  const compW = out.width;
1491
1491
  const compH = out.height;
1492
1492
  const threeDByName = new Set(sequences.filter((s) => s.name && s.threeD).map((s) => s.name));
@@ -1554,16 +1554,16 @@ function expandTransitions(spec) {
1554
1554
  if (toUses > 1) {
1555
1555
  throw new Error(`pixi-effects: ${tag} sequence "${t.to}" is used as \`to\` in more than one transition`);
1556
1556
  }
1557
- const tStart = chunkMZCDBRTY_cjs.resolveAt(t.at, parentDuration);
1557
+ const tStart = chunkMJW7KILM_cjs.resolveAt(t.at, parentDuration);
1558
1558
  const tEnd = tStart + t.duration;
1559
1559
  const fromSeq = fromEntry.seq;
1560
- const fromStart = chunkMZCDBRTY_cjs.resolveAt(fromSeq.at, parentDuration);
1560
+ const fromStart = chunkMJW7KILM_cjs.resolveAt(fromSeq.at, parentDuration);
1561
1561
  const fromEnd = fromStart + (fromSeq.duration ?? parentDuration);
1562
1562
  if (tStart < fromStart - EPS || tEnd > fromEnd + EPS) {
1563
1563
  throw new Error(`pixi-effects: ${tag} window [${tStart}, ${tEnd}] is not covered by \`from\` "${t.from}" (lives [${fromStart}, ${fromEnd}], so it ends at ${fromEnd})`);
1564
1564
  }
1565
1565
  const toSeq = toEntry.seq;
1566
- const toStart = chunkMZCDBRTY_cjs.resolveAt(toSeq.at, parentDuration);
1566
+ const toStart = chunkMJW7KILM_cjs.resolveAt(toSeq.at, parentDuration);
1567
1567
  const toEnd = toStart + (toSeq.duration ?? parentDuration);
1568
1568
  if (tStart < toStart - EPS || tEnd > toEnd + EPS) {
1569
1569
  throw new Error(`pixi-effects: ${tag} window [${tStart}, ${tEnd}] is not covered by \`to\` "${t.to}" (lives [${toStart}, ${toEnd}], so it starts at ${toStart})`);
@@ -1623,7 +1623,7 @@ function wrapAsFullComposition(seq, compW, compH) {
1623
1623
  delete inner.at;
1624
1624
  delete inner.duration;
1625
1625
  const m = inner.mask;
1626
- const carriesMatte = m !== void 0 && chunkSBOVUZZY_cjs.maskSourceOf(m).kind === "refs";
1626
+ const carriesMatte = m !== void 0 && chunkKBH33IQX_cjs.maskSourceOf(m).kind === "refs";
1627
1627
  if (carriesMatte) delete inner.mask;
1628
1628
  return {
1629
1629
  ...carriesMatte ? { mask: m } : {},
@@ -1950,7 +1950,7 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
1950
1950
  const group = parentScene ?? (name !== void 0 && blending.has(name) ? name : void 0);
1951
1951
  if (group) scene.set(info, group);
1952
1952
  if (zero || seq.showsNothingYet) scaledToNothing.add(info);
1953
- if (seq instanceof chunkSBOVUZZY_cjs.CompositionSequence) walk2(seq, prefix + label + "/", insideThreeD || threeD, visible, group, moving, zero);
1953
+ if (seq instanceof chunkKBH33IQX_cjs.CompositionSequence) walk2(seq, prefix + label + "/", insideThreeD || threeD, visible, group, moving, zero);
1954
1954
  });
1955
1955
  };
1956
1956
  walk2(root, "", false, true);
@@ -2011,10 +2011,10 @@ function walk(comp, parentStart, parentEnd, depth, prefix, rows, transitions, lo
2011
2011
  const start = parentStart + (seq.at ?? 0);
2012
2012
  const end = Math.min(parentEnd, seq.duration !== void 0 ? start + seq.duration : parentEnd);
2013
2013
  const span = end - start;
2014
- const keys = (seq.spec.keyframes ?? []).map((kf) => round(start + chunkMZCDBRTY_cjs.resolveAt(kf.at, span))).sort((a, b) => a - b).slice(0, MAX_KEYS);
2014
+ const keys = (seq.spec.keyframes ?? []).map((kf) => round(start + chunkMJW7KILM_cjs.resolveAt(kf.at, span))).sort((a, b) => a - b).slice(0, MAX_KEYS);
2015
2015
  const row = { path: prefix + name, name, type: seq.spec.type, depth, start: round(start), end: round(end), keys, detail: detailOf(seq), ...local ? { local } : {} };
2016
2016
  const inner = [];
2017
- const isComp = seq instanceof chunkSBOVUZZY_cjs.CompositionSequence;
2017
+ const isComp = seq instanceof chunkKBH33IQX_cjs.CompositionSequence;
2018
2018
  if (isComp) {
2019
2019
  const label = seq.remapLabel();
2020
2020
  walk(seq, label ? 0 : start, label ? seq.contentSpan : end, depth + 1, prefix + name + "/", inner, transitions, label ? `${name} ${label}` : local);
@@ -2114,8 +2114,10 @@ function timelineSvg(data, opts = {}) {
2114
2114
  for (const k of r.keys) out.push(`<path class="key" d="M ${num(x(k))} ${y + 7} l 3 4 l -3 4 l -3 -4 z"/>`);
2115
2115
  out.push("</g>");
2116
2116
  });
2117
- const legend = Object.entries(COLORS).map(([type, c], i) => `<g transform="translate(${PAD + i * 108},${H + 10})"><rect width="12" height="12" rx="3" fill="${c}"/><text x="18" y="10" class="tick">${type}</text></g>`).join("");
2118
- return `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H + 32}" viewBox="0 0 ${W} ${H + 32}" role="img" aria-label="Timeline of ${data.rows.length} rows" data-duration="${num(data.duration)}" data-x0="${num(x(0))}" data-x1="${num(x(data.duration))}" data-top="${TOP - 6}" data-bottom="${H - PAD}" data-row="${ROW}">
2117
+ const LEGEND_STEP = 108, perLine = Math.max(1, Math.floor((W - PAD * 2) / LEGEND_STEP));
2118
+ const kinds = Object.entries(COLORS), lines = Math.ceil(kinds.length / perLine), HH = H + 14 + lines * 18;
2119
+ const legend = kinds.map(([type, c], i) => `<g transform="translate(${PAD + i % perLine * LEGEND_STEP},${H + 10 + Math.floor(i / perLine) * 18})"><rect width="12" height="12" rx="3" fill="${c}"/><text x="18" y="10" class="tick">${type}</text></g>`).join("");
2120
+ return `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${HH}" viewBox="0 0 ${W} ${HH}" role="img" aria-label="Timeline of ${data.rows.length} rows" data-duration="${num(data.duration)}" data-x0="${num(x(0))}" data-x1="${num(x(data.duration))}" data-top="${TOP - 6}" data-bottom="${H - PAD}" data-row="${ROW}">
2119
2121
  ${out.join("\n")}
2120
2122
  ${legend}
2121
2123
  </svg>`;
@@ -2671,8 +2673,8 @@ var Movie = class {
2671
2673
  this.stops = normalizeStops(options.composition?.stops, this.duration, this.frameRate);
2672
2674
  this._posterFrame = poster.frame;
2673
2675
  this.background = options.background ?? "#000000";
2674
- this.timeline = chunkMZCDBRTY_cjs.createTimeline({ paused: true, defaults: { ease: "none" } });
2675
- chunkMZCDBRTY_cjs.lengthen(this.timeline, this.duration);
2676
+ this.timeline = chunkMJW7KILM_cjs.createTimeline({ paused: true, defaults: { ease: "none" } });
2677
+ chunkMJW7KILM_cjs.lengthen(this.timeline, this.duration);
2676
2678
  const baseAppOptions = {
2677
2679
  width: this.width,
2678
2680
  height: this.height,
@@ -2731,7 +2733,7 @@ var Movie = class {
2731
2733
  height: options.composition.height ?? this.height,
2732
2734
  duration: options.composition.duration ?? this.duration
2733
2735
  } : void 0;
2734
- await chunkMZCDBRTY_cjs.ensureFilterLibrary(seededComposition);
2736
+ await chunkMJW7KILM_cjs.ensureFilterLibrary(seededComposition);
2735
2737
  const userComposition = seededComposition ? expandTransitions(seededComposition) : void 0;
2736
2738
  const rootSeqSpec = {
2737
2739
  type: "composition",
@@ -2741,7 +2743,7 @@ var Movie = class {
2741
2743
  ...userComposition
2742
2744
  };
2743
2745
  if (userComposition) carryTransitionWindows(userComposition, rootSeqSpec);
2744
- const composition = new chunkSBOVUZZY_cjs.CompositionSequence(rootSeqSpec, null, rootShape);
2746
+ const composition = new chunkKBH33IQX_cjs.CompositionSequence(rootSeqSpec, null, rootShape);
2745
2747
  lp.begin("build", countLayers(rootSeqSpec));
2746
2748
  await composition.build();
2747
2749
  this._rootSequence = composition;
@@ -3468,8 +3470,8 @@ function splitText(text, style = {}, opts = {}) {
3468
3470
 
3469
3471
  // src/presets/_ease.ts
3470
3472
  function parseEase2(name) {
3471
- chunkMZCDBRTY_cjs.checkEase(name, "a preset");
3472
- return chunkMZCDBRTY_cjs.parseEase(name);
3473
+ chunkMJW7KILM_cjs.checkEase(name, "a preset");
3474
+ return chunkMJW7KILM_cjs.parseEase(name);
3473
3475
  }
3474
3476
 
3475
3477
  // src/presets/kenBurns.ts
@@ -3604,17 +3606,17 @@ function orbit(opts) {
3604
3606
  throw new Error("pixi-effects: orbit() cannot combine `radius` with `dollyZoom` \u2014 the radius follows the animated fov");
3605
3607
  }
3606
3608
  const [cx, cy] = opts.center ?? [width / 2, height / 2];
3607
- const fixedR = opts.radius ?? chunkMZCDBRTY_cjs.homeDistance(height, fov ?? chunkMZCDBRTY_cjs.DEFAULT_FOV);
3609
+ const fixedR = opts.radius ?? chunkMJW7KILM_cjs.homeDistance(height, fov ?? chunkMJW7KILM_cjs.DEFAULT_FOV);
3608
3610
  const start = opts.start ?? -degrees / 2;
3609
3611
  const steps = Math.max(1, Math.round(duration * stepsPerSecond));
3610
3612
  const easeFn = parseEase2(ease);
3611
3613
  const dollyEase = dolly ? parseEase2(dolly.ease ?? ease) : null;
3612
3614
  const pos = (i) => {
3613
3615
  const p = i / steps;
3614
- const a = (start + degrees * easeFn(p)) * chunkMZCDBRTY_cjs.DEG;
3616
+ const a = (start + degrees * easeFn(p)) * chunkMJW7KILM_cjs.DEG;
3615
3617
  if (!dolly) return { x: cx + fixedR * Math.sin(a), z: fixedR * Math.cos(a) };
3616
3618
  const f = dolly.from + (dolly.to - dolly.from) * dollyEase(p);
3617
- const R = chunkMZCDBRTY_cjs.homeDistance(height, f);
3619
+ const R = chunkMJW7KILM_cjs.homeDistance(height, f);
3618
3620
  return { x: cx + R * Math.sin(a), z: R * Math.cos(a), fov: f };
3619
3621
  };
3620
3622
  const keyframes = [];
@@ -3669,7 +3671,7 @@ function particles(opts) {
3669
3671
  const round3 = (v) => Math.round(v * 1e6) / 1e6;
3670
3672
  const out = [];
3671
3673
  for (let i = 0; i < count; i++) {
3672
- const r = chunkMZCDBRTY_cjs.random(seed * 1000003 + i * 7919 + 17);
3674
+ const r = chunkMJW7KILM_cjs.random(seed * 1000003 + i * 7919 + 17);
3673
3675
  const pick = ([a2, b]) => a2 + r() * (b - a2);
3674
3676
  const born = at + r() * emit;
3675
3677
  const lifetime = pick(life);
@@ -3682,7 +3684,7 @@ function particles(opts) {
3682
3684
  const turn = spin ? pick(spin) : 0;
3683
3685
  const startAngle = spin ? r() * 360 : 0;
3684
3686
  const swayAmp = sway?.amp ?? 0, swayFreq = sway?.freq ?? 1;
3685
- const n0 = sway ? chunkMZCDBRTY_cjs.noise(0, seed * 1000003 + i) : 0;
3687
+ const n0 = sway ? chunkMJW7KILM_cjs.noise(0, seed * 1000003 + i) : 0;
3686
3688
  const at_ = (t) => {
3687
3689
  const axis = (p0, v0, acc) => {
3688
3690
  if (drag > 0) {
@@ -3691,7 +3693,7 @@ function particles(opts) {
3691
3693
  }
3692
3694
  return p0 + v0 * t + 0.5 * acc * t * t;
3693
3695
  };
3694
- const sw = sway ? swayAmp * (chunkMZCDBRTY_cjs.noise(t * swayFreq, seed * 1000003 + i) - n0) : 0;
3696
+ const sw = sway ? swayAmp * (chunkMJW7KILM_cjs.noise(t * swayFreq, seed * 1000003 + i) - n0) : 0;
3695
3697
  return { x: axis(x0, vx, wind) + sw, y: axis(y0, vy, gravity) };
3696
3698
  };
3697
3699
  const kfs = [];
@@ -3753,7 +3755,7 @@ function followPath(opts) {
3753
3755
  if (steps > MAX_STEPS) throw new Error(`followPath(): ${steps} samples is too many (max ${MAX_STEPS}); lower frameRate or duration`);
3754
3756
  const segments = [];
3755
3757
  let total = 0;
3756
- for (const line of chunkMZCDBRTY_cjs.flattenSvgPath(d)) {
3758
+ for (const line of chunkMJW7KILM_cjs.flattenSvgPath(d)) {
3757
3759
  const p = line.closed ? [...line.pts, line.pts[0], line.pts[1]] : line.pts;
3758
3760
  for (let i = 2; i < p.length; i += 2) {
3759
3761
  const len = Math.hypot(p[i] - p[i - 2], p[i + 1] - p[i - 1]);
@@ -3907,7 +3909,7 @@ function distances(n, from, grid, seed) {
3907
3909
  if (n === 0) return [];
3908
3910
  if (from === "random") {
3909
3911
  const order = Array.from({ length: n }, (_, i) => i);
3910
- const r = chunkMZCDBRTY_cjs.random(seed);
3912
+ const r = chunkMJW7KILM_cjs.random(seed);
3911
3913
  for (let i = n - 1; i > 0; i--) {
3912
3914
  const j = Math.floor(r() * (i + 1));
3913
3915
  [order[i], order[j]] = [order[j], order[i]];
@@ -3969,7 +3971,7 @@ function wiggle(opts) {
3969
3971
  to[n] = p.around;
3970
3972
  return;
3971
3973
  }
3972
- const off = (chunkMZCDBRTY_cjs.rand(seed * 7919 + pi * 104729 + s * 31 + 1) * 2 - 1) * p.amp;
3974
+ const off = (chunkMJW7KILM_cjs.rand(seed * 7919 + pi * 104729 + s * 31 + 1) * 2 - 1) * p.amp;
3973
3975
  to[n] = typeof p.around === "number" ? p.around + off : `(${p.around}) ${off < 0 ? "-" : "+"} ${Math.abs(off)}`;
3974
3976
  });
3975
3977
  out.push({ at: at + s * stepLen, to, duration: stepLen, ease });
@@ -4455,23 +4457,23 @@ function withFade(spec, opts) {
4455
4457
 
4456
4458
  Object.defineProperty(exports, "Sequence", {
4457
4459
  enumerable: true,
4458
- get: function () { return chunkMZCDBRTY_cjs.Sequence; }
4460
+ get: function () { return chunkMJW7KILM_cjs.Sequence; }
4459
4461
  });
4460
4462
  Object.defineProperty(exports, "noise", {
4461
4463
  enumerable: true,
4462
- get: function () { return chunkMZCDBRTY_cjs.noise; }
4464
+ get: function () { return chunkMJW7KILM_cjs.noise; }
4463
4465
  });
4464
4466
  Object.defineProperty(exports, "rand", {
4465
4467
  enumerable: true,
4466
- get: function () { return chunkMZCDBRTY_cjs.rand; }
4468
+ get: function () { return chunkMJW7KILM_cjs.rand; }
4467
4469
  });
4468
4470
  Object.defineProperty(exports, "random", {
4469
4471
  enumerable: true,
4470
- get: function () { return chunkMZCDBRTY_cjs.random; }
4472
+ get: function () { return chunkMJW7KILM_cjs.random; }
4471
4473
  });
4472
4474
  Object.defineProperty(exports, "registerSequenceType", {
4473
4475
  enumerable: true,
4474
- get: function () { return chunkMZCDBRTY_cjs.registerSequenceType; }
4476
+ get: function () { return chunkMJW7KILM_cjs.registerSequenceType; }
4475
4477
  });
4476
4478
  exports.Movie = Movie;
4477
4479
  exports.animateText = animateText;