targetj 1.0.260 → 1.1.1

package/build/ParticleRenderer.js

@@ -1,4 +1,14 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
@@ -8,6 +18,7 @@ function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r),
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { ColorUtil } from "./ColorUtil.js";
+import { TUtil } from "./TUtil.js";
 
 /**
  * It renders GPU-backed children using WebGPU.
@@ -25,10 +36,24 @@ var ParticleRenderer = /*#__PURE__*/function () {
     this.particleBuffer = undefined;
     this.targetParticleBuffer = undefined;
     this.uniformBuffer = undefined;
+    this.explodeFragmentBuffer = undefined;
+    this.explodeTexture = undefined;
+    this.explodeSampler = undefined;
+    this.explodeSourceCanvas = undefined;
+    this.explodeTextureReady = false;
     this.transitionStep = 0;
     this.transitionActive = false;
     this.particleCount = 0;
     this.canvasLayer = undefined;
+
+    // Canvas origin and viewport are in the owning TModel's local content space.
+    this.canvasX = 0;
+    this.canvasY = 0;
+    this.canvasBounds = undefined;
+    this.canvasSize = undefined;
+    this.boundsDirty = true;
+    this.currentParticleData = undefined;
+    this.targetParticleData = undefined;
     this.initializationPromise = undefined;
   }
   return _createClass(ParticleRenderer, [{
@@ -40,28 +65,29 @@ var ParticleRenderer = /*#__PURE__*/function () {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               if (!this.device) {
-                _context.next = 2;
+                _context.next = 3;
                 break;
               }
+              this.mountCanvasLayer();
               return _context.abrupt("return", true);
-            case 2:
+            case 3:
               if (this.tmodel.hasDom()) {
-                _context.next = 4;
+                _context.next = 5;
                 break;
               }
               return _context.abrupt("return", false);
-            case 4:
+            case 5:
               if (!this.initializationPromise) {
                 this.initializationPromise = this.initialize().catch(function (error) {
                   _this.initializationPromise = undefined;
                   throw error;
                 });
               }
-              _context.next = 7;
+              _context.next = 8;
               return this.initializationPromise;
-            case 7:
-              return _context.abrupt("return", !!this.device);
             case 8:
+              return _context.abrupt("return", !!this.device);
+            case 9:
             case "end":
               return _context.stop();
           }
@@ -119,11 +145,13 @@ var ParticleRenderer = /*#__PURE__*/function () {
               this.context.configure({
                 device: this.device,
                 format: this.format,
-                alphaMode: "premultiplied"
+                alphaMode: "premultiplied",
+                usage: globalThis.GPUTextureUsage.RENDER_ATTACHMENT | globalThis.GPUTextureUsage.COPY_SRC
               });
               this.createUniformBuffer();
+              this.createExplodeResources();
               this.createPipeline();
-            case 21:
+            case 22:
             case "end":
               return _context2.stop();
           }
@@ -137,18 +165,11 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "createCanvas",
     value: function createCanvas() {
-      var _this$tmodel$$dom;
+      var _this2 = this;
       if (this.canvas) {
+        this.mountCanvasLayer();
         return;
       }
-      var parent = (_this$tmodel$$dom = this.tmodel.$dom) === null || _this$tmodel$$dom === void 0 ? void 0 : _this$tmodel$$dom.element;
-      if (!parent) {
-        throw new Error("Unable to create a GPU child layer without a parent DOM element.");
-      }
-      var oldLayer = parent.querySelector('[data-targetjs-gpu-layer="true"]');
-      if (oldLayer) {
-        oldLayer.remove();
-      }
       this.canvasLayer = document.createElement("div");
       this.canvasLayer.setAttribute("data-targetjs-gpu-layer", "true");
       Object.assign(this.canvasLayer.style, {
@@ -162,8 +183,11 @@ var ParticleRenderer = /*#__PURE__*/function () {
       });
       this.canvas = document.createElement("canvas");
       this.canvas.setAttribute("data-targetjs-gpu-children", "true");
+      this.canvas.captureBitmap = function () {
+        return _this2.captureBitmap();
+      };
       Object.assign(this.canvas.style, {
-        position: "sticky",
+        position: "absolute",
         left: "0px",
         top: "0px",
         width: "1px",
@@ -172,7 +196,13 @@ var ParticleRenderer = /*#__PURE__*/function () {
         pointerEvents: "none"
       });
       this.canvasLayer.appendChild(this.canvas);
-      parent.prepend(this.canvasLayer);
+      if (!this.mountCanvasLayer()) {
+        throw new Error("Unable to mount GPU child layer.");
+      }
+      this.onScroll = function () {
+        return _this2.tmodel.requestParticleRender();
+      };
+      this.updateScrollElements();
     }
   }, {
     key: "createUniformBuffer",
@@ -182,11 +212,38 @@ var ParticleRenderer = /*#__PURE__*/function () {
         usage: globalThis.GPUBufferUsage.UNIFORM | globalThis.GPUBufferUsage.COPY_DST
       });
     }
+  }, {
+    key: "createExplodeResources",
+    value: function createExplodeResources() {
+      this.explodeSampler = this.device.createSampler({
+        addressModeU: "clamp-to-edge",
+        addressModeV: "clamp-to-edge",
+        magFilter: "linear",
+        minFilter: "linear"
+      });
+      this.explodeTexture = this.device.createTexture({
+        size: {
+          width: 1,
+          height: 1
+        },
+        format: "rgba8unorm",
+        usage: globalThis.GPUTextureUsage.TEXTURE_BINDING | globalThis.GPUTextureUsage.COPY_DST
+      });
+      this.device.queue.writeTexture({
+        texture: this.explodeTexture
+      }, new Uint8Array([0, 0, 0, 0]), {
+        bytesPerRow: 4
+      }, {
+        width: 1,
+        height: 1
+      });
+      this.explodeTextureReady = false;
+    }
   }, {
     key: "createPipeline",
     value: function createPipeline() {
       var shaderModule = this.device.createShaderModule({
-        code: "\n                struct Uniforms {\n                    viewport: vec2f,\n                    contentOffset: vec2f,\n                    step: f32,\n                    transitionActive: f32,\n                    padding: vec2f,\n                }\n\n                @group(0) @binding(0)\n                var<uniform> uniforms: Uniforms;\n\n                struct VertexOutput {\n                    @builtin(position) position: vec4f,\n                    @location(0) localPosition: vec2f,\n                    @location(1) backgroundColor: vec4f,\n                    @location(2) size: vec2f,\n                    @location(3) borderRadius: f32,\n                }\n\n                fn getProgress(step: f32, steps: f32) -> f32 {\n                    if (uniforms.transitionActive < 0.5) {\n                        return 0.0;\n                    }\n\n                    if (steps < 0.0) {\n                        return 0.0;\n                    }\n\n                    if (steps == 0.0) {\n                        return 1.0;\n                    }\n\n                    return clamp(step / steps, 0.0, 1.0);\n                }\n\n                @vertex\n                fn vertexMain(\n                    @location(0) childPosition: vec2f,\n                    @location(1) childSize: vec2f,\n                    @location(2) childBackgroundColor: vec4f,\n                    @location(3) childGeometry: vec2f,\n                    @location(4) targetPosition: vec2f,\n                    @location(5) targetSize: vec2f,\n                    @location(6) targetBackgroundColor: vec4f,\n                    @location(7) targetGeometry: vec2f,\n                    @location(8) targetPositionSteps: vec2f,\n                    @location(9) targetSizeSteps: vec2f,\n                    @location(10) targetBackgroundColorSteps: f32,\n                    @location(11) targetGeometrySteps: vec2f,\n                    @builtin(vertex_index) vertexIndex: u32\n                ) -> VertexOutput {\n                    let corners = array<vec2f, 6>(\n                        vec2f(-1.0, -1.0),\n                        vec2f( 1.0, -1.0),\n                        vec2f(-1.0,  1.0),\n                        vec2f(-1.0,  1.0),\n                        vec2f( 1.0, -1.0),\n                        vec2f( 1.0,  1.0)\n                    );\n\n                    let xProgress = getProgress(uniforms.step, targetPositionSteps.x);\n                    let yProgress = getProgress(uniforms.step, targetPositionSteps.y);\n                    let widthProgress = getProgress(uniforms.step, targetSizeSteps.x);\n                    let heightProgress = getProgress(uniforms.step, targetSizeSteps.y);\n                    let backgroundColorProgress = getProgress(uniforms.step, targetBackgroundColorSteps);\n                    let borderRadiusProgress = getProgress(uniforms.step, targetGeometrySteps.x);\n                    let rotateProgress = getProgress(uniforms.step, targetGeometrySteps.y);\n\n                    let position = vec2f(\n                        mix(childPosition.x, targetPosition.x, xProgress),\n                        mix(childPosition.y, targetPosition.y, yProgress)\n                    );\n\n                    let size = vec2f(\n                        mix(childSize.x, targetSize.x, widthProgress),\n                        mix(childSize.y, targetSize.y, heightProgress)\n                    );\n\n                    let backgroundColor = mix(childBackgroundColor, targetBackgroundColor, backgroundColorProgress);\n                    let borderRadius = mix(childGeometry.x, targetGeometry.x, borderRadiusProgress);\n                    let rotate = mix(childGeometry.y, targetGeometry.y, rotateProgress);\n                    let localPosition = corners[vertexIndex];\n                    let localPixelPosition = localPosition * size * 0.5;\n                    let angle = rotate * 3.141592653589793 / 180.0;\n                    let cosine = cos(angle);\n                    let sine = sin(angle);\n\n                    let rotatedPosition = vec2f(\n                        localPixelPosition.x * cosine - localPixelPosition.y * sine,\n                        localPixelPosition.x * sine + localPixelPosition.y * cosine\n                    );\n\n                    let elementCenter = position - uniforms.contentOffset + size * 0.5;\n                    let pixelPosition = elementCenter + rotatedPosition;\n\n                    let clipPosition = vec2f(\n                        pixelPosition.x / uniforms.viewport.x * 2.0 - 1.0,\n                        1.0 - pixelPosition.y / uniforms.viewport.y * 2.0\n                    );\n\n                    var output: VertexOutput;\n\n                    output.position = vec4f(clipPosition, 0.0, 1.0);\n                    output.localPosition = localPosition;\n                    output.backgroundColor = backgroundColor;\n                    output.size = size;\n                    output.borderRadius = borderRadius;\n\n                    return output;\n                }\n\n                @fragment\n                fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {\n                    let halfSize = max(input.size * 0.5, vec2f(0.0001));\n                    let radius = clamp(input.borderRadius, 0.0, min(halfSize.x, halfSize.y));\n\n                    if (radius > 0.0) {\n                        let pixelPosition = input.localPosition * halfSize;\n                        let q = abs(pixelPosition) - (halfSize - vec2f(radius));\n                        let distance = length(max(q, vec2f(0.0))) + min(max(q.x, q.y), 0.0) - radius;\n\n                        if (distance > 0.0) {\n                            discard;\n                        }\n                    }\n\n                    return input.backgroundColor;\n                }\n            "
+        code: "\n                struct Uniforms {\n                    viewport: vec2f,\n                    contentOffset: vec2f,\n                    step: f32,\n                    transitionActive: f32,\n                    padding: vec2f,\n                }\n\n                @group(0) @binding(0)\n                var<uniform> uniforms: Uniforms;\n            \n                @group(0) @binding(1)\n                var explodeSampler: sampler;\n\n                @group(0) @binding(2)\n                var explodeTexture: texture_2d<f32>;\n\n                struct VertexOutput {\n                    @builtin(position) position: vec4f,\n                    @location(0) localPosition: vec2f,\n                    @location(1) backgroundColor: vec4f,\n                    @location(2) size: vec2f,\n                    @location(3) borderRadius: f32,\n                    @location(4) sourceUv: vec2f,\n                    @location(5) useImage: f32,\n                    @location(6) opacity: f32,\n                }\n            \n                fn getProgress(step: f32, steps: f32) -> f32 {\n                    if (uniforms.transitionActive < 0.5) {\n                        return 0.0;\n                    }\n\n                    if (steps < 0.0) {\n                        return 0.0;\n                    }\n\n                    if (steps == 0.0) {\n                        return 1.0;\n                    }\n\n                    return clamp(step / steps, 0.0, 1.0);\n                }\n\n                @vertex\n                fn vertexMain(\n                    @location(0) childPosition: vec2f,\n                    @location(1) childSize: vec2f,\n                    @location(2) childBackgroundColor: vec4f,\n                    @location(3) childGeometry: vec2f,\n                    @location(4) targetPosition: vec2f,\n                    @location(5) targetSize: vec2f,\n                    @location(6) targetBackgroundColor: vec4f,\n                    @location(7) targetGeometry: vec2f,\n                    @location(8) targetPositionSteps: vec2f,\n                    @location(9) targetSizeSteps: vec2f,\n                    @location(10) targetColorOpacitySteps: vec2f,\n                    @location(11) targetGeometrySteps: vec2f,\n                    @location(12) childScaleOpacity: vec2f,\n                    @location(13) targetScaleOpacity: vec2f,\n                    @location(14) targetScaleSteps: f32,\n                    @location(15) explodeData: vec4f,\n                    @builtin(vertex_index) vertexIndex: u32\n                ) -> VertexOutput {\n                    let corners = array<vec2f, 6>(\n                        vec2f(-1.0, -1.0),\n                        vec2f( 1.0, -1.0),\n                        vec2f(-1.0,  1.0),\n                        vec2f(-1.0,  1.0),\n                        vec2f( 1.0, -1.0),\n                        vec2f( 1.0,  1.0)\n                    );\n\n                    let xProgress = getProgress(uniforms.step, targetPositionSteps.x);\n                    let yProgress = getProgress(uniforms.step, targetPositionSteps.y);\n                    let widthProgress = getProgress(uniforms.step, targetSizeSteps.x);\n                    let heightProgress = getProgress(uniforms.step, targetSizeSteps.y);\n                    let backgroundColorProgress = getProgress(uniforms.step, targetColorOpacitySteps.x);\n                    let opacityProgress = getProgress(uniforms.step, targetColorOpacitySteps.y);\n                    let borderRadiusProgress = getProgress(uniforms.step, targetGeometrySteps.x);\n                    let rotateProgress = getProgress(uniforms.step, targetGeometrySteps.y);\n                    let scaleProgress = getProgress(uniforms.step, targetScaleSteps);\n            \n                    let position = vec2f(\n                        mix(childPosition.x, targetPosition.x, xProgress),\n                        mix(childPosition.y, targetPosition.y, yProgress)\n                    );\n\n                    let size = vec2f(\n                        mix(childSize.x, targetSize.x, widthProgress),\n                        mix(childSize.y, targetSize.y, heightProgress)\n                    );\n\n                    let backgroundColor = mix(childBackgroundColor, targetBackgroundColor, backgroundColorProgress);\n                    let borderRadius = mix(childGeometry.x, targetGeometry.x, borderRadiusProgress);\n                    let rotate = mix(childGeometry.y, targetGeometry.y, rotateProgress);\n                    let scale = mix(childScaleOpacity.x, targetScaleOpacity.x, scaleProgress);\n                    let opacity = mix(childScaleOpacity.y, targetScaleOpacity.y, opacityProgress);\n\n                    let localPosition = corners[vertexIndex];\n            \n                    let useImage = explodeData.w >= 0.0;\n                    let sourceV1 = select(-explodeData.w - 1.0, explodeData.w, useImage);\n                    let localUv = localPosition * 0.5 + vec2f(0.5);\n                    let sourceUv = mix(explodeData.xy, vec2f(explodeData.z, sourceV1), localUv);\n            \n                    let localPixelPosition = localPosition * size * 0.5 * scale;\n\n                    let angle = rotate * 3.141592653589793 / 180.0;\n                    let cosine = cos(angle);\n                    let sine = sin(angle);\n\n                    let rotatedPosition = vec2f(\n                        localPixelPosition.x * cosine - localPixelPosition.y * sine,\n                        localPixelPosition.x * sine + localPixelPosition.y * cosine\n                    );\n\n                    let elementCenter = position - uniforms.contentOffset + size * 0.5;\n                    let pixelPosition = elementCenter + rotatedPosition;\n\n                    let clipPosition = vec2f(\n                        pixelPosition.x / uniforms.viewport.x * 2.0 - 1.0,\n                        1.0 - pixelPosition.y / uniforms.viewport.y * 2.0\n                    );\n\n                    var output: VertexOutput;\n\n                    output.position = vec4f(clipPosition, 0.0, 1.0);\n                    output.localPosition = localPosition;\n                    output.backgroundColor = backgroundColor;\n                    output.size = size;\n                    output.borderRadius = borderRadius;\n                    output.opacity = opacity;\n            \n                    output.sourceUv = sourceUv;\n                    output.useImage = select(0.0, 1.0, useImage);\n\n                    return output;\n                }\n\n                @fragment\n                fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {\n                    var color = input.backgroundColor;\n\n                    if (input.useImage > 0.5) {\n                        color = textureSampleLevel(explodeTexture, explodeSampler, input.sourceUv, 0.0);\n                    }\n\n                    let halfSize = max(input.size * 0.5, vec2f(0.0001));\n                    let radius = clamp(input.borderRadius, 0.0, min(halfSize.x, halfSize.y));\n                    let pixelPosition = input.localPosition * halfSize;\n                    let q = abs(pixelPosition) - (halfSize - vec2f(radius));\n                    let distance = length(max(q, vec2f(0.0))) + min(max(q.x, q.y), 0.0) - radius;\n                    let aa = max(fwidth(distance), 0.0001);\n                    let roundedCoverage = 1.0 - smoothstep(-aa, aa, distance);\n                    let coverage = select(1.0, roundedCoverage, radius > 0.0);\n\n                    if (coverage <= 0.0) {\n                        discard;\n                    }\n\n                    let alpha = color.a * input.opacity * coverage;\n\n                    return vec4f(color.rgb * alpha, alpha);\n                }\n            "
       });
       this.pipeline = this.device.createRenderPipeline({
         layout: "auto",
@@ -194,7 +251,7 @@ var ParticleRenderer = /*#__PURE__*/function () {
           module: shaderModule,
           entryPoint: "vertexMain",
           buffers: [{
-            arrayStride: 80,
+            arrayStride: 84,
             stepMode: "instance",
             attributes: [{
               shaderLocation: 0,
@@ -212,9 +269,13 @@ var ParticleRenderer = /*#__PURE__*/function () {
               shaderLocation: 3,
               offset: 32,
               format: "float32x2"
+            }, {
+              shaderLocation: 12,
+              offset: 72,
+              format: "float32x2"
             }]
           }, {
-            arrayStride: 80,
+            arrayStride: 84,
             stepMode: "instance",
             attributes: [{
               shaderLocation: 4,
@@ -243,11 +304,27 @@ var ParticleRenderer = /*#__PURE__*/function () {
             }, {
               shaderLocation: 10,
               offset: 56,
-              format: "float32"
+              format: "float32x2"
             }, {
               shaderLocation: 11,
-              offset: 60,
+              offset: 64,
+              format: "float32x2"
+            }, {
+              shaderLocation: 13,
+              offset: 72,
               format: "float32x2"
+            }, {
+              shaderLocation: 14,
+              offset: 80,
+              format: "float32"
+            }]
+          }, {
+            arrayStride: 16,
+            stepMode: "instance",
+            attributes: [{
+              shaderLocation: 15,
+              offset: 0,
+              format: "float32x4"
             }]
           }]
         },
@@ -255,13 +332,30 @@ var ParticleRenderer = /*#__PURE__*/function () {
           module: shaderModule,
           entryPoint: "fragmentMain",
           targets: [{
-            format: this.format
+            format: this.format,
+            blend: {
+              color: {
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add"
+              },
+              alpha: {
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add"
+              }
+            }
           }]
         },
         primitive: {
           topology: "triangle-list"
         }
       });
+      this.createBindGroup();
+    }
+  }, {
+    key: "createBindGroup",
+    value: function createBindGroup() {
       this.bindGroup = this.device.createBindGroup({
         layout: this.pipeline.getBindGroupLayout(0),
         entries: [{
@@ -269,9 +363,151 @@ var ParticleRenderer = /*#__PURE__*/function () {
           resource: {
             buffer: this.uniformBuffer
           }
+        }, {
+          binding: 1,
+          resource: this.explodeSampler
+        }, {
+          binding: 2,
+          resource: this.explodeTexture.createView()
         }]
       });
     }
+  }, {
+    key: "createExplodeSourceCanvas",
+    value: function createExplodeSourceCanvas(source) {
+      var width = source === null || source === void 0 ? void 0 : source.width;
+      var height = source === null || source === void 0 ? void 0 : source.height;
+      if (!width || !height) {
+        return;
+      }
+      var canvas = document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height;
+      var context = canvas.getContext("2d");
+      if (!context) {
+        throw new Error("Could not create a 2D context for the explode source copy.");
+      }
+      context.drawImage(source, 0, 0, width, height);
+      return canvas;
+    }
+  }, {
+    key: "setExplodeSource",
+    value: function () {
+      var _setExplodeSource = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(capture) {
+        var _capture$bitmap, _capture$canvas, _this$explodeTexture;
+        var source, sourceCanvas, initialized, width, height, texture;
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              source = (_capture$bitmap = capture === null || capture === void 0 ? void 0 : capture.bitmap) !== null && _capture$bitmap !== void 0 ? _capture$bitmap : capture === null || capture === void 0 ? void 0 : capture.canvas;
+              if (source) {
+                _context3.next = 3;
+                break;
+              }
+              return _context3.abrupt("return", false);
+            case 3:
+              sourceCanvas = (_capture$canvas = capture === null || capture === void 0 ? void 0 : capture.canvas) !== null && _capture$canvas !== void 0 ? _capture$canvas : this.createExplodeSourceCanvas(source);
+              if (sourceCanvas) {
+                _context3.next = 6;
+                break;
+              }
+              return _context3.abrupt("return", false);
+            case 6:
+              _context3.next = 8;
+              return this.init();
+            case 8:
+              initialized = _context3.sent;
+              if (initialized) {
+                _context3.next = 11;
+                break;
+              }
+              return _context3.abrupt("return", false);
+            case 11:
+              width = sourceCanvas.width;
+              height = sourceCanvas.height;
+              texture = this.device.createTexture({
+                size: {
+                  width: width,
+                  height: height
+                },
+                format: "rgba8unorm",
+                usage: globalThis.GPUTextureUsage.TEXTURE_BINDING | globalThis.GPUTextureUsage.COPY_DST | globalThis.GPUTextureUsage.RENDER_ATTACHMENT
+              });
+              this.device.queue.copyExternalImageToTexture({
+                source: sourceCanvas
+              }, {
+                texture: texture
+              }, {
+                width: width,
+                height: height
+              });
+              (_this$explodeTexture = this.explodeTexture) === null || _this$explodeTexture === void 0 || _this$explodeTexture.destroy();
+              this.explodeSourceCanvas = sourceCanvas;
+              this.explodeTexture = texture;
+              this.explodeTextureReady = true;
+              this.updateExplodeFragmentBuffer(this.tmodel.childHandles);
+              this.createBindGroup();
+              this.render();
+              return _context3.abrupt("return", true);
+            case 23:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function setExplodeSource(_x) {
+        return _setExplodeSource.apply(this, arguments);
+      }
+      return setExplodeSource;
+    }()
+  }, {
+    key: "captureExplodeSourceBitmap",
+    value: function captureExplodeSourceBitmap() {
+      if (!this.explodeSourceCanvas) {
+        return;
+      }
+      return createImageBitmap(this.explodeSourceCanvas);
+    }
+  }, {
+    key: "createExplodeFragmentData",
+    value: function createExplodeFragmentData(children) {
+      var data = new Float32Array(children.length * 4);
+      var state = this.tmodel.explodeChildrenState;
+      var sourceWidth = (state === null || state === void 0 ? void 0 : state.width) || 1;
+      var sourceHeight = (state === null || state === void 0 ? void 0 : state.height) || 1;
+      for (var index = 0; index < children.length; index++) {
+        var child = children[index];
+        var childIndex = Number.isInteger(child === null || child === void 0 ? void 0 : child.index) ? child.index : index;
+        var fragment = this.tmodel.getExplodeFragment(childIndex);
+        var offset = index * 4;
+        if (!fragment) {
+          data[offset] = 0;
+          data[offset + 1] = 0;
+          data[offset + 2] = 0;
+          data[offset + 3] = -1;
+          continue;
+        }
+        var u0 = fragment.x / sourceWidth;
+        var v0 = fragment.y / sourceHeight;
+        var u1 = (fragment.x + fragment.width) / sourceWidth;
+        var v1 = (fragment.y + fragment.height) / sourceHeight;
+        var hasBackground = TUtil.isDefined(child.actualValues.backgroundColor);
+        var useImage = this.explodeTextureReady && !hasBackground;
+        data[offset] = u0;
+        data[offset + 1] = v0;
+        data[offset + 2] = u1;
+
+        // A negative fourth value means image:false.
+        data[offset + 3] = useImage ? v1 : -(v1 + 1);
+      }
+      return data;
+    }
+  }, {
+    key: "updateExplodeFragmentBuffer",
+    value: function updateExplodeFragmentBuffer(children) {
+      var data = this.createExplodeFragmentData(children);
+      this.explodeFragmentBuffer = this.uploadParticleBuffer(this.explodeFragmentBuffer, data);
+    }
   }, {
     key: "toNumber",
     value: function toNumber(value) {
@@ -282,18 +518,21 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "getBackgroundColor",
     value: function getBackgroundColor(value) {
+      if (!TUtil.isDefined(value)) {
+        return [0, 0, 0, 0];
+      }
       if (Array.isArray(value)) {
-        return [this.toNumber(value[0], 1), this.toNumber(value[1], 1), this.toNumber(value[2], 1), this.toNumber(value[3], 1)];
+        return [this.toNumber(value[0], 0), this.toNumber(value[1], 0), this.toNumber(value[2], 0), this.toNumber(value[3], 0)];
       }
-      var color = ColorUtil.color2Integers(value !== null && value !== void 0 ? value : "#fff");
+      var color = ColorUtil.color2Integers(value);
       if (!color) {
-        return [1, 1, 1, 1];
+        return [0, 0, 0, 0];
       }
       var alpha = this.toNumber(color[3], 1);
       if (alpha > 1) {
         alpha /= 255;
       }
-      return [this.toNumber(color[0], 255) / 255, this.toNumber(color[1], 255) / 255, this.toNumber(color[2], 255) / 255, alpha];
+      return [this.toNumber(color[0], 0) / 255, this.toNumber(color[1], 0) / 255, this.toNumber(color[2], 0) / 255, alpha];
     }
   }, {
     key: "getTargetStep",
@@ -303,32 +542,61 @@ var ParticleRenderer = /*#__PURE__*/function () {
       }
       return Math.max(0, this.toNumber(steps[key], 0));
     }
+  }, {
+    key: "writeParticleData",
+    value: function writeParticleData(particleData, offset, values, steps) {
+      var _values, _values2;
+      var x = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : (_values = values) === null || _values === void 0 ? void 0 : _values.x;
+      var y = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : (_values2 = values) === null || _values2 === void 0 ? void 0 : _values2.y;
+      values || (values = {});
+      var backgroundColor = this.getBackgroundColor(values.backgroundColor);
+      var opacity = Math.max(0, Math.min(1, this.toNumber(values.opacity, 1)));
+      particleData[offset] = this.toNumber(x, 0);
+      particleData[offset + 1] = this.toNumber(y, 0);
+      particleData[offset + 2] = this.toNumber(values.width, 0);
+      particleData[offset + 3] = this.toNumber(values.height, 0);
+      particleData[offset + 4] = backgroundColor[0];
+      particleData[offset + 5] = backgroundColor[1];
+      particleData[offset + 6] = backgroundColor[2];
+      particleData[offset + 7] = backgroundColor[3];
+      particleData[offset + 8] = Math.max(0, this.toNumber(values.borderRadius, 0));
+      particleData[offset + 9] = this.toNumber(values.rotate, 0);
+      particleData[offset + 10] = this.getTargetStep(steps, "x");
+      particleData[offset + 11] = this.getTargetStep(steps, "y");
+      particleData[offset + 12] = this.getTargetStep(steps, "width");
+      particleData[offset + 13] = this.getTargetStep(steps, "height");
+      particleData[offset + 14] = this.getTargetStep(steps, "backgroundColor");
+      particleData[offset + 15] = this.getTargetStep(steps, "opacity");
+      particleData[offset + 16] = this.getTargetStep(steps, "borderRadius");
+      particleData[offset + 17] = this.getTargetStep(steps, "rotate");
+      particleData[offset + 18] = this.toNumber(values.scale, 1);
+      particleData[offset + 19] = opacity;
+      particleData[offset + 20] = this.getTargetStep(steps, "scale");
+    }
+  }, {
+    key: "createChildData",
+    value: function createChildData(children) {
+      var particleData = new Float32Array(children.length * 21);
+      for (var i = 0; i < children.length; i++) {
+        var child = children[i];
+        var values = child.actualValues;
+        var _this$getParticlePosi = this.getParticlePosition(child, values),
+          x = _this$getParticlePosi.x,
+          y = _this$getParticlePosi.y;
+        this.writeParticleData(particleData, i * 21, values, undefined, x, y);
+      }
+      return particleData;
+    }
   }, {
     key: "createParticleData",
     value: function createParticleData(values, targetSteps) {
-      var particleData = new Float32Array(values.length * 20);
+      var particleData = new Float32Array(values.length * 21);
       for (var i = 0; i < values.length; i++) {
-        var child = values[i] || {};
-        var steps = targetSteps === null || targetSteps === void 0 ? void 0 : targetSteps[i];
-        var backgroundColor = this.getBackgroundColor(child.backgroundColor);
-        var offset = i * 20;
-        particleData[offset] = this.toNumber(child.x, 0);
-        particleData[offset + 1] = this.toNumber(child.y, 0);
-        particleData[offset + 2] = this.toNumber(child.width, 0);
-        particleData[offset + 3] = this.toNumber(child.height, 0);
-        particleData[offset + 4] = backgroundColor[0];
-        particleData[offset + 5] = backgroundColor[1];
-        particleData[offset + 6] = backgroundColor[2];
-        particleData[offset + 7] = backgroundColor[3];
-        particleData[offset + 8] = Math.max(0, this.toNumber(child.borderRadius, 0));
-        particleData[offset + 9] = this.toNumber(child.rotate, 0);
-        particleData[offset + 10] = this.getTargetStep(steps, "x");
-        particleData[offset + 11] = this.getTargetStep(steps, "y");
-        particleData[offset + 12] = this.getTargetStep(steps, "width");
-        particleData[offset + 13] = this.getTargetStep(steps, "height");
-        particleData[offset + 14] = this.getTargetStep(steps, "backgroundColor");
-        particleData[offset + 15] = this.getTargetStep(steps, "borderRadius");
-        particleData[offset + 16] = this.getTargetStep(steps, "rotate");
+        var child = this.tmodel.childHandles[i];
+        var _this$getParticlePosi2 = this.getParticlePosition(child, values[i]),
+          x = _this$getParticlePosi2.x,
+          y = _this$getParticlePosi2.y;
+        this.writeParticleData(particleData, i * 21, values[i], targetSteps === null || targetSteps === void 0 ? void 0 : targetSteps[i], x, y);
       }
       return particleData;
     }
@@ -354,36 +622,41 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "setParticles",
     value: function () {
-      var _setParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(values) {
+      var _setParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(children) {
         var initialized, particleData;
-        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
             case 0:
-              values = Array.isArray(values) ? values : [values];
-              _context3.next = 3;
+              children = Array.isArray(children) ? children : [children];
+              _context4.next = 3;
               return this.init();
             case 3:
-              initialized = _context3.sent;
+              initialized = _context4.sent;
               if (initialized) {
-                _context3.next = 6;
+                _context4.next = 6;
                 break;
               }
-              return _context3.abrupt("return");
+              return _context4.abrupt("return", false);
             case 6:
-              particleData = this.createParticleData(values);
-              this.particleCount = values.length;
+              particleData = this.createChildData(children);
+              this.updateExplodeFragmentBuffer(children);
+              this.particleCount = children.length;
+              this.currentParticleData = particleData;
+              this.targetParticleData = particleData;
               this.particleBuffer = this.uploadParticleBuffer(this.particleBuffer, particleData);
               this.targetParticleBuffer = this.uploadParticleBuffer(this.targetParticleBuffer, particleData);
               this.transitionStep = 0;
               this.transitionActive = false;
+              this.boundsDirty = true;
               this.render();
-            case 13:
+              return _context4.abrupt("return", true);
+            case 18:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
-        }, _callee3, this);
+        }, _callee4, this);
       }));
-      function setParticles(_x) {
+      function setParticles(_x2) {
         return _setParticles.apply(this, arguments);
       }
       return setParticles;
@@ -391,36 +664,45 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "updateParticles",
     value: function () {
-      var _updateParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(values) {
+      var _updateParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(children) {
         var initialized, particleData;
-        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
+        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
             case 0:
-              values = Array.isArray(values) ? values : [values];
-              _context4.next = 3;
+              children = Array.isArray(children) ? children : [children];
+              _context5.next = 3;
               return this.init();
             case 3:
-              initialized = _context4.sent;
+              initialized = _context5.sent;
               if (initialized) {
-                _context4.next = 6;
+                _context5.next = 6;
                 break;
               }
-              return _context4.abrupt("return");
+              return _context5.abrupt("return", false);
             case 6:
-              particleData = this.createParticleData(values);
-              this.particleCount = values.length;
+              particleData = this.createChildData(children);
+              this.updateExplodeFragmentBuffer(children);
+              this.particleCount = children.length;
+              this.currentParticleData = particleData;
               this.particleBuffer = this.uploadParticleBuffer(this.particleBuffer, particleData);
-              if (!this.transitionActive) {
+              if (!children.length || !this.transitionActive) {
+                this.targetParticleData = particleData;
                 this.targetParticleBuffer = this.uploadParticleBuffer(this.targetParticleBuffer, particleData);
               }
+              if (!children.length) {
+                this.transitionStep = 0;
+                this.transitionActive = false;
+              }
+              this.boundsDirty = true;
               this.render();
-            case 11:
+              return _context5.abrupt("return", true);
+            case 16:
             case "end":
-              return _context4.stop();
+              return _context5.stop();
           }
-        }, _callee4, this);
+        }, _callee5, this);
       }));
-      function updateParticles(_x2) {
+      function updateParticles(_x3) {
         return _updateParticles.apply(this, arguments);
       }
       return updateParticles;
@@ -428,40 +710,56 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "setTargetParticles",
     value: function () {
-      var _setTargetParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(values, steps) {
-        var initialized, particleData;
-        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
+      var _setTargetParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(values, steps) {
+        var generation,
+          initialized,
+          currentChildren,
+          currentParticleData,
+          particleData,
+          _args6 = arguments;
+        return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
             case 0:
+              generation = _args6.length > 2 && _args6[2] !== undefined ? _args6[2] : this.tmodel.childGeneration;
               values = Array.isArray(values) ? values : [values];
-              _context5.next = 3;
+              _context6.next = 4;
               return this.init();
-            case 3:
-              initialized = _context5.sent;
-              if (initialized) {
-                _context5.next = 6;
+            case 4:
+              initialized = _context6.sent;
+              if (!(!initialized || generation !== this.tmodel.childGeneration)) {
+                _context6.next = 7;
                 break;
               }
-              return _context5.abrupt("return");
-            case 6:
-              if (!(this.particleCount && values.length !== this.particleCount)) {
-                _context5.next = 8;
+              return _context6.abrupt("return", false);
+            case 7:
+              currentChildren = this.tmodel.childHandles;
+              if (!(values.length !== currentChildren.length)) {
+                _context6.next = 10;
                 break;
               }
-              throw new Error("GPU child transition count ".concat(values.length, " does not match current child count ").concat(this.particleCount, "."));
-            case 8:
+              return _context6.abrupt("return", false);
+            case 10:
+              if (this.particleCount !== currentChildren.length || !this.particleBuffer) {
+                currentParticleData = this.createChildData(currentChildren);
+                this.particleCount = currentChildren.length;
+                this.currentParticleData = currentParticleData;
+                this.particleBuffer = this.uploadParticleBuffer(this.particleBuffer, currentParticleData);
+              }
               particleData = this.createParticleData(values, steps);
+              this.targetParticleData = particleData;
               this.targetParticleBuffer = this.uploadParticleBuffer(this.targetParticleBuffer, particleData);
               this.transitionStep = 0;
               this.transitionActive = true;
+              this.boundsDirty = true;
               this.render();
-            case 13:
+              return _context6.abrupt("return", true);
+            case 19:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
-        }, _callee5, this);
+        }, _callee6, this);
       }));
-      function setTargetParticles(_x3, _x4) {
+      function setTargetParticles(_x4, _x5) {
         return _setTargetParticles.apply(this, arguments);
       }
       return setTargetParticles;
@@ -469,45 +767,132 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "setTransitionStep",
     value: function setTransitionStep(step) {
-      this.transitionStep = Math.max(0, this.toNumber(step, 0));
+      step = Math.max(0, this.toNumber(step, 0));
+      if (step === this.transitionStep) {
+        return;
+      }
+      this.transitionStep = step;
       this.render();
     }
   }, {
     key: "getRenderWidth",
     value: function getRenderWidth() {
-      var modelWidth = Number(this.tmodel.getWidth()) || 1;
-      var parentWidth = Number(this.tmodel.getParent().getWidth()) || window.innerWidth || 1;
-      return Math.max(1, Math.min(modelWidth, parentWidth));
+      return Math.max(1, Number(this.tmodel.getWidth()) || 1);
     }
   }, {
     key: "getRenderHeight",
     value: function getRenderHeight() {
-      var _this$tmodel$getParen;
-      var modelHeight = Number(this.tmodel.getHeight()) || 1;
-      var parentHeight = Number((_this$tmodel$getParen = this.tmodel.getParent()) === null || _this$tmodel$getParen === void 0 ? void 0 : _this$tmodel$getParen.getHeight()) || window.innerHeight || 1;
-      return Math.max(1, Math.min(modelHeight, parentHeight));
+      return Math.max(1, Number(this.tmodel.getHeight()) || 1);
+    }
+  }, {
+    key: "getParticleBounds",
+    value: function getParticleBounds() {
+      var modelWidth = this.getRenderWidth();
+      var modelHeight = this.getRenderHeight();
+      var viewport = this.tmodel.managesOwnScroll();
+      var bounds = this.canvasBounds;
+      if (!this.boundsDirty && (bounds === null || bounds === void 0 ? void 0 : bounds.modelWidth) === modelWidth && (bounds === null || bounds === void 0 ? void 0 : bounds.modelHeight) === modelHeight && (bounds === null || bounds === void 0 ? void 0 : bounds.viewport) === viewport) {
+        return bounds;
+      }
+      var calculated = viewport ? {
+        x: 0,
+        y: 0,
+        width: modelWidth,
+        height: modelHeight
+      } : this.calculateParticleBounds();
+      this.canvasBounds = _objectSpread(_objectSpread({}, calculated), {}, {
+        modelWidth: modelWidth,
+        modelHeight: modelHeight,
+        viewport: viewport
+      });
+      this.boundsDirty = false;
+      return this.canvasBounds;
+    }
+  }, {
+    key: "calculateParticleBounds",
+    value: function calculateParticleBounds() {
+      var _this$targetParticleD, _current$length;
+      var left = 0;
+      var top = 0;
+      var right = this.getRenderWidth();
+      var bottom = this.getRenderHeight();
+      var current = this.currentParticleData;
+      var target = (_this$targetParticleD = this.targetParticleData) !== null && _this$targetParticleD !== void 0 ? _this$targetParticleD : current;
+      var stride = 21;
+      var count = Math.min(this.particleCount, ((_current$length = current === null || current === void 0 ? void 0 : current.length) !== null && _current$length !== void 0 ? _current$length : 0) / stride);
+      var safety = 2;
+      for (var i = 0; i < count; i++) {
+        var j = i * stride;
+        var a = current;
+        var b = target && target.length >= j + stride ? target : current;
+        var minX = Math.min(a[j], b[j]);
+        var maxX = Math.max(a[j], b[j]);
+        var minY = Math.min(a[j + 1], b[j + 1]);
+        var maxY = Math.max(a[j + 1], b[j + 1]);
+        var minWidth = Math.min(a[j + 2], b[j + 2]);
+        var maxWidth = Math.max(a[j + 2], b[j + 2]);
+        var minHeight = Math.min(a[j + 3], b[j + 3]);
+        var maxHeight = Math.max(a[j + 3], b[j + 3]);
+        var maxScale = Math.max(Math.abs(a[j + 18]), Math.abs(b[j + 18]));
+        var radius = Math.hypot(Math.max(Math.abs(a[j + 2]), Math.abs(b[j + 2])), Math.max(Math.abs(a[j + 3]), Math.abs(b[j + 3]))) * maxScale * 0.5 + safety;
+        left = Math.min(left, minX + minWidth / 2 - radius);
+        right = Math.max(right, maxX + maxWidth / 2 + radius);
+        top = Math.min(top, minY + minHeight / 2 - radius);
+        bottom = Math.max(bottom, maxY + maxHeight / 2 + radius);
+      }
+      var x = Math.floor(left);
+      var y = Math.floor(top);
+      return {
+        x: x,
+        y: y,
+        width: Math.max(1, Math.ceil(right) - x),
+        height: Math.max(1, Math.ceil(bottom) - y)
+      };
+    }
+  }, {
+    key: "updateCanvasLayerWidthHeight",
+    value: function updateCanvasLayerWidthHeight() {
+      if (!this.canvasLayer) {
+        return;
+      }
+      var viewport = this.getParticleBounds().viewport;
+      var modelWidth = this.getRenderWidth();
+      var modelHeight = this.getRenderHeight();
+      var width = viewport ? Math.max(modelWidth, Number(this.tmodel.getContentWidth()) || 0) : modelWidth;
+      var height = viewport ? Math.max(modelHeight, Number(this.tmodel.getContentHeight()) || 0) : modelHeight;
+      if (this.canvasLayer.style.width !== "".concat(width, "px")) {
+        this.canvasLayer.style.width = "".concat(width, "px");
+      }
+      if (this.canvasLayer.style.height !== "".concat(height, "px")) {
+        this.canvasLayer.style.height = "".concat(height, "px");
+      }
     }
   }, {
     key: "resizeCanvas",
     value: function resizeCanvas() {
       var _this$device$limits;
       if (!this.canvas || !this.device) {
-        return;
+        return false;
       }
-      var width = this.getRenderWidth();
-      var height = this.getRenderHeight();
-      var requestedPixelRatio = window.devicePixelRatio || 1;
-      var maxTextureDimension = ((_this$device$limits = this.device.limits) === null || _this$device$limits === void 0 ? void 0 : _this$device$limits.maxTextureDimension2D) || 8192;
-      var pixelRatio = Math.min(requestedPixelRatio, maxTextureDimension / width, maxTextureDimension / height);
+      var bounds = this.getParticleBounds();
+      var width = bounds.width,
+        height = bounds.height,
+        modelWidth = bounds.modelWidth,
+        modelHeight = bounds.modelHeight;
+      var devicePixelRatio = window.devicePixelRatio || 1;
+      var maxDimension = ((_this$device$limits = this.device.limits) === null || _this$device$limits === void 0 ? void 0 : _this$device$limits.maxTextureDimension2D) || 8192;
+      var pixelRatio = Math.min(devicePixelRatio, maxDimension / width, maxDimension / height);
       var pixelWidth = Math.max(1, Math.round(width * pixelRatio));
       var pixelHeight = Math.max(1, Math.round(height * pixelRatio));
-      var cssWidth = "".concat(width, "px");
-      var cssHeight = "".concat(height, "px");
-      if (this.canvas.style.width !== cssWidth) {
-        this.canvas.style.width = cssWidth;
+      var previous = this.canvasSize;
+      if (previous && previous.width === width && previous.height === height && previous.pixelWidth === pixelWidth && previous.pixelHeight === pixelHeight && previous.modelWidth === modelWidth && previous.modelHeight === modelHeight) {
+        return false;
+      }
+      if (!previous || previous.width !== width) {
+        this.canvas.style.width = "".concat(width, "px");
       }
-      if (this.canvas.style.height !== cssHeight) {
-        this.canvas.style.height = cssHeight;
+      if (!previous || previous.height !== height) {
+        this.canvas.style.height = "".concat(height, "px");
       }
       if (this.canvas.width !== pixelWidth) {
         this.canvas.width = pixelWidth;
@@ -515,31 +900,92 @@ var ParticleRenderer = /*#__PURE__*/function () {
       if (this.canvas.height !== pixelHeight) {
         this.canvas.height = pixelHeight;
       }
+      if (!previous || previous.modelWidth !== modelWidth || previous.modelHeight !== modelHeight) {
+        this.updateCanvasLayerWidthHeight();
+      }
+      this.canvasSize = {
+        width: width,
+        height: height,
+        pixelWidth: pixelWidth,
+        pixelHeight: pixelHeight,
+        modelWidth: modelWidth,
+        modelHeight: modelHeight
+      };
+      return true;
+    }
+  }, {
+    key: "repositionCanvas",
+    value: function repositionCanvas() {
+      var _ref, _this$tmodel$$dom$get, _this$tmodel$$dom, _ref2, _this$tmodel$$dom$get2, _this$tmodel$$dom2;
+      if (!this.canvas || !this.canvasLayer || !this.tmodel.hasDom()) {
+        return false;
+      }
+      var bounds = this.getParticleBounds();
+      var scrollLeft = Number((_ref = (_this$tmodel$$dom$get = (_this$tmodel$$dom = this.tmodel.$dom) === null || _this$tmodel$$dom === void 0 ? void 0 : _this$tmodel$$dom.getScrollLeft()) !== null && _this$tmodel$$dom$get !== void 0 ? _this$tmodel$$dom$get : this.tmodel.getScrollLeft()) !== null && _ref !== void 0 ? _ref : 0) || 0;
+      var scrollTop = Number((_ref2 = (_this$tmodel$$dom$get2 = (_this$tmodel$$dom2 = this.tmodel.$dom) === null || _this$tmodel$$dom2 === void 0 ? void 0 : _this$tmodel$$dom2.getScrollTop()) !== null && _this$tmodel$$dom$get2 !== void 0 ? _this$tmodel$$dom$get2 : this.tmodel.getScrollTop()) !== null && _ref2 !== void 0 ? _ref2 : 0) || 0;
+
+      // Canvas origin in the scroller's content coordinates.
+      var contentX = bounds.x + (this.tmodel.managesOwnScroll() ? scrollLeft : 0);
+      var contentY = bounds.y + (this.tmodel.managesOwnScroll() ? scrollTop : 0);
+
+      // Internally mounted canvases scroll with their DOM parent.
+      // External canvases do not, so their CSS position remains fixed.
+      var x = this.tmodel.managesOwnScroll() && !this.externalCanvasHost ? contentX : bounds.x;
+      var y = this.tmodel.managesOwnScroll() && !this.externalCanvasHost ? contentY : bounds.y;
+      var nextX = this.tmodel.managesOwnScroll() ? contentX : bounds.x + (this.externalCanvasHost ? scrollLeft : 0);
+      var nextY = this.tmodel.managesOwnScroll() ? contentY : bounds.y + (this.externalCanvasHost ? scrollTop : 0);
+      var changed = nextX !== this.canvasX || nextY !== this.canvasY;
+      this.canvasX = nextX;
+      this.canvasY = nextY;
+      var left = "".concat(x, "px");
+      var top = "".concat(y, "px");
+      if (this.canvas.style.left !== left) {
+        this.canvas.style.left = left;
+        changed = true;
+      }
+      if (this.canvas.style.top !== top) {
+        this.canvas.style.top = top;
+        changed = true;
+      }
+      if (this.canvas.style.transform !== "none") {
+        this.canvas.style.transform = "none";
+        changed = true;
+      }
+      return changed;
+    }
+  }, {
+    key: "getParticlePosition",
+    value: function getParticlePosition(child) {
+      var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : child === null || child === void 0 ? void 0 : child.actualValues;
+      var layoutScrollLeft = Number(this.tmodel.getScrollLeft()) || 0;
+      var layoutScrollTop = Number(this.tmodel.getScrollTop()) || 0;
+      return {
+        x: child.allTargetMap.x ? values.x : child.x + layoutScrollLeft,
+        y: child.allTargetMap.y ? values.y : child.y + layoutScrollTop
+      };
     }
   }, {
     key: "updateUniforms",
     value: function updateUniforms() {
-      var width = this.getRenderWidth();
-      var height = this.getRenderHeight();
-      var scrollLeft = this.tmodel.getRenderScrollLeft();
-      var scrollTop = this.tmodel.getRenderScrollTop();
-      this.device.queue.writeBuffer(this.uniformBuffer, 0, new Float32Array([width, height, scrollLeft, scrollTop, this.transitionStep, this.transitionActive ? 1 : 0, 0, 0]));
+      var _this$canvasBounds;
+      var bounds = (_this$canvasBounds = this.canvasBounds) !== null && _this$canvasBounds !== void 0 ? _this$canvasBounds : this.getParticleBounds();
+      this.device.queue.writeBuffer(this.uniformBuffer, 0, new Float32Array([bounds.width, bounds.height, this.canvasX, this.canvasY, this.transitionStep, this.transitionActive ? 1 : 0, 0, 0]));
     }
   }, {
     key: "waitForPresentedFrame",
     value: function () {
-      var _waitForPresentedFrame = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
-        return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-          while (1) switch (_context6.prev = _context6.next) {
+      var _waitForPresentedFrame = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+        return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+          while (1) switch (_context7.prev = _context7.next) {
             case 0:
               if (!this.device) {
-                _context6.next = 3;
+                _context7.next = 3;
                 break;
               }
-              _context6.next = 3;
+              _context7.next = 3;
               return this.device.queue.onSubmittedWorkDone();
             case 3:
-              _context6.next = 5;
+              _context7.next = 5;
               return new Promise(function (resolve) {
                 requestAnimationFrame(function () {
                   requestAnimationFrame(resolve);
@@ -547,9 +993,9 @@ var ParticleRenderer = /*#__PURE__*/function () {
               });
             case 5:
             case "end":
-              return _context6.stop();
+              return _context7.stop();
           }
-        }, _callee6, this);
+        }, _callee7, this);
       }));
       function waitForPresentedFrame() {
         return _waitForPresentedFrame.apply(this, arguments);
@@ -559,31 +1005,16 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render() {
-      if (!this.device || !this.context || !this.pipeline || !this.particleBuffer || !this.targetParticleBuffer || this.particleCount === 0) {
+      if (!this.device || !this.context) {
+        return;
+      }
+      if (!this.mountCanvasLayer()) {
         return;
       }
       this.resizeCanvas();
-      this.updateUniforms();
+      this.repositionCanvas();
       var commandEncoder = this.device.createCommandEncoder();
-      var renderPass = commandEncoder.beginRenderPass({
-        colorAttachments: [{
-          view: this.context.getCurrentTexture().createView(),
-          clearValue: {
-            r: 0,
-            g: 0,
-            b: 0,
-            a: 0
-          },
-          loadOp: "clear",
-          storeOp: "store"
-        }]
-      });
-      renderPass.setPipeline(this.pipeline);
-      renderPass.setBindGroup(0, this.bindGroup);
-      renderPass.setVertexBuffer(0, this.particleBuffer);
-      renderPass.setVertexBuffer(1, this.targetParticleBuffer);
-      renderPass.draw(6, this.particleCount);
-      renderPass.end();
+      this.encodeRenderPass(commandEncoder, this.context.getCurrentTexture().createView());
       this.device.queue.submit([commandEncoder.finish()]);
     }
   }, {
@@ -595,28 +1026,251 @@ var ParticleRenderer = /*#__PURE__*/function () {
       var previousBuffer = this.particleBuffer;
       this.particleBuffer = this.targetParticleBuffer;
       this.targetParticleBuffer = previousBuffer;
+      this.currentParticleData = this.targetParticleData;
       this.transitionStep = 0;
       this.transitionActive = false;
+      this.boundsDirty = true;
       this.render();
     }
   }, {
     key: "captureBitmap",
-    value: function captureBitmap() {
-      if (!this.canvas || !this.device) {
+    value: function () {
+      var _captureBitmap = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
+        var width, height, bytesPerRow, buffer, texture, commandEncoder, mapped, pixels, rowSize, y, i, red, _i, alpha, scale, canvas, context;
+        return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+          while (1) switch (_context8.prev = _context8.next) {
+            case 0:
+              if (!(!this.canvas || !this.device || !this.context)) {
+                _context8.next = 2;
+                break;
+              }
+              return _context8.abrupt("return");
+            case 2:
+              this.resizeCanvas();
+              this.repositionCanvas();
+              width = this.canvas.width;
+              height = this.canvas.height;
+              bytesPerRow = Math.ceil(width * 4 / 256) * 256;
+              buffer = this.device.createBuffer({
+                size: bytesPerRow * height,
+                usage: globalThis.GPUBufferUsage.COPY_DST | globalThis.GPUBufferUsage.MAP_READ
+              });
+              texture = this.context.getCurrentTexture();
+              commandEncoder = this.device.createCommandEncoder();
+              this.encodeRenderPass(commandEncoder, texture.createView());
+              commandEncoder.copyTextureToBuffer({
+                texture: texture
+              }, {
+                buffer: buffer,
+                bytesPerRow: bytesPerRow
+              }, {
+                width: width,
+                height: height
+              });
+              this.device.queue.submit([commandEncoder.finish()]);
+              _context8.next = 15;
+              return buffer.mapAsync(globalThis.GPUMapMode.READ);
+            case 15:
+              mapped = new Uint8Array(buffer.getMappedRange());
+              pixels = new Uint8ClampedArray(width * height * 4);
+              rowSize = width * 4;
+              for (y = 0; y < height; y++) {
+                pixels.set(mapped.subarray(y * bytesPerRow, y * bytesPerRow + rowSize), y * rowSize);
+              }
+              buffer.unmap();
+              buffer.destroy();
+              if (this.format.startsWith("bgra")) {
+                for (i = 0; i < pixels.length; i += 4) {
+                  red = pixels[i];
+                  pixels[i] = pixels[i + 2];
+                  pixels[i + 2] = red;
+                }
+              }
+              for (_i = 0; _i < pixels.length; _i += 4) {
+                alpha = pixels[_i + 3];
+                if (alpha > 0 && alpha < 255) {
+                  scale = 255 / alpha;
+                  pixels[_i] = Math.min(255, Math.round(pixels[_i] * scale));
+                  pixels[_i + 1] = Math.min(255, Math.round(pixels[_i + 1] * scale));
+                  pixels[_i + 2] = Math.min(255, Math.round(pixels[_i + 2] * scale));
+                }
+              }
+              canvas = document.createElement("canvas");
+              canvas.width = width;
+              canvas.height = height;
+              context = canvas.getContext("2d");
+              context.putImageData(new ImageData(pixels, width, height), 0, 0);
+              return _context8.abrupt("return", createImageBitmap(canvas));
+            case 29:
+            case "end":
+              return _context8.stop();
+          }
+        }, _callee8, this);
+      }));
+      function captureBitmap() {
+        return _captureBitmap.apply(this, arguments);
+      }
+      return captureBitmap;
+    }()
+  }, {
+    key: "updateScrollElements",
+    value: function updateScrollElements() {
+      var _this$tmodel$$dom3, _this$tmodel$getParen, _this$scrollElements;
+      var nextElements = _toConsumableArray(new Set([(_this$tmodel$$dom3 = this.tmodel.$dom) === null || _this$tmodel$$dom3 === void 0 ? void 0 : _this$tmodel$$dom3.element, (_this$tmodel$getParen = this.tmodel.getParent()) === null || _this$tmodel$getParen === void 0 || (_this$tmodel$getParen = _this$tmodel$getParen.$dom) === null || _this$tmodel$getParen === void 0 ? void 0 : _this$tmodel$getParen.element].filter(Boolean)));
+      var _iterator = _createForOfIteratorHelper((_this$scrollElements = this.scrollElements) !== null && _this$scrollElements !== void 0 ? _this$scrollElements : []),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var element = _step.value;
+          if (!nextElements.includes(element)) {
+            element.removeEventListener("scroll", this.onScroll);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      var _iterator2 = _createForOfIteratorHelper(nextElements),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _this$scrollElements2;
+          var _element = _step2.value;
+          if (!((_this$scrollElements2 = this.scrollElements) !== null && _this$scrollElements2 !== void 0 ? _this$scrollElements2 : []).includes(_element)) {
+            _element.addEventListener("scroll", this.onScroll, {
+              passive: true
+            });
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      this.scrollElements = nextElements;
+    }
+  }, {
+    key: "canHostCanvasLayer",
+    value: function canHostCanvasLayer(element) {
+      return !new Set(["IMG", "INPUT", "CANVAS", "VIDEO", "IFRAME", "OBJECT", "EMBED"]).has(element.tagName);
+    }
+  }, {
+    key: "getCanvasMount",
+    value: function getCanvasMount() {
+      var _this$tmodel$$dom4;
+      var source = (_this$tmodel$$dom4 = this.tmodel.$dom) === null || _this$tmodel$$dom4 === void 0 ? void 0 : _this$tmodel$$dom4.element;
+      if (!source) {
         return;
       }
-      this.render();
-      return createImageBitmap(this.canvas);
+      var external = !!this.tmodel.explodeChildrenState || !this.canHostCanvasLayer(source);
+      return {
+        source: source,
+        host: external ? source.parentElement : source,
+        external: external
+      };
+    }
+  }, {
+    key: "mountCanvasLayer",
+    value: function mountCanvasLayer() {
+      if (!this.canvasLayer) {
+        return false;
+      }
+      var mount = this.getCanvasMount();
+      if (!(mount !== null && mount !== void 0 && mount.host)) {
+        return false;
+      }
+      var source = mount.source,
+        host = mount.host,
+        external = mount.external;
+      if (this.canvasLayer.parentElement !== host) {
+        if (external) {
+          source.after(this.canvasLayer);
+        } else {
+          host.prepend(this.canvasLayer);
+        }
+      }
+      this.canvasHost = host;
+      this.externalCanvasHost = external;
+      if (external) {
+        this.canvasLayer.style.left = source.style.left || "0px";
+        this.canvasLayer.style.top = source.style.top || "0px";
+        this.canvasLayer.style.transform = source.style.transform || "none";
+        this.canvasLayer.style.transformOrigin = source.style.transformOrigin || "50% 50%";
+        this.canvasLayer.style.zIndex = this.tmodel.explodeChildrenState ? String((Number(source.style.zIndex) || 0) + 1) : source.style.zIndex || "0";
+      } else {
+        this.canvasLayer.style.left = "0px";
+        this.canvasLayer.style.top = "0px";
+        this.canvasLayer.style.transform = "none";
+        this.canvasLayer.style.zIndex = "0";
+      }
+      this.updateScrollElements();
+      return true;
+    }
+  }, {
+    key: "encodeRenderPass",
+    value: function encodeRenderPass(commandEncoder, view) {
+      var canDraw = this.pipeline && this.bindGroup && this.particleBuffer && this.targetParticleBuffer && this.explodeFragmentBuffer && this.particleCount > 0;
+      if (canDraw) {
+        this.updateUniforms();
+      }
+      var renderPass = commandEncoder.beginRenderPass({
+        colorAttachments: [{
+          view: view,
+          clearValue: {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 0
+          },
+          loadOp: "clear",
+          storeOp: "store"
+        }]
+      });
+      if (canDraw) {
+        var _explodeState$firstEx;
+        renderPass.setPipeline(this.pipeline);
+        renderPass.setBindGroup(0, this.bindGroup);
+        renderPass.setVertexBuffer(0, this.particleBuffer);
+        renderPass.setVertexBuffer(1, this.targetParticleBuffer);
+        renderPass.setVertexBuffer(2, this.explodeFragmentBuffer);
+        var explodeState = this.tmodel.explodeChildrenState;
+        var firstInstance = this.explodeTextureReady && explodeState ? (_explodeState$firstEx = explodeState.firstExplodeChild) !== null && _explodeState$firstEx !== void 0 ? _explodeState$firstEx : 0 : 0;
+        var instanceCount = this.particleCount - firstInstance;
+        if (instanceCount > 0) {
+          renderPass.draw(6, instanceCount, 0, firstInstance);
+        }
+      }
+      renderPass.end();
     }
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this$particleBuffer, _this$targetParticleB, _this$uniformBuffer, _this$context, _this$canvasLayer;
+      var _this$particleBuffer, _this$targetParticleB, _this$uniformBuffer, _this$context, _this$canvasLayer, _this$explodeFragment, _this$explodeTexture2, _this$scrollElements3;
+      var _iterator3 = _createForOfIteratorHelper((_this$scrollElements3 = this.scrollElements) !== null && _this$scrollElements3 !== void 0 ? _this$scrollElements3 : []),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var element = _step3.value;
+          element.removeEventListener("scroll", this.onScroll);
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      this.canvasSize = undefined;
+      this.canvasBounds = undefined;
+      this.boundsDirty = true;
+      this.scrollElements = undefined;
+      this.onScroll = undefined;
       (_this$particleBuffer = this.particleBuffer) === null || _this$particleBuffer === void 0 || _this$particleBuffer.destroy();
       (_this$targetParticleB = this.targetParticleBuffer) === null || _this$targetParticleB === void 0 || _this$targetParticleB.destroy();
       (_this$uniformBuffer = this.uniformBuffer) === null || _this$uniformBuffer === void 0 || _this$uniformBuffer.destroy();
       (_this$context = this.context) === null || _this$context === void 0 || _this$context.unconfigure();
       (_this$canvasLayer = this.canvasLayer) === null || _this$canvasLayer === void 0 || _this$canvasLayer.remove();
+      (_this$explodeFragment = this.explodeFragmentBuffer) === null || _this$explodeFragment === void 0 || _this$explodeFragment.destroy();
+      (_this$explodeTexture2 = this.explodeTexture) === null || _this$explodeTexture2 === void 0 || _this$explodeTexture2.destroy();
       this.particleBuffer = undefined;
       this.targetParticleBuffer = undefined;
       this.uniformBuffer = undefined;
@@ -630,6 +1284,14 @@ var ParticleRenderer = /*#__PURE__*/function () {
       this.transitionStep = 0;
       this.transitionActive = false;
       this.particleCount = 0;
+      this.canvasBounds = undefined;
+      this.currentParticleData = undefined;
+      this.targetParticleData = undefined;
+      this.explodeFragmentBuffer = undefined;
+      this.explodeTexture = undefined;
+      this.explodeSampler = undefined;
+      this.explodeSourceCanvas = undefined;
+      this.explodeTextureReady = false;
       this.initializationPromise = undefined;
     }
   }]);