pixi-effects 0.6.0 → 0.8.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 (52) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/README.md +18 -11
  3. package/ai/SKILL.md +1 -1
  4. package/ai/reference/cheatsheet.md +9 -1
  5. package/ai/template.html +4 -3
  6. package/ai/tools/check.mjs +14 -5
  7. package/ai/tools/render.mjs +202 -0
  8. package/ai/tools/view.mjs +269 -0
  9. package/dist/{Base-4vNLl4tH.d.cts → Base-CSIulyIq.d.cts} +1 -1
  10. package/dist/{Base-CD4AoT5-.d.ts → Base-DVgwyIUj.d.ts} +1 -1
  11. package/dist/Composition-CM62XJKT.cjs +14 -0
  12. package/dist/{Composition-Y5VZSDDP.cjs.map → Composition-CM62XJKT.cjs.map} +1 -1
  13. package/dist/Composition-RJDSQYTV.js +5 -0
  14. package/dist/{Composition-7SO5WYHU.js.map → Composition-RJDSQYTV.js.map} +1 -1
  15. package/dist/Controller.cjs +122 -20
  16. package/dist/Controller.cjs.map +1 -1
  17. package/dist/Controller.d.cts +45 -3
  18. package/dist/Controller.d.ts +45 -3
  19. package/dist/Controller.js +122 -21
  20. package/dist/Controller.js.map +1 -1
  21. package/dist/{Movie-Ch2SUI1h.d.ts → Movie-CQOhUmko.d.cts} +75 -2
  22. package/dist/{Movie-CADDBfpl.d.cts → Movie-HF3pSGjQ.d.ts} +75 -2
  23. package/dist/{chunk-KQM2ZZMK.cjs → chunk-AGMNSJJH.cjs} +175 -29
  24. package/dist/chunk-AGMNSJJH.cjs.map +1 -0
  25. package/dist/{chunk-7IJHJXDI.js → chunk-FNKSXBKB.js} +136 -10
  26. package/dist/chunk-FNKSXBKB.js.map +1 -0
  27. package/dist/{chunk-B2FTJLNB.js → chunk-O4AJYUPK.js} +3 -3
  28. package/dist/{chunk-B2FTJLNB.js.map → chunk-O4AJYUPK.js.map} +1 -1
  29. package/dist/{chunk-4AGJF5RK.cjs → chunk-PDBDDGG5.cjs} +21 -21
  30. package/dist/{chunk-4AGJF5RK.cjs.map → chunk-PDBDDGG5.cjs.map} +1 -1
  31. package/dist/index.cjs +255 -25
  32. package/dist/index.cjs.map +1 -1
  33. package/dist/index.d.cts +4 -4
  34. package/dist/index.d.ts +4 -4
  35. package/dist/index.js +248 -18
  36. package/dist/index.js.map +1 -1
  37. package/dist/three.cjs +6 -5
  38. package/dist/three.cjs.map +1 -1
  39. package/dist/three.d.cts +2 -2
  40. package/dist/three.d.ts +2 -2
  41. package/dist/three.js +2 -1
  42. package/dist/three.js.map +1 -1
  43. package/dist/{types-DrW9QeKU.d.ts → types-oJijbn-K.d.cts} +14 -1
  44. package/dist/{types-DrW9QeKU.d.cts → types-oJijbn-K.d.ts} +14 -1
  45. package/docs/api.md +57 -0
  46. package/docs/dsl.md +60 -1
  47. package/llms-full.txt +127 -3
  48. package/package.json +7 -4
  49. package/dist/Composition-7SO5WYHU.js +0 -4
  50. package/dist/Composition-Y5VZSDDP.cjs +0 -13
  51. package/dist/chunk-7IJHJXDI.js.map +0 -1
  52. package/dist/chunk-KQM2ZZMK.cjs.map +0 -1
@@ -1,9 +1,28 @@
1
1
  'use strict';
2
2
 
3
- var pixi_js = require('pixi.js');
3
+ var chunkUQBGW5DO_cjs = require('./chunk-UQBGW5DO.cjs');
4
+ var PIXI = require('pixi.js');
4
5
  var gsap = require('gsap');
5
6
 
6
- // src/sequences/Base.ts
7
+ function _interopNamespace(e) {
8
+ if (e && e.__esModule) return e;
9
+ var n = Object.create(null);
10
+ if (e) {
11
+ Object.keys(e).forEach(function (k) {
12
+ if (k !== 'default') {
13
+ var d = Object.getOwnPropertyDescriptor(e, k);
14
+ Object.defineProperty(n, k, d.get ? d : {
15
+ enumerable: true,
16
+ get: function () { return e[k]; }
17
+ });
18
+ }
19
+ });
20
+ }
21
+ n.default = e;
22
+ return Object.freeze(n);
23
+ }
24
+
25
+ var PIXI__namespace = /*#__PURE__*/_interopNamespace(PIXI);
7
26
 
8
27
  // src/expr/Parser.ts
9
28
  var FUNCS = {
@@ -639,10 +658,10 @@ fn mainFragment(@location(0) uv : vec2<f32>) -> @location(0) vec4<f32> {
639
658
  `;
640
659
  function toRgb01(input) {
641
660
  if (Array.isArray(input)) return [input[0], input[1], input[2]];
642
- const c = new pixi_js.Color(input);
661
+ const c = new PIXI.Color(input);
643
662
  return [c.red, c.green, c.blue];
644
663
  }
645
- var ChromaKeyFilter = class extends pixi_js.Filter {
664
+ var ChromaKeyFilter = class extends PIXI.Filter {
646
665
  constructor(options = {}) {
647
666
  const {
648
667
  keyColor = "#00ff00",
@@ -650,12 +669,12 @@ var ChromaKeyFilter = class extends pixi_js.Filter {
650
669
  smoothing = 0.1,
651
670
  spill = 0.2
652
671
  } = options;
653
- const glProgram = pixi_js.GlProgram.from({
654
- vertex: pixi_js.defaultFilterVert,
672
+ const glProgram = PIXI.GlProgram.from({
673
+ vertex: PIXI.defaultFilterVert,
655
674
  fragment: GL_FRAGMENT,
656
675
  name: "chroma-key-filter"
657
676
  });
658
- const gpuProgram = pixi_js.GpuProgram.from({
677
+ const gpuProgram = PIXI.GpuProgram.from({
659
678
  vertex: { source: WGSL_SOURCE, entryPoint: "mainVertex" },
660
679
  fragment: { source: WGSL_SOURCE, entryPoint: "mainFragment" }
661
680
  });
@@ -663,7 +682,7 @@ var ChromaKeyFilter = class extends pixi_js.Filter {
663
682
  glProgram,
664
683
  gpuProgram,
665
684
  resources: {
666
- chromaUniforms: new pixi_js.UniformGroup({
685
+ chromaUniforms: new PIXI.UniformGroup({
667
686
  uKeyColor: { value: toRgb01(keyColor), type: "vec3<f32>" },
668
687
  uThreshold: { value: threshold, type: "f32" },
669
688
  uSmoothing: { value: smoothing, type: "f32" },
@@ -698,6 +717,133 @@ var ChromaKeyFilter = class extends pixi_js.Filter {
698
717
  u[2] = rgb[2];
699
718
  }
700
719
  };
720
+ var CORE = { blur: "BlurFilter", noise: "NoiseFilter", alpha: "AlphaFilter" };
721
+ var CORE_TYPES = [...Object.keys(CORE), "colorMatrix"];
722
+ var LIBRARY_TYPES = [
723
+ "adjustment",
724
+ "advancedBloom",
725
+ "ascii",
726
+ "backdropBlur",
727
+ "bevel",
728
+ "bloom",
729
+ "bulgePinch",
730
+ "colorGradient",
731
+ "colorMap",
732
+ "colorOverlay",
733
+ "colorReplace",
734
+ "convolution",
735
+ "crossHatch",
736
+ "crt",
737
+ "dot",
738
+ "dropShadow",
739
+ "emboss",
740
+ "glitch",
741
+ "glow",
742
+ "godray",
743
+ "grayscale",
744
+ "hslAdjustment",
745
+ "kawaseBlur",
746
+ "motionBlur",
747
+ "multiColorReplace",
748
+ "oldFilm",
749
+ "outline",
750
+ "pixelate",
751
+ "radialBlur",
752
+ "reflection",
753
+ "rgbSplit",
754
+ "shockwave",
755
+ "simpleLightmap",
756
+ "simplexNoise",
757
+ "tiltShift",
758
+ "tiltShiftAxis",
759
+ "twist",
760
+ "zoomBlur"
761
+ ];
762
+ var FILTER_TYPES = [...CORE_TYPES, ...LIBRARY_TYPES];
763
+ var NOT_NAMED = /* @__PURE__ */ new Set(["custom", "chromaKey"]);
764
+ var lower = (s) => s.toLowerCase();
765
+ var isLibraryType = (t) => LIBRARY_TYPES.some((n) => lower(n) === lower(t));
766
+ var isCoreType = (t) => CORE_TYPES.some((n) => lower(n) === lower(t));
767
+ function isNamedFilterType(t) {
768
+ return !NOT_NAMED.has(t);
769
+ }
770
+ function unknownType(t) {
771
+ const guess = chunkUQBGW5DO_cjs.suggestName(t, FILTER_TYPES);
772
+ return new Error(`pixi-effects: unknown filter type "${t}"${guess ? ` \u2014 did you mean "${guess}"?` : ""} (valid: ${[...FILTER_TYPES, "chromaKey", "custom"].join(", ")})`);
773
+ }
774
+ var library = null;
775
+ function registerFilterLibrary(mod) {
776
+ library = /* @__PURE__ */ new Map();
777
+ for (const [key, value] of Object.entries(mod)) {
778
+ if (key.endsWith("Filter") && typeof value === "function") library.set(lower(key.slice(0, -"Filter".length)), value);
779
+ }
780
+ }
781
+ var MISSING = (type, why) => new Error(
782
+ `pixi-effects: the filter "${type}" comes from the pixi-filters package${why ? ` (${why})` : ""}. Add it to your import map ("pixi-filters": "https://esm.sh/pixi-filters@6.1.5?external=pixi.js") or run \`npm i pixi-filters\`.`
783
+ );
784
+ function needsFilterLibrary(spec) {
785
+ let needs = false;
786
+ const visit = (node) => {
787
+ if (!node || typeof node !== "object") return;
788
+ if (Array.isArray(node)) {
789
+ node.forEach(visit);
790
+ return;
791
+ }
792
+ const o = node;
793
+ if (Array.isArray(o.filters)) {
794
+ for (const f of o.filters) {
795
+ if (typeof f?.type !== "string" || !isNamedFilterType(f.type)) continue;
796
+ if (isLibraryType(f.type)) needs = true;
797
+ else if (!isCoreType(f.type)) throw unknownType(f.type);
798
+ }
799
+ }
800
+ for (const key of ["sequences", "mask"]) visit(o[key]);
801
+ };
802
+ visit(spec);
803
+ return needs;
804
+ }
805
+ async function ensureFilterLibrary(spec, load = () => import('pixi-filters')) {
806
+ if (!needsFilterLibrary(spec) || library) return;
807
+ try {
808
+ registerFilterLibrary(await load());
809
+ } catch (e) {
810
+ throw MISSING("(see the type in your filters)", e.message);
811
+ }
812
+ }
813
+ var SINGLE_VALUE = { pixelate: "size", emboss: "strength" };
814
+ var MATRIX_PRESETS = ["sepia", "grayscale", "negative", "polaroid", "technicolor", "vintage", "kodachrome", "browni"];
815
+ function colorMatrix(params) {
816
+ const f = new PIXI__namespace.ColorMatrixFilter();
817
+ const preset = params.preset;
818
+ if (preset !== void 0) {
819
+ if (!MATRIX_PRESETS.includes(preset)) {
820
+ const guess = chunkUQBGW5DO_cjs.suggestName(preset, MATRIX_PRESETS);
821
+ throw new Error(`pixi-effects: colorMatrix preset "${preset}" is not one of ${MATRIX_PRESETS.join(", ")}${guess ? ` \u2014 did you mean "${guess}"?` : ""}`);
822
+ }
823
+ f[preset === "grayscale" ? "desaturate" : preset].call(f);
824
+ }
825
+ if (Array.isArray(params.matrix)) f.matrix = params.matrix;
826
+ return f;
827
+ }
828
+ var GRADIENT_TYPES = ["linear", "radial", "conic"];
829
+ function colorGradientParams(params) {
830
+ const { gradientType, ...rest } = params;
831
+ if (gradientType === void 0) return rest;
832
+ const i = GRADIENT_TYPES.indexOf(String(gradientType));
833
+ if (i < 0) throw new Error(`pixi-effects: colorGradient gradientType "${gradientType}" is not one of linear, radial or conic`);
834
+ return { ...rest, type: i };
835
+ }
836
+ function createNamedFilter(type, params) {
837
+ if (lower(type) === "colormatrix") return colorMatrix(params);
838
+ const core = Object.entries(CORE).find(([k]) => lower(k) === lower(type));
839
+ if (core) return new PIXI__namespace[core[1]](params);
840
+ if (!isLibraryType(type)) throw unknownType(type);
841
+ const Ctor = library?.get(lower(type));
842
+ if (!Ctor) throw MISSING(type, library ? "not found in the loaded package" : "not loaded yet");
843
+ const single = SINGLE_VALUE[Object.keys(SINGLE_VALUE).find((k) => lower(k) === lower(type)) ?? ""];
844
+ if (single) return new Ctor(params[single]);
845
+ return new Ctor(lower(type) === "colorgradient" ? colorGradientParams(params) : params);
846
+ }
701
847
 
702
848
  // src/filters/index.ts
703
849
  var registry = {
@@ -716,10 +862,9 @@ function createFilter(spec) {
716
862
  named._name = spec.name;
717
863
  return named;
718
864
  }
719
- const Cls = registry[spec.type];
720
- if (!Cls) throw new Error(`pixi-effects: unknown filter type "${spec.type}"`);
721
- const { type: _t, name, ...params } = spec;
722
- const inst = new Cls(params);
865
+ const { type, name, ...params } = spec;
866
+ const Cls = registry[type];
867
+ const inst = Cls ? new Cls(params) : createNamedFilter(type, params);
723
868
  inst._name = name;
724
869
  return inst;
725
870
  }
@@ -768,7 +913,7 @@ var Sequence = class {
768
913
  }
769
914
  const fa = this.spec.filterArea;
770
915
  if (fa && this.target) {
771
- this.target.filterArea = new pixi_js.Rectangle(fa.x, fa.y, fa.width, fa.height);
916
+ this.target.filterArea = new PIXI.Rectangle(fa.x, fa.y, fa.width, fa.height);
772
917
  }
773
918
  }
774
919
  scope() {
@@ -995,7 +1140,7 @@ var CameraSequence = class extends Sequence {
995
1140
  this.duration = this.parent?.duration ?? this.root.duration;
996
1141
  }
997
1142
  const home = homeCamera(compW, this.compH);
998
- const carrier = new pixi_js.Container();
1143
+ const carrier = new PIXI.Container();
999
1144
  carrier.x = home.x;
1000
1145
  carrier.y = home.y;
1001
1146
  carrier.z = home.z;
@@ -1223,8 +1368,8 @@ function tweenColor(timeline, target, key, fromValue, toValue, duration, ease, a
1223
1368
  // src/sequences/Image.ts
1224
1369
  var ImageSequence = class extends Sequence {
1225
1370
  async build() {
1226
- const texture = await pixi_js.Assets.get(this.spec.asset);
1227
- const sprite = new pixi_js.Sprite({ texture, label: this.spec.name });
1371
+ const texture = await PIXI.Assets.get(this.spec.asset);
1372
+ const sprite = new PIXI.Sprite({ texture, label: this.spec.name });
1228
1373
  sprite.cullable = true;
1229
1374
  this.target = sprite;
1230
1375
  this.intrinsicWidth = texture.width;
@@ -1363,7 +1508,7 @@ var TextSequence = class extends Sequence {
1363
1508
  };
1364
1509
  const initialProps = this.spec.initial ?? {};
1365
1510
  this._template = String(initialProps.text ?? this.spec.text ?? "");
1366
- const text = new pixi_js.Text({
1511
+ const text = new PIXI.Text({
1367
1512
  text: this._template,
1368
1513
  style: baseStyle,
1369
1514
  label: this.spec.name
@@ -1549,7 +1694,7 @@ var AudioSequence = class extends Sequence {
1549
1694
  if (this.spec.sfx !== void 0) return this._buildSfx(this.spec);
1550
1695
  const spec = this.spec;
1551
1696
  this._source = `asset "${spec.asset}"`;
1552
- const data = await pixi_js.Assets.get(spec.asset);
1697
+ const data = await PIXI.Assets.get(spec.asset);
1553
1698
  this._audioBuffer = data.audioBuffer;
1554
1699
  if (this.duration === void 0) {
1555
1700
  const rest = Math.max(0, (this.parent?.duration ?? this.root.duration) - this.at);
@@ -1720,7 +1865,7 @@ var VideoSequence = class extends Sequence {
1720
1865
  _ctx = null;
1721
1866
  _drawSeq = 0;
1722
1867
  async build() {
1723
- const data = await pixi_js.Assets.get(this.spec.asset);
1868
+ const data = await PIXI.Assets.get(this.spec.asset);
1724
1869
  this._sourceDuration = data.duration;
1725
1870
  this._audioBuffer = this.spec.audio !== false ? data.audioBuffer : null;
1726
1871
  this._cache = new FrameCache(data.sink, { capacity: 30 });
@@ -1733,8 +1878,8 @@ var VideoSequence = class extends Sequence {
1733
1878
  this._canvas = canvas;
1734
1879
  this._ctx = canvas.getContext("2d", { alpha: true });
1735
1880
  if (probeFrame && this._ctx) this._ctx.drawImage(probeFrame, 0, 0);
1736
- const texture = pixi_js.Texture.from(canvas);
1737
- const sprite = new pixi_js.Sprite({ texture, label: this.spec.name });
1881
+ const texture = PIXI.Texture.from(canvas);
1882
+ const sprite = new PIXI.Sprite({ texture, label: this.spec.name });
1738
1883
  sprite.cullable = true;
1739
1884
  this.target = sprite;
1740
1885
  this.intrinsicWidth = w;
@@ -1857,15 +2002,15 @@ function makeGradientFill(g) {
1857
2002
  const ctx = canvas.getContext("2d");
1858
2003
  if (ctx) {
1859
2004
  paintRadial(ctx, RADIAL_SIZE, g);
1860
- return { texture: pixi_js.Texture.from(canvas), textureSpace: "local" };
2005
+ return { texture: PIXI.Texture.from(canvas), textureSpace: "local" };
1861
2006
  }
1862
2007
  }
1863
- return new pixi_js.FillGradient(gradientOptions(g));
2008
+ return new PIXI.FillGradient(gradientOptions(g));
1864
2009
  }
1865
2010
  var CURVE_STEPS = 24;
1866
2011
  var ELLIPSE_STEPS = 128;
1867
2012
  function flattenSvgPath(d) {
1868
- const prims = new pixi_js.GraphicsPath(d).shapePath.shapePrimitives;
2013
+ const prims = new PIXI.GraphicsPath(d).shapePath.shapePrimitives;
1869
2014
  const out = [];
1870
2015
  for (const { shape } of prims) {
1871
2016
  const poly = shape;
@@ -1978,7 +2123,7 @@ var ShapeSequence = class extends Sequence {
1978
2123
  };
1979
2124
  _liveKeys = new Set(STYLE_KEYS);
1980
2125
  async build() {
1981
- const graphics = new pixi_js.Graphics({ label: this.spec.name });
2126
+ const graphics = new PIXI.Graphics({ label: this.spec.name });
1982
2127
  graphics.cullable = true;
1983
2128
  this.target = graphics;
1984
2129
  if (this.duration === void 0) {
@@ -2258,7 +2403,7 @@ function makePolygonDraw(spec, scope) {
2258
2403
  }
2259
2404
  function makePathDraw(spec) {
2260
2405
  return (g) => {
2261
- g.path(new pixi_js.GraphicsPath(spec.d));
2406
+ g.path(new PIXI.GraphicsPath(spec.d));
2262
2407
  };
2263
2408
  }
2264
2409
  var STATE_DRAWERS = {
@@ -2389,7 +2534,7 @@ function numOrZero(v, scope) {
2389
2534
  var _CompositionSequence = null;
2390
2535
  async function getCompositionSequence() {
2391
2536
  if (!_CompositionSequence) {
2392
- _CompositionSequence = (await import('./Composition-Y5VZSDDP.cjs')).CompositionSequence;
2537
+ _CompositionSequence = (await import('./Composition-CM62XJKT.cjs')).CompositionSequence;
2393
2538
  }
2394
2539
  return _CompositionSequence;
2395
2540
  }
@@ -2436,6 +2581,7 @@ exports.buildSequenceTree = buildSequenceTree;
2436
2581
  exports.cameraBasis = cameraBasis;
2437
2582
  exports.collectPropKeys = collectPropKeys;
2438
2583
  exports.describeLayer = describeLayer;
2584
+ exports.ensureFilterLibrary = ensureFilterLibrary;
2439
2585
  exports.evaluateExpr = evaluateExpr;
2440
2586
  exports.homeCamera = homeCamera;
2441
2587
  exports.homeDistance = homeDistance;
@@ -2445,5 +2591,5 @@ exports.projectLayer = projectLayer;
2445
2591
  exports.registerSequenceType = registerSequenceType;
2446
2592
  exports.resolveAt = resolveAt;
2447
2593
  exports.summarizeWarnings = summarizeWarnings;
2448
- //# sourceMappingURL=chunk-KQM2ZZMK.cjs.map
2449
- //# sourceMappingURL=chunk-KQM2ZZMK.cjs.map
2594
+ //# sourceMappingURL=chunk-AGMNSJJH.cjs.map
2595
+ //# sourceMappingURL=chunk-AGMNSJJH.cjs.map