pixi-effects 0.2.0 → 0.4.0

package/dist/{chunk-VJCDG6YG.js → chunk-ZQX7WIYL.js}

@@ -1,4 +1,4 @@
-import { Rectangle, Container, Graphics, Assets, Texture, Sprite, Text, Filter, GlProgram, defaultFilterVert, GpuProgram, UniformGroup, Color, GraphicsPath } from 'pixi.js';
+import { Rectangle, Container, Graphics, Assets, Texture, Sprite, Text, Filter, GlProgram, defaultFilterVert, GpuProgram, UniformGroup, FillGradient, Color, GraphicsPath } from 'pixi.js';
 import { gsap } from 'gsap';
 
 // src/sequences/Base.ts
@@ -244,6 +244,23 @@ function looksLikeColorString(s) {
 }
 
 // src/core/Timeline.ts
+function loopVars(kf) {
+  const out = {};
+  let repeat = 0;
+  if (kf.repeat !== void 0) {
+    if (Number.isFinite(kf.repeat) && kf.repeat >= 0) {
+      repeat = Math.floor(kf.repeat);
+      out.repeat = repeat;
+    } else {
+      console.warn(`pixi-effects: keyframe repeat ${String(kf.repeat)} ignored \u2014 repeat must be a finite count >= 0 (the timeline needs a fixed length; for endless motion repeat many times).`);
+    }
+  }
+  if (repeat > 0) {
+    if (kf.yoyo !== void 0) out.yoyo = kf.yoyo;
+    if (kf.repeatDelay !== void 0 && kf.repeatDelay > 0) out.repeatDelay = kf.repeatDelay;
+  }
+  return out;
+}
 function resolveAt(at, duration) {
   if (at === void 0 || at === null) return 0;
   return at < 0 ? duration + at : at;
@@ -261,7 +278,7 @@ function normalizeKeyframe(kf, parentDuration) {
   else if (hasFrom) kind = "from";
   else if (hasTo) kind = "to";
   else kind = "to";
-  return { at, duration, ease, kind, set: kf.set, from: kf.from, to: kf.to };
+  return { at, duration, ease, loop: loopVars(kf), kind, set: kf.set, from: kf.from, to: kf.to };
 }
 function partitionProps(props) {
   const ownProps = {};
@@ -371,27 +388,27 @@ function applyKeyframes(timeline, target, keyframes, parentDuration, scope, skip
       const resolved = normalizeProps(kf.to, scope, { skipKeys });
       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 }, at);
+        timeline.to(r.target, { [r.prop]: r.value, duration: kf.duration, ease: kf.ease, ...kf.loop }, at);
       const { ownProps, filterProps } = partitionProps(rest);
       if (Object.keys(ownProps).length > 0)
-        timeline.to(target, { ...pixiwrap(ownProps), duration: kf.duration, ease: kf.ease }, at);
+        timeline.to(target, { ...pixiwrap(ownProps), duration: kf.duration, ease: kf.ease, ...kf.loop }, at);
       for (const [name, props] of Object.entries(filterProps)) {
         const f = findFilter(target, name);
         if (!f) continue;
-        timeline.to(f, { ...props, duration: kf.duration, ease: kf.ease }, at);
+        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 { rest, routed } = splitRouted(resolved, routers);
       for (const r of routed)
-        timeline.from(r.target, { [r.prop]: r.value, duration: kf.duration, ease: kf.ease }, at);
+        timeline.from(r.target, { [r.prop]: r.value, duration: kf.duration, ease: kf.ease, ...kf.loop }, at);
       const { ownProps, filterProps } = partitionProps(rest);
       if (Object.keys(ownProps).length > 0)
-        timeline.from(target, { ...pixiwrap(ownProps), duration: kf.duration, ease: kf.ease }, at);
+        timeline.from(target, { ...pixiwrap(ownProps), duration: kf.duration, ease: kf.ease, ...kf.loop }, at);
       for (const [name, props] of Object.entries(filterProps)) {
         const f = findFilter(target, name);
         if (!f) continue;
-        timeline.from(f, { ...props, duration: kf.duration, ease: kf.ease }, at);
+        timeline.from(f, { ...props, duration: kf.duration, ease: kf.ease, ...kf.loop }, at);
       }
     } else {
       const fromResolved = normalizeProps(kf.from, scope, { skipKeys });
@@ -406,15 +423,15 @@ function applyKeyframes(timeline, target, keyframes, parentDuration, scope, skip
           timeline.fromTo(
             r.target,
             { [r.prop]: f.value },
-            { [r.prop]: r.value, duration: kf.duration, ease: kf.ease },
+            { [r.prop]: r.value, duration: kf.duration, ease: kf.ease, ...kf.loop },
             at
           );
         } else {
-          timeline.to(r.target, { [r.prop]: r.value, duration: kf.duration, ease: kf.ease }, at);
+          timeline.to(r.target, { [r.prop]: r.value, duration: kf.duration, ease: kf.ease, ...kf.loop }, at);
         }
       }
       for (const f of fromByKey.values())
-        timeline.from(f.target, { [f.prop]: f.value, duration: kf.duration, ease: kf.ease }, at);
+        timeline.from(f.target, { [f.prop]: f.value, duration: kf.duration, ease: kf.ease, ...kf.loop }, at);
       const fromSplit = partitionProps(fromRouted.rest);
       const toSplit = partitionProps(toRouted.rest);
       const ownKeys = /* @__PURE__ */ new Set([...Object.keys(fromSplit.ownProps), ...Object.keys(toSplit.ownProps)]);
@@ -422,7 +439,7 @@ function applyKeyframes(timeline, target, keyframes, parentDuration, scope, skip
         timeline.fromTo(
           target,
           { ...pixiwrap(fromSplit.ownProps) },
-          { ...pixiwrap(toSplit.ownProps), duration: kf.duration, ease: kf.ease },
+          { ...pixiwrap(toSplit.ownProps), duration: kf.duration, ease: kf.ease, ...kf.loop },
           at
         );
       }
@@ -436,7 +453,7 @@ function applyKeyframes(timeline, target, keyframes, parentDuration, scope, skip
         timeline.fromTo(
           f,
           { ...fromSplit.filterProps[name] ?? {} },
-          { ...toSplit.filterProps[name] ?? {}, duration: kf.duration, ease: kf.ease },
+          { ...toSplit.filterProps[name] ?? {}, duration: kf.duration, ease: kf.ease, ...kf.loop },
           at
         );
       }
@@ -761,9 +778,9 @@ var Sequence = class {
     if (!this.target) return;
     const scope = this.scope();
     const routers = this.pathRouters();
-    applyInitial(this.target, this.spec.initial, scope, [], routers);
-    applyKeyframes(timeline, this.target, this.spec.keyframes, this.duration, scope, [], offset, routers);
     const startTime = offset + this.at;
+    applyInitial(this.target, this.spec.initial, scope, [], routers);
+    applyKeyframes(timeline, this.target, this.spec.keyframes, this.duration, scope, [], startTime, routers);
     const endTime = startTime + this.duration;
     this.absoluteStart = startTime;
     this.target.renderable = startTime <= 0;
@@ -779,6 +796,14 @@ var Sequence = class {
    */
   updateSpace(_t, _host) {
   }
+  /**
+   * Runs once per rendered frame, after the timeline seek and before the cull. Layers whose drawn
+   * geometry follows tweened state (shapes) redraw here, so the culler measures where the layer is NOW
+   * and not where it was drawn at the previous render.
+   */
+  syncFrame() {
+    this.maskSequence?.syncFrame();
+  }
   destroy() {
     this.maskSequence?.destroy();
     this.maskSequence = null;
@@ -787,6 +812,51 @@ var Sequence = class {
   }
 };
 
+// src/space/specKeys.ts
+function collectPropKeys(spec) {
+  const out = /* @__PURE__ */ new Set();
+  for (const k of Object.keys(spec.initial ?? {})) out.add(k);
+  for (const kf of spec.keyframes ?? []) {
+    for (const bag of [kf.set, kf.to, kf.from]) {
+      for (const k of Object.keys(bag ?? {})) out.add(k);
+    }
+  }
+  return out;
+}
+
+// src/core/lint.ts
+var defaultWarn = (m) => console.warn(m);
+function describeLayer(spec) {
+  return spec.name ? `layer "${spec.name}"` : `unnamed ${spec.type} layer`;
+}
+function lintTiming(spec, parentDuration, warn = defaultWarn) {
+  const who = describeLayer(spec);
+  const at = spec.at ?? 0;
+  if (at >= parentDuration) {
+    warn(`pixi-effects: ${who} starts at ${at}s, after its composition ends (${parentDuration}s), so it is never visible`);
+  }
+  const duration = spec.duration ?? parentDuration;
+  (spec.keyframes ?? []).forEach((kf, i) => {
+    const kat = kf.at ?? 0;
+    if (kat >= duration) {
+      warn(
+        `pixi-effects: ${who}: keyframes[${i}] starts at ${kat}s, after the layer ends (duration ${duration}s), so it never plays. Keyframe \`at\` is measured from the start of this layer, not from the start of the composition.`,
+        "late-keyframe"
+      );
+    }
+  });
+}
+function summarizeWarnings(messages, shown = 3) {
+  if (messages.length <= shown) return messages;
+  return [...messages.slice(0, shown), `pixi-effects: ${messages.length - shown} more layers with the same problem (the same loop or helper is probably building them): fix the ones above and these go away.`];
+}
+function lintText(spec, warn = defaultWarn) {
+  if (spec.type !== "text") return;
+  if (collectPropKeys(spec).has("value") && !(spec.text ?? "").includes("{value}")) {
+    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').`);
+  }
+}
+
 // src/space/math.ts
 var DEG = Math.PI / 180;
 var DEFAULT_FOV = 40;
@@ -898,20 +968,6 @@ function projectLayer(t, frame, b) {
   const origin = projectPoint(b, { x: t.x, y: t.y, z: t.z });
   return { corners, depth: origin.depth, visible };
 }
-
-// src/space/specKeys.ts
-function collectPropKeys(spec) {
-  const out = /* @__PURE__ */ new Set();
-  for (const k of Object.keys(spec.initial ?? {})) out.add(k);
-  for (const kf of spec.keyframes ?? []) {
-    for (const bag of [kf.set, kf.to, kf.from]) {
-      for (const k of Object.keys(bag ?? {})) out.add(k);
-    }
-  }
-  return out;
-}
-
-// src/space/CameraSequence.ts
 var CameraSequence = class extends Sequence {
   /** True when `z` is never specified anywhere: z then follows `fov`. */
   autoZ = true;
@@ -968,6 +1024,27 @@ var CameraSequence = 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);
+}
+
 // src/expr/colorInterp.ts
 function buildColorInterp(from, to, space) {
   const fromRGBA = parseToRGBA(from);
@@ -1094,7 +1171,7 @@ function shortestHueDelta(from, to) {
 }
 
 // src/expr/colorTween.ts
-function tweenColor(timeline, target, key, fromValue, toValue, duration, ease, at, colorSpace, onUpdate) {
+function tweenColor(timeline, target, key, fromValue, toValue, duration, ease, at, colorSpace, onUpdate, loop = {}) {
   let interp = null;
   const proxy = { p: 0 };
   timeline.fromTo(
@@ -1104,6 +1181,7 @@ function tweenColor(timeline, target, key, fromValue, toValue, duration, ease, a
       p: 1,
       duration,
       ease,
+      ...loop,
       onStart: () => {
         const start = fromValue !== void 0 ? fromValue : target[key];
         if (start === void 0) return;
@@ -1142,23 +1220,25 @@ var ImageSequence = class extends Sequence {
       return;
     }
     const scope = this.scope();
+    const startTime = offset + this.at;
     const initial = stripKeys(this.spec.initial, ["tint"]);
     const keyframes = this.spec.keyframes ? this.spec.keyframes.map((kf) => stripKeysInKeyframe(kf, ["tint"])) : void 0;
     applyInitial(this.target, initial, scope);
-    applyKeyframes(timeline, this.target, keyframes, this.duration, scope, [], offset);
+    applyKeyframes(timeline, this.target, keyframes, this.duration, scope, [], startTime);
     const initTint = this.spec.initial?.tint;
     if (initTint !== void 0) this.target.tint = initTint;
     for (const kf of this.spec.keyframes ?? []) {
-      const at = offset + resolveAt(kf.at, this.duration);
+      const at = startTime + resolveAt(kf.at, this.duration);
       const duration = kf.duration ?? 0;
       const ease = kf.ease ?? "none";
       const fromTint = kf.from?.tint;
       const toTint = kf.to?.tint;
       const setTint = kf.set?.tint;
       if (setTint !== void 0) {
-        timeline.call(() => {
-          this.target.tint = setTint;
-        }, [], at);
+        const sprite = this.target;
+        revertibleSet(timeline, at, () => sprite.tint, (c) => {
+          sprite.tint = c;
+        }, setTint);
       }
       if (toTint !== void 0) {
         tweenColor(
@@ -1170,11 +1250,12 @@ var ImageSequence = class extends Sequence {
           duration,
           ease,
           at,
-          colorSpace
+          colorSpace,
+          void 0,
+          loopVars(kf)
         );
       }
     }
-    const startTime = offset + this.at;
     this.absoluteStart = startTime;
     const endTime = startTime + this.duration;
     this.target.renderable = startTime <= 0;
@@ -1204,8 +1285,40 @@ function stripKeysInKeyframe(kf, keys) {
     from: stripKeys(kf.from, keys)
   };
 }
-var STYLE_OPAQUE_KEYS = ["fontFamily", "fill", "align", "fontStyle", "fontWeight"];
+var STYLE_OPAQUE_KEYS = [
+  "fontFamily",
+  "fill",
+  "align",
+  "fontStyle",
+  "fontWeight",
+  "fontVariant",
+  "textBaseline",
+  "whiteSpace",
+  "lineJoin",
+  "join",
+  "cap",
+  "color",
+  "stroke"
+];
+function formatValue(v, f) {
+  const fixed = v.toFixed(Math.max(0, Math.floor(f?.decimals ?? 0)));
+  if (!f?.grouping) return fixed;
+  const [int, frac] = fixed.split(".");
+  return int.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (frac !== void 0 ? "." + frac : "");
+}
 var TextSequence = class extends Sequence {
+  /** Current number for the `{value}` placeholder (tweened by `value` keyframes). */
+  _value = { value: 0 };
+  _lastText = "";
+  /** Rewrite the displayed string from the template and the current `value`. */
+  _refreshText() {
+    const template = this.spec.text ?? "";
+    if (!template.includes("{value}")) return;
+    const next = template.split("{value}").join(formatValue(this._value.value, this.spec.format));
+    if (next === this._lastText) return;
+    this._lastText = next;
+    this.target.text = next;
+  }
   async build() {
     const baseStyle = {
       fontFamily: "Arial",
@@ -1235,15 +1348,25 @@ var TextSequence = class extends Sequence {
       for (const k of Object.keys(resolved)) {
         text.style[k] = resolved[k];
       }
+      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());
+    this._refreshText();
+    if (this._lastText !== "") {
+      this.intrinsicWidth = text.width;
+      this.intrinsicHeight = text.height;
     }
     this.buildFilters();
   }
   bindTimeline(timeline, offset = 0) {
     if (!this.target) return;
     const colorSpace = this.spec.colorSpace ?? "rgb";
-    const stripped = stripFill(this.spec);
+    const stripped = stripKeys2(this.spec, ["fill", "value"]);
     runSuperWithStrippedSpec(this, stripped, timeline, offset);
-    bindFillKeyframes(timeline, this.target, this.spec.keyframes ?? [], this.duration, offset, colorSpace);
+    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());
   }
 };
 function runSuperWithStrippedSpec(inst, strippedSpec, timeline, offset) {
@@ -1255,25 +1378,61 @@ function runSuperWithStrippedSpec(inst, strippedSpec, timeline, offset) {
     inst.spec = originalSpec;
   }
 }
-function stripFill(spec) {
+function stripKeys2(spec, keys) {
   return {
     ...spec,
-    initial: stripKey(spec.initial, "fill"),
+    initial: stripProps(spec.initial, keys),
     keyframes: spec.keyframes ? spec.keyframes.map((kf) => ({
       ...kf,
-      set: stripKey(kf.set, "fill"),
-      to: stripKey(kf.to, "fill"),
-      from: stripKey(kf.from, "fill")
+      set: stripProps(kf.set, keys),
+      to: stripProps(kf.to, keys),
+      from: stripProps(kf.from, keys)
     })) : void 0
   };
 }
-function stripKey(props, key) {
+function stripProps(props, keys) {
   if (!props) return props;
-  if (!(key in props)) return props;
+  if (!keys.some((k) => k in props)) return props;
   const out = {};
-  for (const k of Object.keys(props)) if (k !== key) out[k] = props[k];
+  for (const k of Object.keys(props)) if (!keys.includes(k)) out[k] = props[k];
   return out;
 }
+function resolveNumber(v, scope) {
+  if (typeof v === "number") return v;
+  const out = normalizeProps({ v }, scope).v;
+  return typeof out === "number" ? out : Number(out) || 0;
+}
+function bindValueKeyframes(timeline, state, 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;
+    if (setV === void 0 && fromV === void 0 && toV === void 0) continue;
+    const at = origin + resolveAt(kf.at, parentDuration);
+    const duration = kf.duration ?? 0;
+    const ease = kf.ease ?? "none";
+    const loop = loopVars(kf);
+    if (setV !== void 0) {
+      const v = resolveNumber(setV, scope);
+      revertibleSet(timeline, at, () => state.value, (n) => {
+        state.value = 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 },
+        at
+      );
+    } else if (toV !== void 0) {
+      timeline.to(state, { value: 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);
+    }
+  }
+}
 function bindFillKeyframes(timeline, text, keyframes, parentDuration, offset, colorSpace) {
   const state = { fill: text.style.fill };
   const writeFill = () => {
@@ -1287,10 +1446,10 @@ function bindFillKeyframes(timeline, text, keyframes, parentDuration, offset, co
     const fromFill = pickFill(kf.from);
     const toFill = pickFill(kf.to);
     if (setFill !== void 0) {
-      timeline.call(() => {
-        state.fill = setFill;
+      revertibleSet(timeline, at, () => state.fill, (c) => {
+        state.fill = c;
         writeFill();
-      }, [], at);
+      }, setFill);
     }
     if (toFill !== void 0) {
       tweenColor(
@@ -1303,7 +1462,8 @@ function bindFillKeyframes(timeline, text, keyframes, parentDuration, offset, co
         ease,
         at,
         colorSpace,
-        writeFill
+        writeFill,
+        loopVars(kf)
       );
     }
   }
@@ -1320,7 +1480,13 @@ var AudioSequence = class extends Sequence {
     const data = await Assets.get(this.spec.asset);
     this._audioBuffer = data.audioBuffer;
     if (this.duration === void 0) {
-      this.duration = this.spec.duration ?? data.duration ?? this.root.duration;
+      const rest = Math.max(0, (this.parent?.duration ?? this.root.duration) - this.at);
+      this.duration = this.spec.duration ?? (this.spec.loop ? rest : data.duration) ?? this.root.duration;
+    }
+    if (!this.spec.loop && data.duration !== void 0 && this.duration > data.duration + 0.05) {
+      console.warn(
+        `pixi-effects: ${describeLayer(this.spec)}: audio asset "${this.spec.asset}" is ${data.duration.toFixed(1)}s but the layer lasts ${this.duration.toFixed(1)}s, so it goes silent after ${data.duration.toFixed(1)}s. Add loop: true, or shorten the layer's duration.`
+      );
     }
     this.target = null;
   }
@@ -1331,21 +1497,32 @@ var AudioSequence = class extends Sequence {
     const initialVolume = this.spec.volume ?? 1;
     const volumeKeyframes = [];
     const dur = this.duration;
-    for (const raw of this.spec.keyframes ?? []) {
-      const kf = normalizeKeyframe(raw, dur);
-      const set = kf.set;
-      const to = kf.to;
-      const from = kf.from;
-      if (kf.kind === "set" && set && "volume" in set) {
-        volumeKeyframes.push({ time: baseTime + this.at + kf.at, value: set.volume });
-      } else if (kf.kind === "to" && to && "volume" in to) {
-        volumeKeyframes.push({ time: baseTime + this.at + kf.at + kf.duration, value: to.volume });
-      } else if (kf.kind === "fromTo" && to && "volume" in to) {
-        volumeKeyframes.push({ time: baseTime + this.at + kf.at, value: from?.volume ?? initialVolume });
-        volumeKeyframes.push({ time: baseTime + this.at + kf.at + kf.duration, value: to.volume });
-      } else if (kf.kind === "from" && from && "volume" in from) {
-        volumeKeyframes.push({ time: baseTime + this.at + kf.at, value: from.volume });
-        volumeKeyframes.push({ time: baseTime + this.at + kf.at + kf.duration, value: initialVolume });
+    const t0 = baseTime + this.at;
+    const keyframes = (this.spec.keyframes ?? []).map((raw) => normalizeKeyframe(raw, dur)).filter((kf) => [kf.set, kf.to, kf.from].some((p) => p && "volume" in p)).sort((x, y) => x.at - y.at);
+    let current = initialVolume;
+    const point = (time, value) => {
+      volumeKeyframes.push({ time, value });
+    };
+    for (const kf of keyframes) {
+      const start = t0 + kf.at;
+      const end = start + kf.duration;
+      const set = kf.set?.volume;
+      const to = kf.to?.volume;
+      const from = kf.from?.volume;
+      point(start, current);
+      if (kf.kind === "set" && set !== void 0) {
+        point(start, set);
+        current = set;
+      } else if (kf.kind === "to" && to !== void 0) {
+        point(end, to);
+        current = to;
+      } else if (kf.kind === "fromTo" && to !== void 0) {
+        point(start, from ?? current);
+        point(end, to);
+        current = to;
+      } else if (kf.kind === "from" && from !== void 0) {
+        point(start, from);
+        point(end, current);
       }
     }
     out.push({
@@ -1491,14 +1668,15 @@ var VideoSequence = class extends Sequence {
     });
     this.buildFilters();
   }
-  bindTimeline(timeline) {
-    super.bindTimeline(timeline);
+  bindTimeline(timeline, offset = 0) {
+    super.bindTimeline(timeline, offset);
     const playDuration = this.spec.loop ? this.duration : Math.min(this.duration, this._sourceDuration);
     timeline.fromTo(
       this.target,
       { currentTime: 0 },
       { currentTime: playDuration, duration: playDuration, ease: "none" },
-      this.at
+      offset + this.at
+      // offset = start of the enclosing composition(s); dropping it misplaced videos inside nested compositions
     );
   }
   collectAudio(out, baseTime) {
@@ -1539,6 +1717,55 @@ var VideoSequence = class extends Sequence {
     super.destroy();
   }
 };
+
+// src/sequences/gradient.ts
+function cssColor(c) {
+  return typeof c === "number" ? "#" + c.toString(16).padStart(6, "0") : c;
+}
+function normalizedStops(g) {
+  const stops = g.stops ?? [];
+  if (stops.length < 2) throw new Error('pixi-effects: fillGradient needs at least two colour stops, e.g. stops: [[0, "#000"], [1, "#fff"]]');
+  return stops.map((s) => Array.isArray(s) ? { offset: s[0], color: s[1] } : { offset: s.offset, color: s.color });
+}
+function gradientOptions(g) {
+  const colorStops = normalizedStops(g);
+  const a = (g.angle ?? 90) * Math.PI / 180;
+  const dx = Math.cos(a), dy = Math.sin(a);
+  const h = (Math.abs(dx) + Math.abs(dy)) / 2;
+  return {
+    type: "linear",
+    start: { x: 0.5 - dx * h, y: 0.5 - dy * h },
+    end: { x: 0.5 + dx * h, y: 0.5 + dy * h },
+    colorStops,
+    textureSpace: "local"
+  };
+}
+function paintRadial(ctx, size, g) {
+  const stops = normalizedStops(g);
+  const [cx, cy] = g.center ?? [0.5, 0.5];
+  const grad = ctx.createRadialGradient(cx * size, cy * size, (g.innerRadius ?? 0) * size, cx * size, cy * size, (g.radius ?? 0.5) * size);
+  for (const s of stops) grad.addColorStop(s.offset, cssColor(s.color));
+  ctx.fillStyle = grad;
+  ctx.fillRect(0, 0, size, size);
+}
+
+// src/sequences/gradientFill.ts
+var RADIAL_SIZE = 256;
+function makeGradientFill(g) {
+  if (g.type === "radial") {
+    const canvas = document.createElement("canvas");
+    canvas.width = RADIAL_SIZE;
+    canvas.height = RADIAL_SIZE;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      paintRadial(ctx, RADIAL_SIZE, g);
+      return { texture: Texture.from(canvas), textureSpace: "local" };
+    }
+  }
+  return new FillGradient(gradientOptions(g));
+}
+
+// src/sequences/Shape.ts
 var STYLE_KEYS = ["fillColor", "fillAlpha", "strokeColor", "strokeAlpha", "strokeWidth"];
 var COLOR_KEYS = /* @__PURE__ */ new Set(["fillColor", "strokeColor"]);
 var GEOMETRY_KEYS_BY_SHAPE = {
@@ -1576,6 +1803,8 @@ var ShapeSequence = class extends Sequence {
     for (const k of geomKeys) this._liveKeys.add(k);
     seedGeometry(this._state, this.spec, scope);
     seedStyle(this._state, this.spec.initial ?? {}, scope);
+    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._drawGeometry(graphics);
     applyState(graphics, this._state);
@@ -1583,25 +1812,50 @@ var ShapeSequence = class extends Sequence {
     this.intrinsicWidth = bounds.width;
     this.intrinsicHeight = bounds.height;
     if (!ANCHORED_SHAPES.has(this.spec.shape)) {
-      graphics.pivot.set(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);
+      const cx = bounds.x + bounds.width / 2;
+      const cy = bounds.y + bounds.height / 2;
+      graphics.pivot.set(cx, cy);
+      const init = this.spec.initial ?? {};
+      if (init.x === void 0) graphics.x = cx;
+      if (init.y === void 0) graphics.y = cy;
     }
     graphics.onRender = () => {
-      graphics.clear();
-      this._drawGeometry(graphics);
-      applyState(graphics, this._state);
+      if (this._fresh) {
+        this._fresh = false;
+        return;
+      }
+      this._redraw();
     };
     this.buildFilters();
   }
+  _fresh = false;
+  _redraw() {
+    const graphics = this.target;
+    graphics.clear();
+    this._drawGeometry(graphics);
+    applyState(graphics, this._state);
+  }
+  /**
+   * Draw from the tweened `_state` before the culler runs. The culler measures the geometry as last
+   * drawn; a layer drawn only inside `onRender` is culled on stale bounds (a rect growing from
+   * `width: 0` at the left edge was skipped after a jump seek, and one frame late in playback).
+   */
+  syncFrame() {
+    super.syncFrame();
+    if (!this.target?.renderable) return;
+    this._redraw();
+    this._fresh = true;
+  }
   bindTimeline(timeline, offset = 0) {
     if (!this.target) return;
     const scope = this.scope();
-    const initial = stripLive(this.spec.initial, this._liveKeys);
+    const startTime = offset + this.at;
+    const initial = stripLive(stripGradient(this.spec.initial), this._liveKeys);
     const keyframes = this.spec.keyframes ? this.spec.keyframes.map((kf) => stripLiveKeyframe(kf, this._liveKeys)) : void 0;
     applyInitial(this.target, initial, scope);
-    applyKeyframes(timeline, this.target, keyframes, this.duration, scope, [], offset);
+    applyKeyframes(timeline, this.target, keyframes, this.duration, scope, [], startTime);
     const colorSpace = this.spec.colorSpace ?? "rgb";
-    bindLiveKeyframes(timeline, this._state, this._liveKeys, this.spec.keyframes ?? [], this.duration, scope, offset, colorSpace);
-    const startTime = offset + this.at;
+    bindLiveKeyframes(timeline, this._state, this._liveKeys, this.spec.keyframes ?? [], this.duration, scope, startTime, colorSpace);
     this.absoluteStart = startTime;
     const endTime = startTime + this.duration;
     this.target.renderable = startTime <= 0;
@@ -1611,8 +1865,9 @@ var ShapeSequence = class extends Sequence {
 };
 function seedGeometry(state, spec, scope) {
   const keys = GEOMETRY_KEYS_BY_SHAPE[spec.shape];
+  const initial = spec.initial ?? {};
   for (const k of keys) {
-    const v = spec[k];
+    const v = spec[k] ?? initial[k];
     if (v !== void 0) state[k] = num(v, scope);
   }
 }
@@ -1623,6 +1878,11 @@ function seedStyle(state, initial, scope) {
     state[k] = COLOR_KEYS.has(k) ? v : numOrZero(v, scope);
   }
 }
+function stripGradient(props) {
+  if (!props || !("fillGradient" in props)) return props;
+  const { fillGradient: _drop, ...rest } = props;
+  return rest;
+}
 function stripLive(props, liveKeys) {
   if (!props) return props;
   const out = {};
@@ -1661,7 +1921,9 @@ function resolveLiveValue(key, value, scope) {
   return numOrZero(value, scope);
 }
 function applyState(g, s) {
-  if (s.fillColor !== void 0) {
+  if (s.fillStyle) {
+    g.fill(s.fillStyle);
+  } else if (s.fillColor !== void 0) {
     g.fill({ color: s.fillColor, alpha: s.fillAlpha });
   }
   if (s.strokeColor !== void 0 && s.strokeWidth > 0) {
@@ -1741,14 +2003,16 @@ function bindLiveKeyframes(timeline, state, liveKeys, keyframes, parentDuration,
     const at = offset + resolveAt(kf.at, parentDuration);
     const duration = kf.duration ?? 0;
     const ease = kf.ease ?? "none";
+    const loop = loopVars(kf);
     if (kf.set) {
       const live = pickLive(kf.set, liveKeys);
       if (live) {
         for (const [k, v] of Object.entries(live)) {
           const resolved = resolveLiveValue(k, v, scope);
-          timeline.call(() => {
-            state[k] = resolved;
-          }, [], at);
+          const live2 = state;
+          revertibleSet(timeline, at, () => live2[k], (v2) => {
+            live2[k] = v2;
+          }, resolved);
         }
       }
     }
@@ -1764,11 +2028,11 @@ function bindLiveKeyframes(timeline, state, liveKeys, keyframes, parentDuration,
       const toRaw = toLive?.[key];
       const fromValue = fromRaw !== void 0 ? resolveLiveValue(key, fromRaw, scope) : void 0;
       const toValue = toRaw !== void 0 ? resolveLiveValue(key, toRaw, scope) : void 0;
-      tweenLiveKey(timeline, state, key, fromValue, toValue, duration, ease, at, colorSpace);
+      tweenLiveKey(timeline, state, key, fromValue, toValue, duration, ease, at, colorSpace, loop);
     }
   }
 }
-function tweenLiveKey(timeline, state, key, fromValue, toValue, duration, ease, at, colorSpace) {
+function tweenLiveKey(timeline, state, key, fromValue, toValue, duration, ease, at, colorSpace, loop) {
   if (COLOR_KEYS.has(key) && toValue !== void 0) {
     tweenColor(
       timeline,
@@ -1779,13 +2043,15 @@ function tweenLiveKey(timeline, state, key, fromValue, toValue, duration, ease,
       duration,
       ease,
       at,
-      colorSpace
+      colorSpace,
+      void 0,
+      loop
     );
   } else if (toValue !== void 0) {
     if (fromValue !== void 0) {
-      timeline.fromTo(state, { [key]: fromValue }, { [key]: toValue, duration, ease }, at);
+      timeline.fromTo(state, { [key]: fromValue }, { [key]: toValue, duration, ease, ...loop }, at);
     } else {
-      timeline.to(state, { [key]: toValue, duration, ease }, at);
+      timeline.to(state, { [key]: toValue, duration, ease, ...loop }, at);
     }
   }
 }
@@ -1805,7 +2071,7 @@ function numOrZero(v, scope) {
 var _CompositionSequence = null;
 async function getCompositionSequence() {
   if (!_CompositionSequence) {
-    _CompositionSequence = (await import('./Composition-IO7ZN32J.js')).CompositionSequence;
+    _CompositionSequence = (await import('./Composition-RGTRZ2JX.js')).CompositionSequence;
   }
   return _CompositionSequence;
 }
@@ -1842,6 +2108,6 @@ async function buildSequenceTree(specs, parent, root) {
   return out;
 }
 
-export { CameraSequence, DEG, Sequence, buildScope, buildSequenceTree, cameraBasis, collectPropKeys, evaluateExpr, homeCamera, projectLayer, registerSequenceType, resolveAt };
-//# sourceMappingURL=chunk-VJCDG6YG.js.map
-//# sourceMappingURL=chunk-VJCDG6YG.js.map
+export { CameraSequence, DEFAULT_FOV, DEG, Sequence, buildScope, buildSequenceTree, cameraBasis, collectPropKeys, describeLayer, evaluateExpr, homeCamera, homeDistance, lintText, lintTiming, projectLayer, registerSequenceType, resolveAt, summarizeWarnings };
+//# sourceMappingURL=chunk-ZQX7WIYL.js.map
+//# sourceMappingURL=chunk-ZQX7WIYL.js.map