pixi-effects 0.5.0 → 0.7.0

package/dist/{chunk-2RR43OIN.cjs → chunk-6I55T4OH.cjs}

@@ -1,9 +1,28 @@
 'use strict';
 
-var pixi_js = require('pixi.js');
+var chunkUQBGW5DO_cjs = require('./chunk-UQBGW5DO.cjs');
+var PIXI = require('pixi.js');
 var gsap = require('gsap');
 
-// src/sequences/Base.ts
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var PIXI__namespace = /*#__PURE__*/_interopNamespace(PIXI);
 
 // src/expr/Parser.ts
 var FUNCS = {
@@ -639,10 +658,10 @@ fn mainFragment(@location(0) uv : vec2<f32>) -> @location(0) vec4<f32> {
 `;
 function toRgb01(input) {
   if (Array.isArray(input)) return [input[0], input[1], input[2]];
-  const c = new pixi_js.Color(input);
+  const c = new PIXI.Color(input);
   return [c.red, c.green, c.blue];
 }
-var ChromaKeyFilter = class extends pixi_js.Filter {
+var ChromaKeyFilter = class extends PIXI.Filter {
   constructor(options = {}) {
     const {
       keyColor = "#00ff00",
@@ -650,12 +669,12 @@ var ChromaKeyFilter = class extends pixi_js.Filter {
       smoothing = 0.1,
       spill = 0.2
     } = options;
-    const glProgram = pixi_js.GlProgram.from({
-      vertex: pixi_js.defaultFilterVert,
+    const glProgram = PIXI.GlProgram.from({
+      vertex: PIXI.defaultFilterVert,
       fragment: GL_FRAGMENT,
       name: "chroma-key-filter"
     });
-    const gpuProgram = pixi_js.GpuProgram.from({
+    const gpuProgram = PIXI.GpuProgram.from({
       vertex: { source: WGSL_SOURCE, entryPoint: "mainVertex" },
       fragment: { source: WGSL_SOURCE, entryPoint: "mainFragment" }
     });
@@ -663,7 +682,7 @@ var ChromaKeyFilter = class extends pixi_js.Filter {
       glProgram,
       gpuProgram,
       resources: {
-        chromaUniforms: new pixi_js.UniformGroup({
+        chromaUniforms: new PIXI.UniformGroup({
           uKeyColor: { value: toRgb01(keyColor), type: "vec3<f32>" },
           uThreshold: { value: threshold, type: "f32" },
           uSmoothing: { value: smoothing, type: "f32" },
@@ -698,6 +717,124 @@ var ChromaKeyFilter = class extends pixi_js.Filter {
     u[2] = rgb[2];
   }
 };
+var CORE = { blur: "BlurFilter", noise: "NoiseFilter", alpha: "AlphaFilter" };
+var CORE_TYPES = [...Object.keys(CORE), "colorMatrix"];
+var LIBRARY_TYPES = [
+  "adjustment",
+  "advancedBloom",
+  "ascii",
+  "backdropBlur",
+  "bevel",
+  "bloom",
+  "bulgePinch",
+  "colorGradient",
+  "colorMap",
+  "colorOverlay",
+  "colorReplace",
+  "convolution",
+  "crossHatch",
+  "crt",
+  "dot",
+  "dropShadow",
+  "emboss",
+  "glitch",
+  "glow",
+  "godray",
+  "grayscale",
+  "hslAdjustment",
+  "kawaseBlur",
+  "motionBlur",
+  "multiColorReplace",
+  "oldFilm",
+  "outline",
+  "pixelate",
+  "radialBlur",
+  "reflection",
+  "rgbSplit",
+  "shockwave",
+  "simpleLightmap",
+  "simplexNoise",
+  "tiltShift",
+  "tiltShiftAxis",
+  "twist",
+  "zoomBlur"
+];
+var FILTER_TYPES = [...CORE_TYPES, ...LIBRARY_TYPES];
+var NOT_NAMED = /* @__PURE__ */ new Set(["custom", "chromaKey"]);
+var lower = (s) => s.toLowerCase();
+var isLibraryType = (t) => LIBRARY_TYPES.some((n) => lower(n) === lower(t));
+var isCoreType = (t) => CORE_TYPES.some((n) => lower(n) === lower(t));
+function isNamedFilterType(t) {
+  return !NOT_NAMED.has(t);
+}
+function unknownType(t) {
+  const guess = chunkUQBGW5DO_cjs.suggestName(t, FILTER_TYPES);
+  return new Error(`pixi-effects: unknown filter type "${t}"${guess ? ` \u2014 did you mean "${guess}"?` : ""} (valid: ${[...FILTER_TYPES, "chromaKey", "custom"].join(", ")})`);
+}
+var library = null;
+function registerFilterLibrary(mod) {
+  library = /* @__PURE__ */ new Map();
+  for (const [key, value] of Object.entries(mod)) {
+    if (key.endsWith("Filter") && typeof value === "function") library.set(lower(key.slice(0, -"Filter".length)), value);
+  }
+}
+var MISSING = (type, why) => new Error(
+  `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\`.`
+);
+function needsFilterLibrary(spec) {
+  let needs = false;
+  const visit = (node) => {
+    if (!node || typeof node !== "object") return;
+    if (Array.isArray(node)) {
+      node.forEach(visit);
+      return;
+    }
+    const o = node;
+    if (Array.isArray(o.filters)) {
+      for (const f of o.filters) {
+        if (typeof f?.type !== "string" || !isNamedFilterType(f.type)) continue;
+        if (isLibraryType(f.type)) needs = true;
+        else if (!isCoreType(f.type)) throw unknownType(f.type);
+      }
+    }
+    for (const key of ["sequences", "mask"]) visit(o[key]);
+  };
+  visit(spec);
+  return needs;
+}
+async function ensureFilterLibrary(spec, load = () => import('pixi-filters')) {
+  if (!needsFilterLibrary(spec) || library) return;
+  try {
+    registerFilterLibrary(await load());
+  } catch (e) {
+    throw MISSING("(see the type in your filters)", e.message);
+  }
+}
+var SINGLE_VALUE = { pixelate: "size", emboss: "strength" };
+var MATRIX_PRESETS = ["sepia", "grayscale", "negative", "polaroid", "technicolor", "vintage", "kodachrome", "browni"];
+function colorMatrix(params) {
+  const f = new PIXI__namespace.ColorMatrixFilter();
+  const preset = params.preset;
+  if (preset !== void 0) {
+    if (!MATRIX_PRESETS.includes(preset)) {
+      const guess = chunkUQBGW5DO_cjs.suggestName(preset, MATRIX_PRESETS);
+      throw new Error(`pixi-effects: colorMatrix preset "${preset}" is not one of ${MATRIX_PRESETS.join(", ")}${guess ? ` \u2014 did you mean "${guess}"?` : ""}`);
+    }
+    f[preset === "grayscale" ? "desaturate" : preset].call(f);
+  }
+  if (Array.isArray(params.matrix)) f.matrix = params.matrix;
+  return f;
+}
+function createNamedFilter(type, params) {
+  if (lower(type) === "colormatrix") return colorMatrix(params);
+  const core = Object.entries(CORE).find(([k]) => lower(k) === lower(type));
+  if (core) return new PIXI__namespace[core[1]](params);
+  if (!isLibraryType(type)) throw unknownType(type);
+  const Ctor = library?.get(lower(type));
+  if (!Ctor) throw MISSING(type, library ? "not found in the loaded package" : "not loaded yet");
+  const single = SINGLE_VALUE[Object.keys(SINGLE_VALUE).find((k) => lower(k) === lower(type)) ?? ""];
+  return single ? new Ctor(params[single]) : new Ctor(params);
+}
 
 // src/filters/index.ts
 var registry = {
@@ -716,10 +853,9 @@ function createFilter(spec) {
     named._name = spec.name;
     return named;
   }
-  const Cls = registry[spec.type];
-  if (!Cls) throw new Error(`pixi-effects: unknown filter type "${spec.type}"`);
-  const { type: _t, name, ...params } = spec;
-  const inst = new Cls(params);
+  const { type, name, ...params } = spec;
+  const Cls = registry[type];
+  const inst = Cls ? new Cls(params) : createNamedFilter(type, params);
   inst._name = name;
   return inst;
 }
@@ -768,7 +904,7 @@ var Sequence = class {
     }
     const fa = this.spec.filterArea;
     if (fa && this.target) {
-      this.target.filterArea = new pixi_js.Rectangle(fa.x, fa.y, fa.width, fa.height);
+      this.target.filterArea = new PIXI.Rectangle(fa.x, fa.y, fa.width, fa.height);
     }
   }
   scope() {
@@ -861,10 +997,12 @@ function summarizeWarnings(messages, shown = 3) {
 }
 function lintText(spec, warn = defaultWarn) {
   if (spec.type !== "text") return;
-  if ((spec.text ?? "").includes("{value}") && !collectPropKeys(spec).has("value")) {
+  const strings = [spec.text ?? "", ...(spec.keyframes ?? []).map((kf) => String(kf.set?.text ?? ""))];
+  const hasPlaceholder = strings.some((t) => t.includes("{value}"));
+  if (hasPlaceholder && !collectPropKeys(spec).has("value")) {
     warn(`pixi-effects: ${describeLayer(spec)}: the text has a {value} placeholder but nothing sets or animates \`value\`, so it prints 0. Set initial: { value: \u2026 } or animate it; {value} is reserved for counters (there is no way to print a literal "{value}").`);
   }
-  if (collectPropKeys(spec).has("value") && !(spec.text ?? "").includes("{value}")) {
+  if (collectPropKeys(spec).has("value") && !hasPlaceholder) {
     warn(`pixi-effects: ${describeLayer(spec)}: \`value\` is set or animated but the text has no {value} placeholder, so nothing shows it. Use text: '{value}' (or e.g. '{value} users').`);
   }
 }
@@ -993,7 +1131,7 @@ var CameraSequence = class extends Sequence {
       this.duration = this.parent?.duration ?? this.root.duration;
     }
     const home = homeCamera(compW, this.compH);
-    const carrier = new pixi_js.Container();
+    const carrier = new PIXI.Container();
     carrier.x = home.x;
     carrier.y = home.y;
     carrier.z = home.z;
@@ -1221,8 +1359,8 @@ function tweenColor(timeline, target, key, fromValue, toValue, duration, ease, a
 // src/sequences/Image.ts
 var ImageSequence = class extends Sequence {
   async build() {
-    const texture = await pixi_js.Assets.get(this.spec.asset);
-    const sprite = new pixi_js.Sprite({ texture, label: this.spec.name });
+    const texture = await PIXI.Assets.get(this.spec.asset);
+    const sprite = new PIXI.Sprite({ texture, label: this.spec.name });
     sprite.cullable = true;
     this.target = sprite;
     this.intrinsicWidth = texture.width;
@@ -1333,14 +1471,21 @@ function formatValue(v, f) {
   return sign + int + (frac !== void 0 ? "." + frac : "");
 }
 var TextSequence = class extends Sequence {
-  /** Current number for the `{value}` placeholder (tweened by `value` keyframes). */
-  _value = { value: 0 };
+  /** `value`: the number for the `{value}` placeholder; `visibleChars`: how many characters show (typewriter). Both tweened by keyframes. */
+  _counters = { value: 0, visibleChars: 0 };
+  /** The string now on the layer (before `{value}` / `visibleChars`): `text`, or the last `set: { text }`. */
+  _template = "";
+  /** `visibleChars` is in play (initial or animated): otherwise the whole text shows. */
+  _typed = false;
   _lastText = "";
-  /** Rewrite the displayed string from the template and the current `value`. */
+  /** A typewriter that has typed nothing yet: the layer is empty on purpose (inspect must not call that "no size"). */
+  get showsNothingYet() {
+    return this._typed && this._lastText === "" && this._template !== "";
+  }
+  /** Rewrite the displayed string from the template, the current `value` and `visibleChars`. */
   _refreshText() {
-    const template = this.spec.text ?? "";
-    if (!template.includes("{value}")) return;
-    const next = template.split("{value}").join(formatValue(this._value.value, this.spec.format));
+    let next = this._template.includes("{value}") ? this._template.split("{value}").join(formatValue(this._counters.value, this.spec.format)) : this._template;
+    if (this._typed) next = Array.from(next).slice(0, Math.max(0, Math.floor(this._counters.visibleChars))).join("");
     if (next === this._lastText) return;
     this._lastText = next;
     this.target.text = next;
@@ -1352,8 +1497,10 @@ var TextSequence = class extends Sequence {
       fill: "#ffffff",
       align: "center"
     };
-    const text = new pixi_js.Text({
-      text: this.spec.text ?? "",
+    const initialProps = this.spec.initial ?? {};
+    this._template = String(initialProps.text ?? this.spec.text ?? "");
+    const text = new PIXI.Text({
+      text: this._template,
       style: baseStyle,
       label: this.spec.name
     });
@@ -1365,10 +1512,10 @@ var TextSequence = class extends Sequence {
       this.duration = this.parent?.duration ?? this.root.duration;
     }
     if (this.spec.style) {
-      const scope = this.scope();
+      const scope2 = this.scope();
       const resolved = normalizeProps(
         this.spec.style,
-        scope,
+        scope2,
         { skipKeys: STYLE_OPAQUE_KEYS }
       );
       for (const k of Object.keys(resolved)) {
@@ -1377,22 +1524,36 @@ var TextSequence = class extends Sequence {
       this.intrinsicWidth = text.width;
       this.intrinsicHeight = text.height;
     }
-    const initialValue = this.spec.initial?.value;
-    if (initialValue !== void 0) this._value.value = resolveNumber(initialValue, this.scope());
+    const scope = this.scope();
+    if (initialProps.value !== void 0) this._counters.value = resolveNumber(initialProps.value, scope);
+    this._typed = initialProps.visibleChars !== void 0 || animates(this.spec.keyframes, "visibleChars");
+    if (initialProps.visibleChars !== void 0) this._counters.visibleChars = resolveNumber(initialProps.visibleChars, scope);
+    const typed = this._typed;
+    this._typed = false;
     this._refreshText();
     if (this._lastText !== "") {
       this.intrinsicWidth = text.width;
       this.intrinsicHeight = text.height;
     }
+    this._typed = typed;
+    this._refreshText();
     this.buildFilters();
   }
   bindTimeline(timeline, offset = 0) {
     if (!this.target) return;
     const colorSpace = this.spec.colorSpace ?? "rgb";
-    const stripped = stripKeys2(this.spec, ["fill", "value"]);
+    const stripped = stripKeys2(this.spec, ["fill", "value", "text", "visibleChars"]);
     runSuperWithStrippedSpec(this, stripped, timeline, offset);
-    bindFillKeyframes(timeline, this.target, this.spec.keyframes ?? [], this.duration, offset + this.at, colorSpace);
-    bindValueKeyframes(timeline, this._value, () => this._refreshText(), this.spec.keyframes ?? [], this.duration, offset + this.at, this.scope());
+    const keyframes = this.spec.keyframes ?? [];
+    const origin = offset + this.at;
+    bindFillKeyframes(timeline, this.target, keyframes, this.duration, origin, colorSpace);
+    const refresh = () => this._refreshText();
+    bindCounterKeyframes(timeline, this._counters, "value", refresh, keyframes, this.duration, origin, this.scope());
+    bindCounterKeyframes(timeline, this._counters, "visibleChars", refresh, keyframes, this.duration, origin, this.scope());
+    bindTextKeyframes(timeline, keyframes, this.duration, origin, () => this._template, (t) => {
+      this._template = t;
+      refresh();
+    }, describeLayer(this.spec));
   }
 };
 function runSuperWithStrippedSpec(inst, strippedSpec, timeline, offset) {
@@ -1428,11 +1589,11 @@ function resolveNumber(v, scope) {
   const out = normalizeProps({ v }, scope).v;
   return typeof out === "number" ? out : Number(out) || 0;
 }
-function bindValueKeyframes(timeline, state, refresh, keyframes, parentDuration, origin, scope) {
+function bindCounterKeyframes(timeline, state, key, refresh, keyframes, parentDuration, origin, scope) {
   for (const kf of keyframes) {
-    const setV = kf.set?.value;
-    const fromV = kf.from?.value;
-    const toV = kf.to?.value;
+    const setV = kf.set?.[key];
+    const fromV = kf.from?.[key];
+    const toV = kf.to?.[key];
     if (setV === void 0 && fromV === void 0 && toV === void 0) continue;
     const at = origin + resolveAt(kf.at, parentDuration);
     const duration = kf.duration ?? 0;
@@ -1440,25 +1601,40 @@ function bindValueKeyframes(timeline, state, refresh, keyframes, parentDuration,
     const loop = loopVars(kf);
     if (setV !== void 0) {
       const v = resolveNumber(setV, scope);
-      revertibleSet(timeline, at, () => state.value, (n) => {
-        state.value = n;
+      revertibleSet(timeline, at, () => state[key], (n) => {
+        state[key] = n;
         refresh();
       }, v);
     }
     if (toV !== void 0 && fromV !== void 0) {
       timeline.fromTo(
         state,
-        { value: resolveNumber(fromV, scope) },
-        { value: resolveNumber(toV, scope), duration, ease, ...loop, onUpdate: refresh },
+        { [key]: resolveNumber(fromV, scope) },
+        { [key]: resolveNumber(toV, scope), duration, ease, ...loop, onUpdate: refresh },
         at
       );
     } else if (toV !== void 0) {
-      timeline.to(state, { value: resolveNumber(toV, scope), duration, ease, ...loop, onUpdate: refresh }, at);
+      timeline.to(state, { [key]: resolveNumber(toV, scope), duration, ease, ...loop, onUpdate: refresh }, at);
     } else if (fromV !== void 0) {
-      timeline.from(state, { value: resolveNumber(fromV, scope), duration, ease, ...loop, onUpdate: refresh }, at);
+      timeline.from(state, { [key]: resolveNumber(fromV, scope), duration, ease, ...loop, onUpdate: refresh }, at);
     }
   }
 }
+function bindTextKeyframes(timeline, keyframes, parentDuration, origin, read, write, who) {
+  for (const kf of keyframes) {
+    for (const [what, props] of [["to", kf.to], ["from", kf.from]]) {
+      if (props && props.text !== void 0) {
+        console.warn(`pixi-effects: ${who}: a keyframe's ${what}: { text } cannot tween a string: use set: { text: '\u2026' } at the time it should change`);
+      }
+    }
+    const t = kf.set?.text;
+    if (t === void 0) continue;
+    revertibleSet(timeline, origin + resolveAt(kf.at, parentDuration), read, write, String(t));
+  }
+}
+function animates(keyframes, key) {
+  return (keyframes ?? []).some((kf) => [kf.set, kf.to, kf.from].some((p) => p && p[key] !== void 0));
+}
 function bindFillKeyframes(timeline, text, keyframes, parentDuration, offset, colorSpace) {
   const state = { fill: text.style.fill };
   const writeFill = () => {
@@ -1509,7 +1685,7 @@ var AudioSequence = class extends Sequence {
     if (this.spec.sfx !== void 0) return this._buildSfx(this.spec);
     const spec = this.spec;
     this._source = `asset "${spec.asset}"`;
-    const data = await pixi_js.Assets.get(spec.asset);
+    const data = await PIXI.Assets.get(spec.asset);
     this._audioBuffer = data.audioBuffer;
     if (this.duration === void 0) {
       const rest = Math.max(0, (this.parent?.duration ?? this.root.duration) - this.at);
@@ -1680,7 +1856,7 @@ var VideoSequence = class extends Sequence {
   _ctx = null;
   _drawSeq = 0;
   async build() {
-    const data = await pixi_js.Assets.get(this.spec.asset);
+    const data = await PIXI.Assets.get(this.spec.asset);
     this._sourceDuration = data.duration;
     this._audioBuffer = this.spec.audio !== false ? data.audioBuffer : null;
     this._cache = new FrameCache(data.sink, { capacity: 30 });
@@ -1693,8 +1869,8 @@ var VideoSequence = class extends Sequence {
     this._canvas = canvas;
     this._ctx = canvas.getContext("2d", { alpha: true });
     if (probeFrame && this._ctx) this._ctx.drawImage(probeFrame, 0, 0);
-    const texture = pixi_js.Texture.from(canvas);
-    const sprite = new pixi_js.Sprite({ texture, label: this.spec.name });
+    const texture = PIXI.Texture.from(canvas);
+    const sprite = new PIXI.Sprite({ texture, label: this.spec.name });
     sprite.cullable = true;
     this.target = sprite;
     this.intrinsicWidth = w;
@@ -1817,23 +1993,110 @@ function makeGradientFill(g) {
     const ctx = canvas.getContext("2d");
     if (ctx) {
       paintRadial(ctx, RADIAL_SIZE, g);
-      return { texture: pixi_js.Texture.from(canvas), textureSpace: "local" };
+      return { texture: PIXI.Texture.from(canvas), textureSpace: "local" };
     }
   }
-  return new pixi_js.FillGradient(gradientOptions(g));
+  return new PIXI.FillGradient(gradientOptions(g));
+}
+var CURVE_STEPS = 24;
+var ELLIPSE_STEPS = 128;
+function flattenSvgPath(d) {
+  const prims = new PIXI.GraphicsPath(d).shapePath.shapePrimitives;
+  const out = [];
+  for (const { shape } of prims) {
+    const poly = shape;
+    if (poly.points && poly.points.length >= 4) out.push({ pts: poly.points.slice(), closed: poly.closePath === true });
+  }
+  return out;
+}
+function rectOutline(x, y, w, h, radius) {
+  const r = Math.max(0, Math.min(radius, Math.abs(w) / 2, Math.abs(h) / 2));
+  if (r === 0) return { pts: [x, y, x + w, y, x + w, y + h, x, y + h], closed: true };
+  const pts = [];
+  const corner = (cx, cy, from) => {
+    for (let i = 0; i <= CURVE_STEPS; i++) {
+      const a = from + i / CURVE_STEPS * (Math.PI / 2);
+      pts.push(cx + r * Math.cos(a), cy + r * Math.sin(a));
+    }
+  };
+  corner(x + w - r, y + r, -Math.PI / 2);
+  corner(x + w - r, y + h - r, 0);
+  corner(x + r, y + h - r, Math.PI / 2);
+  corner(x + r, y + r, Math.PI);
+  const startAt = pts.length - 2;
+  const rotated = pts.slice(startAt).concat(pts.slice(0, startAt));
+  return { pts: rotated, closed: true };
+}
+function ellipseOutline(cx, cy, rx, ry) {
+  const pts = [];
+  for (let i = 0; i < ELLIPSE_STEPS; i++) {
+    const a = -Math.PI / 2 + i / ELLIPSE_STEPS * Math.PI * 2;
+    pts.push(cx + rx * Math.cos(a), cy + ry * Math.sin(a));
+  }
+  return { pts, closed: true };
+}
+function trimPolylines(lines, start, end) {
+  const s = Math.max(0, Math.min(1, start)), e = Math.max(0, Math.min(1, end));
+  if (!(e > s)) return [];
+  const lengths = lines.map(polylineLength);
+  const total = lengths.reduce((a, b) => a + b, 0);
+  if (!(total > 0)) return [];
+  const from = s * total, to = e * total;
+  const out = [];
+  let offset = 0;
+  lines.forEach((line, i) => {
+    const len = lengths[i];
+    const a = Math.max(from - offset, 0), b = Math.min(to - offset, len);
+    offset += len;
+    if (!(b > a) || len === 0) return;
+    if (line.closed && a <= 0 && b >= len) {
+      out.push({ pts: line.pts.slice(), closed: true });
+      return;
+    }
+    out.push({ pts: slice(line, a, b), closed: false });
+  });
+  return out;
+}
+function points(line) {
+  return line.closed ? [...line.pts, line.pts[0], line.pts[1]] : line.pts;
+}
+function polylineLength(line) {
+  const p = points(line);
+  let len = 0;
+  for (let i = 2; i < p.length; i += 2) len += Math.hypot(p[i] - p[i - 2], p[i + 1] - p[i - 1]);
+  return len;
+}
+function slice(line, a, b) {
+  const p = points(line);
+  const out = [];
+  let at = 0;
+  for (let i = 2; i < p.length; i += 2) {
+    const x0 = p[i - 2], y0 = p[i - 1], x1 = p[i], y1 = p[i + 1];
+    const seg = Math.hypot(x1 - x0, y1 - y0);
+    const segEnd = at + seg;
+    if (segEnd > a && at < b && seg > 0) {
+      const t0 = Math.max(a - at, 0) / seg, t1 = Math.min(b - at, seg) / seg;
+      if (out.length === 0) out.push(x0 + (x1 - x0) * t0, y0 + (y1 - y0) * t0);
+      out.push(x0 + (x1 - x0) * t1, y0 + (y1 - y0) * t1);
+    }
+    at = segEnd;
+    if (at >= b) break;
+  }
+  return out;
 }
 
 // src/sequences/Shape.ts
 var STYLE_KEYS = ["fillColor", "fillAlpha", "strokeColor", "strokeAlpha", "strokeWidth"];
 var COLOR_KEYS = /* @__PURE__ */ new Set(["fillColor", "strokeColor"]);
+var TRIM_KEYS = ["trimStart", "trimEnd"];
 var GEOMETRY_KEYS_BY_SHAPE = {
-  rect: ["width", "height", "cornerRadius", "anchorX", "anchorY"],
-  circle: ["radius", "anchorX", "anchorY"],
-  ellipse: ["radiusX", "radiusY", "anchorX", "anchorY"],
+  rect: ["width", "height", "cornerRadius", "anchorX", "anchorY", ...TRIM_KEYS],
+  circle: ["radius", "anchorX", "anchorY", ...TRIM_KEYS],
+  ellipse: ["radiusX", "radiusY", "anchorX", "anchorY", ...TRIM_KEYS],
   arc: ["radius", "innerRadius", "startAngle", "endAngle"],
-  line: [],
-  polygon: [],
-  path: []
+  line: [...TRIM_KEYS],
+  polygon: [...TRIM_KEYS],
+  path: [...TRIM_KEYS]
 };
 var ANCHORED_SHAPES = /* @__PURE__ */ new Set(["rect", "circle", "ellipse", "arc"]);
 var ShapeSequence = class extends Sequence {
@@ -1851,7 +2114,7 @@ var ShapeSequence = class extends Sequence {
   };
   _liveKeys = new Set(STYLE_KEYS);
   async build() {
-    const graphics = new pixi_js.Graphics({ label: this.spec.name });
+    const graphics = new PIXI.Graphics({ label: this.spec.name });
     graphics.cullable = true;
     this.target = graphics;
     if (this.duration === void 0) {
@@ -1866,13 +2129,26 @@ var ShapeSequence = class extends Sequence {
     if (this.spec.shape === "arc") {
       this._state.startAngle ??= 0;
       this._state.endAngle ??= 360;
+      const top = this.spec, ini = this.spec.initial ?? {};
+      if ("trimStart" in top || "trimEnd" in top || "trimStart" in ini || "trimEnd" in ini) {
+        console.warn(`pixi-effects: ${describeLayer(this.spec)}: trimStart / trimEnd do not apply to an arc: animate its endAngle (and startAngle) instead`);
+      }
+    } else {
+      this._state.trimStart ??= 0;
+      this._state.trimEnd ??= 1;
     }
     const gradientSpec = this.spec.fillGradient ?? this.spec.initial?.fillGradient;
     if (gradientSpec) this._state.fillStyle = makeGradientFill(gradientSpec);
     this._drawGeometry = makeDrawGeometry(this.spec, scope, this._state);
+    this._outline = makeOutline(this.spec, scope, this._state);
+    const { trimStart, trimEnd } = this._state;
+    this._state.trimStart = 0;
+    this._state.trimEnd = 1;
     this._drawGeometry(graphics);
     applyState(graphics, this._state);
     const bounds = graphics.getLocalBounds();
+    this._state.trimStart = trimStart;
+    this._state.trimEnd = trimEnd;
     this.intrinsicWidth = bounds.width;
     this.intrinsicHeight = bounds.height;
     if (!ANCHORED_SHAPES.has(this.spec.shape)) {
@@ -1890,14 +2166,37 @@ var ShapeSequence = class extends Sequence {
       }
       this._redraw();
     };
+    this._redraw();
     this.buildFilters();
   }
   _fresh = false;
+  _outline = null;
   _redraw() {
     const graphics = this.target;
+    const s = this._state;
     graphics.clear();
-    this._drawGeometry(graphics);
-    applyState(graphics, this._state);
+    const trimmed = (s.trimStart ?? 0) > 0 || (s.trimEnd ?? 1) < 1;
+    if (!trimmed || !this._outline || !(s.strokeColor !== void 0 && s.strokeWidth > 0)) {
+      this._drawGeometry(graphics);
+      applyState(graphics, s);
+      return;
+    }
+    if (s.fillStyle || s.fillColor !== void 0) {
+      this._drawGeometry(graphics);
+      applyFill(graphics, s);
+      graphics.beginPath();
+    }
+    const parts = trimPolylines(this._outline(), s.trimStart ?? 0, s.trimEnd ?? 1);
+    if (parts.length === 0) return;
+    for (const part of parts) {
+      if (part.closed) {
+        graphics.poly(part.pts, true);
+        continue;
+      }
+      graphics.moveTo(part.pts[0], part.pts[1]);
+      for (let i = 2; i < part.pts.length; i += 2) graphics.lineTo(part.pts[i], part.pts[i + 1]);
+    }
+    applyStroke(graphics, s);
   }
   /**
    * Draw from the tweened `_state` before the culler runs. The culler measures the geometry as last
@@ -2000,11 +2299,17 @@ function resolveLiveValue(key, value, scope) {
   return numOrZero(value, scope);
 }
 function applyState(g, s) {
+  applyFill(g, s);
+  applyStroke(g, s);
+}
+function applyFill(g, s) {
   if (s.fillStyle) {
     g.fill(s.fillStyle);
   } else if (s.fillColor !== void 0) {
     g.fill({ color: s.fillColor, alpha: s.fillAlpha });
   }
+}
+function applyStroke(g, s) {
   if (s.strokeColor !== void 0 && s.strokeWidth > 0) {
     g.stroke({
       color: s.strokeColor,
@@ -2089,7 +2394,7 @@ function makePolygonDraw(spec, scope) {
 }
 function makePathDraw(spec) {
   return (g) => {
-    g.path(new pixi_js.GraphicsPath(spec.d));
+    g.path(new PIXI.GraphicsPath(spec.d));
   };
 }
 var STATE_DRAWERS = {
@@ -2112,6 +2417,41 @@ function makeDrawGeometry(spec, scope, state) {
   return () => {
   };
 }
+function makeOutline(spec, scope, s) {
+  switch (spec.shape) {
+    case "rect":
+      return () => {
+        const w = s.width ?? 0, h = s.height ?? 0;
+        return [rectOutline(0 - (s.anchorX ?? 0.5) * w, 0 - (s.anchorY ?? 0.5) * h, w, h, s.cornerRadius ?? 0)];
+      };
+    case "circle":
+      return () => {
+        const r = s.radius ?? 0;
+        return [ellipseOutline((0.5 - (s.anchorX ?? 0.5)) * 2 * r, (0.5 - (s.anchorY ?? 0.5)) * 2 * r, r, r)];
+      };
+    case "ellipse":
+      return () => {
+        const rx = s.radiusX ?? 0, ry = s.radiusY ?? 0;
+        return [ellipseOutline((0.5 - (s.anchorX ?? 0.5)) * 2 * rx, (0.5 - (s.anchorY ?? 0.5)) * 2 * ry, rx, ry)];
+      };
+    case "line": {
+      const lines = [{ pts: [num(spec.from[0], scope), num(spec.from[1], scope), num(spec.to[0], scope), num(spec.to[1], scope)], closed: false }];
+      return () => lines;
+    }
+    case "polygon": {
+      const pts = [];
+      for (const [x, y] of spec.points) pts.push(num(x, scope), num(y, scope));
+      const lines = pts.length >= 4 ? [{ pts, closed: !spec.open }] : [];
+      return () => lines;
+    }
+    case "path": {
+      let lines = null;
+      return () => lines ??= flattenSvgPath(spec.d);
+    }
+    default:
+      return null;
+  }
+}
 function bindLiveKeyframes(timeline, state, liveKeys, keyframes, parentDuration, scope, offset, colorSpace) {
   for (const kf of keyframes) {
     const at = offset + resolveAt(kf.at, parentDuration);
@@ -2185,7 +2525,7 @@ function numOrZero(v, scope) {
 var _CompositionSequence = null;
 async function getCompositionSequence() {
   if (!_CompositionSequence) {
-    _CompositionSequence = (await import('./Composition-63EXHNJJ.cjs')).CompositionSequence;
+    _CompositionSequence = (await import('./Composition-3KHQPRBA.cjs')).CompositionSequence;
   }
   return _CompositionSequence;
 }
@@ -2232,6 +2572,7 @@ exports.buildSequenceTree = buildSequenceTree;
 exports.cameraBasis = cameraBasis;
 exports.collectPropKeys = collectPropKeys;
 exports.describeLayer = describeLayer;
+exports.ensureFilterLibrary = ensureFilterLibrary;
 exports.evaluateExpr = evaluateExpr;
 exports.homeCamera = homeCamera;
 exports.homeDistance = homeDistance;
@@ -2241,5 +2582,5 @@ exports.projectLayer = projectLayer;
 exports.registerSequenceType = registerSequenceType;
 exports.resolveAt = resolveAt;
 exports.summarizeWarnings = summarizeWarnings;
-//# sourceMappingURL=chunk-2RR43OIN.cjs.map
-//# sourceMappingURL=chunk-2RR43OIN.cjs.map
+//# sourceMappingURL=chunk-6I55T4OH.cjs.map
+//# sourceMappingURL=chunk-6I55T4OH.cjs.map