modern-canvas 0.2.3 → 0.2.4

package/dist/index.mjs

@@ -2198,13 +2198,13 @@ class Vector3 extends Vector {
   }
 }
 
-var __defProp$L = Object.defineProperty;
-var __decorateClass$L = (decorators, target, key, kind) => {
+var __defProp$M = Object.defineProperty;
+var __decorateClass$M = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$L(target, key, result);
+  if (result) __defProp$M(target, key, result);
   return result;
 };
 class MainLoop extends CoreObject {
@@ -2245,10 +2245,10 @@ class MainLoop extends CoreObject {
     }
   }
 }
-__decorateClass$L([
+__decorateClass$M([
   property({ default: 24 })
 ], MainLoop.prototype, "fps");
-__decorateClass$L([
+__decorateClass$M([
   property({ default: 1 })
 ], MainLoop.prototype, "speed");
 
@@ -4392,13 +4392,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$K = Object.defineProperty;
-var __decorateClass$K = (decorators, target, key, kind) => {
+var __defProp$L = Object.defineProperty;
+var __decorateClass$L = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$K(target, key, result);
+  if (result) __defProp$L(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -4442,20 +4442,20 @@ class IndexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$K([
+__decorateClass$L([
   protectedProperty({ default: null })
 ], IndexBuffer.prototype, "data");
-__decorateClass$K([
+__decorateClass$L([
   protectedProperty({ default: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$J = Object.defineProperty;
-var __decorateClass$J = (decorators, target, key, kind) => {
+var __defProp$K = Object.defineProperty;
+var __decorateClass$K = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$J(target, key, result);
+  if (result) __defProp$K(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -4499,20 +4499,20 @@ class VertexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$J([
+__decorateClass$K([
   protectedProperty({ default: null })
 ], VertexBuffer.prototype, "data");
-__decorateClass$J([
+__decorateClass$K([
   protectedProperty({ default: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$I = Object.defineProperty;
-var __decorateClass$I = (decorators, target, key, kind) => {
+var __defProp$J = Object.defineProperty;
+var __decorateClass$J = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$I(target, key, result);
+  if (result) __defProp$J(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
@@ -4549,25 +4549,25 @@ class VertexAttribute extends Resource {
     return result;
   }
 }
-__decorateClass$I([
+__decorateClass$J([
   protectedProperty()
 ], VertexAttribute.prototype, "buffer");
-__decorateClass$I([
+__decorateClass$J([
   protectedProperty({ default: 0 })
 ], VertexAttribute.prototype, "size");
-__decorateClass$I([
+__decorateClass$J([
   protectedProperty({ default: false })
 ], VertexAttribute.prototype, "normalized");
-__decorateClass$I([
+__decorateClass$J([
   protectedProperty({ default: "float" })
 ], VertexAttribute.prototype, "type");
-__decorateClass$I([
+__decorateClass$J([
   protectedProperty()
 ], VertexAttribute.prototype, "stride");
-__decorateClass$I([
+__decorateClass$J([
   protectedProperty()
 ], VertexAttribute.prototype, "offset");
-__decorateClass$I([
+__decorateClass$J([
   protectedProperty()
 ], VertexAttribute.prototype, "divisor");
 
@@ -4817,13 +4817,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$H = Object.defineProperty;
-var __decorateClass$H = (decorators, target, key, kind) => {
+var __defProp$I = Object.defineProperty;
+var __decorateClass$I = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$H(target, key, result);
+  if (result) __defProp$I(target, key, result);
   return result;
 };
 const style2DFilterDefault = {
@@ -5040,58 +5040,58 @@ class CanvasItemStyle extends Resource {
     return m;
   }
 }
-__decorateClass$H([
+__decorateClass$I([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "backgroundColor");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "backgroundImage");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "filter");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: "inherit" })
 ], CanvasItemStyle.prototype, "direction");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "boxShadow");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "maskImage");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: 1 })
 ], CanvasItemStyle.prototype, "opacity");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: 0 })
 ], CanvasItemStyle.prototype, "borderWidth");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: 0 })
 ], CanvasItemStyle.prototype, "borderRadius");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: "#000000" })
 ], CanvasItemStyle.prototype, "borderColor");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "borderStyle");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: 0 })
 ], CanvasItemStyle.prototype, "outlineWidth");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: 0 })
 ], CanvasItemStyle.prototype, "outlineOffset");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: "#000000" })
 ], CanvasItemStyle.prototype, "outlineColor");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "outlineStyle");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: "visible" })
 ], CanvasItemStyle.prototype, "visibility");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: "visible" })
 ], CanvasItemStyle.prototype, "overflow");
-__decorateClass$H([
+__decorateClass$I([
   property({ default: "auto" })
 ], CanvasItemStyle.prototype, "pointerEvents");
 const transformStyle = getDefaultTransformStyle();
@@ -5103,13 +5103,13 @@ for (const key in textStyle) {
   defineProperty(CanvasItemStyle, key, { default: textStyle[key] });
 }
 
-var __defProp$G = Object.defineProperty;
-var __decorateClass$G = (decorators, target, key, kind) => {
+var __defProp$H = Object.defineProperty;
+var __decorateClass$H = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$G(target, key, result);
+  if (result) __defProp$H(target, key, result);
   return result;
 };
 class Texture2D extends Resource {
@@ -5235,32 +5235,32 @@ class Texture2D extends Resource {
     }
   }
 }
-__decorateClass$G([
+__decorateClass$H([
   protectedProperty()
 ], Texture2D.prototype, "source");
-__decorateClass$G([
+__decorateClass$H([
   property({ default: 0 })
 ], Texture2D.prototype, "width");
-__decorateClass$G([
+__decorateClass$H([
   property({ default: 0 })
 ], Texture2D.prototype, "height");
-__decorateClass$G([
+__decorateClass$H([
   property({ default: "linear" })
 ], Texture2D.prototype, "filterMode");
-__decorateClass$G([
+__decorateClass$H([
   property({ default: "clamp_to_edge" })
 ], Texture2D.prototype, "wrapMode");
-__decorateClass$G([
+__decorateClass$H([
   property({ default: 1 })
 ], Texture2D.prototype, "pixelRatio");
 
-var __defProp$F = Object.defineProperty;
-var __decorateClass$F = (decorators, target, key, kind) => {
+var __defProp$G = Object.defineProperty;
+var __decorateClass$G = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$F(target, key, result);
+  if (result) __defProp$G(target, key, result);
   return result;
 };
 class CanvasTexture extends Texture2D {
@@ -5279,7 +5279,7 @@ class CanvasTexture extends Texture2D {
     super._updateProperty(key, value, oldValue, declaration);
   }
 }
-__decorateClass$F([
+__decorateClass$G([
   property({ default: 2 })
 ], CanvasTexture.prototype, "pixelRatio");
 
@@ -5437,13 +5437,13 @@ class PixelsTexture extends Texture2D {
   }
 }
 
-var __defProp$E = Object.defineProperty;
-var __decorateClass$E = (decorators, target, key, kind) => {
+var __defProp$F = Object.defineProperty;
+var __decorateClass$F = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$E(target, key, result);
+  if (result) __defProp$F(target, key, result);
   return result;
 };
 function resolveOptions(options) {
@@ -5687,10 +5687,10 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
     }
   }
 };
-__decorateClass$E([
+__decorateClass$F([
   protectedProperty({ default: true })
 ], _VideoTexture.prototype, "autoUpdate");
-__decorateClass$E([
+__decorateClass$F([
   protectedProperty({ default: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
@@ -5860,14 +5860,14 @@ class CanvasContext extends Path2D {
   }
 }
 
-var __defProp$D = Object.defineProperty;
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$C(target, key) : target;
+var __defProp$E = Object.defineProperty;
+var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
+var __decorateClass$E = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$D(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$D(target, key, result);
+  if (kind && result) __defProp$E(target, key, result);
   return result;
 };
 let Node = class extends CoreObject {
@@ -6010,9 +6010,9 @@ let Node = class extends CoreObject {
       case "inherit":
         return this._parent?.canProcess() ?? true;
       case "pausable":
-        return this._tree.paused;
-      case "when_paused":
         return !this._tree.paused;
+      case "when_paused":
+        return this._tree.paused;
       case "always":
         return true;
       case "disabled":
@@ -6292,33 +6292,33 @@ let Node = class extends CoreObject {
     return node;
   }
 };
-__decorateClass$D([
+__decorateClass$E([
   property()
 ], Node.prototype, "name", 2);
-__decorateClass$D([
+__decorateClass$E([
   property()
 ], Node.prototype, "mask", 2);
-__decorateClass$D([
+__decorateClass$E([
   property({ default: "inherit" })
 ], Node.prototype, "processMode", 2);
-__decorateClass$D([
+__decorateClass$E([
   property({ default: "inherit" })
 ], Node.prototype, "renderMode", 2);
-__decorateClass$D([
+__decorateClass$E([
   property({ default: "default" })
 ], Node.prototype, "internalMode", 2);
-Node = __decorateClass$D([
+Node = __decorateClass$E([
   customNode("Node")
 ], Node);
 
-var __defProp$C = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __decorateClass$C = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$B(target, key) : target;
+var __defProp$D = Object.defineProperty;
+var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
+var __decorateClass$D = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$C(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$C(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 let TimelineNode = class extends Node {
@@ -6377,75 +6377,236 @@ let TimelineNode = class extends Node {
     super._process(delta);
   }
 };
-__decorateClass$C([
+__decorateClass$D([
   property({ default: 0 })
 ], TimelineNode.prototype, "delay", 2);
-__decorateClass$C([
+__decorateClass$D([
   property({ default: 0 })
 ], TimelineNode.prototype, "duration", 2);
-__decorateClass$C([
+__decorateClass$D([
   property({ default: false })
 ], TimelineNode.prototype, "paused", 2);
-TimelineNode = __decorateClass$C([
+TimelineNode = __decorateClass$D([
   customNode("TimelineNode")
 ], TimelineNode);
 
-var __defProp$B = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$A(target, key) : target;
+var __defProp$C = Object.defineProperty;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
+var __decorateClass$C = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$B(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$B(target, key, result);
+  if (kind && result) __defProp$C(target, key, result);
   return result;
 };
-let Effect = class extends TimelineNode {
-  material;
-  mode;
-  get _mode() {
-    return this.mode ?? "parent";
-  }
-  /** Viewports */
-  viewport1 = new Viewport();
-  viewport2 = new Viewport();
-  /** Render call */
-  _renderId = 0;
-  _renderViewport;
-  /** Temporary nodes for transition */
-  _previousSibling;
-  _nextSibling;
-  constructor(properties, children = []) {
+let Viewport = class extends Node {
+  constructor(flipY = false) {
     super();
-    this._onProcessing = this._onProcessing.bind(this);
-    this._onNodeProcessed = this._onNodeProcessed.bind(this);
-    this.setProperties(properties).append(children);
+    this.flipY = flipY;
+    this._projection.flipY(flipY);
+  }
+  get valid() {
+    return Boolean(this.width && this.height);
+  }
+  _projection = new Projection2D();
+  _framebufferIndex = 0;
+  _framebuffers = [
+    { texture: new ViewportTexture(), needsUpload: false },
+    { texture: new ViewportTexture(), needsUpload: false }
+  ];
+  get framebuffer() {
+    return this._framebuffers[this._framebufferIndex];
+  }
+  get texture() {
+    return this.framebuffer.texture;
+  }
+  /** @internal */
+  _glFramebufferOptions(renderer) {
+    const { width, height } = this;
+    const { pixelRatio } = renderer;
+    this._framebuffers.forEach((framebuffer) => {
+      const texture = framebuffer.texture;
+      texture.pixelRatio = pixelRatio;
+      texture.width = width;
+      texture.height = height;
+      texture.upload(renderer);
+    });
+    return {
+      width,
+      height,
+      colorTextures: [this.texture._glTexture(renderer)]
+    };
+  }
+  /** @internal */
+  _glFramebuffer(renderer) {
+    return renderer.getRelated(this.framebuffer, () => {
+      return renderer.framebuffer.create(
+        this._glFramebufferOptions(renderer)
+      );
+    });
   }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "glsl": {
-        const material = new EffectMaterial(value);
-        if (!this.mode && material.has.transition) {
-          this.mode = "transition";
-        }
-        this.material = material;
+      case "x":
+      case "y":
+        this.requestUpload();
+        this._projection.translate(this.x, this.y);
+        this.emit("updateRect");
         break;
-      }
-      case "glslSrc": {
-        if (value) {
-          assets.text.load(value).then((glsl) => this.glsl = glsl);
-        } else {
-          this.glsl = "";
-        }
+      case "width":
+      case "height":
+        this.requestUpload();
+        this._projection.resize(this.width, this.height);
+        this.emit("updateRect");
         break;
-      }
     }
   }
-  _treeEnter(tree) {
-    tree.on("processing", this._onProcessing);
-    tree.on("nodeProcessed", this._onNodeProcessed);
-    this.viewport1.setTree(tree);
+  requestUpload() {
+    this._framebuffers.forEach((framebuffer) => framebuffer.needsUpload = true);
+  }
+  resize(width, height) {
+    this.width = width;
+    this.height = height;
+  }
+  upload(renderer) {
+    const framebuffer = this.framebuffer;
+    if (framebuffer.needsUpload && this.valid) {
+      framebuffer.needsUpload = false;
+      renderer.framebuffer.update(
+        this._glFramebuffer(renderer),
+        this._glFramebufferOptions(renderer)
+      );
+      return true;
+    }
+    return false;
+  }
+  activate(renderer) {
+    if (this.valid) {
+      renderer.flush();
+      this._tree?.setCurrentViewport(this);
+      renderer.framebuffer.bind(this._glFramebuffer(renderer));
+      this.upload(renderer);
+      return true;
+    }
+    return false;
+  }
+  redraw(renderer, cb) {
+    if (this.valid) {
+      renderer.flush();
+      const texture = this.framebuffer.texture;
+      this._framebufferIndex = (this._framebufferIndex + 1) % this._framebuffers.length;
+      this.activate(renderer);
+      renderer.clear();
+      texture.activate(renderer, 0);
+      cb();
+      return true;
+    }
+    return false;
+  }
+  activateWithCopy(renderer, target) {
+    this.resize(target.width, target.height);
+    if (this.activate(renderer)) {
+      renderer.clear();
+      target.texture.activate(renderer, 0);
+      QuadUvGeometry.draw(renderer, UvMaterial.instance, {
+        sampler: 0
+      });
+    }
+  }
+  render(renderer, next) {
+    const oldViewport = this._tree?.getCurrentViewport();
+    this.activate(renderer);
+    renderer.clear();
+    super.render(renderer, next);
+    renderer.flush();
+    if (oldViewport) {
+      oldViewport.activate(renderer);
+    } else {
+      renderer.framebuffer.bind(null);
+      this._tree?.setCurrentViewport(undefined);
+    }
+  }
+  getRect() {
+    return new Rect2(this.x, this.y, this.width, this.height);
+  }
+  toProjectionArray(transpose = false) {
+    return this._projection.toArray(transpose);
+  }
+};
+__decorateClass$C([
+  property({ default: 0 })
+], Viewport.prototype, "x", 2);
+__decorateClass$C([
+  property({ default: 0 })
+], Viewport.prototype, "y", 2);
+__decorateClass$C([
+  property({ default: 0 })
+], Viewport.prototype, "width", 2);
+__decorateClass$C([
+  property({ default: 0 })
+], Viewport.prototype, "height", 2);
+Viewport = __decorateClass$C([
+  customNode("Viewport")
+], Viewport);
+
+var __defProp$B = Object.defineProperty;
+var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __decorateClass$B = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$A(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$B(target, key, result);
+  return result;
+};
+let Effect = class extends TimelineNode {
+  material;
+  effectMode;
+  get _effectMode() {
+    return this.effectMode ?? "parent";
+  }
+  /** Viewports */
+  viewport1 = new Viewport();
+  viewport2 = new Viewport();
+  /** Render call */
+  _renderId = 0;
+  _renderViewport;
+  /** Temporary nodes for transition */
+  _previousSibling;
+  _nextSibling;
+  constructor(properties, children = []) {
+    super();
+    this._onProcessing = this._onProcessing.bind(this);
+    this._onNodeProcessed = this._onNodeProcessed.bind(this);
+    this.setProperties(properties).append(children);
+  }
+  _updateProperty(key, value, oldValue, declaration) {
+    super._updateProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "glsl": {
+        const material = new EffectMaterial(value);
+        if (!this.effectMode && material.has.transition) {
+          this.effectMode = "transition";
+        }
+        this.material = material;
+        break;
+      }
+      case "glslSrc": {
+        if (value) {
+          assets.text.load(value).then((glsl) => this.glsl = glsl);
+        } else {
+          this.glsl = "";
+        }
+        break;
+      }
+    }
+  }
+  _treeEnter(tree) {
+    tree.on("processing", this._onProcessing);
+    tree.on("nodeProcessed", this._onNodeProcessed);
+    this.viewport1.setTree(tree);
     this.viewport2.setTree(tree);
   }
   _treeExit(oldTree) {
@@ -6456,7 +6617,7 @@ let Effect = class extends TimelineNode {
   }
   _onProcessing() {
     this._updateCurrentTime();
-    switch (this._mode) {
+    switch (this._effectMode) {
       case "transition":
         this._previousSibling = this.previousSibling;
         this._nextSibling = this.nextSibling;
@@ -6473,7 +6634,7 @@ let Effect = class extends TimelineNode {
     const renderStack = this._tree?.renderStack;
     if (!renderStack)
       return;
-    switch (this._mode) {
+    switch (this._effectMode) {
       case "transition":
         if (node.is(this._previousSibling)) {
           this._previousSibling = undefined;
@@ -6513,8 +6674,10 @@ let Effect = class extends TimelineNode {
     }
   }
   _onProcess(delta = 0) {
+    if (!this.canProcess())
+      return;
     this._renderId = 0;
-    switch (this._mode) {
+    switch (this._effectMode) {
       case "before":
         super._onProcess(delta);
         break;
@@ -6573,7 +6736,7 @@ let Effect = class extends TimelineNode {
         this.viewport1.activate(renderer);
         this.apply(renderer, this.viewport1, {
           redraw: true,
-          target: this._mode === "parent" ? this._parent ?? undefined : undefined,
+          target: this._effectMode === "parent" ? this._parent ?? undefined : undefined,
           targetArea: this._parseTargetArea()
         });
         oldViewport.activate(renderer);
@@ -6583,7 +6746,7 @@ let Effect = class extends TimelineNode {
     }
   }
   _parseTargetArea() {
-    if (this._mode === "parent" && this._parent && "getRect" in this._parent) {
+    if (this._effectMode === "parent" && this._parent && "getRect" in this._parent) {
       const rect = this._parent.getRect();
       if (rect) {
         return [
@@ -6596,7 +6759,7 @@ let Effect = class extends TimelineNode {
     }
   }
   _render(renderer) {
-    switch (this._mode) {
+    switch (this._effectMode) {
       case "before":
         this._renderBefore(renderer);
         break;
@@ -6639,7 +6802,7 @@ __decorateClass$B([
 ], Effect.prototype, "material", 2);
 __decorateClass$B([
   property()
-], Effect.prototype, "mode", 2);
+], Effect.prototype, "effectMode", 2);
 __decorateClass$B([
   property({ default: "" })
 ], Effect.prototype, "glsl", 2);
@@ -7726,249 +7889,98 @@ var __decorateClass$r = (decorators, target, key, kind) => {
   return result;
 };
 var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, key + "" , value);
-let KawaseEffect = class extends Effect {
-  blur = 10;
-  quality = 10;
-  apply(renderer, target) {
-    const currentTimeProgress = this.currentTimeProgress;
-    let sampler;
-    let progress;
-    if (currentTimeProgress < 0.5) {
-      sampler = 0;
-      progress = (0.5 - currentTimeProgress) / 0.5;
-    } else {
-      sampler = 1;
-      progress = (currentTimeProgress - 0.5) / 0.5;
+let MaskEffect = class extends Effect {
+  texture;
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
+  async load() {
+    this.texture = undefined;
+    if (this.src) {
+      this.texture = await assets.texture.load(this.src);
     }
-    const blur = this.blur;
-    const quality = this.quality;
-    const width = target.width;
-    const height = target.height;
-    const drawCalls = [];
-    const kernels = [blur];
-    if (blur > 0) {
-      let k = blur;
-      const step = blur / quality;
-      for (let i = 1; i < quality; i++) {
-        k -= step;
-        kernels.push(k);
-      }
+  }
+  _updateProperty(key, value, oldValue, declaration) {
+    super._updateProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "src":
+        this.load();
+        break;
+      case "texture":
+        oldValue?.destroy?.();
+        break;
     }
-    const uvX = 1 / width;
-    const uvY = 1 / height;
-    const uOffset = [];
-    let offset;
-    const last = quality - 1;
-    for (let i = 0; i < last; i++) {
-      offset = kernels[i] + 0.5;
-      uOffset[0] = offset * uvX;
-      uOffset[1] = offset * uvY;
-      drawCalls.push({
-        offset: uOffset
+  }
+  apply(renderer, source, context) {
+    if (this.texture && context.targetArea) {
+      source.redraw(renderer, () => {
+        this.texture.activate(renderer, 1);
+        QuadUvGeometry.draw(renderer, MaskEffect.material, {
+          sampler: 0,
+          mask: 1,
+          area: context.targetArea
+        });
+        renderer.texture.unbind(1);
       });
     }
-    offset = kernels[last] + 0.5;
-    uOffset[0] = offset * uvX;
-    uOffset[1] = offset * uvY;
-    drawCalls.push({
-      offset: uOffset
-    });
-    drawCalls.forEach((uniforms) => {
-      QuadUvGeometry.draw(renderer, KawaseEffect.material, {
-        sampler,
-        progress,
-        ...uniforms
-      });
-    });
   }
 };
-__publicField$8(KawaseEffect, "material", new Material({
-  vert: `attribute vec2 position;
+__publicField$8(MaskEffect, "material", new Material({
+  vert: `precision mediump float;
+attribute vec2 position;
 attribute vec2 uv;
 varying vec2 vUv;
 void main() {
   gl_Position = vec4(position, 0.0, 1.0);
   vUv = uv;
 }`,
-  frag: `precision highp float;
-varying vec2 vUv;
+  frag: `varying vec2 vUv;
 uniform sampler2D sampler;
-uniform vec2 offset;
-uniform float progress;
+uniform sampler2D mask;
+uniform float area[4];
 
 void main(void) {
-  vec2 offset1 = vec2(offset.x - progress * offset.x, offset.y - progress * offset.y);
-  vec4 color = vec4(0.0);
-  color += texture2D(sampler, vec2(vUv.x - offset1.x, vUv.y + offset1.y));
-  color += texture2D(sampler, vec2(vUv.x + offset1.x, vUv.y + offset1.y));
-  color += texture2D(sampler, vec2(vUv.x + offset1.x, vUv.y - offset1.y));
-  color += texture2D(sampler, vec2(vUv.x - offset1.x, vUv.y - offset1.y));
-  color *= 0.25;
-  gl_FragColor = color;
+  if (
+    vUv.x > area[0]
+    && vUv.x < (area[0] + area[2])
+    && (1.0 - vUv.y) > area[1]
+    && (1.0 - vUv.y) < (area[1] + area[3])
+  ) {
+    vec4 color = texture2D(sampler, vUv);
+    vec2 uv = vec2(
+      (vUv.x - area[0]) / area[2],
+      ((1.0 - vUv.y) - area[1]) / area[3]
+    );
+    vec4 maskColor = texture2D(mask, uv);
+    gl_FragColor = mix(vec4(0.), color, maskColor.a);
+  } else {
+    gl_FragColor = vec4(0.);
+  }
 }`
 }));
-KawaseEffect = __decorateClass$r([
-  customNode("KawaseEffect")
-], KawaseEffect);
-
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$p(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$q(target, key, result);
-  return result;
-};
-var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, key + "" , value);
-let LeftEraseEffect = class extends Effect {
-  apply(renderer) {
-    QuadUvGeometry.draw(renderer, LeftEraseEffect.material, {
-      previous: 0,
-      next: 1,
-      progress: this.currentTimeProgress
-    });
-  }
-};
-__publicField$7(LeftEraseEffect, "material", new Material({
-  vert: `attribute vec2 position;
-attribute vec2 uv;
-varying vec2 vUv;
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-  vUv = uv;
-}`,
-  frag: `precision highp float;
-varying vec2 vUv;
-uniform float progress;
-uniform sampler2D previous;
-uniform sampler2D next;
-
-float easeInOutQuint(float t) {
-    return t < 0.5 ? 16.0*t*t*t*t*t : 1.0+16.0*(--t)*t*t*t*t;
-}
-
-void main() {
-  vec4 src1Color = texture2D(previous, vUv);
-  vec4 src2Color = texture2D(next, vUv);
-  float mProgress = 1.0 - progress;
-  float mixPercent = 0.0;
-  if (vUv.x <= mProgress) {
-    mixPercent = 1.0;
-  }
-  gl_FragColor = mix(src2Color, src1Color, mixPercent);
-}`
-}));
-LeftEraseEffect = __decorateClass$q([
-  customNode("LeftEraseEffect")
-], LeftEraseEffect);
-
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$o(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$p(target, key, result);
-  return result;
-};
-var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, key + "" , value);
-let MaskEffect = class extends Effect {
-  texture;
-  constructor(properties, children = []) {
-    super();
-    this.setProperties(properties).append(children);
-  }
-  async load() {
-    this.texture = undefined;
-    if (this.src) {
-      this.texture = await assets.texture.load(this.src);
-    }
-  }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
-    switch (key) {
-      case "src":
-        this.load();
-        break;
-      case "texture":
-        oldValue?.destroy?.();
-        break;
-    }
-  }
-  apply(renderer, source, context) {
-    if (this.texture && context.targetArea) {
-      source.redraw(renderer, () => {
-        this.texture.activate(renderer, 1);
-        QuadUvGeometry.draw(renderer, MaskEffect.material, {
-          sampler: 0,
-          mask: 1,
-          area: context.targetArea
-        });
-        renderer.texture.unbind(1);
-      });
-    }
-  }
-};
-__publicField$6(MaskEffect, "material", new Material({
-  vert: `precision mediump float;
-attribute vec2 position;
-attribute vec2 uv;
-varying vec2 vUv;
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-  vUv = uv;
-}`,
-  frag: `varying vec2 vUv;
-uniform sampler2D sampler;
-uniform sampler2D mask;
-uniform float area[4];
-
-void main(void) {
-  if (
-    vUv.x > area[0]
-    && vUv.x < (area[0] + area[2])
-    && (1.0 - vUv.y) > area[1]
-    && (1.0 - vUv.y) < (area[1] + area[3])
-  ) {
-    vec4 color = texture2D(sampler, vUv);
-    vec2 uv = vec2(
-      (vUv.x - area[0]) / area[2],
-      ((1.0 - vUv.y) - area[1]) / area[3]
-    );
-    vec4 maskColor = texture2D(mask, uv);
-    gl_FragColor = mix(vec4(0.), color, maskColor.a);
-  } else {
-    gl_FragColor = vec4(0.);
-  }
-}`
-}));
-__decorateClass$p([
+__decorateClass$r([
   protectedProperty()
 ], MaskEffect.prototype, "texture", 2);
-__decorateClass$p([
+__decorateClass$r([
   property({ default: "" })
 ], MaskEffect.prototype, "src", 2);
-MaskEffect = __decorateClass$p([
+MaskEffect = __decorateClass$r([
   customNode("MaskEffect")
 ], MaskEffect);
 
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$n(target, key) : target;
+var __defProp$q = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$p(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$o(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
-var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, key + "" , value);
+var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, key + "" , value);
 let PixelateEffect = class extends Effect {
   size;
   constructor(size = 10) {
@@ -7985,7 +7997,7 @@ let PixelateEffect = class extends Effect {
     });
   }
 };
-__publicField$5(PixelateEffect, "material", new Material({
+__publicField$7(PixelateEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -8022,25 +8034,25 @@ void main(void) {
   gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-__decorateClass$o([
+__decorateClass$q([
   property()
 ], PixelateEffect.prototype, "size", 2);
-PixelateEffect = __decorateClass$o([
+PixelateEffect = __decorateClass$q([
   customNode("PixelateEffect")
 ], PixelateEffect);
 
-var __defProp$n = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$n = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$m(target, key) : target;
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$p = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$o(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$n(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
-var __publicField$4 = (obj, key, value) => __defNormalProp$4(obj, key + "" , value);
+var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, key + "" , value);
 let ShadowEffect = class extends Effect {
   blur = new BlurEffect();
   viewport3 = new Viewport();
@@ -8067,7 +8079,7 @@ let ShadowEffect = class extends Effect {
     });
   }
 };
-__publicField$4(ShadowEffect, "material", new Material({
+__publicField$6(ShadowEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -8090,67 +8102,41 @@ void main(void) {
   gl_FragColor = sample;
 }`
 }));
-ShadowEffect = __decorateClass$n([
+ShadowEffect = __decorateClass$p([
   customNode("ShadowEffect")
 ], ShadowEffect);
 
-var __defProp$m = Object.defineProperty;
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$l(target, key) : target;
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$o = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$n(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$m(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
-var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, key + "" , value);
-let TiltShiftEffect = class extends Effect {
-  blur = 100;
-  gradientBlur = 600;
-  apply(renderer, target) {
-    const currentTimeProgress = this.currentTimeProgress;
-    let sampler;
-    let progress;
-    if (currentTimeProgress < 0.5) {
-      sampler = 0;
-      progress = (0.5 - currentTimeProgress) / 0.5;
-    } else {
-      sampler = 1;
-      progress = (currentTimeProgress - 0.5) / 0.5;
-    }
-    const width = target.width;
-    const height = target.height;
-    const start = [0, height / 2];
-    const end = [600, height / 2];
-    const texSize = [width, height];
-    const dx = end[0] - start[0];
-    const dy = end[1] - start[1];
-    const d = Math.sqrt(dx * dx + dy * dy);
-    QuadUvGeometry.draw(renderer, TiltShiftEffect.material, {
-      sampler,
-      progress,
-      blur: this.blur,
-      gradientBlur: this.gradientBlur,
-      start,
-      end,
-      delta: [dx / d, dy / d],
-      texSize
-    });
-    QuadUvGeometry.draw(renderer, TiltShiftEffect.material, {
-      sampler,
-      progress,
-      blur: this.blur,
-      gradientBlur: this.gradientBlur,
-      start,
-      end,
-      delta: [-dy / d, dx / d],
-      texSize
+var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, key + "" , value);
+let ZoomBlurEffect = class extends Effect {
+  center;
+  innerRadius = 20;
+  radius = -1;
+  strength = 0.1;
+  apply(renderer, source) {
+    source.redraw(renderer, () => {
+      QuadUvGeometry.draw(renderer, ZoomBlurEffect.material, {
+        sampler: 0,
+        center: this.center ?? [source.width / 2, source.height / 2],
+        innerRadius: this.innerRadius,
+        radius: this.radius,
+        strength: this.strength,
+        inputSize: [source.width, source.height, 1 / source.width, 1 / source.height]
+      });
     });
   }
 };
-__publicField$3(TiltShiftEffect, "material", new Material({
+__publicField$5(ZoomBlurEffect, "material", new Material({
   vert: `attribute vec2 position;
 attribute vec2 uv;
 varying vec2 vUv;
@@ -8158,199 +8144,22 @@ void main() {
   gl_Position = vec4(position, 0.0, 1.0);
   vUv = uv;
 }`,
-  frag: `precision highp float;
-varying vec2 vUv;
+  frag: `varying vec2 vUv;
 uniform sampler2D sampler;
-uniform float blur;
-uniform float gradientBlur;
-uniform vec2 start;
-uniform vec2 end;
-uniform vec2 delta;
-uniform vec2 texSize;
-uniform float progress;
+uniform vec4 inputSize;
 
-float random(vec3 scale, float seed) {
-  return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
-}
+uniform vec2 center;
+uniform float strength;
+uniform float innerRadius;
+uniform float radius;
 
-void main(void) {
-  float blur1 = blur - progress * blur;
-  float gradientBlur1 = progress * gradientBlur;
+const float MAX_KERNEL_SIZE = 32.0;
 
-  vec4 color = vec4(0.0);
-  float total = 0.0;
-  float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
-  vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));
-  float radius = smoothstep(0.0, 1.0, abs(dot(vUv * texSize - start, normal)) / gradientBlur1) * blur1;
-
-  for (float t = -30.0; t <= 30.0; t++) {
-    float percent = (t + offset - 0.5) / 30.0;
-    float weight = 1.0 - abs(percent);
-    vec4 sample1 = texture2D(sampler, vUv + delta / texSize * percent * radius);
-    sample1.rgb *= sample1.a;
-    color += sample1 * weight;
-    total += weight;
-  }
-
-  color /= total;
-  color.rgb /= color.a + 0.00001;
-
-  gl_FragColor = color;
-}`
-}));
-TiltShiftEffect = __decorateClass$m([
-  customNode("TiltShiftEffect")
-], TiltShiftEffect);
-
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$k(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$l(target, key, result);
-  return result;
-};
-var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, key + "" , value);
-let TwistEffect = class extends Effect {
-  radius;
-  angle = 4;
-  padding = 20;
-  offset;
-  apply(renderer, source) {
-    const currentTimeProgress = this.currentTimeProgress;
-    let sampler;
-    let progress;
-    if (currentTimeProgress < 0.5) {
-      sampler = 0;
-      progress = (0.5 - currentTimeProgress) / 0.5;
-    } else {
-      sampler = 1;
-      progress = (currentTimeProgress - 0.5) / 0.5;
-    }
-    const width = source.width;
-    const height = source.height;
-    QuadUvGeometry.draw(renderer, TwistEffect.material, {
-      sampler,
-      progress,
-      filterArea: [width, height, 0, 0],
-      radius: this.radius ?? width,
-      angle: this.angle,
-      padding: this.padding,
-      offset: this.offset ?? [width / 2, height / 2]
-    });
-  }
-};
-__publicField$2(TwistEffect, "material", new Material({
-  vert: `attribute vec2 position;
-attribute vec2 uv;
-varying vec2 vUv;
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-  vUv = uv;
-}`,
-  frag: `precision highp float;
-varying vec2 vUv;
-uniform sampler2D sampler;
-uniform float radius;
-uniform float angle;
-uniform vec2 offset;
-uniform vec4 filterArea;
-uniform float progress;
-
-vec2 mapCoord(vec2 coord) {
-  coord -= filterArea.zw;
-  coord *= filterArea.xy;
-  return coord;
-}
-
-vec2 unmapCoord(vec2 coord) {
-  coord -= filterArea.zw;
-  coord /= filterArea.xy;
-  return coord;
-}
-
-vec2 twist(vec2 coord, float radius) {
-  coord -= offset;
-  float dist = length(coord);
-  if (dist < radius) {
-    float ratioDist = (radius - dist) / radius;
-    float angleMod = ratioDist * ratioDist * angle;
-    float s = sin(angleMod);
-    float c = cos(angleMod);
-    coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);
-  }
-  coord += offset;
-  return coord;
-}
-
-void main(void) {
-  vec2 coord = mapCoord(vUv);
-  coord = twist(coord, radius - (progress * radius));
-  coord = unmapCoord(coord);
-  gl_FragColor = texture2D(sampler, coord);
-}`
-}));
-TwistEffect = __decorateClass$l([
-  customNode("TwistEffect")
-], TwistEffect);
-
-var __defProp$k = Object.defineProperty;
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$j(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$k(target, key, result);
-  return result;
-};
-var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, key + "" , value);
-let ZoomBlurEffect = class extends Effect {
-  center;
-  innerRadius = 20;
-  radius = -1;
-  strength = 0.1;
-  apply(renderer, source) {
-    source.redraw(renderer, () => {
-      QuadUvGeometry.draw(renderer, ZoomBlurEffect.material, {
-        sampler: 0,
-        center: this.center ?? [source.width / 2, source.height / 2],
-        innerRadius: this.innerRadius,
-        radius: this.radius,
-        strength: this.strength,
-        inputSize: [source.width, source.height, 1 / source.width, 1 / source.height]
-      });
-    });
-  }
-};
-__publicField$1(ZoomBlurEffect, "material", new Material({
-  vert: `attribute vec2 position;
-attribute vec2 uv;
-varying vec2 vUv;
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-  vUv = uv;
-}`,
-  frag: `varying vec2 vUv;
-uniform sampler2D sampler;
-uniform vec4 inputSize;
-
-uniform vec2 center;
-uniform float strength;
-uniform float innerRadius;
-uniform float radius;
-
-const float MAX_KERNEL_SIZE = 32.0;
-
-highp float rand(vec2 co, float seed) {
-  const highp float a = 12.9898, b = 78.233, c = 43758.5453;
-  highp float dt = dot(co + seed, vec2(a, b)), sn = mod(dt, 3.14159);
-  return fract(sin(sn) * c + seed);
-}
+highp float rand(vec2 co, float seed) {
+  const highp float a = 12.9898, b = 78.233, c = 43758.5453;
+  highp float dt = dot(co + seed, vec2(a, b)), sn = mod(dt, 3.14159);
+  return fract(sin(sn) * c + seed);
+}
 
 void main() {
   float minGradient = innerRadius * 0.3;
@@ -8411,30 +8220,30 @@ void main() {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$k([
+__decorateClass$o([
   property()
 ], ZoomBlurEffect.prototype, "center", 2);
-__decorateClass$k([
+__decorateClass$o([
   property()
 ], ZoomBlurEffect.prototype, "innerRadius", 2);
-__decorateClass$k([
+__decorateClass$o([
   property()
 ], ZoomBlurEffect.prototype, "radius", 2);
-__decorateClass$k([
+__decorateClass$o([
   property()
 ], ZoomBlurEffect.prototype, "strength", 2);
-ZoomBlurEffect = __decorateClass$k([
+ZoomBlurEffect = __decorateClass$o([
   customNode("ZoomBlurEffect")
 ], ZoomBlurEffect);
 
-var __defProp$j = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$i(target, key) : target;
+var __defProp$n = Object.defineProperty;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __decorateClass$n = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$m(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$j(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 let CanvasItem = class extends TimelineNode {
@@ -8729,13 +8538,13 @@ let CanvasItem = class extends TimelineNode {
     };
   }
 };
-__decorateClass$j([
+__decorateClass$n([
   property()
 ], CanvasItem.prototype, "modulate", 2);
-__decorateClass$j([
+__decorateClass$n([
   property()
 ], CanvasItem.prototype, "blendMode", 2);
-CanvasItem = __decorateClass$j([
+CanvasItem = __decorateClass$n([
   customNode("CanvasItem")
 ], CanvasItem);
 
@@ -8765,14 +8574,14 @@ class RenderStack extends Node {
   }
 }
 
-var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$h(target, key) : target;
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __decorateClass$m = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$l(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$i(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
 let Timeline = class extends Node {
@@ -8817,213 +8626,52 @@ let Timeline = class extends Node {
     this.addTime(delta);
   }
 };
-__decorateClass$i([
+__decorateClass$m([
   property({ default: 0 })
 ], Timeline.prototype, "startTime", 2);
-__decorateClass$i([
+__decorateClass$m([
   property({ default: 0 })
 ], Timeline.prototype, "currentTime", 2);
-__decorateClass$i([
+__decorateClass$m([
   property({ default: Number.MAX_SAFE_INTEGER })
 ], Timeline.prototype, "endTime", 2);
-__decorateClass$i([
+__decorateClass$m([
   property({ default: false })
 ], Timeline.prototype, "loop", 2);
-Timeline = __decorateClass$i([
+Timeline = __decorateClass$m([
   customNode("Timeline")
 ], Timeline);
 
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$g(target, key) : target;
+var __defProp$l = Object.defineProperty;
+var __decorateClass$l = (decorators, target, key, kind) => {
+  var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$h(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$l(target, key, result);
   return result;
 };
-let Viewport = class extends Node {
-  constructor(flipY = false) {
-    super();
-    this.flipY = flipY;
-    this._projection.flipY(flipY);
-  }
-  get valid() {
-    return Boolean(this.width && this.height);
-  }
-  _projection = new Projection2D();
-  _framebufferIndex = 0;
-  _framebuffers = [
-    { texture: new ViewportTexture(), needsUpload: false },
-    { texture: new ViewportTexture(), needsUpload: false }
-  ];
-  get framebuffer() {
-    return this._framebuffers[this._framebufferIndex];
-  }
-  get texture() {
-    return this.framebuffer.texture;
+class SceneTree extends MainLoop {
+  renderStack = new RenderStack();
+  root = new Viewport(true).setTree(this);
+  timeline;
+  _backgroundColor = new Color();
+  _currentViewport;
+  getCurrentViewport() {
+    return this._currentViewport;
   }
-  /** @internal */
-  _glFramebufferOptions(renderer) {
-    const { width, height } = this;
-    const { pixelRatio } = renderer;
-    this._framebuffers.forEach((framebuffer) => {
-      const texture = framebuffer.texture;
-      texture.pixelRatio = pixelRatio;
-      texture.width = width;
-      texture.height = height;
-      texture.upload(renderer);
-    });
-    return {
-      width,
-      height,
-      colorTextures: [this.texture._glTexture(renderer)]
-    };
+  setCurrentViewport(viewport) {
+    this._currentViewport = viewport;
   }
-  /** @internal */
-  _glFramebuffer(renderer) {
-    return renderer.getRelated(this.framebuffer, () => {
-      return renderer.framebuffer.create(
-        this._glFramebufferOptions(renderer)
-      );
-    });
+  constructor(timeline = new Timeline()) {
+    super();
+    this.timeline = timeline.setTree(this);
   }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "x":
-      case "y":
-        this.requestUpload();
-        this._projection.translate(this.x, this.y);
-        this.emit("updateRect");
-        break;
-      case "width":
-      case "height":
-        this.requestUpload();
-        this._projection.resize(this.width, this.height);
-        this.emit("updateRect");
-        break;
-    }
-  }
-  requestUpload() {
-    this._framebuffers.forEach((framebuffer) => framebuffer.needsUpload = true);
-  }
-  resize(width, height) {
-    this.width = width;
-    this.height = height;
-  }
-  upload(renderer) {
-    const framebuffer = this.framebuffer;
-    if (framebuffer.needsUpload && this.valid) {
-      framebuffer.needsUpload = false;
-      renderer.framebuffer.update(
-        this._glFramebuffer(renderer),
-        this._glFramebufferOptions(renderer)
-      );
-      return true;
-    }
-    return false;
-  }
-  activate(renderer) {
-    if (this.valid) {
-      renderer.flush();
-      this._tree?.setCurrentViewport(this);
-      renderer.framebuffer.bind(this._glFramebuffer(renderer));
-      this.upload(renderer);
-      return true;
-    }
-    return false;
-  }
-  redraw(renderer, cb) {
-    if (this.valid) {
-      renderer.flush();
-      const texture = this.framebuffer.texture;
-      this._framebufferIndex = (this._framebufferIndex + 1) % this._framebuffers.length;
-      this.activate(renderer);
-      renderer.clear();
-      texture.activate(renderer, 0);
-      cb();
-      return true;
-    }
-    return false;
-  }
-  activateWithCopy(renderer, target) {
-    this.resize(target.width, target.height);
-    if (this.activate(renderer)) {
-      renderer.clear();
-      target.texture.activate(renderer, 0);
-      QuadUvGeometry.draw(renderer, UvMaterial.instance, {
-        sampler: 0
-      });
-    }
-  }
-  render(renderer, next) {
-    const oldViewport = this._tree?.getCurrentViewport();
-    this.activate(renderer);
-    renderer.clear();
-    super.render(renderer, next);
-    renderer.flush();
-    if (oldViewport) {
-      oldViewport.activate(renderer);
-    } else {
-      renderer.framebuffer.bind(null);
-      this._tree?.setCurrentViewport(undefined);
-    }
-  }
-  getRect() {
-    return new Rect2(this.x, this.y, this.width, this.height);
-  }
-  toProjectionArray(transpose = false) {
-    return this._projection.toArray(transpose);
-  }
-};
-__decorateClass$h([
-  property({ default: 0 })
-], Viewport.prototype, "x", 2);
-__decorateClass$h([
-  property({ default: 0 })
-], Viewport.prototype, "y", 2);
-__decorateClass$h([
-  property({ default: 0 })
-], Viewport.prototype, "width", 2);
-__decorateClass$h([
-  property({ default: 0 })
-], Viewport.prototype, "height", 2);
-Viewport = __decorateClass$h([
-  customNode("Viewport")
-], Viewport);
-
-var __defProp$g = Object.defineProperty;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = undefined ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$g(target, key, result);
-  return result;
-};
-class SceneTree extends MainLoop {
-  renderStack = new RenderStack();
-  root = new Viewport(true).setTree(this);
-  timeline;
-  _backgroundColor = new Color();
-  _currentViewport;
-  getCurrentViewport() {
-    return this._currentViewport;
-  }
-  setCurrentViewport(viewport) {
-    this._currentViewport = viewport;
-  }
-  constructor(timeline = new Timeline()) {
-    super();
-    this.timeline = timeline.setTree(this);
-  }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
-    switch (key) {
-      case "backgroundColor":
-        this._backgroundColor.value = value;
+      case "backgroundColor":
+        this._backgroundColor.value = value;
         break;
     }
   }
@@ -9061,21 +8709,45 @@ class SceneTree extends MainLoop {
     renderer.texture.unbind(texture);
   }
 }
-__decorateClass$g([
+__decorateClass$l([
   property({ default: false })
 ], SceneTree.prototype, "paused");
-__decorateClass$g([
+__decorateClass$l([
   property()
 ], SceneTree.prototype, "backgroundColor");
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$f(target, key) : target;
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __decorateClass$k = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$k(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
+  return result;
+};
+let Transition = class extends Effect {
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
+};
+Transition = __decorateClass$k([
+  customNode("Transition", {
+    effectMode: "transition",
+    processMode: "pausable",
+    duration: 2e3
+  })
+], Transition);
+
+var __defProp$j = Object.defineProperty;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __decorateClass$j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$j(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
 let Node2D = class extends CanvasItem {
@@ -9216,18 +8888,18 @@ let Node2D = class extends CanvasItem {
     );
   }
 };
-Node2D = __decorateClass$f([
+Node2D = __decorateClass$j([
   customNode("Node2D")
 ], Node2D);
 
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$e(target, key) : target;
+var __defProp$i = Object.defineProperty;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$i(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$e(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 function proxy(options) {
@@ -9272,61 +8944,61 @@ let Graphics2D = class extends Node2D {
     return this;
   }
 };
-__decorateClass$e([
+__decorateClass$i([
   proxy()
 ], Graphics2D.prototype, "lineCap", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy()
 ], Graphics2D.prototype, "lineJoin", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy()
 ], Graphics2D.prototype, "fillStyle", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy()
 ], Graphics2D.prototype, "strokeStyle", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy()
 ], Graphics2D.prototype, "lineWidth", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy()
 ], Graphics2D.prototype, "miterLimit", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], Graphics2D.prototype, "rect", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true, redraw: true })
 ], Graphics2D.prototype, "fillRect", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true, redraw: true })
 ], Graphics2D.prototype, "strokeRect", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], Graphics2D.prototype, "roundRect", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], Graphics2D.prototype, "ellipse", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], Graphics2D.prototype, "arc", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], Graphics2D.prototype, "beginPath", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], Graphics2D.prototype, "moveTo", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], Graphics2D.prototype, "lineTo", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], Graphics2D.prototype, "closePath", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true, redraw: true })
 ], Graphics2D.prototype, "fill", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true, redraw: true })
 ], Graphics2D.prototype, "stroke", 2);
-Graphics2D = __decorateClass$e([
+Graphics2D = __decorateClass$i([
   customNode("Graphics2D")
 ], Graphics2D);
 
@@ -9356,14 +9028,14 @@ class Image2DResource extends Resource {
   }
 }
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$d(target, key) : target;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$h(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 let Image2D = class extends Node2D {
@@ -9483,16 +9155,16 @@ let Image2D = class extends Node2D {
     }
   }
 };
-__decorateClass$d([
+__decorateClass$h([
   protectedProperty()
 ], Image2D.prototype, "resource", 2);
-__decorateClass$d([
+__decorateClass$h([
   property({ default: false })
 ], Image2D.prototype, "gif", 2);
-__decorateClass$d([
+__decorateClass$h([
   property({ default: "" })
 ], Image2D.prototype, "src", 2);
-Image2D = __decorateClass$d([
+Image2D = __decorateClass$h([
   customNode("Image2D")
 ], Image2D);
 
@@ -9510,14 +9182,14 @@ class TextureRect2D extends Node2D {
   }
 }
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$c(target, key) : target;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$g(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$c(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 let Lottie2D = class extends TextureRect2D {
@@ -9560,21 +9232,21 @@ let Lottie2D = class extends TextureRect2D {
     super._process(delta);
   }
 };
-__decorateClass$c([
+__decorateClass$g([
   property({ default: "" })
 ], Lottie2D.prototype, "src", 2);
-Lottie2D = __decorateClass$c([
+Lottie2D = __decorateClass$g([
   customNode("Lottie2D")
 ], Lottie2D);
 
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$b(target, key) : target;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$f(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$b(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 const textStyles = new Set(Object.keys(textDefaultStyle));
@@ -9712,33 +9384,33 @@ let Text2D = class extends TextureRect2D {
     }
   }
 };
-__decorateClass$b([
+__decorateClass$f([
   property({ default: false })
 ], Text2D.prototype, "split", 2);
-__decorateClass$b([
+__decorateClass$f([
   property({ default: "" })
 ], Text2D.prototype, "content", 2);
-__decorateClass$b([
+__decorateClass$f([
   property()
 ], Text2D.prototype, "effects", 2);
-__decorateClass$b([
+__decorateClass$f([
   protectedProperty()
 ], Text2D.prototype, "measureDom", 2);
-__decorateClass$b([
+__decorateClass$f([
   protectedProperty()
 ], Text2D.prototype, "fonts", 2);
-Text2D = __decorateClass$b([
+Text2D = __decorateClass$f([
   customNode("Text2D")
 ], Text2D);
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$a(target, key) : target;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$e(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$a(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 let Video2D = class extends TextureRect2D {
@@ -9791,21 +9463,21 @@ let Video2D = class extends TextureRect2D {
     super._process(delta);
   }
 };
-__decorateClass$a([
+__decorateClass$e([
   property({ default: "" })
 ], Video2D.prototype, "src", 2);
-Video2D = __decorateClass$a([
+Video2D = __decorateClass$e([
   customNode("Video2D")
 ], Video2D);
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$9(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$d(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$9(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 const linear = (amount) => amount;
@@ -9873,21 +9545,28 @@ let Animation = class extends TimelineNode {
   _stoped = false;
   constructor(properties, children = []) {
     super();
-    this.commitStyles = this.commitStyles.bind(this);
+    this._process = this._process.bind(this);
     this.setProperties(properties).append(children);
   }
   _treeEnter(tree) {
-    tree.timeline.on("updateCurrentTime", this.commitStyles);
+    tree.timeline.on("updateCurrentTime", this._process);
     this._updateCachedProps();
   }
   _treeExit(oldTree) {
-    oldTree.timeline.on("updateCurrentTime", this.commitStyles);
+    oldTree.timeline.on("updateCurrentTime", this._process);
     this.cancel();
   }
+  _onProcess() {
+  }
+  _process() {
+    if (this.canProcess()) {
+      this.commitStyles();
+    }
+  }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "animationMode":
+      case "effectMode":
       case "keyframes":
         this._updateKeyframes();
         break;
@@ -9895,7 +9574,7 @@ let Animation = class extends TimelineNode {
   }
   _getTargets() {
     let targets;
-    switch (this.animationMode) {
+    switch (this.effectMode) {
       case "sibling":
         targets = this.getParent()?.getChildren(true).filter((val) => val instanceof CanvasItem) ?? [];
         break;
@@ -10117,22 +9796,22 @@ let Animation = class extends TimelineNode {
     });
   }
 };
-__decorateClass$9([
+__decorateClass$d([
   property({ default: "parent" })
-], Animation.prototype, "animationMode", 2);
-__decorateClass$9([
+], Animation.prototype, "effectMode", 2);
+__decorateClass$d([
   property({ default: false })
 ], Animation.prototype, "loop", 2);
-__decorateClass$9([
+__decorateClass$d([
   property({ default: [] })
 ], Animation.prototype, "keyframes", 2);
-__decorateClass$9([
+__decorateClass$d([
   property()
 ], Animation.prototype, "easing", 2);
-Animation = __decorateClass$9([
+Animation = __decorateClass$d([
   customNode("Animation", {
     renderMode: "disabled",
-    processMode: "disabled",
+    processMode: "pausable",
     duration: 2e3
   })
 ], Animation);
@@ -11012,18 +10691,18 @@ class WebAudio extends AudioPipeline {
   }
 }
 
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$8(target, key) : target;
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$c(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$8(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
-var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
+var __publicField$4 = (obj, key, value) => __defNormalProp$4(obj, key + "" , value);
 let Audio = class extends TimelineNode {
   _sounds = [];
   /** PlatformAudio */
@@ -11227,8 +10906,8 @@ let Audio = class extends TimelineNode {
     }, 100);
   }
 };
-__publicField(Audio, "_soundPool", []);
-Audio = __decorateClass$8([
+__publicField$4(Audio, "_soundPool", []);
+Audio = __decorateClass$c([
   customNode("Audio")
 ], Audio);
 
@@ -11236,14 +10915,14 @@ class AudioSpectrum extends Node2D {
   //
 }
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$b(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 let AudioWaveform = class extends Node2D {
@@ -11337,27 +11016,27 @@ let AudioWaveform = class extends Node2D {
     }
   }
 };
-__decorateClass$7([
+__decorateClass$b([
   property()
 ], AudioWaveform.prototype, "src", 2);
-__decorateClass$7([
+__decorateClass$b([
   property()
 ], AudioWaveform.prototype, "gap", 2);
-__decorateClass$7([
+__decorateClass$b([
   property()
 ], AudioWaveform.prototype, "color", 2);
-AudioWaveform = __decorateClass$7([
+AudioWaveform = __decorateClass$b([
   customNode("AudioWaveform")
 ], AudioWaveform);
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$a(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$6(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 let Control = class extends CanvasItem {
@@ -11417,18 +11096,18 @@ let Control = class extends CanvasItem {
     return new Rect2(left, top, width, height);
   }
 };
-Control = __decorateClass$6([
+Control = __decorateClass$a([
   customNode("Control")
 ], Control);
 
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$5(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$9(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$5(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 let Range = class extends Control {
@@ -11451,39 +11130,39 @@ let Range = class extends Control {
     }
   }
 };
-__decorateClass$5([
+__decorateClass$9([
   property({ default: false })
 ], Range.prototype, "allowGreater", 2);
-__decorateClass$5([
+__decorateClass$9([
   property({ default: false })
 ], Range.prototype, "allowLesser", 2);
-__decorateClass$5([
+__decorateClass$9([
   property({ default: 1 })
 ], Range.prototype, "page", 2);
-__decorateClass$5([
+__decorateClass$9([
   property({ default: 0 })
 ], Range.prototype, "minValue", 2);
-__decorateClass$5([
+__decorateClass$9([
   property({ default: 100 })
 ], Range.prototype, "maxValue", 2);
-__decorateClass$5([
+__decorateClass$9([
   property({ default: 0.01 })
 ], Range.prototype, "step", 2);
-__decorateClass$5([
+__decorateClass$9([
   property({ default: 0 })
 ], Range.prototype, "value", 2);
-Range = __decorateClass$5([
+Range = __decorateClass$9([
   customNode("Range")
 ], Range);
 
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$4(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$8(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$4(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 let Ruler = class extends Control {
@@ -11634,45 +11313,45 @@ let Ruler = class extends Control {
     }
   }
 };
-__decorateClass$4([
+__decorateClass$8([
   property({ default: 0 })
 ], Ruler.prototype, "offsetX", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: 0 })
 ], Ruler.prototype, "offsetY", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: 20 })
 ], Ruler.prototype, "thickness", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: 3 })
 ], Ruler.prototype, "markHeight", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: "#b2b6bc" })
 ], Ruler.prototype, "color", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: "#f9f9fa" })
 ], Ruler.prototype, "markBackgroundColor", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: "#b2b6bc" })
 ], Ruler.prototype, "markColor", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: 300 })
 ], Ruler.prototype, "gap", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: 1 })
 ], Ruler.prototype, "scale", 2);
-Ruler = __decorateClass$4([
+Ruler = __decorateClass$8([
   customNode("Ruler")
 ], Ruler);
 
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$3(target, key) : target;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$7(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$3(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 let ScrollBar = class extends Range {
@@ -11714,21 +11393,21 @@ let ScrollBar = class extends Range {
     this.context.fill();
   }
 };
-__decorateClass$3([
+__decorateClass$7([
   property({ default: "vertical" })
 ], ScrollBar.prototype, "direction", 2);
-ScrollBar = __decorateClass$3([
+ScrollBar = __decorateClass$7([
   customNode("ScrollBar")
 ], ScrollBar);
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$2(target, key) : target;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$6(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$2(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 let XScrollBar = class extends ScrollBar {
@@ -11737,20 +11416,20 @@ let XScrollBar = class extends ScrollBar {
     this.setProperties(properties).append(children);
   }
 };
-XScrollBar = __decorateClass$2([
+XScrollBar = __decorateClass$6([
   customNode("XScrollBar", {
     direction: "horizontal"
   })
 ], XScrollBar);
 
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$1(target, key) : target;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$5(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
 let YScrollBar = class extends ScrollBar {
@@ -11759,20 +11438,20 @@ let YScrollBar = class extends ScrollBar {
     this.setProperties(properties).append(children);
   }
 };
-YScrollBar = __decorateClass$1([
+YScrollBar = __decorateClass$5([
   customNode("YScrollBar", {
     direction: "vertical"
   })
 ], YScrollBar);
 
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc(target, key) : target;
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$4(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+  if (kind && result) __defProp$4(target, key, result);
   return result;
 };
 let Scaler = class extends Node {
@@ -11829,22 +11508,376 @@ let Scaler = class extends Node {
     }
   }
 };
-__decorateClass([
+__decorateClass$4([
   property({ default: 1 })
 ], Scaler.prototype, "value", 2);
-__decorateClass([
+__decorateClass$4([
   property({ default: 0.05 })
 ], Scaler.prototype, "minValue", 2);
-__decorateClass([
+__decorateClass$4([
   property({ default: 10 })
 ], Scaler.prototype, "maxValue", 2);
-Scaler = __decorateClass([
+Scaler = __decorateClass$4([
   customNode("Scaler", {
     processMode: "disabled",
     renderMode: "disabled"
   })
 ], Scaler);
 
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$3(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$3(target, key, result);
+  return result;
+};
+var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, key + "" , value);
+let KawaseTransition = class extends Transition {
+  blur = 10;
+  quality = 10;
+  apply(renderer, target) {
+    const currentTimeProgress = this.currentTimeProgress;
+    let sampler;
+    let progress;
+    if (currentTimeProgress < 0.5) {
+      sampler = 0;
+      progress = (0.5 - currentTimeProgress) / 0.5;
+    } else {
+      sampler = 1;
+      progress = (currentTimeProgress - 0.5) / 0.5;
+    }
+    const blur = this.blur;
+    const quality = this.quality;
+    const width = target.width;
+    const height = target.height;
+    const drawCalls = [];
+    const kernels = [blur];
+    if (blur > 0) {
+      let k = blur;
+      const step = blur / quality;
+      for (let i = 1; i < quality; i++) {
+        k -= step;
+        kernels.push(k);
+      }
+    }
+    const uvX = 1 / width;
+    const uvY = 1 / height;
+    const uOffset = [];
+    let offset;
+    const last = quality - 1;
+    for (let i = 0; i < last; i++) {
+      offset = kernels[i] + 0.5;
+      uOffset[0] = offset * uvX;
+      uOffset[1] = offset * uvY;
+      drawCalls.push({
+        offset: uOffset
+      });
+    }
+    offset = kernels[last] + 0.5;
+    uOffset[0] = offset * uvX;
+    uOffset[1] = offset * uvY;
+    drawCalls.push({
+      offset: uOffset
+    });
+    drawCalls.forEach((uniforms) => {
+      QuadUvGeometry.draw(renderer, KawaseTransition.material, {
+        sampler,
+        progress,
+        ...uniforms
+      });
+    });
+  }
+};
+__publicField$3(KawaseTransition, "material", new Material({
+  vert: `attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  vUv = uv;
+}`,
+  frag: `precision highp float;
+varying vec2 vUv;
+uniform sampler2D sampler;
+uniform vec2 offset;
+uniform float progress;
+
+void main(void) {
+  vec2 offset1 = vec2(offset.x - progress * offset.x, offset.y - progress * offset.y);
+  vec4 color = vec4(0.0);
+  color += texture2D(sampler, vec2(vUv.x - offset1.x, vUv.y + offset1.y));
+  color += texture2D(sampler, vec2(vUv.x + offset1.x, vUv.y + offset1.y));
+  color += texture2D(sampler, vec2(vUv.x + offset1.x, vUv.y - offset1.y));
+  color += texture2D(sampler, vec2(vUv.x - offset1.x, vUv.y - offset1.y));
+  color *= 0.25;
+  gl_FragColor = color;
+}`
+}));
+KawaseTransition = __decorateClass$3([
+  customNode("KawaseTransition")
+], KawaseTransition);
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$2(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$2(target, key, result);
+  return result;
+};
+var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, key + "" , value);
+let LeftEraseTransition = class extends Transition {
+  apply(renderer) {
+    QuadUvGeometry.draw(renderer, LeftEraseTransition.material, {
+      previous: 0,
+      next: 1,
+      progress: this.currentTimeProgress
+    });
+  }
+};
+__publicField$2(LeftEraseTransition, "material", new Material({
+  vert: `attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  vUv = uv;
+}`,
+  frag: `precision highp float;
+varying vec2 vUv;
+uniform float progress;
+uniform sampler2D previous;
+uniform sampler2D next;
+
+float easeInOutQuint(float t) {
+    return t < 0.5 ? 16.0*t*t*t*t*t : 1.0+16.0*(--t)*t*t*t*t;
+}
+
+void main() {
+  vec4 src1Color = texture2D(previous, vUv);
+  vec4 src2Color = texture2D(next, vUv);
+  float mProgress = 1.0 - progress;
+  float mixPercent = 0.0;
+  if (vUv.x <= mProgress) {
+    mixPercent = 1.0;
+  }
+  gl_FragColor = mix(src2Color, src1Color, mixPercent);
+}`
+}));
+LeftEraseTransition = __decorateClass$2([
+  customNode("LeftEraseTransition")
+], LeftEraseTransition);
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$1(target, key, result);
+  return result;
+};
+var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, key + "" , value);
+let TiltShiftTransition = class extends Transition {
+  blur = 100;
+  gradientBlur = 600;
+  apply(renderer, target) {
+    const currentTimeProgress = this.currentTimeProgress;
+    let sampler;
+    let progress;
+    if (currentTimeProgress < 0.5) {
+      sampler = 0;
+      progress = (0.5 - currentTimeProgress) / 0.5;
+    } else {
+      sampler = 1;
+      progress = (currentTimeProgress - 0.5) / 0.5;
+    }
+    const width = target.width;
+    const height = target.height;
+    const start = [0, height / 2];
+    const end = [600, height / 2];
+    const texSize = [width, height];
+    const dx = end[0] - start[0];
+    const dy = end[1] - start[1];
+    const d = Math.sqrt(dx * dx + dy * dy);
+    QuadUvGeometry.draw(renderer, TiltShiftTransition.material, {
+      sampler,
+      progress,
+      blur: this.blur,
+      gradientBlur: this.gradientBlur,
+      start,
+      end,
+      delta: [dx / d, dy / d],
+      texSize
+    });
+    QuadUvGeometry.draw(renderer, TiltShiftTransition.material, {
+      sampler,
+      progress,
+      blur: this.blur,
+      gradientBlur: this.gradientBlur,
+      start,
+      end,
+      delta: [-dy / d, dx / d],
+      texSize
+    });
+  }
+};
+__publicField$1(TiltShiftTransition, "material", new Material({
+  vert: `attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  vUv = uv;
+}`,
+  frag: `precision highp float;
+varying vec2 vUv;
+uniform sampler2D sampler;
+uniform float blur;
+uniform float gradientBlur;
+uniform vec2 start;
+uniform vec2 end;
+uniform vec2 delta;
+uniform vec2 texSize;
+uniform float progress;
+
+float random(vec3 scale, float seed) {
+  return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
+}
+
+void main(void) {
+  float blur1 = blur - progress * blur;
+  float gradientBlur1 = progress * gradientBlur;
+
+  vec4 color = vec4(0.0);
+  float total = 0.0;
+  float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
+  vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));
+  float radius = smoothstep(0.0, 1.0, abs(dot(vUv * texSize - start, normal)) / gradientBlur1) * blur1;
+
+  for (float t = -30.0; t <= 30.0; t++) {
+    float percent = (t + offset - 0.5) / 30.0;
+    float weight = 1.0 - abs(percent);
+    vec4 sample1 = texture2D(sampler, vUv + delta / texSize * percent * radius);
+    sample1.rgb *= sample1.a;
+    color += sample1 * weight;
+    total += weight;
+  }
+
+  color /= total;
+  color.rgb /= color.a + 0.00001;
+
+  gl_FragColor = color;
+}`
+}));
+TiltShiftTransition = __decorateClass$1([
+  customNode("TiltShiftTransition")
+], TiltShiftTransition);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
+let TwistTransition = class extends Transition {
+  radius;
+  angle = 4;
+  padding = 20;
+  offset;
+  apply(renderer, source) {
+    const currentTimeProgress = this.currentTimeProgress;
+    let sampler;
+    let progress;
+    if (currentTimeProgress < 0.5) {
+      sampler = 0;
+      progress = (0.5 - currentTimeProgress) / 0.5;
+    } else {
+      sampler = 1;
+      progress = (currentTimeProgress - 0.5) / 0.5;
+    }
+    const width = source.width;
+    const height = source.height;
+    QuadUvGeometry.draw(renderer, TwistTransition.material, {
+      sampler,
+      progress,
+      filterArea: [width, height, 0, 0],
+      radius: this.radius ?? width,
+      angle: this.angle,
+      padding: this.padding,
+      offset: this.offset ?? [width / 2, height / 2]
+    });
+  }
+};
+__publicField(TwistTransition, "material", new Material({
+  vert: `attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  vUv = uv;
+}`,
+  frag: `precision highp float;
+varying vec2 vUv;
+uniform sampler2D sampler;
+uniform float radius;
+uniform float angle;
+uniform vec2 offset;
+uniform vec4 filterArea;
+uniform float progress;
+
+vec2 mapCoord(vec2 coord) {
+  coord -= filterArea.zw;
+  coord *= filterArea.xy;
+  return coord;
+}
+
+vec2 unmapCoord(vec2 coord) {
+  coord -= filterArea.zw;
+  coord /= filterArea.xy;
+  return coord;
+}
+
+vec2 twist(vec2 coord, float radius) {
+  coord -= offset;
+  float dist = length(coord);
+  if (dist < radius) {
+    float ratioDist = (radius - dist) / radius;
+    float angleMod = ratioDist * ratioDist * angle;
+    float s = sin(angleMod);
+    float c = cos(angleMod);
+    coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);
+  }
+  coord += offset;
+  return coord;
+}
+
+void main(void) {
+  vec2 coord = mapCoord(vUv);
+  coord = twist(coord, radius - (progress * radius));
+  coord = unmapCoord(coord);
+  gl_FragColor = texture2D(sampler, coord);
+}`
+}));
+TwistTransition = __decorateClass([
+  customNode("TwistTransition")
+], TwistTransition);
+
 class GifLoader extends Loader {
   install(assets) {
     const handler = async (url) => {
@@ -12563,4 +12596,4 @@ async function render(options) {
   });
 }
 
-export { Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BlurEffect, CanvasContext, CanvasEditor, CanvasItem, CanvasItemStyle, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, Effect, EffectMaterial, EmbossEffect, Engine, EventEmitter, FontLoader, Geometry, GifLoader, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, Image2DResource, ImageTexture, IndexBuffer, Input, InputEvent, JsonLoader, KawaseEffect, LeftEraseEffect, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, ShadowEffect, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftEffect, Timeline, TimelineNode, Transform2D, TwistEffect, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };
+export { Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BlurEffect, CanvasContext, CanvasEditor, CanvasItem, CanvasItemStyle, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, Effect, EffectMaterial, EmbossEffect, Engine, EventEmitter, FontLoader, Geometry, GifLoader, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, Image2DResource, ImageTexture, IndexBuffer, Input, InputEvent, JsonLoader, KawaseTransition, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, ShadowEffect, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };