targetj 1.1.0 → 1.1.1

package/build/ParticleRenderer.js

@@ -6,6 +6,9 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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); }); }; }
@@ -33,12 +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, [{
@@ -50,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();
           }
@@ -129,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();
           }
@@ -147,21 +165,11 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "createCanvas",
     value: function createCanvas() {
-      var _this$tmodel$$dom,
-        _this2 = this,
-        _this$tmodel$$dom2,
-        _this$tmodel$getParen;
+      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, {
@@ -175,6 +183,9 @@ 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: "absolute",
         left: "0px",
@@ -185,25 +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.scrollElements = _toConsumableArray(new Set([(_this$tmodel$$dom2 = this.tmodel.$dom) === null || _this$tmodel$$dom2 === void 0 ? void 0 : _this$tmodel$$dom2.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),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var element = _step.value;
-          element.addEventListener("scroll", this.onScroll, {
-            passive: true
-          });
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
+      this.updateScrollElements();
     }
   }, {
     key: "createUniformBuffer",
@@ -213,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                    @location(12) childScale: f32,\n                    @location(13) targetScale: f32,\n                    @location(14) targetScaleSteps: f32,\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                    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(childScale, targetScale, scaleProgress);\n\n                    let localPosition = corners[vertexIndex];\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\n                    return output;\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                    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\n                    if (radius <= 0.0) {\n                        return input.backgroundColor;\n                    }\n\n                    let coverage = 1.0 - smoothstep(-aa, aa, distance);\n\n                    if (coverage <= 0.0) {\n                        discard;\n                    }\n\n                    let alpha = input.backgroundColor.a * coverage;\n\n                    return vec4f(input.backgroundColor.rgb * alpha, alpha);\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",
@@ -225,7 +251,7 @@ var ParticleRenderer = /*#__PURE__*/function () {
           module: shaderModule,
           entryPoint: "vertexMain",
           buffers: [{
-            arrayStride: 80,
+            arrayStride: 84,
             stepMode: "instance",
             attributes: [{
               shaderLocation: 0,
@@ -245,11 +271,11 @@ var ParticleRenderer = /*#__PURE__*/function () {
               format: "float32x2"
             }, {
               shaderLocation: 12,
-              offset: 68,
-              format: "float32"
+              offset: 72,
+              format: "float32x2"
             }]
           }, {
-            arrayStride: 80,
+            arrayStride: 84,
             stepMode: "instance",
             attributes: [{
               shaderLocation: 4,
@@ -278,20 +304,28 @@ var ParticleRenderer = /*#__PURE__*/function () {
             }, {
               shaderLocation: 10,
               offset: 56,
-              format: "float32"
+              format: "float32x2"
             }, {
               shaderLocation: 11,
-              offset: 60,
+              offset: 64,
               format: "float32x2"
             }, {
               shaderLocation: 13,
-              offset: 68,
-              format: "float32"
+              offset: 72,
+              format: "float32x2"
             }, {
               shaderLocation: 14,
-              offset: 72,
+              offset: 80,
               format: "float32"
             }]
+          }, {
+            arrayStride: 16,
+            stepMode: "instance",
+            attributes: [{
+              shaderLocation: 15,
+              offset: 0,
+              format: "float32x4"
+            }]
           }]
         },
         fragment: {
@@ -317,6 +351,11 @@ var ParticleRenderer = /*#__PURE__*/function () {
           topology: "triangle-list"
         }
       });
+      this.createBindGroup();
+    }
+  }, {
+    key: "createBindGroup",
+    value: function createBindGroup() {
       this.bindGroup = this.device.createBindGroup({
         layout: this.pipeline.getBindGroupLayout(0),
         entries: [{
@@ -324,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) {
@@ -377,45 +558,45 @@ var ParticleRenderer = /*#__PURE__*/function () {
       particleData[offset + 4] = backgroundColor[0];
       particleData[offset + 5] = backgroundColor[1];
       particleData[offset + 6] = backgroundColor[2];
-      particleData[offset + 7] = backgroundColor[3] * opacity;
+      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");
-      var backgroundColorSteps = this.getTargetStep(steps, "backgroundColor");
-      var opacitySteps = this.getTargetStep(steps, "opacity");
-      particleData[offset + 14] = opacitySteps >= 0 ? opacitySteps : backgroundColorSteps;
-      particleData[offset + 15] = this.getTargetStep(steps, "borderRadius");
-      particleData[offset + 16] = this.getTargetStep(steps, "rotate");
-      particleData[offset + 17] = this.toNumber(values.scale, 1);
-      particleData[offset + 18] = this.getTargetStep(steps, "scale");
+      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 * 20);
+      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 * 20, values, undefined, x, 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 = this.tmodel.childHandles[i];
         var _this$getParticlePosi2 = this.getParticlePosition(child, values[i]),
           x = _this$getParticlePosi2.x,
           y = _this$getParticlePosi2.y;
-        this.writeParticleData(particleData, i * 20, values[i], targetSteps === null || targetSteps === void 0 ? void 0 : targetSteps[i], x, y);
+        this.writeParticleData(particleData, i * 21, values[i], targetSteps === null || targetSteps === void 0 ? void 0 : targetSteps[i], x, y);
       }
       return particleData;
     }
@@ -441,37 +622,41 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "setParticles",
     value: function () {
-      var _setParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(children) {
+      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:
               children = Array.isArray(children) ? children : [children];
-              _context3.next = 3;
+              _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", false);
+              return _context4.abrupt("return", false);
             case 6:
               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();
-              return _context3.abrupt("return", true);
-            case 14:
+              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;
@@ -479,41 +664,45 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "updateParticles",
     value: function () {
-      var _updateParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(children) {
+      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:
               children = Array.isArray(children) ? children : [children];
-              _context4.next = 3;
+              _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", false);
+              return _context5.abrupt("return", false);
             case 6:
               particleData = this.createChildData(children);
+              this.updateExplodeFragmentBuffer(children);
               this.particleCount = children.length;
+              this.currentParticleData = particleData;
               this.particleBuffer = this.uploadParticleBuffer(this.particleBuffer, particleData);
               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();
-              return _context4.abrupt("return", true);
-            case 13:
+              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;
@@ -521,53 +710,56 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "setTargetParticles",
     value: function () {
-      var _setTargetParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(values, steps) {
+      var _setTargetParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(values, steps) {
         var generation,
           initialized,
           currentChildren,
           currentParticleData,
           particleData,
-          _args5 = arguments;
-        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
+          _args6 = arguments;
+        return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
             case 0:
-              generation = _args5.length > 2 && _args5[2] !== undefined ? _args5[2] : this.tmodel.childGeneration;
+              generation = _args6.length > 2 && _args6[2] !== undefined ? _args6[2] : this.tmodel.childGeneration;
               values = Array.isArray(values) ? values : [values];
-              _context5.next = 4;
+              _context6.next = 4;
               return this.init();
             case 4:
-              initialized = _context5.sent;
+              initialized = _context6.sent;
               if (!(!initialized || generation !== this.tmodel.childGeneration)) {
-                _context5.next = 7;
+                _context6.next = 7;
                 break;
               }
-              return _context5.abrupt("return", false);
+              return _context6.abrupt("return", false);
             case 7:
               currentChildren = this.tmodel.childHandles;
               if (!(values.length !== currentChildren.length)) {
-                _context5.next = 10;
+                _context6.next = 10;
                 break;
               }
-              return _context5.abrupt("return", false);
+              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();
-              return _context5.abrupt("return", true);
-            case 17:
+              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;
@@ -585,17 +777,77 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     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$getParen2;
-      var modelHeight = Number(this.tmodel.getHeight()) || 1;
-      var parentHeight = Number((_this$tmodel$getParen2 = this.tmodel.getParent()) === null || _this$tmodel$getParen2 === void 0 ? void 0 : _this$tmodel$getParen2.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",
@@ -603,15 +855,16 @@ var ParticleRenderer = /*#__PURE__*/function () {
       if (!this.canvasLayer) {
         return;
       }
-      var height = Math.max(this.getRenderHeight(), Number(this.tmodel.getContentHeight()) || 0);
-      var width = Math.max(this.getRenderWidth(), Number(this.tmodel.getContentWidth()) || 0);
-      var cssHeight = "".concat(height, "px");
-      var cssWidth = "".concat(width, "px");
-      if (this.canvasLayer.style.height !== cssHeight) {
-        this.canvasLayer.style.height = cssHeight;
+      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.width !== cssWidth) {
-        this.canvasLayer.style.width = cssWidth;
+      if (this.canvasLayer.style.height !== "".concat(height, "px")) {
+        this.canvasLayer.style.height = "".concat(height, "px");
       }
     }
   }, {
@@ -619,22 +872,27 @@ var ParticleRenderer = /*#__PURE__*/function () {
     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 (this.canvas.style.height !== cssHeight) {
-        this.canvas.style.height = cssHeight;
+      if (!previous || previous.width !== width) {
+        this.canvas.style.width = "".concat(width, "px");
+      }
+      if (!previous || previous.height !== height) {
+        this.canvas.style.height = "".concat(height, "px");
       }
       if (this.canvas.width !== pixelWidth) {
         this.canvas.width = pixelWidth;
@@ -642,31 +900,58 @@ var ParticleRenderer = /*#__PURE__*/function () {
       if (this.canvas.height !== pixelHeight) {
         this.canvas.height = pixelHeight;
       }
-      this.updateCanvasLayerWidthHeight();
+      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 _parent$$dom, _parent$$dom2;
+      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 tmodel = this.tmodel;
-      var parent = tmodel.getParent();
-      var domScrollLeft = (parent === null || parent === void 0 || (_parent$$dom = parent.$dom) === null || _parent$$dom === void 0 ? void 0 : _parent$$dom.getScrollLeft()) || tmodel.$dom.getScrollLeft() || 0;
-      var domScrollTop = (parent === null || parent === void 0 || (_parent$$dom2 = parent.$dom) === null || _parent$$dom2 === void 0 ? void 0 : _parent$$dom2.getScrollTop()) || tmodel.$dom.getScrollTop() || 0;
-      var scrollLeft = tmodel.getScrollLeft();
-      var scrollTop = tmodel.getScrollTop();
-      var x = domScrollLeft - tmodel.x;
-      var y = domScrollTop - tmodel.y;
-      this.canvasX = scrollLeft + x;
-      this.canvasY = scrollTop + y;
-      var transform = "translate3d(".concat(x, "px, ").concat(y, "px, 0px)");
-      if (this.canvas.style.transform !== transform) {
-        this.canvas.style.transform = transform;
-        return true;
+      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;
       }
-      return false;
+      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",
@@ -682,25 +967,25 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "updateUniforms",
     value: function updateUniforms() {
-      var width = this.getRenderWidth();
-      var height = this.getRenderHeight();
-      this.device.queue.writeBuffer(this.uniformBuffer, 0, new Float32Array([width, height, this.canvasX, this.canvasY, 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);
@@ -708,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);
@@ -723,16 +1008,215 @@ var ParticleRenderer = /*#__PURE__*/function () {
       if (!this.device || !this.context) {
         return;
       }
+      if (!this.mountCanvasLayer()) {
+        return;
+      }
       this.resizeCanvas();
       this.repositionCanvas();
-      var canDraw = this.pipeline && this.bindGroup && this.particleBuffer && this.targetParticleBuffer && this.particleCount > 0;
+      var commandEncoder = this.device.createCommandEncoder();
+      this.encodeRenderPass(commandEncoder, this.context.getCurrentTexture().createView());
+      this.device.queue.submit([commandEncoder.finish()]);
+    }
+  }, {
+    key: "completeTransition",
+    value: function completeTransition() {
+      if (!this.targetParticleBuffer || !this.transitionActive) {
+        return;
+      }
+      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 () {
+      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;
+      }
+      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 commandEncoder = this.device.createCommandEncoder();
       var renderPass = commandEncoder.beginRenderPass({
         colorAttachments: [{
-          view: this.context.getCurrentTexture().createView(),
+          view: view,
           clearValue: {
             r: 0,
             g: 0,
@@ -744,53 +1228,40 @@ var ParticleRenderer = /*#__PURE__*/function () {
         }]
       });
       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.draw(6, this.particleCount);
+        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();
-      this.device.queue.submit([commandEncoder.finish()]);
-    }
-  }, {
-    key: "completeTransition",
-    value: function completeTransition() {
-      if (!this.targetParticleBuffer || !this.transitionActive) {
-        return;
-      }
-      var previousBuffer = this.particleBuffer;
-      this.particleBuffer = this.targetParticleBuffer;
-      this.targetParticleBuffer = previousBuffer;
-      this.transitionStep = 0;
-      this.transitionActive = false;
-      this.render();
-    }
-  }, {
-    key: "captureBitmap",
-    value: function captureBitmap() {
-      if (!this.canvas || !this.device) {
-        return;
-      }
-      this.render();
-      return createImageBitmap(this.canvas);
     }
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this$particleBuffer, _this$targetParticleB, _this$uniformBuffer, _this$context, _this$canvasLayer, _this$scrollElements;
-      var _iterator2 = _createForOfIteratorHelper((_this$scrollElements = this.scrollElements) !== null && _this$scrollElements !== void 0 ? _this$scrollElements : []),
-        _step2;
+      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 (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var element = _step2.value;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var element = _step3.value;
           element.removeEventListener("scroll", this.onScroll);
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator2.f();
+        _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();
@@ -798,6 +1269,8 @@ var ParticleRenderer = /*#__PURE__*/function () {
       (_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;
@@ -811,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;
     }
   }]);