pixi-effects 0.18.1 → 0.20.0

package/dist/{chunk-SG3Y66FN.js → chunk-DQHXVNOI.js}

@@ -1,6 +1,6 @@
-import { suggestName } from './chunk-DKGG7WD4.js';
+import { suggestName, warnUnknownOptions } from './chunk-MNM56B3X.js';
 import * as PIXI from 'pixi.js';
-import { Rectangle, Container, GraphicsPath, Graphics, Assets, Texture, Sprite, Text, Filter, GlProgram, defaultFilterVert, GpuProgram, UniformGroup, FillGradient, Color } from 'pixi.js';
+import { Rectangle, Container, GraphicsPath, Graphics, Assets, Texture, Sprite, FillGradient, Text, Filter, GlProgram, defaultFilterVert, GpuProgram, UniformGroup, Color } from 'pixi.js';
 import { gsap } from 'gsap';
 
 // src/expr/random.ts
@@ -37,6 +37,113 @@ function noise(x, seed = 0) {
   const u = f * f * f * (f * (f * 6 - 15) + 10);
   return a + (b - a) * u;
 }
+var SETTLE_TOL = 5e-3;
+var DEFAULTS = { mass: 1, stiffness: 100, damping: 10 };
+function springResponse(t, { mass: m, stiffness: k, damping: c }) {
+  if (t <= 0) return 0;
+  const w0 = Math.sqrt(k / m);
+  const zeta = c / (2 * Math.sqrt(k * m));
+  if (Math.abs(zeta - 1) < 1e-6) return 1 - Math.exp(-w0 * t) * (1 + w0 * t);
+  if (zeta < 1) {
+    const wd = w0 * Math.sqrt(1 - zeta * zeta);
+    return 1 - Math.exp(-zeta * w0 * t) * (Math.cos(wd * t) + zeta * w0 / wd * Math.sin(wd * t));
+  }
+  const s = w0 * Math.sqrt(zeta * zeta - 1);
+  const r1 = -zeta * w0 + s, r2 = -zeta * w0 - s;
+  return 1 - (r2 * Math.exp(r1 * t) - r1 * Math.exp(r2 * t)) / (r2 - r1);
+}
+function complete(p) {
+  return { mass: p.mass ?? DEFAULTS.mass, stiffness: p.stiffness ?? DEFAULTS.stiffness, damping: p.damping ?? DEFAULTS.damping };
+}
+function springDuration(params = {}, tol = SETTLE_TOL) {
+  const p = complete(params);
+  const w0 = Math.sqrt(p.stiffness / p.mass);
+  const zeta = p.damping / (2 * Math.sqrt(p.stiffness * p.mass));
+  const bad = (t) => Math.abs(1 - springResponse(t, p)) > tol;
+  let lo, hi;
+  if (zeta < 1 - 1e-6) {
+    const wd = w0 * Math.sqrt(1 - zeta * zeta);
+    const decay = Math.PI * zeta / Math.sqrt(1 - zeta * zeta);
+    const n = Math.max(1, Math.ceil(Math.log(1 / tol) / decay));
+    lo = (n - 1) * Math.PI / wd;
+    hi = n * Math.PI / wd;
+  } else {
+    lo = 0;
+    hi = 1 / w0;
+    while (bad(hi)) {
+      lo = hi;
+      hi *= 2;
+    }
+  }
+  for (let i = 0; i < 60; i++) {
+    const mid = (lo + hi) / 2;
+    if (bad(mid)) lo = mid;
+    else hi = mid;
+  }
+  return hi;
+}
+function springEase(params = {}) {
+  const sp = complete(params);
+  const T = springDuration(sp);
+  const end = springResponse(T, sp);
+  return (p) => p <= 0 ? 0 : p >= 1 ? 1 : springResponse(p * T, sp) / end;
+}
+var SPRING_PRESETS = {
+  gentle: { mass: 1, stiffness: 100, damping: 15 },
+  // zeta .75, one soft overshoot
+  snappy: { mass: 1, stiffness: 300, damping: 28 },
+  // zeta .81, quick, barely rings
+  bouncy: { mass: 1, stiffness: 170, damping: 10 },
+  // zeta .38
+  wobbly: { mass: 1, stiffness: 120, damping: 6 },
+  // zeta .27, rings several times
+  slow: { mass: 1, stiffness: 60, damping: 18 }
+  // zeta 1.16, no overshoot
+};
+var SPRING_RE = /^spring(?:\.(\w+)|\(([^)]*)\))?$/;
+function springProblem(name) {
+  const m = SPRING_RE.exec(name.trim());
+  if (!m) return 'expected "spring(mass, stiffness, damping)" or "spring.<preset>"';
+  if (m[1] && !SPRING_PRESETS[m[1]]) return `no preset "${m[1]}" (presets: ${Object.keys(SPRING_PRESETS).join(", ")})`;
+  if (m[2] !== void 0 && m[2].trim() !== "") {
+    const nums = m[2].split(",").map((s) => Number(s.trim()));
+    if (nums.length > 3 || nums.some((n) => !Number.isFinite(n) || n <= 0)) return "mass, stiffness and damping must be 1 to 3 numbers greater than 0";
+  }
+  return null;
+}
+function parseSpring(name) {
+  if (typeof name !== "string" || !/^\s*spring/.test(name) || springProblem(name)) return null;
+  const m = SPRING_RE.exec(name.trim());
+  if (m[1]) return SPRING_PRESETS[m[1]];
+  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;
+  const sp = parseSpring(kf.ease);
+  if (sp) return Math.round(springDuration(sp) * 1e3) / 1e3;
+  const name = String(kf.ease ?? "none");
+  if (!/^\s*spring/.test(name) && !autoWarned.has(name)) {
+    autoWarned.add(name);
+    console.warn(`pixi-effects: keyframe duration 'auto' needs a spring ease (ease: 'spring(1, 170, 12)' or 'spring.bouncy'), got ease ${JSON.stringify(name)} \u2014 using 0.5 s.`);
+  }
+  return 0.5;
+}
+registerSpringEases();
 
 // src/expr/Parser.ts
 var FUNCS = {
@@ -289,11 +396,77 @@ 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"];
 var EASE_NAMES = ["none", ...FAMILIES.flatMap((f) => [`${f}.in`, `${f}.out`, `${f}.inOut`])];
 var warned = /* @__PURE__ */ new Set();
 function checkEase(ease, where) {
   if (typeof ease !== "string") return;
+  if (/^\s*spring/.test(ease)) {
+    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.`);
+    return;
+  }
+  if (/^\s*cubic-bezier/i.test(ease)) {
+    const problem = cubicBezierProblem(ease);
+    if (!problem || warned.has(ease)) return;
+    warned.add(ease);
+    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 (warned.has(ease)) return;
@@ -334,7 +507,7 @@ function resolveAt(at, duration) {
 }
 function normalizeKeyframe(kf, parentDuration) {
   const at = resolveAt(kf.at, parentDuration);
-  const duration = kf.duration ?? 0;
+  const duration = kfDuration(kf);
   const ease = kf.ease ?? "none";
   checkEase(ease, "a keyframe");
   const hasSet = !!kf.set;
@@ -764,8 +937,217 @@ var ChromaKeyFilter = class extends Filter {
     u[2] = rgb[2];
   }
 };
+var HASH_GL = `
+uint hash(uint x) { x ^= x >> 16; x *= 0x7feb352du; x ^= x >> 15; x *= 0x846ca68bu; x ^= x >> 16; return x; }
+// one gaussian-ish value (sum of the four bytes of a hash), mean 0, std 1
+float gauss(ivec2 p, uint k) {
+  uint h = hash(uint(p.x) + hash(uint(p.y) + hash(k)));
+  float s = float(h & 255u) + float((h >> 8) & 255u) + float((h >> 16) & 255u) + float(h >> 24);
+  return (s / 255.0 - 2.0) * 1.7320508;
+}
+// the grain value at a pixel: cells of size pixels, smoothly blended
+float cell(vec2 pos, float size, uint k) {
+  vec2 q = pos / size - 0.5;
+  vec2 i = floor(q);
+  vec2 f = fract(q);
+  ivec2 p = ivec2(i);
+  float a = gauss(p, k), b = gauss(p + ivec2(1, 0), k), c = gauss(p + ivec2(0, 1), k), d = gauss(p + ivec2(1, 1), k);
+  float v = mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+  vec2 wx = vec2(1.0 - f.x, f.x), wy = vec2(1.0 - f.y, f.y);
+  return v * inversesqrt(dot(wx, wx) * dot(wy, wy));        // blending lowers the spread: keep std exactly 1 at every pixel
+}`;
+var GL_VERTEX = `#version 300 es
+in vec2 aPosition;
+out vec2 vTextureCoord;
+uniform vec4 uInputSize;
+uniform vec4 uOutputFrame;
+uniform vec4 uOutputTexture;
+void main(void) {
+  vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;
+  position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;
+  position.y = position.y * (2.0 * uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;
+  gl_Position = vec4(position, 0.0, 1.0);
+  vTextureCoord = aPosition * (uOutputFrame.zw * uInputSize.zw);
+}`;
+var GL_FRAGMENT2 = `#version 300 es
+precision highp float;
+precision highp int;
+in vec2 vTextureCoord;
+uniform sampler2D uTexture;
+uniform vec4 uInputSize;
+uniform float uAmount;
+uniform float uSize;
+uniform float uSeed;
+uniform float uFrame;
+uniform float uColor;
+out vec4 finalColor;
+${HASH_GL}
+void main(void) {
+  vec4 raw = texture(uTexture, vTextureCoord);
+  vec3 rgb = raw.a > 0.0 ? raw.rgb / raw.a : vec3(0.0);
+  float L = dot(rgb, vec3(0.2126, 0.7152, 0.0722));
+  float w = clamp(4.0 * L * (1.0 - L), 0.0, 1.0);
+  vec2 pos = vTextureCoord * uInputSize.xy;
+  uint k = hash(uint(uSeed) * 0x9E3779B1u + uint(uFrame));
+  float n0 = cell(pos, uSize, k);
+  vec3 n = vec3(n0);
+  if (uColor > 0.0) {
+    vec3 nc = vec3(cell(pos, uSize, k + 1u), cell(pos, uSize, k + 2u), cell(pos, uSize, k + 3u));
+    n = mix(n, nc, uColor);
+  }
+  rgb = clamp(rgb + n * (uAmount * w), 0.0, 1.0);
+  finalColor = vec4(rgb * raw.a, raw.a);
+}`;
+var WGSL_SOURCE2 = `
+struct GlobalFilterUniforms {
+  uInputSize: vec4<f32>,
+  uInputPixel: vec4<f32>,
+  uInputClamp: vec4<f32>,
+  uOutputFrame: vec4<f32>,
+  uGlobalFrame: vec4<f32>,
+  uOutputTexture: vec4<f32>,
+};
+struct GrainUniforms {
+  uAmount: f32,
+  uSize: f32,
+  uSeed: f32,
+  uFrame: f32,
+  uColor: f32,
+};
+@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;
+@group(0) @binding(1) var uTexture: texture_2d<f32>;
+@group(0) @binding(2) var uSampler : sampler;
+@group(1) @binding(0) var<uniform> grainUniforms : GrainUniforms;
+
+struct VSOutput {
+  @builtin(position) position: vec4<f32>,
+  @location(0) uv : vec2<f32>,
+};
+fn filterVertexPosition(aPosition : vec2<f32>) -> vec4<f32> {
+  var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;
+  position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;
+  position.y = position.y * (2.0 * gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;
+  return vec4<f32>(position, 0.0, 1.0);
+}
+fn filterTextureCoord(aPosition : vec2<f32>) -> vec2<f32> {
+  return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);
+}
+@vertex
+fn mainVertex(
+  @location(0) aPosition : vec2<f32>,
+) -> VSOutput {
+  return VSOutput(
+    filterVertexPosition(aPosition),
+    filterTextureCoord(aPosition),
+  );
+}
+
+fn hash(xIn: u32) -> u32 {
+  var x = xIn;
+  x = x ^ (x >> 16u); x = x * 0x7feb352du; x = x ^ (x >> 15u); x = x * 0x846ca68bu; x = x ^ (x >> 16u);
+  return x;
+}
+fn gauss(p: vec2<i32>, k: u32) -> f32 {
+  let h = hash(u32(p.x) + hash(u32(p.y) + hash(k)));
+  let s = f32(h & 255u) + f32((h >> 8u) & 255u) + f32((h >> 16u) & 255u) + f32(h >> 24u);
+  return (s / 255.0 - 2.0) * 1.7320508;
+}
+fn cell(pos: vec2<f32>, size: f32, k: u32) -> f32 {
+  let q = pos / size - vec2<f32>(0.5);
+  let i = floor(q);
+  let f = fract(q);
+  let p = vec2<i32>(i);
+  let a = gauss(p, k);
+  let b = gauss(p + vec2<i32>(1, 0), k);
+  let c = gauss(p + vec2<i32>(0, 1), k);
+  let d = gauss(p + vec2<i32>(1, 1), k);
+  let v = mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+  let wx = vec2<f32>(1.0 - f.x, f.x);
+  let wy = vec2<f32>(1.0 - f.y, f.y);
+  return v * inverseSqrt(dot(wx, wx) * dot(wy, wy));
+}
+
+@fragment
+fn mainFragment(@location(0) uv : vec2<f32>) -> @location(0) vec4<f32> {
+  let raw = textureSample(uTexture, uSampler, uv);
+  var rgb = vec3<f32>(0.0);
+  if (raw.a > 0.0) { rgb = raw.rgb / raw.a; }
+  let L = dot(rgb, vec3<f32>(0.2126, 0.7152, 0.0722));
+  let w = clamp(4.0 * L * (1.0 - L), 0.0, 1.0);
+  let pos = uv * gfu.uInputSize.xy;
+  let k = hash(u32(grainUniforms.uSeed) * 0x9E3779B1u + u32(grainUniforms.uFrame));
+  let n0 = cell(pos, grainUniforms.uSize, k);
+  var n = vec3<f32>(n0);
+  if (grainUniforms.uColor > 0.0) {
+    let nc = vec3<f32>(cell(pos, grainUniforms.uSize, k + 1u), cell(pos, grainUniforms.uSize, k + 2u), cell(pos, grainUniforms.uSize, k + 3u));
+    n = mix(n, nc, grainUniforms.uColor);
+  }
+  rgb = clamp(rgb + n * (grainUniforms.uAmount * w), vec3<f32>(0.0), vec3<f32>(1.0));
+  return vec4<f32>(rgb * raw.a, raw.a);
+}`;
+var GRAIN_KEYS = ["amount", "size", "seed", "fps", "color"];
+var GrainFilter = class extends Filter {
+  _fps;
+  constructor(options = {}) {
+    warnUnknownOptions("grain filter", options, GRAIN_KEYS);
+    const { amount = 0.08, size = 1.5, seed = 0, fps = 24, color = 0 } = options;
+    super({
+      glProgram: GlProgram.from({ vertex: GL_VERTEX, fragment: GL_FRAGMENT2, name: "grain-filter" }),
+      gpuProgram: GpuProgram.from({ vertex: { source: WGSL_SOURCE2, entryPoint: "mainVertex" }, fragment: { source: WGSL_SOURCE2, entryPoint: "mainFragment" } }),
+      resources: {
+        grainUniforms: new UniformGroup({
+          uAmount: { value: amount, type: "f32" },
+          uSize: { value: Math.max(size, 0.25), type: "f32" },
+          uSeed: { value: Math.floor(seed), type: "f32" },
+          uFrame: { value: 0, type: "f32" },
+          uColor: { value: color, type: "f32" }
+        })
+      }
+    });
+    this._fps = fps;
+  }
+  get u() {
+    return this.resources.grainUniforms.uniforms;
+  }
+  get amount() {
+    return this.u.uAmount;
+  }
+  set amount(v) {
+    this.u.uAmount = v;
+  }
+  get size() {
+    return this.u.uSize;
+  }
+  set size(v) {
+    this.u.uSize = Math.max(v, 0.25);
+  }
+  get seed() {
+    return this.u.uSeed;
+  }
+  set seed(v) {
+    this.u.uSeed = Math.floor(v);
+  }
+  get color() {
+    return this.u.uColor;
+  }
+  set color(v) {
+    this.u.uColor = v;
+  }
+  get fps() {
+    return this._fps;
+  }
+  set fps(v) {
+    this._fps = v;
+  }
+  /** The movie calls this with the time (s) of the frame it is about to draw: the grain is new every 1/fps s. */
+  setTime(t) {
+    this.u.uFrame = this._fps > 0 ? Math.floor(t * this._fps + 1e-3) : 0;
+  }
+};
+
+// src/filters/named.ts
 var CORE = { blur: "BlurFilter", noise: "NoiseFilter", alpha: "AlphaFilter" };
-var CORE_TYPES = [...Object.keys(CORE), "colorMatrix"];
+var CORE_TYPES = [...Object.keys(CORE), "colorMatrix", "grain"];
 var LIBRARY_TYPES = [
   "adjustment",
   "advancedBloom",
@@ -882,6 +1264,7 @@ function colorGradientParams(params) {
 }
 function createNamedFilter(type, params) {
   if (lower(type) === "colormatrix") return colorMatrix(params);
+  if (lower(type) === "grain") return new GrainFilter(params);
   const core = Object.entries(CORE).find(([k]) => lower(k) === lower(type));
   if (core) return new PIXI[core[1]](params);
   if (!isLibraryType(type)) throw unknownType(type);
@@ -973,13 +1356,21 @@ var Sequence = class {
   pathRouters() {
     return {};
   }
+  /**
+   * The `initial` and `keyframes` that go onto the display object. A layer whose `time` runs a clock (video, composition) takes `time`
+   * out of them: it is not a property of the display object.
+   */
+  displayProps() {
+    return { initial: this.spec.initial, keyframes: this.spec.keyframes };
+  }
   bindTimeline(timeline, offset = 0) {
     if (!this.target) return;
     const scope = this.scope();
     const routers = this.pathRouters();
     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 { initial, keyframes } = this.displayProps();
+    applyInitial(this.target, initial, scope, [], routers);
+    applyKeyframes(timeline, this.target, keyframes, this.duration, scope, [], startTime, routers);
     const endTime = startTime + this.duration;
     this.absoluteStart = startTime;
     if (this.keepHidden) return;
@@ -1030,6 +1421,141 @@ function collectPropKeys(spec) {
   return out;
 }
 
+// src/core/layerKeys.ts
+var COMMON = ["type", "name", "parent", "at", "duration", "initial", "keyframes", "filters", "filterArea", "mask", "maskInverted", "blendMode", "threeD", "hideBehindCamera"];
+var VIDEO = [...COMMON, "asset", "loop", "audio", "volume", "speed"];
+var IMAGE = [...COMMON, "asset", "colorSpace"];
+var TEXT = [...COMMON, "text", "format", "style", "colorSpace", "fillGradient"];
+var AUDIO = [...COMMON, "volume", "asset", "loop", "sfx", "music", "speed"];
+var COMPOSITION = [...COMMON, "width", "height", "sequences", "transitions", "speed"];
+var CAMERA = [...COMMON];
+var NULL = [...COMMON];
+var SHAPE = [...COMMON, "shape", "fillGradient", "colorSpace", "strokeCap", "strokeJoin"];
+var TRIM = ["trimStart", "trimEnd", "trimEach"];
+var RECT = [...SHAPE, ...TRIM, "width", "height", "cornerRadius", "anchorX", "anchorY"];
+var CIRCLE = [...SHAPE, ...TRIM, "radius", "anchorX", "anchorY"];
+var ELLIPSE = [...SHAPE, ...TRIM, "radiusX", "radiusY", "anchorX", "anchorY"];
+var ARC = [...SHAPE, "radius", "innerRadius", "startAngle", "endAngle"];
+var LINE = [...SHAPE, ...TRIM, "from", "to"];
+var POLYGON = [...SHAPE, ...TRIM, "points", "open"];
+var PATH = [...SHAPE, ...TRIM, "d", "morphTo", "morph", "morphPoints"];
+var SHAPES = { rect: RECT, circle: CIRCLE, ellipse: ELLIPSE, arc: ARC, line: LINE, polygon: POLYGON, path: PATH };
+var BY_TYPE = { video: VIDEO, image: IMAGE, text: TEXT, audio: AUDIO, composition: COMPOSITION, camera: CAMERA, null: NULL };
+function kindName(spec) {
+  return spec.type === "shape" && spec.shape ? `${spec.shape} shape` : `${spec.type} layer`;
+}
+function layerKeys(spec) {
+  if (spec.type === "shape") return spec.shape && SHAPES[spec.shape] || null;
+  return BY_TYPE[spec.type] ?? null;
+}
+function kindsWithKey(key) {
+  const out = [];
+  for (const [shape, keys] of Object.entries(SHAPES)) if (keys.includes(key)) out.push(`${shape} shape`);
+  for (const [type, keys] of Object.entries(BY_TYPE)) if (keys.includes(key)) out.push(`${type} layer`);
+  return out;
+}
+var PROP_KEYS = /* @__PURE__ */ new Set([
+  // transform and look (GSAP + PixiPlugin names)
+  "x",
+  "y",
+  "z",
+  "alpha",
+  "rotation",
+  "rotationX",
+  "rotationY",
+  "width",
+  "height",
+  "visible",
+  "autoAlpha",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "anchor",
+  "anchorX",
+  "anchorY",
+  "pivot",
+  "pivotX",
+  "pivotY",
+  "skew",
+  "skewX",
+  "skewY",
+  "position",
+  "positionX",
+  "positionY",
+  "tint",
+  "colorize",
+  "colorizeAmount",
+  "blur",
+  "blurX",
+  "blurY",
+  "blurPadding",
+  // shapes
+  "fillColor",
+  "fillAlpha",
+  "strokeColor",
+  "strokeAlpha",
+  "strokeWidth",
+  "lineColor",
+  "lineAlpha",
+  "cornerRadius",
+  "radius",
+  "radiusX",
+  "radiusY",
+  "innerRadius",
+  "startAngle",
+  "endAngle",
+  "trimStart",
+  "trimEnd",
+  "trimEach",
+  "morph",
+  "fillGradient",
+  "strokeCap",
+  "strokeJoin",
+  // text, audio, video
+  "fill",
+  "value",
+  "visibleChars",
+  "text",
+  "volume",
+  "time",
+  // camera
+  "lookAtX",
+  "lookAtY",
+  "lookAtZ",
+  "fov",
+  "offsetX",
+  "offsetY",
+  "offsetZ",
+  "lookOffsetX",
+  "lookOffsetY",
+  "lookOffsetZ"
+]);
+var STYLE_KEYS = [
+  "fontSize",
+  "fontFamily",
+  "fontWeight",
+  "fontStyle",
+  "fontVariant",
+  "fill",
+  "stroke",
+  "dropShadow",
+  "letterSpacing",
+  "lineHeight",
+  "leading",
+  "align",
+  "wordWrap",
+  "wordWrapWidth",
+  "breakWords",
+  "whiteSpace",
+  "padding",
+  "textBaseline",
+  "trim",
+  "lineJoin",
+  "miterLimit",
+  "filters",
+  "tagStyles"
+];
+
 // src/core/lint.ts
 var defaultWarn = (m) => console.warn(m);
 function describeLayer(spec) {
@@ -1068,6 +1594,191 @@ function lintText(spec, warn = defaultWarn) {
     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').`);
   }
 }
+var REMAPPABLE = /* @__PURE__ */ new Set(["video", "audio", "composition"]);
+var REMAP_NAMES = /* @__PURE__ */ new Set(["time", "timeRemap", "reverse"]);
+var TIME_BAGS = ["set", "to", "from"];
+function lintRemap(spec, warn) {
+  const s = spec;
+  const who = describeLayer(spec);
+  const kfs = s.keyframes ?? [];
+  const bags = [s.initial, ...kfs.flatMap((kf) => TIME_BAGS.map((b) => kf[b]))];
+  const timeInInitial = !!s.initial && s.initial.time !== void 0;
+  const timeInKeyframes = kfs.some((kf) => TIME_BAGS.some((b) => kf[b] && kf[b].time !== void 0));
+  const timed = timeInInitial || timeInKeyframes;
+  if (bags.some((bag) => bag && bag.speed !== void 0)) {
+    warn(`pixi-effects: ${who}: speed is a fixed setting, not an animatable property: write it on the layer (speed: 2); to change the speed over time, animate time (keyframes: [{ at: 0, from: { time: 0 }, to: { time: 4 }, duration: 2, ease: 'power2.in' }])`);
+  }
+  if (!REMAPPABLE.has(spec.type)) {
+    if (timed) warn(`pixi-effects: ${who}: "time" only works on video, audio and composition layers; put this layer in a composition and remap that (it is ignored here)`);
+    return;
+  }
+  if (s.reverse !== void 0) warn(`pixi-effects: ${who}: "reverse" is not a key: write speed: -1 to play backward`);
+  if (s.timeRemap !== void 0) warn(`pixi-effects: ${who}: "timeRemap" is not a key: animate time in keyframes (from / to / set), or write speed`);
+  if (s.time !== void 0) warn(`pixi-effects: ${who}: "time" belongs in initial or keyframes (initial: { time: 2 }), not on the layer`);
+  if (spec.type === "audio" && (s.sfx !== void 0 || s.music !== void 0) && (s.speed !== void 0 || timed)) {
+    warn(`pixi-effects: ${who}: speed and time do not apply to a synthesised sound (sfx, music); change an sfx's pitch with pitch (semitones), or put it in a composition and remap that`);
+    return;
+  }
+  if (s.speed !== void 0 && (typeof s.speed !== "number" || !Number.isFinite(s.speed) || s.speed === 0)) {
+    warn(`pixi-effects: ${who}: speed ${JSON.stringify(s.speed)} cannot be used: write a number other than 0 (negative plays backward); to hold a moment, key time to the same value twice`);
+  }
+  if (s.speed !== void 0 && timeInKeyframes) {
+    warn(`pixi-effects: ${who}: speed and keyframed time are both set; time wins and speed is ignored. Use one of them`);
+  }
+  if (timeInInitial && typeof s.initial.time !== "number") {
+    warn(`pixi-effects: ${who}: initial.time must be a number of seconds, got ${JSON.stringify(s.initial.time)}`);
+  }
+  kfs.forEach((kf, i) => {
+    for (const b of TIME_BAGS) {
+      const v = kf[b]?.time;
+      if (v !== void 0 && typeof v !== "number" && typeof v !== "string") warn(`pixi-effects: ${who}: keyframes[${i}].${b}.time must be a number of seconds, got ${JSON.stringify(v)}`);
+    }
+  });
+}
+function lintKeys(spec, warn = defaultWarn) {
+  const who = describeLayer(spec);
+  const valid = layerKeys(spec);
+  if (valid) {
+    for (const key of Object.keys(spec)) {
+      if (valid.includes(key) || spec[key] === void 0) continue;
+      if (REMAPPABLE.has(spec.type) && REMAP_NAMES.has(key)) continue;
+      const guess = suggestName(key, valid.filter((k) => k !== "type"));
+      const owners = kindsWithKey(key);
+      const belongs = owners.length ? ` (it belongs to ${owners.slice(0, 3).join(", ")})` : "";
+      const hint = guess ? ` \u2014 did you mean "${guess}"?${belongs}` : belongs;
+      warn(`pixi-effects: ${who}: "${key}" is not a ${kindName(spec)} key${hint}. Valid keys: ${valid.join(", ")}`);
+    }
+  }
+  lintRemap(spec, warn);
+  const said = /* @__PURE__ */ new Set();
+  const bags = [spec.initial, ...(spec.keyframes ?? []).flatMap((kf) => [kf.set, kf.to, kf.from])];
+  for (const bag of bags) {
+    for (const key of Object.keys(bag ?? {})) {
+      if (bag[key] === void 0) continue;
+      if (PROP_KEYS.has(key) || key.includes(".") || /^gradient/i.test(key) || said.has(key) || key === "speed") continue;
+      said.add(key);
+      const guess = suggestName(key, [...PROP_KEYS]);
+      warn(`pixi-effects: ${who}: "${key}" is not an animatable property${guess ? ` \u2014 did you mean "${guess}"?` : ""} (in initial, set, to or from). See the cheatsheet for the properties of this kind of layer`);
+    }
+  }
+  if (spec.type === "text" && spec.style && typeof spec.style === "object") {
+    for (const key of Object.keys(spec.style)) {
+      if (STYLE_KEYS.includes(key) || spec.style[key] === void 0) continue;
+      const guess = suggestName(key, STYLE_KEYS);
+      warn(`pixi-effects: ${who}: style.${key} is not a text style key${guess ? ` \u2014 did you mean "${guess}"?` : ""} (it is ignored). Keys: ${STYLE_KEYS.join(", ")}`);
+    }
+  }
+}
+var BAGS = ["set", "to", "from"];
+function timeRemapOf(spec, prop = "time") {
+  const hasInitial = !!spec.initial && "time" in spec.initial;
+  const hasKf = (spec.keyframes ?? []).some((kf) => BAGS.some((b) => kf[b] && "time" in kf[b]));
+  const speed = typeof spec.speed === "number" && Number.isFinite(spec.speed) && spec.speed !== 0 ? spec.speed : void 0;
+  if (!hasInitial && !hasKf && speed === void 0) return null;
+  const timeKfs = [];
+  const restKfs = [];
+  for (const kf of spec.keyframes ?? []) {
+    const t = { ...kf }, r = { ...kf };
+    let touched = false, left = false;
+    for (const b of BAGS) {
+      const bag = kf[b];
+      if (!bag) {
+        delete t[b];
+        delete r[b];
+        continue;
+      }
+      const { time, ...others } = bag;
+      if ("time" in bag) {
+        touched = true;
+        t[b] = { [prop]: time };
+      } else delete t[b];
+      if (Object.keys(others).length) {
+        r[b] = others;
+        left = true;
+      } else delete r[b];
+    }
+    if (touched) timeKfs.push(t);
+    if (!touched || left) restKfs.push(r);
+  }
+  let restInitial = spec.initial;
+  let start;
+  if (hasInitial) {
+    const { time, ...others } = spec.initial;
+    start = typeof time === "number" && Number.isFinite(time) ? time : void 0;
+    restInitial = others;
+  }
+  return { timeKfs, restKfs: restKfs.length ? restKfs : void 0, restInitial, start, speed };
+}
+function resolveFromEnd(remap, length, prop) {
+  const fix = (v) => typeof v === "number" && v < 0 ? Math.max(0, length + v) : v;
+  const timeKfs = remap.timeKfs.map((kf) => {
+    const out = { ...kf };
+    for (const b of BAGS) {
+      const bag = kf[b];
+      if (bag && prop in bag) out[b] = { ...bag, [prop]: fix(bag[prop]) };
+    }
+    return out;
+  });
+  return { ...remap, timeKfs, start: remap.start === void 0 ? void 0 : fix(remap.start) };
+}
+function remapOf(spec, prop, length) {
+  const r = timeRemapOf(spec, prop);
+  return r && length !== null ? resolveFromEnd(r, length, prop) : r;
+}
+function contentLength(remap, duration) {
+  let m = duration;
+  if (remap.speed !== void 0) m = Math.max(m, Math.abs(remap.speed) * duration);
+  if (remap.start !== void 0) m = Math.max(m, remap.start + (remap.speed ?? 1) * duration);
+  for (const kf of remap.timeKfs) {
+    for (const b of BAGS) {
+      const bag = kf[b];
+      const v = bag && Object.values(bag)[0];
+      if (typeof v === "number") m = Math.max(m, v);
+    }
+  }
+  return m;
+}
+function bindClock(timeline, clock, prop, remap, duration, at, scope) {
+  if (remap.timeKfs.length) {
+    if (remap.start !== void 0) timeline.set(clock, { [prop]: remap.start }, at);
+    applyKeyframes(timeline, clock, remap.timeKfs, duration, scope, [], at);
+    return;
+  }
+  const s = remap.speed ?? 1;
+  const from = remap.start ?? (s < 0 ? -s * duration : 0);
+  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 clock = { [prop]: remap.start ?? 0 };
+  bindClock(probe, clock, prop, remap, duration, at, scope);
+  probe.time(probe.duration());
+  probe.time(0);
+  const h = 1 / 1e3;
+  const n = Math.max(2, Math.ceil(to / h) + 2);
+  const tab = new Float64Array(n);
+  let min = Infinity, max = -Infinity;
+  for (let k = 0; k < n; k++) {
+    probe.time(k * h);
+    const v = clock[prop];
+    tab[k] = v;
+    const t = k * h;
+    if (t >= at && t <= at + duration) {
+      if (v < min) min = v;
+      if (v > max) max = v;
+    }
+  }
+  probe.kill();
+  return {
+    at(t) {
+      const x = Math.min(Math.max(t / h, 0), n - 1.000001);
+      const k = Math.floor(x), f = x - k;
+      return tab[k] * (1 - f) + tab[k + 1] * f;
+    },
+    min: Number.isFinite(min) ? min : 0,
+    max: Number.isFinite(max) ? max : 0
+  };
+}
 
 // src/space/math.ts
 var DEG = Math.PI / 180;
@@ -1393,6 +2104,7 @@ 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 };
@@ -1407,7 +2119,7 @@ function tweenColor(timeline, target, key, fromValue, toValue, duration, ease, a
       onStart: () => {
         const start = fromValue !== void 0 ? fromValue : target[key];
         if (start === void 0) return;
-        interp = colorSpace === "rgb" ? gsap.utils.interpolate(start, toValue) : buildColorInterp(start, toValue, colorSpace);
+        interp = colorSpace === "rgb" ? gsap.utils.interpolate(css(start), css(toValue)) : buildColorInterp(start, toValue, colorSpace);
       },
       onUpdate: () => {
         if (interp) {
@@ -1451,7 +2163,7 @@ var ImageSequence = class extends Sequence {
     if (initTint !== void 0) this.target.tint = initTint;
     for (const kf of this.spec.keyframes ?? []) {
       const at = startTime + resolveAt(kf.at, this.duration);
-      const duration = kf.duration ?? 0;
+      const duration = kfDuration(kf);
       const ease = kf.ease ?? "none";
       const fromTint = kf.from?.tint;
       const toTint = kf.to?.tint;
@@ -1508,6 +2220,207 @@ function stripKeysInKeyframe(kf, keys) {
     from: stripKeys(kf.from, keys)
   };
 }
+
+// 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/gradientAnim.ts
+var PATCH_KEYS = ["type", "angle", "center", "innerRadius", "radius", "stops"];
+function gradStateFrom(g) {
+  return {
+    type: g.type ?? "linear",
+    angle: g.angle ?? 90,
+    center: [...g.center ?? [0.5, 0.5]],
+    innerRadius: g.innerRadius ?? 0,
+    radius: g.radius ?? 0.5,
+    stops: (g.stops ?? []).map((s) => Array.isArray(s) ? { offset: s[0], color: cssColor(s[1]) } : { offset: s.offset, color: cssColor(s.color) })
+  };
+}
+function mergeGrad(base, patch) {
+  const out = { ...base, center: [...base.center], stops: base.stops.map((s) => ({ ...s })) };
+  if (patch === null || typeof patch !== "object" || Array.isArray(patch)) return out;
+  const p = patch;
+  if (typeof p.angle === "number") out.angle = p.angle;
+  if (Array.isArray(p.center)) out.center = [Number(p.center[0]), Number(p.center[1])];
+  if (typeof p.innerRadius === "number") out.innerRadius = p.innerRadius;
+  if (typeof p.radius === "number") out.radius = p.radius;
+  if (p.stops !== void 0) {
+    const next = gradStateFrom({ stops: p.stops }).stops;
+    if (next.length === base.stops.length) out.stops = next;
+  }
+  return out;
+}
+var objectHint = "a keyframe's fillGradient must be an object like { angle: 200, stops: [[0, '#f00'], [1, '#00f']] }";
+function validateGradientKeyframes(spec, who, warn = (m) => console.warn(m), kind = "shape") {
+  const said = /* @__PURE__ */ new Set();
+  const say = (m) => {
+    if (!said.has(m)) {
+      said.add(m);
+      warn(`pixi-effects: ${who}: ${m}`);
+    }
+  };
+  const startSpec = spec.fillGradient ?? spec.initial?.fillGradient;
+  const start = startSpec && typeof startSpec === "object" && Array.isArray(startSpec.stops) ? gradStateFrom(startSpec) : null;
+  let animated = false;
+  if (kind === "text") {
+    const radial = (g) => !!g && typeof g === "object" && ["type", "center", "innerRadius", "radius"].some((k) => g[k] !== void 0 && !(k === "type" && g.type === "linear"));
+    const asked = radial(startSpec) || (spec.keyframes ?? []).some((kf) => [kf.set, kf.to, kf.from].some((b) => radial(b?.fillGradient)));
+    if (asked) say("a text gradient is linear: type, center, innerRadius and radius are ignored (only angle and stops apply); use a shape for a radial gradient");
+  }
+  for (const kf of spec.keyframes ?? []) {
+    for (const bag of [kf.set, kf.to, kf.from]) {
+      if (!bag) continue;
+      for (const [key, value] of Object.entries(bag)) {
+        if (key === "fillGradient") {
+          animated = true;
+          if (value === null || typeof value !== "object" || Array.isArray(value)) {
+            say(objectHint);
+            continue;
+          }
+          const p = value;
+          for (const k of Object.keys(p)) {
+            if (PATCH_KEYS.includes(k)) continue;
+            const guess = suggestName(k, PATCH_KEYS.filter((x) => x !== "type"));
+            say(`fillGradient.${k} is not a gradient property${guess ? ` \u2014 did you mean "${guess}"?` : ""} (valid: ${PATCH_KEYS.join(", ")}); it is ignored`);
+          }
+          if (p.type !== void 0 && start && p.type !== start.type) say("fillGradient.type cannot change over time (linear <-> radial); it is ignored");
+          if (p.stops !== void 0 && start) {
+            const n = Array.isArray(p.stops) ? p.stops.length : 0;
+            if (n !== start.stops.length) say(`a fillGradient keyframe must give the same number of stops as the gradient has (${start.stops.length}, got ${n}); the stops are left as they were`);
+          }
+        } else if (/^fillGradient\./i.test(key) || /^gradient/i.test(key)) {
+          const tail = key.replace(/^fillGradient\./i, "").replace(/^gradient/i, "");
+          const sub = tail ? tail[0].toLowerCase() + tail.slice(1) : "angle";
+          say(`"${key}" is not an animatable property: write fillGradient: { ${PATCH_KEYS.includes(sub) ? sub : "angle"} } (the whole gradient is one object) in the keyframe's to / from / set`);
+        }
+      }
+    }
+  }
+  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));
+    },
+    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) }))
+      };
+      onChange();
+    }
+  }, at);
+}
+var PAINT_SIZE = 512;
+var GradientPainter = class {
+  constructor(size = PAINT_SIZE) {
+    this.size = size;
+    this.canvas.width = size;
+    this.canvas.height = size;
+    this.tex = Texture.from(this.canvas);
+    globalThis.__gradientPainters = (globalThis.__gradientPainters ?? 0) + 1;
+  }
+  size;
+  canvas = document.createElement("canvas");
+  tex;
+  /** Paint `g` and return what `Graphics.fill(...)` takes. */
+  paint(g) {
+    const ctx = this.canvas.getContext("2d"), s = this.size;
+    if (!ctx) return new FillGradient(gradientOptions({ angle: g.angle, stops: g.stops.map((x) => [x.offset, x.color]) }));
+    ctx.clearRect(0, 0, s, s);
+    if (g.type === "radial") {
+      paintRadial(ctx, s, { stops: g.stops.map((x) => [x.offset, x.color]), center: g.center, innerRadius: g.innerRadius, radius: g.radius });
+    } else {
+      const a = g.angle * Math.PI / 180, dx = Math.cos(a), dy = Math.sin(a);
+      const h = (Math.abs(dx) + Math.abs(dy)) / 2;
+      const grad = ctx.createLinearGradient((0.5 - dx * h) * s, (0.5 - dy * h) * s, (0.5 + dx * h) * s, (0.5 + dy * h) * s);
+      for (const st of g.stops) grad.addColorStop(Math.min(1, Math.max(0, st.offset)), st.color);
+      ctx.fillStyle = grad;
+      ctx.fillRect(0, 0, s, s);
+    }
+    this.tex.source.update();
+    return { texture: this.tex, textureSpace: "local" };
+  }
+  /** Give the texture and the canvas back (a layer that is destroyed must not leave them). */
+  destroy() {
+    this.tex.destroy(true);
+    this.canvas.width = this.canvas.height = 0;
+    globalThis.__gradientPainters = Math.max(0, (globalThis.__gradientPainters ?? 1) - 1);
+  }
+};
+function bindGradientKeyframes(timeline, holder, keyframes, duration, offset, colorSpace, onChange) {
+  const bag = (b) => b?.fillGradient;
+  for (const kf of keyframes) {
+    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);
+          onChange();
+        },
+        { patch: setV }
+      );
+    }
+    if (fromV !== void 0 || toV !== void 0) {
+      tweenGradient(timeline, holder, fromV, toV, kfDuration(kf), kf.ease ?? "none", at, colorSpace, onChange, loopVars(kf));
+    }
+  }
+}
+var hasGradientKeys = (keyframes) => (keyframes ?? []).some((kf) => [kf.set, kf.to, kf.from].some((b) => b && b.fillGradient !== void 0));
+
+// src/sequences/Text.ts
 var STYLE_OPAQUE_KEYS = [
   "fontFamily",
   "fill",
@@ -1542,6 +2455,21 @@ var TextSequence = class extends Sequence {
   /** `visibleChars` is in play (initial or animated): otherwise the whole text shows. */
   _typed = false;
   _lastText = "";
+  /** A gradient fill for the text (`fillGradient`, static or animated): rebuilt as a FillGradient on each change (the text is re-rasterised). */
+  _grad = null;
+  _fillGradient = null;
+  _applyGradient() {
+    const g = this._grad.grad;
+    const next = new FillGradient(gradientOptions({ angle: g.angle, stops: g.stops.map((s) => [s.offset, s.color]) }));
+    this.target.style.fill = next;
+    this._fillGradient?.destroy();
+    this._fillGradient = next;
+  }
+  destroy() {
+    super.destroy();
+    this._fillGradient?.destroy();
+    this._fillGradient = null;
+  }
   /** A typewriter that has typed nothing yet: the layer is empty on purpose (inspect must not call that "no size"). */
   get showsNothingYet() {
     return this._typed && this._lastText === "" && this._template !== "";
@@ -1588,6 +2516,12 @@ var TextSequence = class extends Sequence {
       this.intrinsicWidth = text.width;
       this.intrinsicHeight = text.height;
     }
+    validateGradientKeyframes(this.spec, describeLayer(this.spec), void 0, "text");
+    const gradientSpec = this.spec.fillGradient ?? initialProps.fillGradient;
+    if (gradientSpec) {
+      this._grad = { grad: gradStateFrom(gradientSpec) };
+      this._applyGradient();
+    }
     const scope = this.scope();
     if (initialProps.value !== void 0) this._counters.value = resolveNumber(initialProps.value, scope);
     this._typed = initialProps.visibleChars !== void 0 || animates(this.spec.keyframes, "visibleChars");
@@ -1606,11 +2540,12 @@ var TextSequence = class extends Sequence {
   bindTimeline(timeline, offset = 0) {
     if (!this.target) return;
     const colorSpace = this.spec.colorSpace ?? "rgb";
-    const stripped = stripKeys2(this.spec, ["fill", "value", "text", "visibleChars"]);
+    const stripped = stripKeys2(this.spec, ["fill", "value", "text", "visibleChars", "fillGradient"]);
     runSuperWithStrippedSpec(this, stripped, timeline, offset);
     const keyframes = this.spec.keyframes ?? [];
     const origin = offset + this.at;
     bindFillKeyframes(timeline, this.target, keyframes, this.duration, origin, colorSpace);
+    if (this._grad) bindGradientKeyframes(timeline, this._grad, keyframes, this.duration, origin, colorSpace, () => this._applyGradient());
     const refresh = () => this._refreshText();
     bindCounterKeyframes(timeline, this._counters, "value", refresh, keyframes, this.duration, origin, this.scope());
     bindCounterKeyframes(timeline, this._counters, "visibleChars", refresh, keyframes, this.duration, origin, this.scope());
@@ -1660,7 +2595,7 @@ function bindCounterKeyframes(timeline, state, key, refresh, keyframes, parentDu
     const toV = kf.to?.[key];
     if (setV === void 0 && fromV === void 0 && toV === void 0) continue;
     const at = origin + resolveAt(kf.at, parentDuration);
-    const duration = kf.duration ?? 0;
+    const duration = kfDuration(kf);
     const ease = kf.ease ?? "none";
     const loop = loopVars(kf);
     if (setV !== void 0) {
@@ -1706,7 +2641,7 @@ function bindFillKeyframes(timeline, text, keyframes, parentDuration, offset, co
   };
   for (const kf of keyframes) {
     const at = offset + resolveAt(kf.at, parentDuration);
-    const duration = kf.duration ?? 0;
+    const duration = kfDuration(kf);
     const ease = kf.ease ?? "none";
     const setFill = pickFill(kf.set);
     const fromFill = pickFill(kf.from);
@@ -1744,6 +2679,7 @@ var AudioSequence = class extends Sequence {
   _audioBuffer = null;
   _synth = null;
   _source = "";
+  _remap = null;
   async build() {
     this.target = null;
     if (this.spec.music !== void 0) return this._buildMusic(this.spec);
@@ -1752,13 +2688,16 @@ var AudioSequence = class extends Sequence {
     this._source = `asset "${spec.asset}"`;
     const data = await Assets.get(spec.asset);
     this._audioBuffer = data.audioBuffer;
+    this._remap = remapOf(spec, "time", data.duration ?? null);
+    const constant = this._remap && this._remap.timeKfs.length === 0 ? Math.abs(this._remap.speed ?? 1) : 1;
     if (this.duration === void 0) {
       const rest = Math.max(0, (this.parent?.duration ?? this.root.duration) - this.at);
-      this.duration = spec.duration ?? (spec.loop ? rest : data.duration) ?? this.root.duration;
+      this.duration = spec.duration ?? (spec.loop ? rest : data.duration !== void 0 ? data.duration / constant : void 0) ?? this.root.duration;
     }
-    if (!spec.loop && data.duration !== void 0 && this.duration > data.duration + 0.05) {
+    const playable = this._remap && this._remap.timeKfs.length > 0 ? Infinity : (data.duration ?? Infinity) / constant;
+    if (!spec.loop && Number.isFinite(playable) && this.duration > playable + 0.05) {
       console.warn(
-        `pixi-effects: ${describeLayer(spec)}: audio asset "${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.`
+        `pixi-effects: ${describeLayer(spec)}: audio asset "${spec.asset}" plays for ${playable.toFixed(1)}s (${data.duration.toFixed(1)}s at speed ${constant}) but the layer lasts ${this.duration.toFixed(1)}s, so it goes silent after ${playable.toFixed(1)}s. Add loop: true, or shorten the layer's duration.`
       );
     }
   }
@@ -1767,7 +2706,7 @@ var AudioSequence = class extends Sequence {
     const raw = spec;
     if (raw.asset !== void 0) console.warn(`pixi-effects: ${who}: has both asset and sfx \u2014 the sfx plays; remove one`);
     if (raw.loop) console.warn(`pixi-effects: ${who}: loop has no effect on an sfx \u2014 to repeat it, add one audio layer per hit (a JS loop)`);
-    const { resolveSfx, renderSfx, sfxKey } = await import('./sfx-S37DDC66.js');
+    const { resolveSfx, renderSfx, sfxKey } = await import('./sfx-U3GM2MED.js');
     const sfx = resolveSfx(spec.sfx, spec.duration, who);
     if (!sfx) return;
     this.duration = sfx.length;
@@ -1786,7 +2725,7 @@ var AudioSequence = class extends Sequence {
     const raw = spec;
     if (raw.asset !== void 0) console.warn(`pixi-effects: ${who}: has both asset and music \u2014 the music plays; remove one`);
     if (raw.sfx !== void 0) console.warn(`pixi-effects: ${who}: has both sfx and music \u2014 the music plays; remove one`);
-    const { resolveMusic, renderMusic, musicLength, musicKey } = await import('./music-4HDFULNR.js');
+    const { resolveMusic, renderMusic, musicLength, musicKey } = await import('./music-CFEC7HKL.js');
     const music = resolveMusic(spec.music, who);
     if (!music) return;
     const natural = musicLength(music);
@@ -1812,7 +2751,9 @@ var AudioSequence = class extends Sequence {
     const initialVolume = this.spec.volume ?? this.spec.initial?.volume ?? 1;
     const t0 = baseTime + this.at;
     const dur = this.duration;
+    const sourceMap = this._remap ? clockTable(this._remap, "time", dur, t0, this.scope(), t0 + dur).at : void 0;
     out.push({
+      ...sourceMap ? { sourceMap } : {},
       ...this._audioBuffer ? { buffer: this._audioBuffer } : { synth: this._synth },
       layer: describeLayer(this.spec),
       source: this._source,
@@ -1871,7 +2812,7 @@ var FrameCache = class {
     this.capacity = options.capacity ?? 30;
   }
   _key(time) {
-    return Math.round(time * 1e3);
+    return Math.round(time * 1e6);
   }
   async getFrameAt(time) {
     const key = this._key(time);
@@ -1936,6 +2877,15 @@ var FrameCache = class {
   }
 };
 
+// src/core/sourceTime.ts
+var FRAME_EPS = 5e-5;
+function sourceLookup(v, sourceDuration, loop) {
+  if (!(sourceDuration > 0)) return Math.max(0, v);
+  const w = v + FRAME_EPS;
+  if (loop) return (w % sourceDuration + sourceDuration) % sourceDuration;
+  return Math.min(Math.max(w, 0), sourceDuration);
+}
+
 // src/sequences/Video.ts
 var VideoSequence = class extends Sequence {
   _sourceDuration = 0;
@@ -1944,9 +2894,15 @@ var VideoSequence = class extends Sequence {
   _canvas = null;
   _ctx = null;
   _drawSeq = 0;
+  /** The playhead value (seconds in the file) the timeline last wrote: already remapped, and local inside a remapped composition. */
+  _cur = 0;
+  _remap = null;
+  /** Movie asks this layer to draw the frame its own timeline is at, not the one for a time it computed. */
+  selfTimed = true;
   async build() {
     const data = await Assets.get(this.spec.asset);
     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 });
     const probeFrame = await this._cache.getFrameAt(0);
@@ -1965,7 +2921,8 @@ var VideoSequence = class extends Sequence {
     this.intrinsicWidth = w;
     this.intrinsicHeight = h;
     if (this.duration === void 0) {
-      this.duration = this.spec.duration ?? data.duration ?? this.root.duration;
+      const constant = this._remap && this._remap.timeKfs.length === 0 ? Math.abs(this._remap.speed ?? 1) : 1;
+      this.duration = this.spec.duration ?? (data.duration ?? this.root.duration * constant) / constant;
     }
     let currentTime = 0;
     const seq = this;
@@ -1975,8 +2932,9 @@ var VideoSequence = class extends Sequence {
       },
       set(v) {
         currentTime = v;
+        seq._cur = v;
         const mySeq = ++seq._drawSeq;
-        const lookup = seq.spec.loop && seq._sourceDuration > 0 ? v % seq._sourceDuration : v;
+        const lookup = sourceLookup(v, seq._sourceDuration, !!seq.spec.loop);
         seq._cache.getFrameAt(lookup).then((frame) => {
           if (mySeq !== seq._drawSeq) return;
           if (!frame || !seq._ctx) return;
@@ -1989,21 +2947,33 @@ var VideoSequence = class extends Sequence {
     });
     this.buildFilters();
   }
+  displayProps() {
+    const r = this._remap;
+    return r ? { initial: r.restInitial, keyframes: r.restKfs } : super.displayProps();
+  }
   bindTimeline(timeline, offset = 0) {
     super.bindTimeline(timeline, offset);
+    const at = offset + this.at;
+    if (this._remap) {
+      bindClock(timeline, this.target, "currentTime", this._remap, this.duration, at, this.scope());
+      return;
+    }
     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" },
-      offset + this.at
+      at
       // offset = start of the enclosing composition(s); dropping it misplaced videos inside nested compositions
     );
   }
   collectAudio(out, baseTime) {
     if (!this._audioBuffer) return;
     const initialVolume = this.spec.volume ?? 1;
+    const t0 = baseTime + this.at;
+    const sourceMap = this._remap ? clockTable(this._remap, "currentTime", this.duration, t0, this.scope(), t0 + this.duration).at : void 0;
     out.push({
+      ...sourceMap ? { sourceMap } : {},
       buffer: this._audioBuffer,
       layer: describeLayer(this.spec),
       source: `video "${this.spec.asset}"`,
@@ -2014,9 +2984,12 @@ var VideoSequence = class extends Sequence {
       volumeKeyframes: []
     });
   }
-  async awaitFrameAt(time) {
+  /** Draw the frame the playhead is at NOW (`_cur`). The argument (a time Movie worked out for layers that need it) is not used. */
+  async awaitFrameAt(_time) {
+    const time = this._cur;
+    if (!this.keepHidden && !this.target?.renderable) return;
     const mySeq = ++this._drawSeq;
-    const lookup = this.spec.loop && this._sourceDuration > 0 ? time % this._sourceDuration : time;
+    const lookup = sourceLookup(time, this._sourceDuration, !!this.spec.loop);
     let frame = null;
     try {
       frame = await this._cache.getFrameAt(lookup);
@@ -2040,39 +3013,6 @@ 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") {
@@ -2264,7 +3204,7 @@ function morphAt(pairs, t) {
 }
 
 // src/sequences/Shape.ts
-var STYLE_KEYS = ["fillColor", "fillAlpha", "strokeColor", "strokeAlpha", "strokeWidth"];
+var STYLE_KEYS2 = ["fillColor", "fillAlpha", "strokeColor", "strokeAlpha", "strokeWidth"];
 var COLOR_KEYS = /* @__PURE__ */ new Set(["fillColor", "strokeColor"]);
 var TRIM_KEYS = ["trimStart", "trimEnd"];
 var GEOMETRY_KEYS_BY_SHAPE = {
@@ -2290,7 +3230,7 @@ var ShapeSequence = class extends Sequence {
   // by `Container.onRender`.
   _drawGeometry = () => {
   };
-  _liveKeys = new Set(STYLE_KEYS);
+  _liveKeys = new Set(STYLE_KEYS2);
   async build() {
     const graphics = new Graphics({ label: this.spec.name });
     graphics.cullable = true;
@@ -2316,7 +3256,15 @@ var ShapeSequence = class extends Sequence {
       this._state.trimEnd ??= 1;
     }
     const gradientSpec = this.spec.fillGradient ?? this.spec.initial?.fillGradient;
-    if (gradientSpec) this._state.fillStyle = makeGradientFill(gradientSpec);
+    validateGradientKeyframes(this.spec, describeLayer(this.spec));
+    if (gradientSpec) {
+      if (hasGradientKeys(this.spec.keyframes)) {
+        this._grad = { grad: gradStateFrom(gradientSpec) };
+        this._painter = new GradientPainter();
+        this._gradDirty = true;
+        this._liveKeys.add("fillGradient");
+      } else this._state.fillStyle = makeGradientFill(gradientSpec);
+    }
     const morph = this._setupMorph();
     this._drawGeometry = makeDrawGeometry(this.spec, scope, this._state, morph);
     this._outline = makeOutline(this.spec, scope, this._state, morph);
@@ -2375,11 +3323,23 @@ var ShapeSequence = class extends Sequence {
     this._state.morph ??= 0;
     return { pairs, to: String(top.morphTo) };
   }
+  destroy() {
+    super.destroy();
+    this._painter?.destroy();
+    this._painter = null;
+  }
   _fresh = false;
+  _grad = null;
+  _painter = null;
+  _gradDirty = false;
   _outline = null;
   _redraw() {
     const graphics = this.target;
     const s = this._state;
+    if (this._grad && this._gradDirty) {
+      s.fillStyle = this._painter.paint(this._grad.grad);
+      this._gradDirty = false;
+    }
     graphics.clear();
     const trimmed = (s.trimStart ?? 0) > 0 || (s.trimEnd ?? 1) < 1;
     if (!trimmed || !this._outline || !(s.strokeColor !== void 0 && s.strokeWidth > 0)) {
@@ -2425,6 +3385,9 @@ var ShapeSequence = class extends Sequence {
     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, startTime, colorSpace);
+    if (this._grad) bindGradientKeyframes(timeline, this._grad, this.spec.keyframes ?? [], this.duration, startTime, colorSpace, () => {
+      this._gradDirty = true;
+    });
     this.absoluteStart = startTime;
     const endTime = startTime + this.duration;
     this.target.renderable = startTime <= 0;
@@ -2461,7 +3424,7 @@ function seedStrokeStyle(state, spec, initial, who) {
   }
 }
 function seedStyle(state, initial, scope) {
-  for (const k of STYLE_KEYS) {
+  for (const k of STYLE_KEYS2) {
     const v = initial[k];
     if (v === void 0) continue;
     state[k] = COLOR_KEYS.has(k) ? v : numOrZero(v, scope);
@@ -2684,13 +3647,14 @@ function makeOutline(spec, scope, s, morph) {
 function bindLiveKeyframes(timeline, state, liveKeys, keyframes, parentDuration, scope, offset, colorSpace) {
   for (const kf of keyframes) {
     const at = offset + resolveAt(kf.at, parentDuration);
-    const duration = kf.duration ?? 0;
+    const duration = kfDuration(kf);
     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)) {
+          if (k === "fillGradient") continue;
           const resolved = resolveLiveValue(k, v, scope);
           const live2 = state;
           revertibleSet(timeline, at, () => live2[k], (v2) => {
@@ -2706,6 +3670,7 @@ function bindLiveKeyframes(timeline, state, liveKeys, keyframes, parentDuration,
       ...toLive ? Object.keys(toLive) : []
     ]);
     for (const k of allKeys) {
+      if (k === "fillGradient") continue;
       const key = k;
       const fromRaw = fromLive?.[key];
       const toRaw = toLive?.[key];
@@ -2754,7 +3719,7 @@ function numOrZero(v, scope) {
 var _CompositionSequence = null;
 async function getCompositionSequence() {
   if (!_CompositionSequence) {
-    _CompositionSequence = (await import('./Composition-MLBHYYFF.js')).CompositionSequence;
+    _CompositionSequence = (await import('./Composition-6PA4C4TV.js')).CompositionSequence;
   }
   return _CompositionSequence;
 }
@@ -2792,6 +3757,6 @@ async function buildSequenceTree(specs, parent, root) {
   return out;
 }
 
-export { CameraSequence, DEFAULT_FOV, DEG, NEAR, NullSequence, Sequence, buildScope, buildSequenceTree, cameraBasis, checkEase, collectPropKeys, describeLayer, ensureFilterLibrary, evaluateExpr, flattenSvgPath, homeCamera, homeDistance, lintText, lintTiming, noise, projectLayer, rand, random, registerSequenceType, resolveAt, summarizeWarnings };
-//# sourceMappingURL=chunk-SG3Y66FN.js.map
-//# sourceMappingURL=chunk-SG3Y66FN.js.map
+export { CameraSequence, DEFAULT_FOV, DEG, NEAR, NullSequence, Sequence, bindClock, buildScope, buildSequenceTree, cameraBasis, checkEase, clockTable, collectPropKeys, contentLength, describeLayer, ensureFilterLibrary, evaluateExpr, flattenSvgPath, homeCamera, homeDistance, lintKeys, lintText, lintTiming, noise, projectLayer, rand, random, registerSequenceType, remapOf, resolveAt, summarizeWarnings, timeRemapOf };
+//# sourceMappingURL=chunk-DQHXVNOI.js.map
+//# sourceMappingURL=chunk-DQHXVNOI.js.map