modern-canvas 0.2.3 → 0.2.4

package/dist/index.cjs

@@ -2204,13 +2204,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 {
@@ -2251,10 +2251,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");
 
@@ -4398,13 +4398,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 {
@@ -4448,20 +4448,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 {
@@ -4505,20 +4505,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 {
@@ -4555,25 +4555,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");
 
@@ -4823,13 +4823,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 = {
@@ -5046,58 +5046,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 = modernIdoc.getDefaultTransformStyle();
@@ -5109,13 +5109,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 {
@@ -5241,32 +5241,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 {
@@ -5285,7 +5285,7 @@ class CanvasTexture extends Texture2D {
     super._updateProperty(key, value, oldValue, declaration);
   }
 }
-__decorateClass$F([
+__decorateClass$G([
   property({ default: 2 })
 ], CanvasTexture.prototype, "pixelRatio");
 
@@ -5443,13 +5443,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) {
@@ -5693,10 +5693,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;
@@ -5866,14 +5866,14 @@ class CanvasContext extends modernPath2d.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;
 };
 exports.Node = class Node extends CoreObject {
@@ -6016,9 +6016,9 @@ exports.Node = class Node 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":
@@ -6298,33 +6298,33 @@ exports.Node = class Node extends CoreObject {
     return node;
   }
 };
-__decorateClass$D([
+__decorateClass$E([
   property()
 ], exports.Node.prototype, "name", 2);
-__decorateClass$D([
+__decorateClass$E([
   property()
 ], exports.Node.prototype, "mask", 2);
-__decorateClass$D([
+__decorateClass$E([
   property({ default: "inherit" })
 ], exports.Node.prototype, "processMode", 2);
-__decorateClass$D([
+__decorateClass$E([
   property({ default: "inherit" })
 ], exports.Node.prototype, "renderMode", 2);
-__decorateClass$D([
+__decorateClass$E([
   property({ default: "default" })
 ], exports.Node.prototype, "internalMode", 2);
-exports.Node = __decorateClass$D([
+exports.Node = __decorateClass$E([
   customNode("Node")
 ], exports.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;
 };
 exports.TimelineNode = class TimelineNode extends exports.Node {
@@ -6383,75 +6383,236 @@ exports.TimelineNode = class TimelineNode extends exports.Node {
     super._process(delta);
   }
 };
-__decorateClass$C([
+__decorateClass$D([
   property({ default: 0 })
 ], exports.TimelineNode.prototype, "delay", 2);
-__decorateClass$C([
+__decorateClass$D([
   property({ default: 0 })
 ], exports.TimelineNode.prototype, "duration", 2);
-__decorateClass$C([
+__decorateClass$D([
   property({ default: false })
 ], exports.TimelineNode.prototype, "paused", 2);
-exports.TimelineNode = __decorateClass$C([
+exports.TimelineNode = __decorateClass$D([
   customNode("TimelineNode")
 ], exports.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;
 };
-exports.Effect = class Effect extends exports.TimelineNode {
-  material;
-  mode;
-  get _mode() {
-    return this.mode ?? "parent";
-  }
-  /** Viewports */
-  viewport1 = new exports.Viewport();
-  viewport2 = new exports.Viewport();
-  /** Render call */
-  _renderId = 0;
-  _renderViewport;
-  /** Temporary nodes for transition */
-  _previousSibling;
-  _nextSibling;
-  constructor(properties, children = []) {
+exports.Viewport = class Viewport extends exports.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 })
+], exports.Viewport.prototype, "x", 2);
+__decorateClass$C([
+  property({ default: 0 })
+], exports.Viewport.prototype, "y", 2);
+__decorateClass$C([
+  property({ default: 0 })
+], exports.Viewport.prototype, "width", 2);
+__decorateClass$C([
+  property({ default: 0 })
+], exports.Viewport.prototype, "height", 2);
+exports.Viewport = __decorateClass$C([
+  customNode("Viewport")
+], exports.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;
+};
+exports.Effect = class Effect extends exports.TimelineNode {
+  material;
+  effectMode;
+  get _effectMode() {
+    return this.effectMode ?? "parent";
+  }
+  /** Viewports */
+  viewport1 = new exports.Viewport();
+  viewport2 = new exports.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) {
@@ -6462,7 +6623,7 @@ exports.Effect = class Effect extends exports.TimelineNode {
   }
   _onProcessing() {
     this._updateCurrentTime();
-    switch (this._mode) {
+    switch (this._effectMode) {
       case "transition":
         this._previousSibling = this.previousSibling;
         this._nextSibling = this.nextSibling;
@@ -6479,7 +6640,7 @@ exports.Effect = class Effect extends exports.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;
@@ -6519,8 +6680,10 @@ exports.Effect = class Effect extends exports.TimelineNode {
     }
   }
   _onProcess(delta = 0) {
+    if (!this.canProcess())
+      return;
     this._renderId = 0;
-    switch (this._mode) {
+    switch (this._effectMode) {
       case "before":
         super._onProcess(delta);
         break;
@@ -6579,7 +6742,7 @@ exports.Effect = class Effect extends exports.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);
@@ -6589,7 +6752,7 @@ exports.Effect = class Effect extends exports.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 [
@@ -6602,7 +6765,7 @@ exports.Effect = class Effect extends exports.TimelineNode {
     }
   }
   _render(renderer) {
-    switch (this._mode) {
+    switch (this._effectMode) {
       case "before":
         this._renderBefore(renderer);
         break;
@@ -6645,7 +6808,7 @@ __decorateClass$B([
 ], exports.Effect.prototype, "material", 2);
 __decorateClass$B([
   property()
-], exports.Effect.prototype, "mode", 2);
+], exports.Effect.prototype, "effectMode", 2);
 __decorateClass$B([
   property({ default: "" })
 ], exports.Effect.prototype, "glsl", 2);
@@ -7732,249 +7895,98 @@ var __decorateClass$r = (decorators, target, key, kind) => {
   return result;
 };
 var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, key + "" , value);
-exports.KawaseEffect = class KawaseEffect extends exports.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;
+exports.MaskEffect = class MaskEffect extends exports.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, exports.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, exports.KawaseEffect.material, {
-        sampler,
-        progress,
-        ...uniforms
-      });
-    });
   }
 };
-__publicField$8(exports.KawaseEffect, "material", new Material({
-  vert: `attribute vec2 position;
+__publicField$8(exports.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.);
+  }
 }`
 }));
-exports.KawaseEffect = __decorateClass$r([
-  customNode("KawaseEffect")
-], exports.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);
-exports.LeftEraseEffect = class LeftEraseEffect extends exports.Effect {
-  apply(renderer) {
-    QuadUvGeometry.draw(renderer, exports.LeftEraseEffect.material, {
-      previous: 0,
-      next: 1,
-      progress: this.currentTimeProgress
-    });
-  }
-};
-__publicField$7(exports.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);
-}`
-}));
-exports.LeftEraseEffect = __decorateClass$q([
-  customNode("LeftEraseEffect")
-], exports.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);
-exports.MaskEffect = class MaskEffect extends exports.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, exports.MaskEffect.material, {
-          sampler: 0,
-          mask: 1,
-          area: context.targetArea
-        });
-        renderer.texture.unbind(1);
-      });
-    }
-  }
-};
-__publicField$6(exports.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()
 ], exports.MaskEffect.prototype, "texture", 2);
-__decorateClass$p([
+__decorateClass$r([
   property({ default: "" })
 ], exports.MaskEffect.prototype, "src", 2);
-exports.MaskEffect = __decorateClass$p([
+exports.MaskEffect = __decorateClass$r([
   customNode("MaskEffect")
 ], exports.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);
 exports.PixelateEffect = class PixelateEffect extends exports.Effect {
   size;
   constructor(size = 10) {
@@ -7991,7 +8003,7 @@ exports.PixelateEffect = class PixelateEffect extends exports.Effect {
     });
   }
 };
-__publicField$5(exports.PixelateEffect, "material", new Material({
+__publicField$7(exports.PixelateEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -8028,25 +8040,25 @@ void main(void) {
   gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-__decorateClass$o([
+__decorateClass$q([
   property()
 ], exports.PixelateEffect.prototype, "size", 2);
-exports.PixelateEffect = __decorateClass$o([
+exports.PixelateEffect = __decorateClass$q([
   customNode("PixelateEffect")
 ], exports.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);
 exports.ShadowEffect = class ShadowEffect extends exports.Effect {
   blur = new exports.BlurEffect();
   viewport3 = new exports.Viewport();
@@ -8073,7 +8085,7 @@ exports.ShadowEffect = class ShadowEffect extends exports.Effect {
     });
   }
 };
-__publicField$4(exports.ShadowEffect, "material", new Material({
+__publicField$6(exports.ShadowEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -8096,67 +8108,41 @@ void main(void) {
   gl_FragColor = sample;
 }`
 }));
-exports.ShadowEffect = __decorateClass$n([
+exports.ShadowEffect = __decorateClass$p([
   customNode("ShadowEffect")
 ], exports.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);
-exports.TiltShiftEffect = class TiltShiftEffect extends exports.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, exports.TiltShiftEffect.material, {
-      sampler,
-      progress,
-      blur: this.blur,
-      gradientBlur: this.gradientBlur,
-      start,
-      end,
-      delta: [dx / d, dy / d],
-      texSize
-    });
-    QuadUvGeometry.draw(renderer, exports.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);
+exports.ZoomBlurEffect = class ZoomBlurEffect extends exports.Effect {
+  center;
+  innerRadius = 20;
+  radius = -1;
+  strength = 0.1;
+  apply(renderer, source) {
+    source.redraw(renderer, () => {
+      QuadUvGeometry.draw(renderer, exports.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(exports.TiltShiftEffect, "material", new Material({
+__publicField$5(exports.ZoomBlurEffect, "material", new Material({
   vert: `attribute vec2 position;
 attribute vec2 uv;
 varying vec2 vUv;
@@ -8164,199 +8150,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;
-}`
-}));
-exports.TiltShiftEffect = __decorateClass$m([
-  customNode("TiltShiftEffect")
-], exports.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);
-exports.TwistEffect = class TwistEffect extends exports.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, exports.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(exports.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);
-}`
-}));
-exports.TwistEffect = __decorateClass$l([
-  customNode("TwistEffect")
-], exports.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);
-exports.ZoomBlurEffect = class ZoomBlurEffect extends exports.Effect {
-  center;
-  innerRadius = 20;
-  radius = -1;
-  strength = 0.1;
-  apply(renderer, source) {
-    source.redraw(renderer, () => {
-      QuadUvGeometry.draw(renderer, exports.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(exports.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;
@@ -8417,30 +8226,30 @@ void main() {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$k([
+__decorateClass$o([
   property()
 ], exports.ZoomBlurEffect.prototype, "center", 2);
-__decorateClass$k([
+__decorateClass$o([
   property()
 ], exports.ZoomBlurEffect.prototype, "innerRadius", 2);
-__decorateClass$k([
+__decorateClass$o([
   property()
 ], exports.ZoomBlurEffect.prototype, "radius", 2);
-__decorateClass$k([
+__decorateClass$o([
   property()
 ], exports.ZoomBlurEffect.prototype, "strength", 2);
-exports.ZoomBlurEffect = __decorateClass$k([
+exports.ZoomBlurEffect = __decorateClass$o([
   customNode("ZoomBlurEffect")
 ], exports.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;
 };
 exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
@@ -8735,13 +8544,13 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
     };
   }
 };
-__decorateClass$j([
+__decorateClass$n([
   property()
 ], exports.CanvasItem.prototype, "modulate", 2);
-__decorateClass$j([
+__decorateClass$n([
   property()
 ], exports.CanvasItem.prototype, "blendMode", 2);
-exports.CanvasItem = __decorateClass$j([
+exports.CanvasItem = __decorateClass$n([
   customNode("CanvasItem")
 ], exports.CanvasItem);
 
@@ -8771,14 +8580,14 @@ class RenderStack extends exports.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;
 };
 exports.Timeline = class Timeline extends exports.Node {
@@ -8823,213 +8632,52 @@ exports.Timeline = class Timeline extends exports.Node {
     this.addTime(delta);
   }
 };
-__decorateClass$i([
+__decorateClass$m([
   property({ default: 0 })
 ], exports.Timeline.prototype, "startTime", 2);
-__decorateClass$i([
+__decorateClass$m([
   property({ default: 0 })
 ], exports.Timeline.prototype, "currentTime", 2);
-__decorateClass$i([
+__decorateClass$m([
   property({ default: Number.MAX_SAFE_INTEGER })
 ], exports.Timeline.prototype, "endTime", 2);
-__decorateClass$i([
+__decorateClass$m([
   property({ default: false })
 ], exports.Timeline.prototype, "loop", 2);
-exports.Timeline = __decorateClass$i([
+exports.Timeline = __decorateClass$m([
   customNode("Timeline")
 ], exports.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;
 };
-exports.Viewport = class Viewport extends exports.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 exports.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 exports.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 })
-], exports.Viewport.prototype, "x", 2);
-__decorateClass$h([
-  property({ default: 0 })
-], exports.Viewport.prototype, "y", 2);
-__decorateClass$h([
-  property({ default: 0 })
-], exports.Viewport.prototype, "width", 2);
-__decorateClass$h([
-  property({ default: 0 })
-], exports.Viewport.prototype, "height", 2);
-exports.Viewport = __decorateClass$h([
-  customNode("Viewport")
-], exports.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 exports.Viewport(true).setTree(this);
-  timeline;
-  _backgroundColor = new Color();
-  _currentViewport;
-  getCurrentViewport() {
-    return this._currentViewport;
-  }
-  setCurrentViewport(viewport) {
-    this._currentViewport = viewport;
-  }
-  constructor(timeline = new exports.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;
     }
   }
@@ -9067,21 +8715,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;
+};
+exports.Transition = class Transition extends exports.Effect {
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
+};
+exports.Transition = __decorateClass$k([
+  customNode("Transition", {
+    effectMode: "transition",
+    processMode: "pausable",
+    duration: 2e3
+  })
+], exports.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;
 };
 exports.Node2D = class Node2D extends exports.CanvasItem {
@@ -9222,18 +8894,18 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
     );
   }
 };
-exports.Node2D = __decorateClass$f([
+exports.Node2D = __decorateClass$j([
   customNode("Node2D")
 ], exports.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) {
@@ -9278,61 +8950,61 @@ exports.Graphics2D = class Graphics2D extends exports.Node2D {
     return this;
   }
 };
-__decorateClass$e([
+__decorateClass$i([
   proxy()
 ], exports.Graphics2D.prototype, "lineCap", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy()
 ], exports.Graphics2D.prototype, "lineJoin", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy()
 ], exports.Graphics2D.prototype, "fillStyle", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy()
 ], exports.Graphics2D.prototype, "strokeStyle", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy()
 ], exports.Graphics2D.prototype, "lineWidth", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy()
 ], exports.Graphics2D.prototype, "miterLimit", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], exports.Graphics2D.prototype, "rect", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true, redraw: true })
 ], exports.Graphics2D.prototype, "fillRect", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true, redraw: true })
 ], exports.Graphics2D.prototype, "strokeRect", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], exports.Graphics2D.prototype, "roundRect", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], exports.Graphics2D.prototype, "ellipse", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], exports.Graphics2D.prototype, "arc", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], exports.Graphics2D.prototype, "beginPath", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], exports.Graphics2D.prototype, "moveTo", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], exports.Graphics2D.prototype, "lineTo", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true })
 ], exports.Graphics2D.prototype, "closePath", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true, redraw: true })
 ], exports.Graphics2D.prototype, "fill", 2);
-__decorateClass$e([
+__decorateClass$i([
   proxy({ method: true, redraw: true })
 ], exports.Graphics2D.prototype, "stroke", 2);
-exports.Graphics2D = __decorateClass$e([
+exports.Graphics2D = __decorateClass$i([
   customNode("Graphics2D")
 ], exports.Graphics2D);
 
@@ -9362,14 +9034,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;
 };
 exports.Image2D = class Image2D extends exports.Node2D {
@@ -9489,16 +9161,16 @@ exports.Image2D = class Image2D extends exports.Node2D {
     }
   }
 };
-__decorateClass$d([
+__decorateClass$h([
   protectedProperty()
 ], exports.Image2D.prototype, "resource", 2);
-__decorateClass$d([
+__decorateClass$h([
   property({ default: false })
 ], exports.Image2D.prototype, "gif", 2);
-__decorateClass$d([
+__decorateClass$h([
   property({ default: "" })
 ], exports.Image2D.prototype, "src", 2);
-exports.Image2D = __decorateClass$d([
+exports.Image2D = __decorateClass$h([
   customNode("Image2D")
 ], exports.Image2D);
 
@@ -9516,14 +9188,14 @@ class TextureRect2D extends exports.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;
 };
 exports.Lottie2D = class Lottie2D extends TextureRect2D {
@@ -9566,21 +9238,21 @@ exports.Lottie2D = class Lottie2D extends TextureRect2D {
     super._process(delta);
   }
 };
-__decorateClass$c([
+__decorateClass$g([
   property({ default: "" })
 ], exports.Lottie2D.prototype, "src", 2);
-exports.Lottie2D = __decorateClass$c([
+exports.Lottie2D = __decorateClass$g([
   customNode("Lottie2D")
 ], exports.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(modernText.textDefaultStyle));
@@ -9718,33 +9390,33 @@ exports.Text2D = class Text2D extends TextureRect2D {
     }
   }
 };
-__decorateClass$b([
+__decorateClass$f([
   property({ default: false })
 ], exports.Text2D.prototype, "split", 2);
-__decorateClass$b([
+__decorateClass$f([
   property({ default: "" })
 ], exports.Text2D.prototype, "content", 2);
-__decorateClass$b([
+__decorateClass$f([
   property()
 ], exports.Text2D.prototype, "effects", 2);
-__decorateClass$b([
+__decorateClass$f([
   protectedProperty()
 ], exports.Text2D.prototype, "measureDom", 2);
-__decorateClass$b([
+__decorateClass$f([
   protectedProperty()
 ], exports.Text2D.prototype, "fonts", 2);
-exports.Text2D = __decorateClass$b([
+exports.Text2D = __decorateClass$f([
   customNode("Text2D")
 ], exports.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;
 };
 exports.Video2D = class Video2D extends TextureRect2D {
@@ -9797,21 +9469,21 @@ exports.Video2D = class Video2D extends TextureRect2D {
     super._process(delta);
   }
 };
-__decorateClass$a([
+__decorateClass$e([
   property({ default: "" })
 ], exports.Video2D.prototype, "src", 2);
-exports.Video2D = __decorateClass$a([
+exports.Video2D = __decorateClass$e([
   customNode("Video2D")
 ], exports.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;
@@ -9879,21 +9551,28 @@ exports.Animation = class Animation extends exports.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;
@@ -9901,7 +9580,7 @@ exports.Animation = class Animation extends exports.TimelineNode {
   }
   _getTargets() {
     let targets;
-    switch (this.animationMode) {
+    switch (this.effectMode) {
       case "sibling":
         targets = this.getParent()?.getChildren(true).filter((val) => val instanceof exports.CanvasItem) ?? [];
         break;
@@ -10123,22 +9802,22 @@ exports.Animation = class Animation extends exports.TimelineNode {
     });
   }
 };
-__decorateClass$9([
+__decorateClass$d([
   property({ default: "parent" })
-], exports.Animation.prototype, "animationMode", 2);
-__decorateClass$9([
+], exports.Animation.prototype, "effectMode", 2);
+__decorateClass$d([
   property({ default: false })
 ], exports.Animation.prototype, "loop", 2);
-__decorateClass$9([
+__decorateClass$d([
   property({ default: [] })
 ], exports.Animation.prototype, "keyframes", 2);
-__decorateClass$9([
+__decorateClass$d([
   property()
 ], exports.Animation.prototype, "easing", 2);
-exports.Animation = __decorateClass$9([
+exports.Animation = __decorateClass$d([
   customNode("Animation", {
     renderMode: "disabled",
-    processMode: "disabled",
+    processMode: "pausable",
     duration: 2e3
   })
 ], exports.Animation);
@@ -11018,18 +10697,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);
 exports.Audio = class Audio extends exports.TimelineNode {
   _sounds = [];
   /** PlatformAudio */
@@ -11233,8 +10912,8 @@ exports.Audio = class Audio extends exports.TimelineNode {
     }, 100);
   }
 };
-__publicField(exports.Audio, "_soundPool", []);
-exports.Audio = __decorateClass$8([
+__publicField$4(exports.Audio, "_soundPool", []);
+exports.Audio = __decorateClass$c([
   customNode("Audio")
 ], exports.Audio);
 
@@ -11242,14 +10921,14 @@ class AudioSpectrum extends exports.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;
 };
 exports.AudioWaveform = class AudioWaveform extends exports.Node2D {
@@ -11343,27 +11022,27 @@ exports.AudioWaveform = class AudioWaveform extends exports.Node2D {
     }
   }
 };
-__decorateClass$7([
+__decorateClass$b([
   property()
 ], exports.AudioWaveform.prototype, "src", 2);
-__decorateClass$7([
+__decorateClass$b([
   property()
 ], exports.AudioWaveform.prototype, "gap", 2);
-__decorateClass$7([
+__decorateClass$b([
   property()
 ], exports.AudioWaveform.prototype, "color", 2);
-exports.AudioWaveform = __decorateClass$7([
+exports.AudioWaveform = __decorateClass$b([
   customNode("AudioWaveform")
 ], exports.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;
 };
 exports.Control = class Control extends exports.CanvasItem {
@@ -11423,18 +11102,18 @@ exports.Control = class Control extends exports.CanvasItem {
     return new Rect2(left, top, width, height);
   }
 };
-exports.Control = __decorateClass$6([
+exports.Control = __decorateClass$a([
   customNode("Control")
 ], exports.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;
 };
 exports.Range = class Range extends exports.Control {
@@ -11457,39 +11136,39 @@ exports.Range = class Range extends exports.Control {
     }
   }
 };
-__decorateClass$5([
+__decorateClass$9([
   property({ default: false })
 ], exports.Range.prototype, "allowGreater", 2);
-__decorateClass$5([
+__decorateClass$9([
   property({ default: false })
 ], exports.Range.prototype, "allowLesser", 2);
-__decorateClass$5([
+__decorateClass$9([
   property({ default: 1 })
 ], exports.Range.prototype, "page", 2);
-__decorateClass$5([
+__decorateClass$9([
   property({ default: 0 })
 ], exports.Range.prototype, "minValue", 2);
-__decorateClass$5([
+__decorateClass$9([
   property({ default: 100 })
 ], exports.Range.prototype, "maxValue", 2);
-__decorateClass$5([
+__decorateClass$9([
   property({ default: 0.01 })
 ], exports.Range.prototype, "step", 2);
-__decorateClass$5([
+__decorateClass$9([
   property({ default: 0 })
 ], exports.Range.prototype, "value", 2);
-exports.Range = __decorateClass$5([
+exports.Range = __decorateClass$9([
   customNode("Range")
 ], exports.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;
 };
 exports.Ruler = class Ruler extends exports.Control {
@@ -11640,45 +11319,45 @@ exports.Ruler = class Ruler extends exports.Control {
     }
   }
 };
-__decorateClass$4([
+__decorateClass$8([
   property({ default: 0 })
 ], exports.Ruler.prototype, "offsetX", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: 0 })
 ], exports.Ruler.prototype, "offsetY", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: 20 })
 ], exports.Ruler.prototype, "thickness", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: 3 })
 ], exports.Ruler.prototype, "markHeight", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: "#b2b6bc" })
 ], exports.Ruler.prototype, "color", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: "#f9f9fa" })
 ], exports.Ruler.prototype, "markBackgroundColor", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: "#b2b6bc" })
 ], exports.Ruler.prototype, "markColor", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: 300 })
 ], exports.Ruler.prototype, "gap", 2);
-__decorateClass$4([
+__decorateClass$8([
   property({ default: 1 })
 ], exports.Ruler.prototype, "scale", 2);
-exports.Ruler = __decorateClass$4([
+exports.Ruler = __decorateClass$8([
   customNode("Ruler")
 ], exports.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;
 };
 exports.ScrollBar = class ScrollBar extends exports.Range {
@@ -11720,21 +11399,21 @@ exports.ScrollBar = class ScrollBar extends exports.Range {
     this.context.fill();
   }
 };
-__decorateClass$3([
+__decorateClass$7([
   property({ default: "vertical" })
 ], exports.ScrollBar.prototype, "direction", 2);
-exports.ScrollBar = __decorateClass$3([
+exports.ScrollBar = __decorateClass$7([
   customNode("ScrollBar")
 ], exports.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;
 };
 exports.XScrollBar = class XScrollBar extends exports.ScrollBar {
@@ -11743,20 +11422,20 @@ exports.XScrollBar = class XScrollBar extends exports.ScrollBar {
     this.setProperties(properties).append(children);
   }
 };
-exports.XScrollBar = __decorateClass$2([
+exports.XScrollBar = __decorateClass$6([
   customNode("XScrollBar", {
     direction: "horizontal"
   })
 ], exports.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;
 };
 exports.YScrollBar = class YScrollBar extends exports.ScrollBar {
@@ -11765,20 +11444,20 @@ exports.YScrollBar = class YScrollBar extends exports.ScrollBar {
     this.setProperties(properties).append(children);
   }
 };
-exports.YScrollBar = __decorateClass$1([
+exports.YScrollBar = __decorateClass$5([
   customNode("YScrollBar", {
     direction: "vertical"
   })
 ], exports.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;
 };
 exports.Scaler = class Scaler extends exports.Node {
@@ -11835,22 +11514,376 @@ exports.Scaler = class Scaler extends exports.Node {
     }
   }
 };
-__decorateClass([
+__decorateClass$4([
   property({ default: 1 })
 ], exports.Scaler.prototype, "value", 2);
-__decorateClass([
+__decorateClass$4([
   property({ default: 0.05 })
 ], exports.Scaler.prototype, "minValue", 2);
-__decorateClass([
+__decorateClass$4([
   property({ default: 10 })
 ], exports.Scaler.prototype, "maxValue", 2);
-exports.Scaler = __decorateClass([
+exports.Scaler = __decorateClass$4([
   customNode("Scaler", {
     processMode: "disabled",
     renderMode: "disabled"
   })
 ], exports.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);
+exports.KawaseTransition = class KawaseTransition extends exports.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, exports.KawaseTransition.material, {
+        sampler,
+        progress,
+        ...uniforms
+      });
+    });
+  }
+};
+__publicField$3(exports.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;
+}`
+}));
+exports.KawaseTransition = __decorateClass$3([
+  customNode("KawaseTransition")
+], exports.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);
+exports.LeftEraseTransition = class LeftEraseTransition extends exports.Transition {
+  apply(renderer) {
+    QuadUvGeometry.draw(renderer, exports.LeftEraseTransition.material, {
+      previous: 0,
+      next: 1,
+      progress: this.currentTimeProgress
+    });
+  }
+};
+__publicField$2(exports.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);
+}`
+}));
+exports.LeftEraseTransition = __decorateClass$2([
+  customNode("LeftEraseTransition")
+], exports.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);
+exports.TiltShiftTransition = class TiltShiftTransition extends exports.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, exports.TiltShiftTransition.material, {
+      sampler,
+      progress,
+      blur: this.blur,
+      gradientBlur: this.gradientBlur,
+      start,
+      end,
+      delta: [dx / d, dy / d],
+      texSize
+    });
+    QuadUvGeometry.draw(renderer, exports.TiltShiftTransition.material, {
+      sampler,
+      progress,
+      blur: this.blur,
+      gradientBlur: this.gradientBlur,
+      start,
+      end,
+      delta: [-dy / d, dx / d],
+      texSize
+    });
+  }
+};
+__publicField$1(exports.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;
+}`
+}));
+exports.TiltShiftTransition = __decorateClass$1([
+  customNode("TiltShiftTransition")
+], exports.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);
+exports.TwistTransition = class TwistTransition extends exports.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, exports.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(exports.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);
+}`
+}));
+exports.TwistTransition = __decorateClass([
+  customNode("TwistTransition")
+], exports.TwistTransition);
+
 class GifLoader extends Loader {
   install(assets) {
     const handler = async (url) => {