pixi-effects 0.26.2 → 0.27.0

package/dist/{chunk-X3HB4DSR.js → chunk-TGJACVLD.js}

@@ -1,43 +1,9 @@
-import { collectPropKeys, describeLayer } from './chunk-TLYTYBWX.js';
+import { collectPropKeys, describeLayer } from './chunk-45QKLD6M.js';
 import { suggestName, warnUnknownOptions } from './chunk-BXOCEZ4U.js';
 import * as PIXI from 'pixi.js';
 import { Rectangle, Container, Color, GraphicsPath, Sprite, Texture, Graphics, Assets, FillGradient, Text, Filter, GlProgram, defaultFilterVert, GpuProgram, UniformGroup } from 'pixi.js';
-import { gsap } from 'gsap';
 
-// src/expr/random.ts
-function mix(h) {
-  h = Math.imul(h ^ h >>> 16, 2246822507);
-  h = Math.imul(h ^ h >>> 13, 3266489909);
-  return (h ^ h >>> 16) >>> 0;
-}
-function fold(n) {
-  if (!Number.isFinite(n)) return 0;
-  const i = Math.floor(n);
-  const f = n - i;
-  return (i | 0) ^ Math.imul(Math.floor(f * 1048576), 2654435761);
-}
-function rand(seed) {
-  return mix(fold(seed) + 2654435769) / 4294967296;
-}
-function random(seed) {
-  let a = fold(seed) + 1831565813 | 0;
-  return () => {
-    a = a + 1831565813 | 0;
-    let t = Math.imul(a ^ a >>> 15, 1 | a);
-    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
-    return ((t ^ t >>> 14) >>> 0) / 4294967296;
-  };
-}
-function noise(x, seed = 0) {
-  if (!Number.isFinite(x)) return 0;
-  const i = Math.floor(x);
-  const f = x - i;
-  const s = fold(seed) * 668265261;
-  const a = mix((i | 0) + s) / 2147483648 - 1;
-  const b = mix((i + 1 | 0) + s) / 2147483648 - 1;
-  const u = f * f * f * (f * (f * 6 - 15) + 10);
-  return a + (b - a) * u;
-}
+// src/core/spring.ts
 var SETTLE_TOL = 5e-3;
 var DEFAULTS = { mass: 1, stiffness: 100, damping: 10 };
 function springResponse(t, { mass: m, stiffness: k, damping: c }) {
@@ -119,19 +85,6 @@ function parseSpring(name) {
   const [mass, stiffness, damping] = (m[2] ?? "").split(",").map((s) => s.trim()).filter(Boolean).map(Number);
   return complete({ mass, stiffness, damping });
 }
-var registered = false;
-function registerSpringEases() {
-  if (registered) return;
-  registered = true;
-  const base = springEase();
-  const ease = (p) => base(p);
-  ease.config = (mass, stiffness, damping) => {
-    const bad = [mass, stiffness, damping].some((v) => v !== void 0 && !(typeof v === "number" && v > 0 && Number.isFinite(v)));
-    return springEase(bad ? {} : { mass, stiffness, damping });
-  };
-  gsap.registerEase("spring", ease);
-  for (const [name, p] of Object.entries(SPRING_PRESETS)) gsap.registerEase(`spring.${name}`, springEase(p));
-}
 var autoWarned = /* @__PURE__ */ new Set();
 function kfDuration(kf) {
   if (kf.duration !== "auto") return kf.duration ?? 0;
@@ -144,7 +97,837 @@ function kfDuration(kf) {
   }
   return 0.5;
 }
-registerSpringEases();
+
+// src/core/cubicBezier.ts
+function cubicBezierEase(x1, y1, x2, y2) {
+  const cx = 3 * x1, bx = 3 * (x2 - x1) - cx, ax = 1 - cx - bx;
+  const cy = 3 * y1, by = 3 * (y2 - y1) - cy, ay = 1 - cy - by;
+  const X = (t) => ((ax * t + bx) * t + cx) * t;
+  const Y = (t) => ((ay * t + by) * t + cy) * t;
+  const dX = (t) => (3 * ax * t + 2 * bx) * t + cx;
+  return (p) => {
+    if (p <= 0) return 0;
+    if (p >= 1) return 1;
+    let t = p;
+    for (let i = 0; i < 8; i++) {
+      const err = X(t) - p;
+      if (Math.abs(err) < 1e-9) return Y(t);
+      const d = dX(t);
+      if (Math.abs(d) < 1e-6) break;
+      t -= err / d;
+    }
+    let lo = 0, hi = 1;
+    t = p;
+    for (let i = 0; i < 60; i++) {
+      const x = X(t);
+      if (Math.abs(x - p) < 1e-10) break;
+      if (x < p) lo = t;
+      else hi = t;
+      t = (lo + hi) / 2;
+    }
+    return Y(t);
+  };
+}
+var NUM = String.raw`\s*(-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?)\s*`;
+var RE = new RegExp(`^\\s*cubic-bezier\\(${NUM},${NUM},${NUM},${NUM}\\)\\s*$`, "i");
+function parseCubicBezier(name) {
+  const m = RE.exec(name);
+  return m && !cubicBezierProblem(name) ? [Number(m[1]), Number(m[2]), Number(m[3]), Number(m[4])] : null;
+}
+function cubicBezierProblem(name) {
+  const m = RE.exec(name);
+  if (!m) return 'expected "cubic-bezier(x1, y1, x2, y2)" with four numbers, like CSS';
+  const x1 = Number(m[1]), x2 = Number(m[3]);
+  if (x1 < 0 || x1 > 1 || x2 < 0 || x2 > 1) return "x1 and x2 must be between 0 and 1 (y1 and y2 may overshoot)";
+  return null;
+}
+
+// src/core/pure/ease.ts
+var PI = Math.PI;
+var power = (strength) => ({
+  in: (p) => Math.pow(p, strength),
+  out: (p) => 1 - Math.pow(1 - p, strength),
+  inOut: (p) => p < 0.5 ? 0.5 * Math.pow(2 * p, strength) : 1 - 0.5 * Math.pow(2 * (1 - p), strength)
+});
+var fromOut = (out) => ({
+  in: (p) => 1 - out(1 - p),
+  out,
+  inOut: (p) => p < 0.5 ? 0.5 * (1 - out(1 - 2 * p)) : 0.5 + 0.5 * out(2 * p - 1)
+});
+var mirrored = (easeIn) => ({
+  in: easeIn,
+  out: (p) => 1 - easeIn(1 - p),
+  inOut: (p) => p < 0.5 ? easeIn(p * 2) / 2 : 1 - easeIn((1 - p) * 2) / 2
+});
+var sine = mirrored((p) => p === 1 ? 1 : -Math.cos(p * PI / 2) + 1);
+var circ = mirrored((p) => -(Math.sqrt(1 - p * p) - 1));
+var expoIn = (p) => Math.pow(2, 10 * (p - 1)) * p + p * p * p * p * p * p * (1 - p);
+var expo = {
+  in: expoIn,
+  out: (p) => 1 - expoIn(1 - p),
+  inOut: (p) => p < 0.5 ? expoIn(p * 2) / 2 : 1 - expoIn((1 - p) * 2) / 2
+};
+var bounceOut = (p) => {
+  if (p < 1 / 2.75) return 7.5625 * p * p;
+  if (p < 2 / 2.75) {
+    p -= 1.5 / 2.75;
+    return 7.5625 * p * p + 0.75;
+  }
+  if (p < 2.5 / 2.75) {
+    p -= 2.25 / 2.75;
+    return 7.5625 * p * p + 0.9375;
+  }
+  p -= 2.625 / 2.75;
+  return 7.5625 * p * p + 0.984375;
+};
+var bounce = fromOut(bounceOut);
+function back(s = 1.70158) {
+  const out = (p) => p ? (p -= 1, p * p * ((s + 1) * p + s) + 1) : 0;
+  return fromOut(out);
+}
+function elastic(amplitude, period) {
+  const make = (per0) => {
+    const amp = amplitude ?? 1;
+    const a = amp >= 1 ? amp : 1;
+    const per = per0 / (amp < 1 ? amp : 1);
+    const s = per / (2 * PI) * Math.asin(1 / a);
+    const k = 2 * PI / per;
+    return fromOut((p) => p === 0 ? 0 : p === 1 ? 1 : a * Math.pow(2, -10 * p) * Math.sin((p - s) * k) + 1);
+  };
+  const usual = make(period ?? 0.3);
+  return { in: usual.in, out: usual.out, inOut: period === void 0 ? make(0.45).inOut : usual.inOut };
+}
+function steps(n) {
+  const count = Math.max(1, Math.floor(n) || 1);
+  return (p) => p <= 0 ? 0 : p >= 1 ? 1 : Math.min(1, Math.floor(p * (count + 1)) / count);
+}
+var FAMILY = {
+  power1: () => power(2),
+  power2: () => power(3),
+  power3: () => power(4),
+  power4: () => power(5),
+  quad: () => power(2),
+  cubic: () => power(3),
+  quart: () => power(4),
+  quint: () => power(5),
+  strong: () => power(5),
+  sine: () => sine,
+  circ: () => circ,
+  expo: () => expo,
+  bounce: () => bounce,
+  back: (a) => back(a[0]),
+  elastic: (a) => elastic(a[0], a[1])
+};
+var LINEAR = (p) => p;
+var DEFAULT = power(2).out;
+var cache = /* @__PURE__ */ new Map();
+function lookup(name) {
+  let hit = cache.get(name);
+  if (hit === void 0) {
+    hit = parse(name.trim());
+    cache.set(name, hit);
+  }
+  return hit;
+}
+function pureEase(name) {
+  return (typeof name === "string" ? lookup(name) : null) ?? DEFAULT;
+}
+function isEaseName(name) {
+  return typeof name === "string" && lookup(name) !== null;
+}
+function parse(raw) {
+  const s = raw.toLowerCase();
+  if (s === "none" || s === "linear" || s === "linear.easenone") return LINEAR;
+  if (/^spring/.test(s)) {
+    const sp = parseSpring(raw);
+    return sp ? springEase(sp) : null;
+  }
+  if (/^cubic-bezier/.test(s)) {
+    const c = parseCubicBezier(raw);
+    return c ? cubicBezierEase(...c) : LINEAR;
+  }
+  const st = /^steps\(\s*([^)]*)\)$/.exec(s);
+  if (st) return steps(Number(st[1]));
+  if (/^[a-z][a-z0-9]*$/.test(raw) && FAMILY[raw]) return FAMILY[raw]([]).out;
+  const m = /^([a-z0-9]+)\.(?:ease)?(in|out|inout)(?:\(([^)]*)\))?$/.exec(s);
+  if (!m) return null;
+  const make = FAMILY[m[1]];
+  if (!make) return null;
+  const args = (m[3] ?? "").split(",").map((x) => x.trim()).filter(Boolean).map(Number).filter((n) => Number.isFinite(n));
+  const trio = make(args);
+  return m[2] === "in" ? trio.in : m[2] === "out" ? trio.out : trio.inOut;
+}
+
+// src/core/pure/colorLerp.ts
+function parseCssColor(s) {
+  const v = s.trim();
+  let m = /^#([0-9a-f]{3,4})$/i.exec(v);
+  if (m) {
+    const h = m[1];
+    const d = (i) => parseInt(h[i] + h[i], 16);
+    return [d(0), d(1), d(2), h.length === 4 ? d(3) / 255 : 1];
+  }
+  m = /^#([0-9a-f]{6})([0-9a-f]{2})?$/i.exec(v);
+  if (m) {
+    const n = parseInt(m[1], 16);
+    return [n >> 16 & 255, n >> 8 & 255, n & 255, m[2] ? parseInt(m[2], 16) / 255 : 1];
+  }
+  m = /^rgba?\(\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*(?:,\s*(-?[\d.]+)\s*)?\)$/i.exec(v);
+  if (m) return [Number(m[1]), Number(m[2]), Number(m[3]), m[4] === void 0 ? 1 : Number(m[4])];
+  return null;
+}
+function rgbInterp(a, b, fallback = () => null) {
+  const ca = parseCssColor(a) ?? fallback(a), cb = parseCssColor(b) ?? fallback(b);
+  if (!ca || !cb) return (p) => p >= 1 ? b : a;
+  return (p) => {
+    if (p === 0) return a;
+    if (p === 1) return b;
+    const ch = (i) => Math.round(ca[i] + (cb[i] - ca[i]) * p);
+    const al = Math.round((ca[3] + (cb[3] - ca[3]) * p) * 1e4) / 1e4;
+    return `rgba(${ch(0)},${ch(1)},${ch(2)},${al})`;
+  };
+}
+
+// src/core/pure/props.ts
+var DEG = Math.PI / 180;
+var num = (obj, key, id, unit = 1) => ({
+  id,
+  kind: "num",
+  unit,
+  round: 1e6,
+  get: () => Number(obj()?.[key]),
+  set: (v) => {
+    const o = obj();
+    if (o) o[key] = v;
+  }
+});
+function xy(target, base, which, unit = 1) {
+  const o = () => target[base];
+  const ax = num(o, "x", `${base}.x`, unit), ay = num(o, "y", `${base}.y`, unit);
+  return which === "x" ? [ax] : which === "y" ? [ay] : [ax, ay];
+}
+var VEC = [
+  ["scale", "scale", 1],
+  ["anchor", "anchor", 1],
+  ["pivot", "pivot", 1],
+  ["skew", "skew", DEG],
+  ["position", "position", 1],
+  ["tilePosition", "tilePosition", 1],
+  ["tileScale", "tileScale", 1]
+];
+var PIXI_INERT = /* @__PURE__ */ new Set(["fillColor", "fillAlpha"]);
+function pixiAccessors(target, key) {
+  for (const [name, base, unit] of VEC) {
+    if (key === name) return xy(target, base, "both", unit);
+    if (key === `${name}X`) return xy(target, base, "x", unit);
+    if (key === `${name}Y`) return xy(target, base, "y", unit);
+  }
+  switch (key) {
+    case "rotation":
+      return [{ id: "rotation", kind: "num", unit: DEG, round: 1e5, exactEnd: true, get: () => Number(target.rotation), set: (v) => {
+        target.rotation = v;
+      } }];
+    case "tint":
+      return [{ id: "tint", kind: "color", unit: 1, round: 1, get: () => Number(target.tint), set: (v) => {
+        target.tint = v;
+      } }];
+    case "autoAlpha":
+      return [
+        { id: "alpha", kind: "num", unit: 1, round: 1e6, get: () => Number(target.alpha), set: (v) => {
+          target.alpha = v;
+        } },
+        // `visible` follows the autoAlpha tweens only, not a plain `alpha` tween on the same layer: a channel of its own
+        { id: "visible#auto", kind: "num", unit: 1, round: 1e6, always: true, get: () => Number(target.alpha), set: (v) => {
+          target.visible = v !== 0;
+        } }
+      ];
+    default:
+      return null;
+  }
+}
+function rawAccessor(target, key) {
+  return { id: key, kind: "raw", unit: 1, round: 1, get: () => target[key], set: (v) => {
+    target[key] = v;
+  } };
+}
+function cssAccessor(target, key) {
+  return { id: key, kind: "css", unit: 1, round: 1, get: () => target[key], set: (v) => {
+    target[key] = v;
+  } };
+}
+function plainAccessor(target, key) {
+  return { id: key, kind: "num", unit: 1, round: 1e6, get: () => Number(target[key]), set: (v) => {
+    target[key] = v;
+  } };
+}
+function parseColor(v) {
+  if (typeof v === "number") return v;
+  if (typeof v !== "string") return null;
+  const s = v.trim();
+  let m = /^#([0-9a-f]{3})$/i.exec(s);
+  if (m) {
+    const h = m[1];
+    return parseInt(h[0] + h[0] + h[1] + h[1] + h[2] + h[2], 16);
+  }
+  m = /^#([0-9a-f]{6})(?:[0-9a-f]{2})?$/i.exec(s);
+  if (m) return parseInt(m[1], 16);
+  m = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i.exec(s);
+  if (m) return Number(m[1]) << 16 | Number(m[2]) << 8 | Number(m[3]);
+  return null;
+}
+function lerpColor(from, to, p) {
+  const r = lerpByte(from >> 16 & 255, to >> 16 & 255, p);
+  const g = lerpByte(from >> 8 & 255, to >> 8 & 255, p);
+  const b = lerpByte(from & 255, to & 255, p);
+  return r << 16 | g << 8 | b;
+}
+function lerpByte(a, b, p) {
+  return Math.trunc(a + (b - a) * p);
+}
+
+// src/core/pure/PureTimeline.ts
+var quantize = (x) => Math.round(x * 1e7) / 1e7 || 0;
+var TINY = 1e-8;
+var spacer = (duration) => ({ spacer: true, duration });
+var parseRel = (v) => {
+  if (typeof v === "number") return { rel: false, n: v };
+  if (typeof v === "string") {
+    const m = /^([+-])=\s*(-?\d*\.?\d+(?:e[+-]?\d+)?)$/i.exec(v.trim());
+    if (m) return { rel: true, n: (m[1] === "-" ? -1 : 1) * parseFloat(m[2]) };
+    const n = parseFloat(v);
+    if (Number.isFinite(n) && String(n) === v.trim()) return { rel: false, n };
+  }
+  return null;
+};
+var RESERVED = /* @__PURE__ */ new Set(["duration", "ease", "repeat", "yoyo", "repeatDelay", "onUpdate", "delay"]);
+var CALLBACKS = ["onStart", "onComplete", "onRepeat", "onReverseComplete"];
+var saidCallbacks = false;
+var PureTimeline = class _PureTimeline {
+  defaultEase;
+  channels = /* @__PURE__ */ new Map();
+  channelList = [];
+  children = [];
+  spans = 0;
+  now = 0;
+  order = 0;
+  killed = false;
+  prepared = false;
+  constructor(opts = {}) {
+    this.defaultEase = opts.defaults?.ease ?? "none";
+  }
+  // --- building ------------------------------------------------------------------------------------------
+  /** Adds a child timeline (played with its local time) or a spacer that lengthens this one. */
+  add(child, at) {
+    const start = at ?? this.spans;
+    if ("spacer" in child) {
+      this.spans = Math.max(this.spans, start + child.duration);
+    } else if (!(child instanceof _PureTimeline)) {
+      this.spans = Math.max(this.spans, start + child.duration());
+    } else {
+      this.children.push({ child, start: quantize(start), order: this.order++, exclusive: false, last: NaN });
+      this.prepared = false;
+      this.spans = Math.max(this.spans, start + child.duration());
+    }
+    return this;
+  }
+  set(target, vars, at) {
+    return this.build(target, null, { ...vars, duration: 0 }, at, "set");
+  }
+  to(target, vars, at) {
+    return this.build(target, null, vars, at, "to");
+  }
+  from(target, vars, at) {
+    return this.build(target, null, vars, at, "from");
+  }
+  fromTo(target, fromVars, toVars, at) {
+    return this.build(target, fromVars, toVars, at, "fromTo");
+  }
+  build(target, fromVars, vars, at, kind) {
+    const t = target;
+    const start = quantize((at ?? this.spans) + (Number(vars.delay) || 0));
+    const dur = quantize(Math.max(0, vars.duration ?? 0));
+    for (const cb of CALLBACKS) if (cb in vars) {
+      if (!saidCallbacks) {
+        saidCallbacks = true;
+        console.warn(`pixi-effects: the timeline does not run ${cb}: what a tween does must be a value of the time (use onUpdate for a redraw); it is ignored`);
+      }
+    }
+    const repeat = Math.max(0, Math.floor(vars.repeat ?? 0));
+    const yoyo = !!vars.yoyo;
+    const repeatDelay = Math.max(0, vars.repeatDelay ?? 0);
+    const easeName = vars.ease ?? this.defaultEase;
+    const ease = typeof easeName === "function" ? easeName : pureEase(easeName);
+    const given = (v) => {
+      const out = /* @__PURE__ */ new Map();
+      for (const key of Object.keys(v)) {
+        if (RESERVED.has(key) || key === "pixi" || CALLBACKS.includes(key)) continue;
+        const value = v[key];
+        const acc = parseRel(value) ? plainAccessor(t, key) : typeof value === "string" && parseCssColor(value) ? cssAccessor(t, key) : rawAccessor(t, key);
+        out.set(acc.id, { acc, value });
+      }
+      if (v.pixi) for (const key of Object.keys(v.pixi)) {
+        const accs = pixiAccessors(t, key);
+        if (!accs) {
+          if (!PIXI_INERT.has(key)) console.warn(`pixi-effects: the timeline has no "${key}" shorthand yet; it is ignored`);
+          continue;
+        }
+        for (const acc of accs) out.set(acc.id, { acc, value: v.pixi[key] });
+      }
+      return out;
+    };
+    const ends = given(vars);
+    const starts = fromVars ? given(fromVars) : /* @__PURE__ */ new Map();
+    const ids = kind === "fromTo" ? [.../* @__PURE__ */ new Set([...starts.keys(), ...ends.keys()])] : [...ends.keys()];
+    let lastAlpha;
+    for (const id of ids) {
+      const e = ends.get(id), f = starts.get(id);
+      const acc = (e ?? f).acc;
+      const ch = this.channel(t, acc);
+      const cur = acc.get();
+      const color = acc.kind === "color";
+      const endSpec = e ? read(e.value, acc) : null;
+      if (e && !endSpec && acc.kind === "color") console.warn(`pixi-effects: the timeline cannot read the colour ${JSON.stringify(e.value)} (use #rgb, #rrggbb, rgb(...) or a number); this tween is skipped`);
+      const fromSpec = f ? read(f.value, acc) : null;
+      let from = null, to, toRel = false;
+      if (kind === "from") {
+        const g = endSpec ?? { rel: false, n: cur };
+        from = g.rel ? cur + g.n : g.n;
+        to = cur;
+        acc.set(from);
+      } else if (kind === "fromTo") {
+        if (fromSpec) from = fromSpec.rel ? cur + fromSpec.n : fromSpec.n;
+        if (endSpec) {
+          to = endSpec.n;
+          toRel = endSpec.rel;
+        } else to = cur;
+        if (from !== null) acc.set(from);
+      } else {
+        if (!endSpec) continue;
+        to = endSpec.n;
+        toRel = endSpec.rel;
+      }
+      if (color && toRel) toRel = false;
+      const seg = {
+        channel: ch,
+        kind,
+        createCur: cur,
+        start,
+        dur,
+        ease,
+        repeat,
+        yoyo,
+        repeatDelay,
+        from,
+        to,
+        toRel,
+        from0: from,
+        to0: to,
+        toRel0: toRel,
+        onUpdate: vars.onUpdate,
+        order: this.order++
+      };
+      if (id === "visible#auto") seg.partner = lastAlpha;
+      else if (id === "alpha") lastAlpha = seg;
+      ch.segs.push(seg);
+      ch.dirty = true;
+      this.prepared = false;
+    }
+    const total = dur * (repeat + 1) + repeatDelay * repeat;
+    this.spans = Math.max(this.spans, start + total);
+    return this;
+  }
+  channel(target, acc) {
+    let m = this.channels.get(target);
+    if (!m) this.channels.set(target, m = /* @__PURE__ */ new Map());
+    let ch = m.get(acc.id);
+    if (!ch) {
+      ch = { target, acc, pre: NaN, last: NaN, segs: [], dirty: false };
+      m.set(acc.id, ch);
+      this.channelList.push(ch);
+    }
+    return ch;
+  }
+  /**
+   * A property moved by a function of the caller (a colour in OKLab, a gradient): `to` and `from` say how to get the two ends from
+   * the value before the segment, `make` the interpolator between them. The value is only written while the segment is the last
+   * one that has started, so nothing is read or kept between two frames.
+   */
+  tweenValue(spec) {
+    const acc = { id: spec.id, kind: "fn", unit: 1, round: 1, get: spec.get, set: spec.set, make: spec.make };
+    const ch = this.channel(spec.holder, acc);
+    const start = quantize(spec.at);
+    const dur = quantize(Math.max(0, spec.duration));
+    const repeat = Math.max(0, Math.floor(spec.repeat ?? 0));
+    const repeatDelay = Math.max(0, spec.repeatDelay ?? 0);
+    const ease = typeof spec.ease === "function" ? spec.ease : pureEase(spec.ease);
+    ch.segs.push({
+      channel: ch,
+      kind: "to",
+      createCur: null,
+      start,
+      dur,
+      ease,
+      repeat,
+      yoyo: !!spec.yoyo,
+      repeatDelay,
+      from: null,
+      to: null,
+      toRel: false,
+      from0: null,
+      to0: null,
+      toRel0: false,
+      order: this.order++,
+      fnFrom: spec.from,
+      fnTo: spec.to,
+      fnMake: spec.make,
+      write: spec.set
+    });
+    ch.dirty = true;
+    this.prepared = false;
+    this.spans = Math.max(this.spans, start + dur * (repeat + 1) + repeatDelay * repeat);
+    return this;
+  }
+  /**
+   * A write that is undone when time goes back before it: the property is `value` from `at` on, and what it was before otherwise.
+   * `holder` and `id` name the property, so a set and the tweens of the same property are one channel; `write` is the way the caller
+   * writes it (it may do more than assign: redraw), and runs again whenever this set is what the property shows.
+   */
+  setValue(holder, id, at, read2, write2, value) {
+    const acc = { id, kind: typeof value === "number" ? "num" : "raw", unit: 1, round: 1e6, get: read2, set: write2 };
+    const ch = this.channel(holder, acc);
+    ch.segs.push({
+      channel: ch,
+      kind: "set",
+      createCur: null,
+      start: quantize(at),
+      dur: 0,
+      ease: pureEase("none"),
+      repeat: 0,
+      yoyo: false,
+      repeatDelay: 0,
+      from: null,
+      to: value,
+      toRel: false,
+      from0: null,
+      to0: value,
+      toRel0: false,
+      order: this.order++,
+      step: true,
+      write: write2,
+      onUpdate: () => write2(read2())
+    });
+    ch.dirty = true;
+    this.prepared = false;
+    this.spans = Math.max(this.spans, quantize(at));
+    return this;
+  }
+  // --- reading -------------------------------------------------------------------------------------------
+  /** What the timeline will write, for tools and tests: every segment of this timeline and of the ones under it, starts in this timeline's time. */
+  segments(offset = 0) {
+    const out = [];
+    for (const ch of this.channelList) {
+      for (const s of ch.segs) {
+        out.push({ target: ch.target, id: ch.acc.id, start: s.start + offset, duration: s.dur, repeat: s.repeat, yoyo: s.yoyo, repeatDelay: s.repeatDelay, kind: s.step ? "set" : s.kind });
+      }
+    }
+    for (const c of this.children) out.push(...c.child.segments(offset + c.start));
+    return out;
+  }
+  /** How many timelines are directly under this one. */
+  timelines() {
+    return this.children.length;
+  }
+  duration() {
+    return this.spans;
+  }
+  time(value) {
+    if (value === void 0) return this.now;
+    if (this.killed) return this;
+    this.now = value;
+    if (!this.prepared) {
+      this.prepareDeep();
+      const counts = /* @__PURE__ */ new Map();
+      this.countChannels(counts);
+      this.markExclusive(counts);
+    }
+    this.evaluate(quantize(value));
+    return this;
+  }
+  /** GSAP's name for `time(t)`. */
+  seek(t) {
+    return this.time(t);
+  }
+  progress(p) {
+    if (p === void 0) return this.spans > 0 ? this.now / this.spans : 0;
+    return this.time(p * this.spans);
+  }
+  kill() {
+    this.killed = true;
+    this.channels.clear();
+    this.channelList.length = 0;
+    this.children.length = 0;
+  }
+  // --- evaluation ----------------------------------------------------------------------------------------
+  /**
+   * What GSAP ended up with once it had been played to the end and back (what Movie used to do at build), as rules that depend
+   * on the segments of a property only:
+   * - a `from` / `fromTo` shows its start from the moment it is built, so a `to` that comes first starts at the start of the
+   *   `from` built last, else at the property's own value;
+   * - a `to` (and a `set`) starts where the segment before it ended;
+   * - a `from` ends where the segment before it ended, or, with none before, where the property was when it was built;
+   * - before the first segment the property shows that segment's start.
+   */
+  prepare(ch) {
+    if (!ch.dirty) return;
+    ch.segs.sort((a, b) => a.start - b.start || a.order - b.order);
+    ch.dirty = false;
+    let latest = null;
+    for (const s of ch.segs) if ((s.kind === "from" || s.kind === "fromTo") && s.from0 !== null && (!latest || s.order > latest.order)) latest = s;
+    ch.base0 ??= { v: ch.acc.get() };
+    let cur = latest ? latest.from0 : ch.base0.v;
+    const base = cur;
+    let first = true;
+    for (const s of ch.segs) {
+      const before = cur;
+      s.from = s.from0;
+      s.to = s.to0;
+      s.toRel = s.toRel0;
+      if (s.fnTo) {
+        s.from = s.fnFrom ? s.fnFrom(cur) : cur;
+        s.to = s.fnTo(s.from, before, base);
+        s.interp = void 0;
+      } else {
+        if (s.partner) {
+          s.from = s.partner.from;
+          s.to = s.partner.to;
+        }
+        if (s.from === null) s.from = cur;
+        if (s.kind === "from") s.to = first ? s.createCur : cur;
+        if (s.toRel) {
+          s.to = s.from + s.to;
+          s.toRel = false;
+        }
+      }
+      if (first) ch.pre = s.fnTo ? before : s.from;
+      cur = endValue(s);
+      first = false;
+    }
+  }
+  /** Every channel of this timeline and of its children reads the property it starts from before any of them writes. */
+  prepareDeep() {
+    if (this.prepared) return;
+    this.prepared = true;
+    for (const ch of this.channelList) this.prepare(ch);
+    this.children.sort((a, b) => a.start - b.start || a.order - b.order);
+    for (const c of this.children) {
+      c.last = NaN;
+      c.child.prepareDeep();
+    }
+  }
+  /** How many channels write each (target, property) in this timeline and everything under it. */
+  countChannels(into) {
+    for (const ch of this.channelList) {
+      let m = into.get(ch.target);
+      if (!m) into.set(ch.target, m = /* @__PURE__ */ new Map());
+      m.set(ch.acc.id, (m.get(ch.acc.id) ?? 0) + 1);
+    }
+    for (const c of this.children) c.child.countChannels(into);
+  }
+  isExclusive(counts) {
+    for (const ch of this.channelList) if ((counts.get(ch.target)?.get(ch.acc.id) ?? 0) > 1) return false;
+    return this.children.every((c) => c.child.isExclusive(counts));
+  }
+  markExclusive(counts) {
+    for (const c of this.children) {
+      c.exclusive = c.child.isExclusive(counts);
+      c.child.markExclusive(counts);
+    }
+  }
+  evaluate(t) {
+    this.prepareDeep();
+    for (const ch of this.channelList) {
+      const segs = ch.segs;
+      let lo = 0, hi = segs.length;
+      while (lo < hi) {
+        const mid = lo + hi >> 1;
+        if (segs[mid].start <= t + TINY) lo = mid + 1;
+        else hi = mid;
+      }
+      let k = lo - 1;
+      while (k >= 0 && segs[k].repeat > 0 && t - segs[k].start <= TINY) k--;
+      const seg = k >= 0 ? segs[k] : null;
+      if (!seg) {
+        const pre = settle(ch.acc, ch.pre);
+        write(ch, segs[0], pre);
+        const head = segs[0];
+        if (pre !== ch.last) {
+          ch.last = pre;
+          head?.onUpdate?.();
+        }
+        continue;
+      }
+      const v = mix(seg, ratioAt(seg, t), over);
+      write(ch, seg, v);
+      if (v !== ch.last) {
+        ch.last = v;
+        seg.onUpdate?.();
+      }
+    }
+    for (const c of this.children) {
+      const local = Math.min(Math.max(t - c.start, 0), c.child.duration());
+      if (c.exclusive && local === c.last) continue;
+      c.last = local;
+      c.child.now = local;
+      c.child.evaluate(quantize(local));
+    }
+  }
+};
+function write(ch, seg, v) {
+  if (!ch.acc.always && ch.acc.get() === v) return;
+  (seg?.write ?? ch.acc.set)(v);
+}
+function endValue(s) {
+  if (s.dur === 0 && s.repeat === 0) return s.to;
+  return s.yoyo && s.repeat % 2 === 1 ? s.from : s.to;
+}
+function read(value, acc) {
+  if (acc.kind === "raw" || acc.kind === "css") return { rel: false, n: value };
+  if (acc.kind === "color") {
+    const c = parseColor(value);
+    return c === null ? null : { rel: false, n: c };
+  }
+  const r = parseRel(value);
+  return r ? { rel: r.rel, n: r.n * acc.unit } : null;
+}
+function settle(acc, v) {
+  return acc.kind !== "num" ? v : Math.round(v * acc.round) / acc.round;
+}
+var over = false;
+function mix(s, r, ended) {
+  const acc = s.channel.acc;
+  if (s.step) return s.to;
+  if (s.fnMake) {
+    const interp = s.interp ??= s.fnMake(s.from, s.to);
+    return interp(Math.round(r * 1e6) / 1e6);
+  }
+  if (acc.kind === "raw") return s.to;
+  if (acc.kind === "css") return (s.interp ??= rgbInterp(String(s.from), String(s.to)))(r);
+  if (acc.kind === "color") return ended ? endValue(s) : lerpColor(s.from, s.to, r);
+  if ((ended || r === 1) && acc.exactEnd) return endValue(s);
+  const k = acc.round;
+  return Math.round((s.from + (s.to - s.from) * r) * k) / k;
+}
+function ratioAt(s, t) {
+  const lt = t - s.start;
+  over = true;
+  if (s.dur === 0) return 1;
+  const total = s.dur * (s.repeat + 1) + s.repeatDelay * s.repeat;
+  if (quantize(lt) >= quantize(total) - TINY) return endRatio(s);
+  over = false;
+  let i = 0;
+  let within = lt;
+  if (s.repeat > 0) {
+    const period = s.dur + s.repeatDelay;
+    const q = quantize(lt);
+    i = Math.min(s.repeat, Math.max(0, Math.floor(lt / period)));
+    while (i > 0 && q <= quantize(i * period)) i--;
+    while (i < s.repeat && q > quantize((i + 1) * period)) i++;
+    within = quantize(lt - i * period);
+  }
+  let p = within >= s.dur ? 1 : within <= 0 ? 0 : within / s.dur;
+  if (s.yoyo && i % 2 === 1) p = 1 - p;
+  return s.ease(p);
+}
+function endRatio(s) {
+  return s.yoyo && s.repeat % 2 === 1 ? 0 : 1;
+}
+
+// src/core/timelineEngine.ts
+function createTimeline(opts = {}) {
+  return new PureTimeline({ paused: opts.paused, defaults: { ease: opts.defaults?.ease ?? "power1.out" } });
+}
+function lengthen(timeline, duration) {
+  timeline.add(spacer(duration));
+}
+function parseEase(name) {
+  return pureEase(name);
+}
+function setNow(target, vars) {
+  const t = target;
+  for (const key of Object.keys(vars)) {
+    if (key === "pixi") {
+      for (const k of Object.keys(vars.pixi)) {
+        const accs = pixiAccessors(t, k);
+        if (!accs) {
+          if (!PIXI_INERT.has(k)) console.warn(`pixi-effects: "${k}" is not a property a keyframe or initial can set; it is ignored`);
+          continue;
+        }
+        const raw = vars.pixi[k];
+        for (const acc of accs) {
+          const n = acc.kind === "color" ? colorNumber(raw) : Number(raw) * acc.unit;
+          if (!Number.isNaN(n)) acc.set(n);
+        }
+      }
+    } else {
+      const v = vars[key];
+      plainAccessor(t, key).set(typeof v === "number" ? Math.round(v * 1e6) / 1e6 : v);
+    }
+  }
+}
+function colorNumber(v) {
+  const c = parseColor(v);
+  if (c === null) {
+    console.warn(`pixi-effects: cannot read the colour ${JSON.stringify(v)} (use #rgb, #rrggbb, rgb(...) or a number); it is left as it was`);
+    return NaN;
+  }
+  return c;
+}
+function viaPixi(s) {
+  try {
+    const [r, g, b, a] = new Color(s).toArray();
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), a];
+  } catch {
+    return null;
+  }
+}
+function interpolateColors(a, b) {
+  return rgbInterp(a, b, viaPixi);
+}
+
+// src/expr/random.ts
+function mix2(h) {
+  h = Math.imul(h ^ h >>> 16, 2246822507);
+  h = Math.imul(h ^ h >>> 13, 3266489909);
+  return (h ^ h >>> 16) >>> 0;
+}
+function fold(n) {
+  if (!Number.isFinite(n)) return 0;
+  const i = Math.floor(n);
+  const f = n - i;
+  return (i | 0) ^ Math.imul(Math.floor(f * 1048576), 2654435761);
+}
+function rand(seed) {
+  return mix2(fold(seed) + 2654435769) / 4294967296;
+}
+function random(seed) {
+  let a = fold(seed) + 1831565813 | 0;
+  return () => {
+    a = a + 1831565813 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function noise(x, seed = 0) {
+  if (!Number.isFinite(x)) return 0;
+  const i = Math.floor(x);
+  const f = x - i;
+  const s = fold(seed) * 668265261;
+  const a = mix2((i | 0) + s) / 2147483648 - 1;
+  const b = mix2((i + 1 | 0) + s) / 2147483648 - 1;
+  const u = f * f * f * (f * (f * 6 - 15) + 10);
+  return a + (b - a) * u;
+}
 
 // src/expr/Parser.ts
 var FUNCS = {
@@ -305,7 +1088,7 @@ function parsePrimary(c) {
   }
   throw new Error(`unexpected token "${t.type}"`);
 }
-function parse(src) {
+function parse2(src) {
   const c = new Cursor(tokenize(src));
   const node = parseExpr(c);
   if (c.peek()) throw new Error("trailing input");
@@ -355,7 +1138,7 @@ function evaluateExpr(source, scope) {
   let ast = astCache.get(source);
   if (ast === void 0) {
     try {
-      ast = parse(source);
+      ast = parse2(source);
     } catch (e) {
       console.warn(`pixi-effects: expression failed: ${source}`, e);
       ast = ZERO_NODE;
@@ -373,19 +1156,29 @@ function evaluateExpr(source, scope) {
 // src/expr/normalizeProps.ts
 function normalizeProps(input, scope, options = {}) {
   const skip = new Set(options.skipKeys ?? []);
-  return walk(input, scope, skip, null);
+  return walk(input, scope, skip, null, options);
 }
-function walk(value, scope, skip, currentKey) {
+var RELATIVE = /^\s*([+-])=([\s\S]*)$/;
+function walk(value, scope, skip, currentKey, options) {
   if (Array.isArray(value)) {
-    return value.map((v) => walk(v, scope, skip, currentKey));
+    return value.map((v) => walk(v, scope, skip, currentKey, options));
   }
   if (value !== null && typeof value === "object") {
     const out = {};
     for (const k of Object.keys(value)) {
-      out[k] = walk(value[k], scope, skip, k);
+      out[k] = walk(value[k], scope, skip, k, options);
     }
     return out;
   }
+  if (typeof value === "string" && !(currentKey !== null && skip.has(currentKey))) {
+    const rel = RELATIVE.exec(value);
+    if (rel) {
+      const n = evaluateExpr(rel[2].trim(), scope);
+      if (options.relative === "allow") return `${rel[1]}=${n}`;
+      console.warn(`pixi-effects: "${value.trim()}"${currentKey ? ` (${currentKey})` : ""} is a relative value (measured from where the layer is): it works in a keyframe's to / from / set, not in ${options.where ?? "an initial or a style"}; it is read as the number ${rel[1] === "-" ? -n : n}`);
+      return rel[1] === "-" ? -n : n;
+    }
+  }
   if (isExpr(value) && !(currentKey !== null && skip.has(currentKey))) {
     if (looksLikeColorString(value)) return value;
     return evaluateExpr(value, scope);
@@ -397,56 +1190,6 @@ function looksLikeColorString(s) {
   if (s.charCodeAt(0) === 35) return true;
   return /^(rgb|hsl|oklab|oklch|lab|lch)\b/i.test(s);
 }
-function cubicBezierEase(x1, y1, x2, y2) {
-  const cx = 3 * x1, bx = 3 * (x2 - x1) - cx, ax = 1 - cx - bx;
-  const cy = 3 * y1, by = 3 * (y2 - y1) - cy, ay = 1 - cy - by;
-  const X = (t) => ((ax * t + bx) * t + cx) * t;
-  const Y = (t) => ((ay * t + by) * t + cy) * t;
-  const dX = (t) => (3 * ax * t + 2 * bx) * t + cx;
-  return (p) => {
-    if (p <= 0) return 0;
-    if (p >= 1) return 1;
-    let t = p;
-    for (let i = 0; i < 8; i++) {
-      const err = X(t) - p;
-      if (Math.abs(err) < 1e-9) return Y(t);
-      const d = dX(t);
-      if (Math.abs(d) < 1e-6) break;
-      t -= err / d;
-    }
-    let lo = 0, hi = 1;
-    t = p;
-    for (let i = 0; i < 60; i++) {
-      const x = X(t);
-      if (Math.abs(x - p) < 1e-10) break;
-      if (x < p) lo = t;
-      else hi = t;
-      t = (lo + hi) / 2;
-    }
-    return Y(t);
-  };
-}
-var NUM = String.raw`\s*(-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?)\s*`;
-var RE = new RegExp(`^\\s*cubic-bezier\\(${NUM},${NUM},${NUM},${NUM}\\)\\s*$`, "i");
-function cubicBezierProblem(name) {
-  const m = RE.exec(name);
-  if (!m) return 'expected "cubic-bezier(x1, y1, x2, y2)" with four numbers, like CSS';
-  const x1 = Number(m[1]), x2 = Number(m[3]);
-  if (x1 < 0 || x1 > 1 || x2 < 0 || x2 > 1) return "x1 and x2 must be between 0 and 1 (y1 and y2 may overshoot)";
-  return null;
-}
-var registered2 = false;
-function registerCubicBezierEase() {
-  if (registered2) return;
-  registered2 = true;
-  const base = ((p) => p);
-  base.config = (x1, y1, x2, y2) => {
-    const bad = [x1, y1, x2, y2].some((v) => typeof v !== "number" || !Number.isFinite(v)) || x1 < 0 || x1 > 1 || x2 < 0 || x2 > 1;
-    return bad ? (p) => p : cubicBezierEase(x1, y1, x2, y2);
-  };
-  gsap.registerEase("cubic-bezier", base);
-}
-registerCubicBezierEase();
 
 // src/core/ease.ts
 var FAMILIES = ["power1", "power2", "power3", "power4", "back", "elastic", "bounce", "circ", "expo", "sine"];
@@ -458,7 +1201,7 @@ function checkEase(ease, where) {
     const problem = springProblem(ease);
     if (!problem || warned.has(ease)) return;
     warned.add(ease);
-    console.warn(`pixi-effects: ${where}: unknown ease "${ease}" \u2014 ${problem}. GSAP would run it as its default ease, power1.out.`);
+    console.warn(`pixi-effects: ${where}: unknown ease "${ease}" \u2014 ${problem}. It runs as its default ease, power1.out.`);
     return;
   }
   if (/^\s*cubic-bezier/i.test(ease)) {
@@ -468,20 +1211,19 @@ function checkEase(ease, where) {
     console.warn(`pixi-effects: ${where}: unknown ease "${ease}" \u2014 ${problem}. It runs as 'none' (a straight line).`);
     return;
   }
-  const found = gsap.parseEase(ease);
-  if (typeof found === "function") return;
+  if (isEaseName(ease)) return;
   if (warned.has(ease)) return;
   warned.add(ease);
   if (ease === "") {
-    console.warn(`pixi-effects: ${where}: an empty ease (GSAP would run its default, power1.out): write 'none' for no easing, or a name such as 'power2.out'`);
+    console.warn(`pixi-effects: ${where}: an empty ease (it would run as power1.out): write 'none' for no easing, or a name such as 'power2.out'`);
     return;
   }
-  if (found && /^power[1-4]$/i.test(ease)) {
+  if (/^(power[1-4]|quad|cubic|quart|quint|strong|back|elastic|bounce|circ|expo|sine)$/i.test(ease)) {
     console.warn(`pixi-effects: ${where}: "${ease}" is a family, not an ease \u2014 write ${ease.toLowerCase()}.out, ${ease.toLowerCase()}.in or ${ease.toLowerCase()}.inOut`);
     return;
   }
   const guess = suggestName(ease, EASE_NAMES);
-  console.warn(`pixi-effects: ${where}: unknown ease "${ease}"${guess ? ` \u2014 did you mean "${guess}"?` : ""} (GSAP would run it as its default ease, power1.out). Examples: ${EASE_NAMES.slice(0, 7).join(", ")}, back.out(1.7), elastic.out(1, 0.3), steps(8)`);
+  console.warn(`pixi-effects: ${where}: unknown ease "${ease}"${guess ? ` \u2014 did you mean "${guess}"?` : ""} (it runs as its default ease, power1.out). Examples: ${EASE_NAMES.slice(0, 7).join(", ")}, back.out(1.7), elastic.out(1, 0.3), steps(8)`);
 }
 
 // src/core/Timeline.ts
@@ -583,16 +1325,7 @@ var PIXI_SHORTHANDS = /* @__PURE__ */ new Set([
   "tileScaleX",
   "tileScaleY",
   "tint",
-  "colorize",
-  "colorizeAmount",
-  "colorMatrixFilter",
-  "blur",
-  "blurX",
-  "blurY",
-  "blurPadding",
   "autoAlpha",
-  "lineColor",
-  "lineAlpha",
   "fillColor",
   "fillAlpha"
 ]);
@@ -616,7 +1349,7 @@ function applyKeyframes(timeline, target, keyframes, parentDuration, scope, skip
     const kf = normalizeKeyframe(raw, parentDuration);
     const at = offset + kf.at;
     if (kf.kind === "set") {
-      const resolved = normalizeProps(kf.set, scope, { skipKeys });
+      const resolved = normalizeProps(kf.set, scope, { skipKeys, relative: "allow" });
       const { rest, routed } = splitRouted(resolved, routers);
       for (const r of routed) timeline.set(r.target, { [r.prop]: r.value }, at);
       const { ownProps, filterProps } = partitionProps(rest);
@@ -627,7 +1360,7 @@ function applyKeyframes(timeline, target, keyframes, parentDuration, scope, skip
         timeline.set(f, props, at);
       }
     } else if (kf.kind === "to") {
-      const resolved = normalizeProps(kf.to, scope, { skipKeys });
+      const resolved = normalizeProps(kf.to, scope, { skipKeys, relative: "allow" });
       const { rest, routed } = splitRouted(resolved, routers);
       for (const r of routed)
         timeline.to(r.target, { [r.prop]: r.value, duration: kf.duration, ease: kf.ease, ...kf.loop }, at);
@@ -640,7 +1373,7 @@ function applyKeyframes(timeline, target, keyframes, parentDuration, scope, skip
         timeline.to(f, { ...props, duration: kf.duration, ease: kf.ease, ...kf.loop }, at);
       }
     } else if (kf.kind === "from") {
-      const resolved = normalizeProps(kf.from, scope, { skipKeys });
+      const resolved = normalizeProps(kf.from, scope, { skipKeys, relative: "allow" });
       const { rest, routed } = splitRouted(resolved, routers);
       for (const r of routed)
         timeline.from(r.target, { [r.prop]: r.value, duration: kf.duration, ease: kf.ease, ...kf.loop }, at);
@@ -653,8 +1386,8 @@ function applyKeyframes(timeline, target, keyframes, parentDuration, scope, skip
         timeline.from(f, { ...props, duration: kf.duration, ease: kf.ease, ...kf.loop }, at);
       }
     } else {
-      const fromResolved = normalizeProps(kf.from, scope, { skipKeys });
-      const toResolved = normalizeProps(kf.to, scope, { skipKeys });
+      const fromResolved = normalizeProps(kf.from, scope, { skipKeys, where: "the from side of a from + to keyframe" });
+      const toResolved = normalizeProps(kf.to, scope, { skipKeys, relative: "allow" });
       const fromRouted = splitRouted(fromResolved, routers);
       const toRouted = splitRouted(toResolved, routers);
       const fromByKey = new Map(fromRouted.routed.map((r) => [r.key, r]));
@@ -704,15 +1437,15 @@ function applyKeyframes(timeline, target, keyframes, parentDuration, scope, skip
 }
 function applyInitial(target, initial, scope, skipKeys = [], routers) {
   if (!initial) return;
-  const resolved = normalizeProps(initial, scope, { skipKeys });
+  const resolved = normalizeProps(initial, scope, { skipKeys, where: "initial" });
   const { rest, routed } = splitRouted(resolved, routers);
-  for (const r of routed) gsap.set(r.target, { [r.prop]: r.value });
+  for (const r of routed) setNow(r.target, { [r.prop]: r.value });
   const { ownProps, filterProps } = partitionProps(rest);
-  if (Object.keys(ownProps).length > 0) gsap.set(target, pixiwrap(ownProps));
+  if (Object.keys(ownProps).length > 0) setNow(target, pixiwrap(ownProps));
   for (const [name, props] of Object.entries(filterProps)) {
     const f = findFilter(target, name);
     if (!f) continue;
-    gsap.set(f, props);
+    setNow(f, props);
   }
 }
 
@@ -1147,7 +1880,7 @@ var GrainFilter = class extends Filter {
 };
 var WARP_KINDS = ["wave", "haze"];
 var OPTION_KEYS = ["kind", "strength", "scale", "speed", "angle", "seed"];
-var DEG = Math.PI / 180;
+var DEG2 = Math.PI / 180;
 var HASH_GL2 = `
 uint hash(uint x) { x ^= x >> 16; x *= 0x7feb352du; x ^= x >> 15; x *= 0x846ca68bu; x ^= x >> 16; return x; }
 float lattice(ivec2 p, uint k) {
@@ -1319,7 +2052,7 @@ var WarpFilter = class extends Filter {
           uStrength: { value: strength, type: "f32" },
           uScale: { value: scale, type: "f32" },
           uSpeed: { value: speed, type: "f32" },
-          uAngle: { value: angle * DEG, type: "f32" },
+          uAngle: { value: angle * DEG2, type: "f32" },
           uSeed: { value: Math.floor(seed), type: "f32" },
           uMode: { value: kind === "haze" ? 1 : 0, type: "f32" },
           uTime: { value: 0, type: "f32" }
@@ -1357,10 +2090,10 @@ var WarpFilter = class extends Filter {
     this.u.uSpeed = v;
   }
   get angle() {
-    return this.u.uAngle / DEG;
+    return this.u.uAngle / DEG2;
   }
   set angle(v) {
-    this.u.uAngle = v * DEG;
+    this.u.uAngle = v * DEG2;
   }
   get seed() {
     return this.u.uSeed;
@@ -1638,6 +2371,8 @@ var NullSequence = class extends Sequence {
     this.buildFilters();
   }
 };
+
+// src/core/remap.ts
 var BAGS = ["set", "to", "from"];
 function timeRemapOf(spec, prop = "time") {
   const hasInitial = !!spec.initial && "time" in spec.initial;
@@ -1718,7 +2453,7 @@ function bindClock(timeline, clock, prop, remap, duration, at, scope) {
   timeline.fromTo(clock, { [prop]: from }, { [prop]: from + s * duration, duration, ease: "none" }, at);
 }
 function clockTable(remap, prop, duration, at, scope, to) {
-  const probe = gsap.timeline({ paused: true });
+  const probe = createTimeline({ paused: true });
   const clock = { [prop]: remap.start ?? 0 };
   bindClock(probe, clock, prop, remap, duration, at, scope);
   probe.time(probe.duration());
@@ -1750,7 +2485,7 @@ function clockTable(remap, prop, duration, at, scope, to) {
 }
 
 // src/space/math.ts
-var DEG2 = Math.PI / 180;
+var DEG3 = Math.PI / 180;
 var DEFAULT_FOV = 40;
 var MIN_FOV = 1;
 var MAX_FOV = 179;
@@ -1760,7 +2495,7 @@ function clampFov(fov) {
   return Math.min(MAX_FOV, Math.max(MIN_FOV, fov));
 }
 function homeDistance(compHeight, fovDeg) {
-  return compHeight / 2 / Math.tan(clampFov(fovDeg) * DEG2 / 2);
+  return compHeight / 2 / Math.tan(clampFov(fovDeg) * DEG3 / 2);
 }
 function homeCamera(compW, compH, fov = DEFAULT_FOV) {
   return {
@@ -1814,7 +2549,7 @@ function cameraBasis(cam, compW, compH) {
     fx,
     fy,
     fz,
-    focal: compH / 2 / Math.tan(clampFov(cam.fov) * DEG2 / 2),
+    focal: compH / 2 / Math.tan(clampFov(cam.fov) * DEG3 / 2),
     halfW: compW / 2,
     halfH: compH / 2
   };
@@ -1878,12 +2613,12 @@ function looksLikeLayerName(s) {
 var isName = (v, known) => typeof v === "string" && (known.has(v) || looksLikeLayerName(v));
 function focusNames(props, known) {
   const out = [];
-  const read = (bag) => {
+  const read2 = (bag) => {
     const v = bag?.focus;
     if (isName(v, known)) out.push(v);
   };
-  read(props.initial);
-  for (const kf of props.keyframes ?? []) for (const bag of [kf.set, kf.to, kf.from]) read(bag);
+  read2(props.initial);
+  for (const kf of props.keyframes ?? []) for (const bag of [kf.set, kf.to, kf.from]) read2(bag);
   return out;
 }
 function withFocusResolved(props, zOf, known = /* @__PURE__ */ new Set()) {
@@ -2048,7 +2783,7 @@ function smoothstep(e0, e1, x) {
   const t = Math.min(1, Math.max(0, (x - e0) / (e1 - e0)));
   return t * t * (3 - 2 * t);
 }
-var DEG3 = Math.PI / 180;
+var DEG4 = Math.PI / 180;
 function norm(v) {
   const l = Math.hypot(v.x, v.y, v.z) || 1;
   return { x: v.x / l, y: v.y / l, z: v.z / l };
@@ -2056,7 +2791,7 @@ function norm(v) {
 var dot = (a, b) => a.x * b.x + a.y * b.y + a.z * b.z;
 var sub = (a, b) => ({ x: a.x - b.x, y: a.y - b.y, z: a.z - b.z });
 function coneCos(l) {
-  const half = Math.min(179, Math.max(0, l.coneAngle)) * DEG3 / 2;
+  const half = Math.min(179, Math.max(0, l.coneAngle)) * DEG4 / 2;
   const inner = half * (1 - Math.min(1, Math.max(0, l.coneFeather)));
   const cosOuter = Math.cos(half);
   const cosInner = Math.max(Math.cos(inner), cosOuter + 1e-4);
@@ -2190,24 +2925,8 @@ var LightSequence = class extends Sequence {
 };
 
 // src/core/revertibleSet.ts
-function revertibleSet(timeline, at, read, write, value) {
-  let p = 0;
-  let before;
-  const proxy = {
-    get p() {
-      return p;
-    },
-    set p(next) {
-      if (next >= 1 && p < 1) {
-        before = read();
-        write(value);
-      } else if (next < 1 && p >= 1) {
-        write(before);
-      }
-      p = next;
-    }
-  };
-  timeline.set(proxy, { p: 1 }, at);
+function revertibleSet(timeline, at, read2, write2, value, property) {
+  timeline.setValue(property?.[0] ?? read2, property?.[1] ?? "set", at, read2, write2, value);
 }
 
 // src/expr/colorInterp.ts
@@ -2346,30 +3065,26 @@ function shortestHueDelta(from, to) {
 // src/expr/colorTween.ts
 var css = (c) => typeof c === "number" ? "#" + c.toString(16).padStart(6, "0") : c;
 function tweenColor(timeline, target, key, fromValue, toValue, duration, ease, at, colorSpace, onUpdate, loop = {}) {
-  let interp = null;
-  const proxy = { p: 0 };
-  timeline.fromTo(
-    proxy,
-    { p: 0 },
-    {
-      p: 1,
-      duration,
-      ease,
-      ...loop,
-      onStart: () => {
-        const start = fromValue !== void 0 ? fromValue : target[key];
-        if (start === void 0) return;
-        interp = colorSpace === "rgb" ? gsap.utils.interpolate(css(start), css(toValue)) : buildColorInterp(start, toValue, colorSpace);
-      },
-      onUpdate: () => {
-        if (interp) {
-          target[key] = interp(proxy.p);
-          if (onUpdate) onUpdate();
-        }
-      }
+  const none = () => void 0;
+  timeline.tweenValue({
+    holder: target,
+    id: key,
+    get: () => target[key],
+    set: (v) => {
+      if (v === void 0) return;
+      target[key] = v;
+      if (onUpdate) onUpdate();
     },
-    at
-  );
+    from: fromValue !== void 0 ? () => fromValue : void 0,
+    to: () => toValue,
+    make: (a, b) => a === void 0 ? none : colorSpace === "rgb" ? interpolateColors(css(a), css(b)) : buildColorInterp(a, b, colorSpace),
+    duration,
+    ease,
+    at,
+    repeat: loop.repeat,
+    yoyo: loop.yoyo,
+    repeatDelay: loop.repeatDelay
+  });
 }
 
 // src/sequences/Image.ts
@@ -2412,7 +3127,7 @@ var ImageSequence = class extends Sequence {
         const sprite = this.target;
         revertibleSet(timeline, at, () => sprite.tint, (c) => {
           sprite.tint = c;
-        }, setTint);
+        }, setTint, [sprite, "tint"]);
       }
       if (toTint !== void 0) {
         tweenColor(
@@ -2567,37 +3282,37 @@ function validateGradientKeyframes(spec, who, warn = (m) => console.warn(m), kin
   if (animated && !start) say("a keyframe animates fillGradient but the layer has none to start from: give it a fillGradient first (top level or in initial)");
 }
 function tweenGradient(timeline, holder, fromPatch, toPatch, duration, ease, at, colorSpace, onChange, loop = {}) {
-  let a = null, b = null;
-  let resting = null;
-  let colors = [];
-  const proxy = { p: 0 };
-  timeline.fromTo(proxy, { p: 0 }, {
-    p: 1,
-    duration,
-    ease,
-    ...loop,
-    onStart: () => {
-      const live = holder.grad;
-      a = fromPatch !== void 0 ? mergeGrad(live, fromPatch) : live;
-      if (toPatch === void 0) resting ??= live;
-      b = toPatch !== void 0 ? mergeGrad(a, toPatch) : resting;
-      colors = a.stops.map((s, i) => colorSpace === "rgb" ? gsap.utils.interpolate(s.color, b.stops[i].color) : buildColorInterp(s.color, b.stops[i].color, colorSpace));
+  timeline.tweenValue({
+    holder,
+    id: "grad",
+    get: () => holder.grad,
+    set: (g) => {
+      holder.grad = g;
+      onChange();
     },
-    onUpdate: () => {
-      if (!a || !b) return;
-      const t = proxy.p;
-      const l = (x, y) => x + (y - x) * t;
-      holder.grad = {
-        type: a.type,
-        angle: l(a.angle, b.angle),
-        center: [l(a.center[0], b.center[0]), l(a.center[1], b.center[1])],
-        innerRadius: l(a.innerRadius, b.innerRadius),
-        radius: l(a.radius, b.radius),
-        stops: a.stops.map((s, i) => ({ offset: l(s.offset, b.stops[i].offset), color: colors[i](t) }))
+    from: fromPatch !== void 0 ? (prev) => mergeGrad(prev, fromPatch) : void 0,
+    to: (start, prev) => toPatch !== void 0 ? mergeGrad(start, toPatch) : prev,
+    make: (a, b) => {
+      const colors = a.stops.map((s, i) => colorSpace === "rgb" ? interpolateColors(s.color, b.stops[i].color) : buildColorInterp(s.color, b.stops[i].color, colorSpace));
+      return (t) => {
+        const l = (x, y) => x + (y - x) * t;
+        return {
+          type: a.type,
+          angle: l(a.angle, b.angle),
+          center: [l(a.center[0], b.center[0]), l(a.center[1], b.center[1])],
+          innerRadius: l(a.innerRadius, b.innerRadius),
+          radius: l(a.radius, b.radius),
+          stops: a.stops.map((s, i) => ({ offset: l(s.offset, b.stops[i].offset), color: colors[i](t) }))
+        };
       };
-      onChange();
-    }
-  }, at);
+    },
+    duration,
+    ease,
+    at,
+    repeat: loop.repeat,
+    yoyo: loop.yoyo,
+    repeatDelay: loop.repeatDelay
+  });
 }
 var PAINT_SIZE = 512;
 var GradientPainter = class {
@@ -2642,16 +3357,20 @@ function bindGradientKeyframes(timeline, holder, keyframes, duration, offset, co
     const at = offset + resolveAt(kf.at, duration);
     const setV = bag(kf.set), fromV = bag(kf.from), toV = bag(kf.to);
     if (setV !== void 0) {
-      revertibleSet(
-        timeline,
-        at,
-        () => ({ state: holder.grad }),
-        (v) => {
-          holder.grad = v.state ?? mergeGrad(holder.grad, v.patch);
+      timeline.tweenValue({
+        holder,
+        id: "grad",
+        get: () => holder.grad,
+        set: (g) => {
+          holder.grad = g;
           onChange();
         },
-        { patch: setV }
-      );
+        to: (start) => mergeGrad(start, setV),
+        make: (_a, b) => () => b,
+        duration: 0,
+        ease: "none",
+        at
+      });
     }
     if (fromV !== void 0 || toV !== void 0) {
       tweenGradient(timeline, holder, fromV, toV, kfDuration(kf), kf.ease ?? "none", at, colorSpace, onChange, loopVars(kf));
@@ -2843,7 +3562,7 @@ function bindCounterKeyframes(timeline, state, key, refresh, keyframes, parentDu
       revertibleSet(timeline, at, () => state[key], (n) => {
         state[key] = n;
         refresh();
-      }, v);
+      }, v, [state, key]);
     }
     if (toV !== void 0 && fromV !== void 0) {
       timeline.fromTo(
@@ -2859,7 +3578,7 @@ function bindCounterKeyframes(timeline, state, key, refresh, keyframes, parentDu
     }
   }
 }
-function bindTextKeyframes(timeline, keyframes, parentDuration, origin, read, write, who) {
+function bindTextKeyframes(timeline, keyframes, parentDuration, origin, read2, write2, who) {
   for (const kf of keyframes) {
     for (const [what, props] of [["to", kf.to], ["from", kf.from]]) {
       if (props && props.text !== void 0) {
@@ -2868,7 +3587,7 @@ function bindTextKeyframes(timeline, keyframes, parentDuration, origin, read, wr
     }
     const t = kf.set?.text;
     if (t === void 0) continue;
-    revertibleSet(timeline, origin + resolveAt(kf.at, parentDuration), read, write, String(t));
+    revertibleSet(timeline, origin + resolveAt(kf.at, parentDuration), read2, write2, String(t));
   }
 }
 function animates(keyframes, key) {
@@ -2890,7 +3609,7 @@ function bindFillKeyframes(timeline, text, keyframes, parentDuration, offset, co
       revertibleSet(timeline, at, () => state.fill, (c) => {
         state.fill = c;
         writeFill();
-      }, setFill);
+      }, setFill, [state, "fill"]);
     }
     if (toFill !== void 0) {
       tweenColor(
@@ -3046,6 +3765,9 @@ var BUDGET_BYTES = 96 * 1024 * 1024;
 var MIN_HELD = 3;
 var JUMP_SECONDS = 1;
 var EPS = 1e-6;
+var LOW_BEHIND = 14;
+var MIN_HELD_TO_READ_BACK = 20;
+var MIN_HELD_TO_READ_START = 9;
 function reportDecodeError(err, time) {
   const isTransient = err instanceof DOMException && (err.name === "EncodingError" || err.name === "NotSupportedError");
   if (isTransient) console.debug("pixi-effects: transient video decode failure at", time, "s \u2014", err.name);
@@ -3064,9 +3786,22 @@ var FrameCache = class {
   _held = 0;
   _lock = Promise.resolve();
   _lastTime = null;
+  _dir = 0;
+  _gen = 0;
+  _backBusy = false;
+  _backGen = 0;
+  _standbyBusy = false;
+  /** A second pass at the start of the file, ready for the moment a looping video comes round. */
+  _standby = null;
+  _duration;
+  _loop;
+  /** How often it had to wait for a decoder (`restarts`, `singles`) and how many reads ahead it made: for tests and for `check`. */
+  stats = { restarts: 0, singles: 0, prefetches: 0 };
   constructor(sink, options = {}) {
     this.sink = sink;
     this.capacity = options.capacity ?? 30;
+    this._duration = options.duration ?? null;
+    this._loop = !!options.loop;
   }
   /** How many decoded frames are held right now (the sequential reader's own list, plus the exact-time cache of the old path). */
   get heldFrames() {
@@ -3136,24 +3871,157 @@ var FrameCache = class {
     return null;
   }
   async _sequentialAt(time) {
+    const last = this._lastTime;
+    this._lastTime = time;
+    if (last !== null && Math.abs(time - last) <= JUMP_SECONDS) this._dir = time > last + EPS ? 1 : time < last - EPS ? -1 : this._dir;
+    let frame;
     try {
-      const last = this._lastTime;
-      this._lastTime = time;
-      const hit = this._covering(time);
-      if (hit) return hit.frame;
-      if (last === null || Math.abs(time - last) > JUMP_SECONDS) return await this._single(time);
-      const cur = this._cur;
-      if (this._iter && cur && time >= cur.ts && time - cur.ts <= JUMP_SECONDS) return await this._advance(time);
-      const backwards = !!cur && time < cur.ts;
-      return await this._restart(time, backwards ? Math.max(0, time - this._held / 30) : time);
+      frame = await this._serve(time, last);
     } catch (err) {
       reportDecodeError(err, time);
       await this._closeIter();
       return null;
     }
+    this._maybeReadAhead(time);
+    return frame;
+  }
+  async _serve(time, last) {
+    const hit = this._covering(time);
+    if (hit) return hit.frame;
+    const sb = this._standby;
+    if (sb && time >= sb.cur.ts - EPS && time - sb.cur.ts <= JUMP_SECONDS && (!this._iter || !this._cur || this._cur.ts > time + JUMP_SECONDS)) return await this._adoptStandby(time);
+    if (last === null || Math.abs(time - last) > JUMP_SECONDS) return await this._single(time);
+    const cur = this._cur;
+    if (this._iter && cur && time >= cur.ts && time - cur.ts <= JUMP_SECONDS) return await this._advance(time);
+    const backwards = !!cur && time < cur.ts;
+    return await this._restart(time, backwards ? Math.max(0, time - Math.max(1, this._held - 1) / 30) : time);
+  }
+  // ── reading ahead ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+  _maybeReadAhead(time) {
+    if (this._held === 0) return;
+    if (this._dir === -1) {
+      this._dropStandby();
+      let behind = 0, passed = 0, earliest = Infinity;
+      for (const e of this._frames) {
+        if (e.ts < time - EPS) behind++;
+        else if (e.ts > time + EPS) passed++;
+        if (e.ts < earliest) earliest = e.ts;
+      }
+      if (this._held >= MIN_HELD_TO_READ_BACK && behind < LOW_BEHIND && passed >= 3 && earliest > EPS && !this._backBusy) void this._readBack(earliest, passed);
+    } else if (this._held >= MIN_HELD_TO_READ_START && this._dir === 1 && this._loop && this._duration !== null && time >= this._duration - JUMP_SECONDS && !this._standby && !this._standbyBusy) {
+      void this._readStart();
+    }
+  }
+  /** In the background: the window of frames before the earliest one held (reverse play comes to it next). */
+  async _readBack(earliest, room) {
+    this._backBusy = true;
+    this.stats.prefetches++;
+    const gen = this._gen, bg = this._backGen;
+    const want = Math.max(3, Math.min(Math.floor(this._held * 0.6), room));
+    let iter = null;
+    const got = [];
+    try {
+      iter = this.sink.samples(Math.max(0, earliest - want / 30));
+      for (; ; ) {
+        const r = await iter.next();
+        if (r.done) break;
+        if (gen !== this._gen || r.value.timestamp >= earliest - EPS) {
+          r.value.close?.();
+          break;
+        }
+        got.push(r.value);
+        if (bg !== this._backGen) break;
+      }
+      if (gen === this._gen && bg === this._backGen) {
+        for (let k = 0; k < got.length; k++) {
+          const s = got[k];
+          const frame = s.toVideoFrame();
+          this._keep({ ts: s.timestamp, end: got[k + 1]?.timestamp ?? earliest, frame }, frame);
+        }
+      }
+    } catch (err) {
+      reportDecodeError(err, earliest);
+    } finally {
+      for (const s of got) s.close?.();
+      this._backBusy = false;
+      try {
+        await iter?.return?.(void 0);
+      } catch {
+      }
+    }
+  }
+  /** In the background: the first frames of the file and a pass that stands behind them; held (pinned) until the loop comes round. */
+  async _readStart() {
+    this._standbyBusy = true;
+    this.stats.prefetches++;
+    const gen = this._gen;
+    const want = Math.max(3, Math.min(10, Math.floor(this._held / 3)));
+    let iter = null;
+    const got = [];
+    let keep = false;
+    try {
+      iter = this.sink.samples(0);
+      for (; got.length < want + 1; ) {
+        const r = await iter.next();
+        if (r.done) break;
+        if (gen !== this._gen) {
+          r.value.close?.();
+          break;
+        }
+        got.push(r.value);
+      }
+      if (gen === this._gen && got.length >= 2) {
+        const next = got.pop();
+        let cur = null;
+        got.forEach((s, k) => {
+          const frame = s.toVideoFrame();
+          s.close?.();
+          const entry = { ts: s.timestamp, end: (got[k + 1] ?? next).timestamp, frame, pinned: true };
+          this._keep(entry, frame);
+          cur = entry;
+        });
+        got.length = 0;
+        if (cur) {
+          this._standby = { iter, cur, next };
+          keep = true;
+        }
+      }
+    } catch (err) {
+      reportDecodeError(err, 0);
+    } finally {
+      for (const s of got) s.close?.();
+      this._standbyBusy = false;
+      if (!keep) {
+        try {
+          await iter?.return?.(void 0);
+        } catch {
+        }
+      }
+    }
+  }
+  async _adoptStandby(time) {
+    const sb = this._standby;
+    this._standby = null;
+    await this._closeIter();
+    for (const e of this._frames) e.pinned = false;
+    this._iter = sb.iter;
+    this._next = sb.next;
+    this._cur = sb.cur;
+    return this._advance(time);
+  }
+  _dropStandby() {
+    const sb = this._standby;
+    if (!sb) return;
+    this._standby = null;
+    sb.next?.close?.();
+    for (const e of this._frames.filter((x) => x.pinned)) {
+      e.pinned = false;
+    }
+    void sb.iter.return?.(void 0);
   }
   /** One frame by itself (a seek): getSample, kept so that asking again for the same time costs nothing. The running pass, if any, is closed: it no longer follows the playhead. */
   async _single(time) {
+    this.stats.singles++;
     await this._closeIter();
     this._cur = null;
     const sample = await this.sink.getSample(time);
@@ -3165,6 +4033,8 @@ var FrameCache = class {
   }
   /** Start a pass at `time` (a seek and the frames of one group of pictures), keeping what is still held for a step back. */
   async _restart(time, from = time) {
+    this.stats.restarts++;
+    this._backGen++;
     await this._closeIter();
     this._cur = null;
     const iter = this.sink.samples(from);
@@ -3228,12 +4098,27 @@ var FrameCache = class {
     }
     this._frames.push(entry);
     while (this._frames.length > this._held) {
-      const oldest = this._frames.find((e) => e !== this._cur && e !== entry);
-      if (!oldest) break;
-      this._frames.splice(this._frames.indexOf(oldest), 1);
-      oldest.frame.close?.();
+      const victim = this._victim(entry);
+      if (!victim) break;
+      this._frames.splice(this._frames.indexOf(victim), 1);
+      victim.frame.close?.();
     }
   }
+  /**
+   * The frame to let go: one the playhead has already passed (going forward those before it, going back those after it), the furthest
+   * behind first; when there is none, the one furthest ahead of the playhead (the last to be needed). Least recently used when the
+   * direction is not known. Frames of the standby (pinned) and the frame the pass stands on are never chosen.
+   */
+  _victim(except) {
+    const cand = this._frames.filter((e) => e !== this._cur && e !== except && !e.pinned);
+    if (cand.length === 0) return null;
+    if (this._dir === 0) return cand[0];
+    const at = this._lastTime ?? 0;
+    const passed = cand.filter((e) => this._dir === 1 ? e.ts < at - EPS : e.ts > at + EPS);
+    const farthest = (list, sign) => list.reduce((a, b) => sign * (b.ts - a.ts) > 0 ? b : a);
+    if (passed.length) return farthest(passed, this._dir === 1 ? -1 : 1);
+    return farthest(cand, this._dir === 1 ? 1 : -1);
+  }
   async _closeIter() {
     const iter = this._iter;
     this._iter = null;
@@ -3256,6 +4141,8 @@ var FrameCache = class {
     }
   }
   dispose() {
+    this._gen++;
+    this._dropStandby();
     for (const f of this.cache.values()) f?.close?.();
     this.cache.clear();
     this._pending.clear();
@@ -3297,7 +4184,7 @@ var VideoSequence = class extends Sequence {
     this._sourceDuration = data.duration;
     this._remap = remapOf(this.spec, "currentTime", this._sourceDuration);
     this._audioBuffer = this.spec.audio !== false ? data.audioBuffer : null;
-    this._cache = new FrameCache(data.sink, { capacity: 30 });
+    this._cache = new FrameCache(data.sink, { capacity: 30, duration: data.duration, loop: !!this.spec.loop });
     const probeFrame = await this._cache.getFrameAt(0);
     const w = probeFrame?.displayWidth ?? 1920;
     const h = probeFrame?.displayHeight ?? 1080;
@@ -3327,8 +4214,8 @@ var VideoSequence = class extends Sequence {
         currentTime = v;
         seq._cur = v;
         const mySeq = ++seq._drawSeq;
-        const lookup = sourceLookup(v, seq._sourceDuration, !!seq.spec.loop);
-        seq._cache.getFrameAt(lookup).then((frame) => {
+        const lookup2 = sourceLookup(v, seq._sourceDuration, !!seq.spec.loop);
+        seq._cache.getFrameAt(lookup2).then((frame) => {
           if (mySeq !== seq._drawSeq) return;
           if (!frame || !seq._ctx) return;
           seq._ctx.drawImage(frame, 0, 0);
@@ -3382,10 +4269,10 @@ var VideoSequence = class extends Sequence {
     const time = this._cur;
     if (!this.keepHidden && !this.target?.renderable) return;
     const mySeq = ++this._drawSeq;
-    const lookup = sourceLookup(time, this._sourceDuration, !!this.spec.loop);
+    const lookup2 = sourceLookup(time, this._sourceDuration, !!this.spec.loop);
     let frame = null;
     try {
-      frame = await this._cache.getFrameAt(lookup);
+      frame = await this._cache.getFrameAt(lookup2);
     } catch (err) {
       console.warn("pixi-effects: awaitFrameAt failed at", time, "s \u2014", err);
       return;
@@ -3793,7 +4680,7 @@ function seedGeometry(state, spec, scope) {
   const initial = spec.initial ?? {};
   for (const k of keys) {
     const v = spec[k] ?? initial[k];
-    if (v !== void 0) state[k] = num(v, scope);
+    if (v !== void 0) state[k] = num2(v, scope);
   }
 }
 var STROKE_CAPS = ["butt", "round", "square"];
@@ -3911,7 +4798,7 @@ function drawEllipseFromState(g, s) {
   const ay = s.anchorY ?? 0.5;
   g.ellipse((0.5 - ax) * 2 * rx, (0.5 - ay) * 2 * ry, rx, ry);
 }
-var DEG4 = Math.PI / 180;
+var DEG5 = Math.PI / 180;
 function drawArcFromState(g, s) {
   const r = s.radius ?? 0;
   const ri = Math.max(0, Math.min(s.innerRadius ?? 0, r));
@@ -3926,7 +4813,7 @@ function drawArcFromState(g, s) {
     }
     endDeg = startDeg + Math.sign(endDeg - startDeg) * 359.999;
   }
-  const a0 = startDeg * DEG4, a1 = endDeg * DEG4;
+  const a0 = startDeg * DEG5, a1 = endDeg * DEG5;
   const ccw = a1 < a0;
   if (filled) g.moveTo(r * Math.cos(a0), r * Math.sin(a0));
   g.arc(0, 0, r, a0, a1, ccw);
@@ -3940,10 +4827,10 @@ function drawArcFromState(g, s) {
   g.closePath();
 }
 function makeLineDraw(spec, scope) {
-  const fx = num(spec.from[0], scope);
-  const fy = num(spec.from[1], scope);
-  const tx = num(spec.to[0], scope);
-  const ty = num(spec.to[1], scope);
+  const fx = num2(spec.from[0], scope);
+  const fy = num2(spec.from[1], scope);
+  const tx = num2(spec.to[0], scope);
+  const ty = num2(spec.to[1], scope);
   return (g) => {
     g.moveTo(fx, fy);
     g.lineTo(tx, ty);
@@ -3953,7 +4840,7 @@ function makePolygonDraw(spec, scope) {
   if (spec.points.length === 0) return () => {
   };
   const flat = [];
-  for (const [x, y] of spec.points) flat.push(num(x, scope), num(y, scope));
+  for (const [x, y] of spec.points) flat.push(num2(x, scope), num2(y, scope));
   const closed = !spec.open;
   return (g) => {
     g.poly(flat, closed);
@@ -4019,12 +4906,12 @@ function makeOutline(spec, scope, s, morph) {
         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 }];
+      const lines = [{ pts: [num2(spec.from[0], scope), num2(spec.from[1], scope), num2(spec.to[0], scope), num2(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));
+      for (const [x, y] of spec.points) pts.push(num2(x, scope), num2(y, scope));
       const lines = pts.length >= 4 ? [{ pts, closed: !spec.open }] : [];
       return () => lines;
     }
@@ -4052,7 +4939,7 @@ function bindLiveKeyframes(timeline, state, liveKeys, keyframes, parentDuration,
           const live2 = state;
           revertibleSet(timeline, at, () => live2[k], (v2) => {
             live2[k] = v2;
-          }, resolved);
+          }, resolved, [live2, k]);
         }
       }
     }
@@ -4096,7 +4983,7 @@ function tweenLiveKey(timeline, state, key, fromValue, toValue, duration, ease,
     }
   }
 }
-function num(v, scope) {
+function num2(v, scope) {
   if (typeof v === "number") return v;
   if (isExpr(v)) return evaluateExpr(v, scope);
   const parsed = parseFloat(v);
@@ -4104,7 +4991,7 @@ function num(v, scope) {
 }
 function numOrZero(v, scope) {
   if (typeof v === "number") return v;
-  if (typeof v === "string") return num(v, scope);
+  if (typeof v === "string") return num2(v, scope);
   return 0;
 }
 
@@ -4153,13 +5040,13 @@ var SHADER_BUILTINS = ["iResolution", "iTime", "iFrame"];
 var SHADER_MISSING = ["iMouse", "iChannel0", "iChannel1", "iChannel2", "iChannel3", "iDate", "iTimeDelta", "iSampleRate"];
 var IDENT = /^[A-Za-z_][A-Za-z0-9_]*$/;
 var HEX = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
-var RESERVED = new Set(`attribute const uniform varying break continue do for while if else in out inout float int void bool true false discard return
+var RESERVED2 = new Set(`attribute const uniform varying break continue do for while if else in out inout float int void bool true false discard return
   mat2 mat3 mat4 mat2x2 mat2x3 mat2x4 mat3x2 mat3x3 mat3x4 mat4x2 mat4x3 mat4x4 vec2 vec3 vec4 ivec2 ivec3 ivec4 bvec2 bvec3 bvec4 uvec2 uvec3 uvec4 uint
   sampler2D sampler3D samplerCube sampler2DShadow samplerCubeShadow sampler2DArray sampler2DArrayShadow isampler2D isampler3D isamplerCube isampler2DArray
   usampler2D usampler3D usamplerCube usampler2DArray struct layout centroid flat smooth precision invariant highp mediump lowp
   sample patch subroutine common partition active asm class union enum typedef template this resource goto inline noinline public static extern external
   interface long short double half fixed unsigned superp input output hvec2 hvec3 hvec4 fvec2 fvec3 fvec4 dvec2 dvec3 dvec4 filter sizeof cast namespace using`.split(/\s+/));
-var isIdent = (name) => IDENT.test(name) && !name.startsWith("gl_") && !name.includes("__") && !RESERVED.has(name) && !SHADER_BUILTINS.includes(name);
+var isIdent = (name) => IDENT.test(name) && !name.startsWith("gl_") && !name.includes("__") && !RESERVED2.has(name) && !SHADER_BUILTINS.includes(name);
 function uniformType(v) {
   if (typeof v === "number") return Number.isFinite(v) ? "float" : null;
   if (typeof v === "string") return HEX.test(v) ? "vec3" : null;
@@ -4497,7 +5384,7 @@ function resolveDim(v, scope) {
 var _CompositionSequence = null;
 async function getCompositionSequence() {
   if (!_CompositionSequence) {
-    _CompositionSequence = (await import('./Composition-H4QA24MV.js')).CompositionSequence;
+    _CompositionSequence = (await import('./Composition-4TYDRRRY.js')).CompositionSequence;
   }
   return _CompositionSequence;
 }
@@ -4539,6 +5426,6 @@ async function buildSequenceTree(specs, parent, root) {
   return out;
 }
 
-export { CameraSequence, DEFAULT_FOV, DEG2 as DEG, FALLOFFS, LIGHT_KINDS, LIGHT_PROPS, LightSequence, MANY_BLURRED, MAX_BLUR, MAX_CASTERS, MAX_LIGHTS, MIN_BLUR, NEAR, NullSequence, SHADOW_TAPS, Sequence, bindClock, blurRadius, buildScope, buildSequenceTree, cameraBasis, checkEase, clockTable, contentLength, ensureFilterLibrary, evaluateExpr, flattenSvgPath, focusProblems, homeCamera, homeDistance, layerInitialZ, layerToWorld, lightLevel, noise, packLights, projectLayer, projectPoint, rand, random, registerSequenceType, remapOf, resolveAt, timeRemapOf };
-//# sourceMappingURL=chunk-X3HB4DSR.js.map
-//# sourceMappingURL=chunk-X3HB4DSR.js.map
+export { CameraSequence, DEFAULT_FOV, DEG3 as DEG, FALLOFFS, LIGHT_KINDS, LIGHT_PROPS, LightSequence, MANY_BLURRED, MAX_BLUR, MAX_CASTERS, MAX_LIGHTS, MIN_BLUR, NEAR, NullSequence, SHADOW_TAPS, Sequence, bindClock, blurRadius, buildScope, buildSequenceTree, cameraBasis, checkEase, clockTable, contentLength, createTimeline, ensureFilterLibrary, evaluateExpr, flattenSvgPath, focusProblems, homeCamera, homeDistance, layerInitialZ, layerToWorld, lengthen, lightLevel, noise, packLights, parseEase, projectLayer, projectPoint, rand, random, registerSequenceType, remapOf, resolveAt, timeRemapOf };
+//# sourceMappingURL=chunk-TGJACVLD.js.map
+//# sourceMappingURL=chunk-TGJACVLD.js.map