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.
- package/CHANGELOG.md +22 -1
- package/README.md +6 -6
- package/ai/chat-template.html +3 -3
- package/ai/tools/view.mjs +102 -14
- package/dist/Composition-H7UNR5F5.js +7 -0
- package/dist/{Composition-HFEVIYHN.js.map → Composition-H7UNR5F5.js.map} +1 -1
- package/dist/Composition-K6B3APM5.cjs +16 -0
- package/dist/{Composition-NI74UJT3.cjs.map → Composition-K6B3APM5.cjs.map} +1 -1
- package/dist/{chunk-WEJAQAFX.js → chunk-5MZWXVTT.js} +3 -3
- package/dist/{chunk-WEJAQAFX.js.map → chunk-5MZWXVTT.js.map} +1 -1
- package/dist/{chunk-AK54FIWM.js → chunk-7VN2KI3U.js} +6 -3
- package/dist/chunk-7VN2KI3U.js.map +1 -0
- package/dist/{chunk-SBOVUZZY.cjs → chunk-KBH33IQX.cjs} +61 -61
- package/dist/{chunk-SBOVUZZY.cjs.map → chunk-KBH33IQX.cjs.map} +1 -1
- package/dist/{chunk-MZCDBRTY.cjs → chunk-MJW7KILM.cjs} +6 -3
- package/dist/chunk-MJW7KILM.cjs.map +1 -0
- package/dist/index.cjs +35 -33
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +7 -5
- package/dist/index.js.map +1 -1
- package/dist/loader.css +1 -1
- package/dist/three.cjs +5 -5
- package/dist/three.js +1 -1
- package/llms-full.txt +180 -2
- package/llms.txt +1 -0
- package/package.json +1 -1
- package/skills/pixi-effects/SKILL.md +12 -2
- package/skills/pixi-effects/reference/direction.md +136 -0
- package/skills/pixi-effects/reference/pitfalls.md +3 -0
- package/skills/pixi-effects/reference/recipes.md +25 -0
- package/skills/pixi-effects/template.html +6 -6
- package/dist/Composition-HFEVIYHN.js +0 -7
- package/dist/Composition-NI74UJT3.cjs +0 -16
- package/dist/chunk-AK54FIWM.js.map +0 -1
- 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
|
|
4
|
-
var
|
|
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 ?
|
|
1489
|
-
const parentDuration = remap ?
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 &&
|
|
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
|
|
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 +
|
|
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
|
|
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
|
|
2118
|
-
|
|
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 =
|
|
2675
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
3472
|
-
return
|
|
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 ??
|
|
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)) *
|
|
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 =
|
|
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 =
|
|
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 ?
|
|
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 * (
|
|
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
|
|
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 =
|
|
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 = (
|
|
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
|
|
4460
|
+
get: function () { return chunkMJW7KILM_cjs.Sequence; }
|
|
4459
4461
|
});
|
|
4460
4462
|
Object.defineProperty(exports, "noise", {
|
|
4461
4463
|
enumerable: true,
|
|
4462
|
-
get: function () { return
|
|
4464
|
+
get: function () { return chunkMJW7KILM_cjs.noise; }
|
|
4463
4465
|
});
|
|
4464
4466
|
Object.defineProperty(exports, "rand", {
|
|
4465
4467
|
enumerable: true,
|
|
4466
|
-
get: function () { return
|
|
4468
|
+
get: function () { return chunkMJW7KILM_cjs.rand; }
|
|
4467
4469
|
});
|
|
4468
4470
|
Object.defineProperty(exports, "random", {
|
|
4469
4471
|
enumerable: true,
|
|
4470
|
-
get: function () { return
|
|
4472
|
+
get: function () { return chunkMJW7KILM_cjs.random; }
|
|
4471
4473
|
});
|
|
4472
4474
|
Object.defineProperty(exports, "registerSequenceType", {
|
|
4473
4475
|
enumerable: true,
|
|
4474
|
-
get: function () { return
|
|
4476
|
+
get: function () { return chunkMJW7KILM_cjs.registerSequenceType; }
|
|
4475
4477
|
});
|
|
4476
4478
|
exports.Movie = Movie;
|
|
4477
4479
|
exports.animateText = animateText;
|