diff --git a/bin/index.mjs b/bin/index.mjs
index eaab1e9f..c916b148 100644
--- a/bin/index.mjs
+++ b/bin/index.mjs
@@ -70,22 +70,30 @@ const compiler = webpack({
           }),
         },
       },
-      {
-        test: /\.glsl$/i,
-        type: 'asset/source',
-      },
-      {
-        test: /\.mp4/i,
-        type: 'asset',
-      },
       {
         test: /\.meta/i,
         loader: 'meta-loader',
       },
       {
-        test: /\.wav$/i,
+        test: /\.(wav|mp3|ogg|mp4)$/i,
         type: 'asset',
       },
+      {
+        test: /\.(png|jpe?g)$/i,
+        oneOf: [
+          {
+            resourceQuery: /img/,
+            loader: 'image-loader',
+          },
+          {
+            resourceQuery: /anim/,
+            loader: 'animation-loader',
+          },
+          {
+            type: 'asset',
+          },
+        ],
+      },
       {
         test: /\.csv$/,
         loader: 'csv-loader',
@@ -96,20 +104,8 @@ const compiler = webpack({
         },
       },
       {
-        test: /\.anim$/i,
-        use: [
-          {
-            loader: 'animation-loader',
-          },
-        ],
-      },
-      {
-        test: /\.png$/i,
-        use: [
-          {
-            loader: 'sprite-loader',
-          },
-        ],
+        test: /\.glsl$/i,
+        type: 'asset/source',
       },
     ],
   },
diff --git a/bin/loaders/animation-loader.js b/bin/loaders/animation-loader.js
index f27510db..f4fec63b 100644
--- a/bin/loaders/animation-loader.js
+++ b/bin/loaders/animation-loader.js
@@ -1,9 +1,8 @@
 const path = require('path');
 const {readdirSync} = require('fs');
-const loadImage = require('../utils/load-image');
-const nameRegex = /[^\d]*(\d+)\.png$/;
+const nameRegex = /\D*(\d+)\.png$/;
 
-function loader() {
+function animationLoader() {
   const callback = this.async();
   const directoryPath = path.dirname(this.resourcePath);
 
@@ -16,20 +15,16 @@ function loader() {
     )
     .map(([file]) => path.resolve(directoryPath, file));
 
-  files.forEach(file => this.addDependency(file));
-
-  loadAnimation(files)
-    .then(result => callback(null, result))
+  loadAnimation(files, this.importModule)
+    .then(code => callback(null, code))
     .catch(error => callback(error));
 }
 
-async function loadAnimation(files) {
-  const frames = [];
-  for (const file of files) {
-    frames.push(await loadImage(file));
-  }
+async function loadAnimation(files, importModule) {
+  const urls = await Promise.all(files.map(file => importModule(file)));
 
-  return `export default ${JSON.stringify(frames)};`;
+  return `import {loadAnimation} from '@motion-canvas/core/lib/media';
+export default loadAnimation(${JSON.stringify(urls)});`;
 }
 
-module.exports = loader;
+module.exports = animationLoader;
diff --git a/bin/loaders/image-loader.js b/bin/loaders/image-loader.js
new file mode 100644
index 00000000..70d7c910
--- /dev/null
+++ b/bin/loaders/image-loader.js
@@ -0,0 +1,15 @@
+function imageLoader() {
+  const callback = this.async();
+  loadImage(this.resourcePath, this.importModule)
+    .then(code => callback(null, code))
+    .catch(error => callback(error));
+}
+
+async function loadImage(fileName, importModule) {
+  const url = await importModule(fileName);
+
+  return `import {loadImage} from '@motion-canvas/core/lib/media';
+export default loadImage('${url}');`;
+}
+
+module.exports = imageLoader;
diff --git a/bin/loaders/sprite-loader.js b/bin/loaders/sprite-loader.js
deleted file mode 100644
index 153136ea..00000000
--- a/bin/loaders/sprite-loader.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const loadImage = require('../utils/load-image');
-
-function loader() {
-  const callback = this.async();
-  loadImage(this.resourcePath)
-    .then(sprite => callback(null, `export default ${JSON.stringify(sprite)}`))
-    .catch(error => callback(error));
-}
-
-module.exports = loader;
diff --git a/bin/utils/load-image.js b/bin/utils/load-image.js
deleted file mode 100644
index fd6d8fa7..00000000
--- a/bin/utils/load-image.js
+++ /dev/null
@@ -1,30 +0,0 @@
-const {promises: fs} = require('fs');
-const sizeOf = require('image-size');
-const nodeCanvas = require('canvas');
-
-const SIZE = 1024;
-const context = nodeCanvas.createCanvas(SIZE, SIZE).getContext('2d');
-const image = new nodeCanvas.Image();
-
-module.exports = async function (fileName) {
-  const buffer = await fs.readFile(fileName);
-  const dimensions = sizeOf(buffer);
-
-  image.src = `data:image/png;base64,${buffer.toString('base64')}`;
-  context.clearRect(0, 0, SIZE, SIZE);
-  context.drawImage(image, 0, 0, dimensions.width, dimensions.height);
-  const imageData = context.getImageData(
-    0,
-    0,
-    dimensions.width,
-    dimensions.height,
-  );
-
-  return {
-    fileName,
-    src: image.src,
-    data: Array.from(imageData.data),
-    width: dimensions.width,
-    height: dimensions.height,
-  };
-};
diff --git a/package-lock.json b/package-lock.json
index fff9f008..0d4f117e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,6 @@
         "@types/prismjs": "^1.26.0",
         "@types/three": "^0.141.0",
         "@types/webpack-env": "^1.17.0",
-        "canvas": "^2.9.1",
         "html-webpack-plugin": "^5.5.0",
         "image-size": "^1.0.1",
         "konva": "^8.3.9",
@@ -253,25 +252,6 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
-    "node_modules/@mapbox/node-pre-gyp": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.9.tgz",
-      "integrity": "sha512-aDF3S3rK9Q2gey/WAttUlISduDItz5BU3306M9Eyv6/oS40aMprnopshtlKTykxRNIBEZuRMaZAnbrQ4QtKGyw==",
-      "dependencies": {
-        "detect-libc": "^2.0.0",
-        "https-proxy-agent": "^5.0.0",
-        "make-dir": "^3.1.0",
-        "node-fetch": "^2.6.7",
-        "nopt": "^5.0.0",
-        "npmlog": "^5.0.1",
-        "rimraf": "^3.0.2",
-        "semver": "^7.3.5",
-        "tar": "^6.1.11"
-      },
-      "bin": {
-        "node-pre-gyp": "bin/node-pre-gyp"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1584,11 +1564,6 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
-    "node_modules/abbrev": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
-    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -1633,6 +1608,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
       "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dev": true,
       "dependencies": {
         "debug": "4"
       },
@@ -1644,6 +1620,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -1659,7 +1636,8 @@
     "node_modules/agent-base/node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "node_modules/aggregate-error": {
       "version": "3.1.0",
@@ -1805,23 +1783,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/aproba": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-      "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ=="
-    },
-    "node_modules/are-we-there-yet": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
-      "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
-      "dependencies": {
-        "delegates": "^1.0.0",
-        "readable-stream": "^3.6.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2082,20 +2043,6 @@
         }
       ]
     },
-    "node_modules/canvas": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.9.1.tgz",
-      "integrity": "sha512-vSQti1uG/2gjv3x6QLOZw7TctfufaerTWbVe+NSduHxxLGB+qf3kFgQ6n66DSnuoINtVUjrLLIK2R+lxrBG07A==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@mapbox/node-pre-gyp": "^1.0.0",
-        "nan": "^2.15.0",
-        "simple-get": "^3.0.3"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/cardinal": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-2.1.1.tgz",
@@ -2148,14 +2095,6 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/chownr": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -2244,14 +2183,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
-    "node_modules/color-support": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
-      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
-      "bin": {
-        "color-support": "bin.js"
-      }
-    },
     "node_modules/colorette": {
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.17.tgz",
@@ -2321,11 +2252,6 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/console-control-strings": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
-    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -3049,17 +2975,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/decompress-response": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
-      "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
-      "dependencies": {
-        "mimic-response": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/deep-extend": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -3131,11 +3046,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/delegates": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ=="
-    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -3159,14 +3069,6 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
-    "node_modules/detect-libc": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz",
-      "integrity": "sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/detect-node": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
@@ -3344,7 +3246,8 @@
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
     },
     "node_modules/encodeurl": {
       "version": "1.0.2",
@@ -4128,17 +4031,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/fs-minipass": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
-      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "dependencies": {
-        "minipass": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/fs-monkey": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
@@ -4173,25 +4065,6 @@
       "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==",
       "dev": true
     },
-    "node_modules/gauge": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
-      "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
-      "dependencies": {
-        "aproba": "^1.0.3 || ^2.0.0",
-        "color-support": "^1.1.2",
-        "console-control-strings": "^1.0.0",
-        "has-unicode": "^2.0.1",
-        "object-assign": "^4.1.1",
-        "signal-exit": "^3.0.0",
-        "string-width": "^4.2.3",
-        "strip-ansi": "^6.0.1",
-        "wide-align": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -4448,11 +4321,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/has-unicode": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=="
-    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -4697,6 +4565,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
       "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "dev": true,
       "dependencies": {
         "agent-base": "6",
         "debug": "4"
@@ -4709,6 +4578,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -4724,7 +4594,8 @@
     "node_modules/https-proxy-agent/node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "node_modules/human-signals": {
       "version": "2.1.0",
@@ -4948,6 +4819,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -5384,28 +5256,6 @@
       "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
       "dev": true
     },
-    "node_modules/make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dependencies": {
-        "semver": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/make-dir/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/map-obj": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
@@ -5582,17 +5432,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/mimic-response": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
-      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -5636,45 +5475,11 @@
         "node": ">= 6"
       }
     },
-    "node_modules/minipass": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-      "integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/minizlib": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
-      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
-      "dependencies": {
-        "minipass": "^3.0.0",
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/mix-color": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/mix-color/-/mix-color-1.1.2.tgz",
       "integrity": "sha512-dl0x92sQ+cMM37GVo5MpLJfPbLxFhyqTrf6paYp/k+1rRPK1aPPPI7xajEI+GtU+eWnCsAW2Bg1q0rH1gLbI7w=="
     },
-    "node_modules/mkdirp": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-      "bin": {
-        "mkdirp": "bin/cmd.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/modify-values": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
@@ -5706,11 +5511,6 @@
         "multicast-dns": "cli.js"
       }
     },
-    "node_modules/nan": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.16.0.tgz",
-      "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA=="
-    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -5758,6 +5558,7 @@
       "version": "2.6.7",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
       "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "dev": true,
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -5786,20 +5587,6 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz",
       "integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q=="
     },
-    "node_modules/nopt": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
-      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
-      "dependencies": {
-        "abbrev": "1"
-      },
-      "bin": {
-        "nopt": "bin/nopt.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/normalize-package-data": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
@@ -8281,17 +8068,6 @@
       "inBundle": true,
       "license": "ISC"
     },
-    "node_modules/npmlog": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
-      "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
-      "dependencies": {
-        "are-we-there-yet": "^2.0.0",
-        "console-control-strings": "^1.1.0",
-        "gauge": "^3.0.0",
-        "set-blocking": "^2.0.0"
-      }
-    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -8303,14 +8079,6 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/object-inspect": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
@@ -9602,11 +9370,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
-    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -9697,35 +9460,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/simple-concat": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
-      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/simple-get": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
-      "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
-      "dependencies": {
-        "decompress-response": "^4.2.0",
-        "once": "^1.3.1",
-        "simple-concat": "^1.0.0"
-      }
-    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -10029,6 +9763,7 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -10170,22 +9905,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/tar": {
-      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
-      "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
-      "dependencies": {
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "minipass": "^3.0.0",
-        "minizlib": "^2.1.1",
-        "mkdirp": "^1.0.3",
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -10343,7 +10062,8 @@
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
+      "dev": true
     },
     "node_modules/traverse": {
       "version": "0.6.6",
@@ -10725,7 +10445,8 @@
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+      "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=",
+      "dev": true
     },
     "node_modules/webpack": {
       "version": "5.73.0",
@@ -11038,6 +10759,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+      "dev": true,
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -11057,14 +10779,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/wide-align": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
-      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
-      "dependencies": {
-        "string-width": "^1.0.2 || 2 || 3 || 4"
-      }
-    },
     "node_modules/wildcard": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
@@ -11388,22 +11102,6 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
-    "@mapbox/node-pre-gyp": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.9.tgz",
-      "integrity": "sha512-aDF3S3rK9Q2gey/WAttUlISduDItz5BU3306M9Eyv6/oS40aMprnopshtlKTykxRNIBEZuRMaZAnbrQ4QtKGyw==",
-      "requires": {
-        "detect-libc": "^2.0.0",
-        "https-proxy-agent": "^5.0.0",
-        "make-dir": "^3.1.0",
-        "node-fetch": "^2.6.7",
-        "nopt": "^5.0.0",
-        "npmlog": "^5.0.1",
-        "rimraf": "^3.0.2",
-        "semver": "^7.3.5",
-        "tar": "^6.1.11"
-      }
-    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -12457,11 +12155,6 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
-    "abbrev": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
-    },
     "accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -12493,6 +12186,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
       "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dev": true,
       "requires": {
         "debug": "4"
       },
@@ -12501,6 +12195,7 @@
           "version": "4.3.4",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
           "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+          "dev": true,
           "requires": {
             "ms": "2.1.2"
           }
@@ -12508,7 +12203,8 @@
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
         }
       }
     },
@@ -12615,20 +12311,6 @@
         "picomatch": "^2.0.4"
       }
     },
-    "aproba": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-      "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ=="
-    },
-    "are-we-there-yet": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
-      "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
-      "requires": {
-        "delegates": "^1.0.0",
-        "readable-stream": "^3.6.0"
-      }
-    },
     "argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -12822,16 +12504,6 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001349.tgz",
       "integrity": "sha512-VFaWW3jeo6DLU5rwdiasosxhYSduJgSGil4cSyX3/85fbctlE58pXAkWyuRmVA0r2RxsOSVYUTZcySJ8WpbTxw=="
     },
-    "canvas": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.9.1.tgz",
-      "integrity": "sha512-vSQti1uG/2gjv3x6QLOZw7TctfufaerTWbVe+NSduHxxLGB+qf3kFgQ6n66DSnuoINtVUjrLLIK2R+lxrBG07A==",
-      "requires": {
-        "@mapbox/node-pre-gyp": "^1.0.0",
-        "nan": "^2.15.0",
-        "simple-get": "^3.0.3"
-      }
-    },
     "cardinal": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-2.1.1.tgz",
@@ -12867,11 +12539,6 @@
         "readdirp": "~3.6.0"
       }
     },
-    "chownr": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
-    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -12942,11 +12609,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
-    "color-support": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
-      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg=="
-    },
     "colorette": {
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.17.tgz",
@@ -13006,11 +12668,6 @@
       "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
       "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg=="
     },
-    "console-control-strings": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
-    },
     "content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -13544,14 +13201,6 @@
         }
       }
     },
-    "decompress-response": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
-      "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
-      "requires": {
-        "mimic-response": "^2.0.0"
-      }
-    },
     "deep-extend": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -13604,11 +13253,6 @@
         }
       }
     },
-    "delegates": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ=="
-    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -13625,11 +13269,6 @@
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
       "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
     },
-    "detect-libc": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz",
-      "integrity": "sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w=="
-    },
     "detect-node": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
@@ -13779,7 +13418,8 @@
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -14358,14 +13998,6 @@
         "universalify": "^2.0.0"
       }
     },
-    "fs-minipass": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
-      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "requires": {
-        "minipass": "^3.0.0"
-      }
-    },
     "fs-monkey": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
@@ -14393,22 +14025,6 @@
       "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==",
       "dev": true
     },
-    "gauge": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
-      "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
-      "requires": {
-        "aproba": "^1.0.3 || ^2.0.0",
-        "color-support": "^1.1.2",
-        "console-control-strings": "^1.0.0",
-        "has-unicode": "^2.0.1",
-        "object-assign": "^4.1.1",
-        "signal-exit": "^3.0.0",
-        "string-width": "^4.2.3",
-        "strip-ansi": "^6.0.1",
-        "wide-align": "^1.1.2"
-      }
-    },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -14606,11 +14222,6 @@
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
     },
-    "has-unicode": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=="
-    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -14795,6 +14406,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
       "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "dev": true,
       "requires": {
         "agent-base": "6",
         "debug": "4"
@@ -14804,6 +14416,7 @@
           "version": "4.3.4",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
           "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+          "dev": true,
           "requires": {
             "ms": "2.1.2"
           }
@@ -14811,7 +14424,8 @@
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
         }
       }
     },
@@ -14960,7 +14574,8 @@
     "is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true
     },
     "is-glob": {
       "version": "4.0.3",
@@ -15292,21 +14907,6 @@
       "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
       "dev": true
     },
-    "make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "requires": {
-        "semver": "^6.0.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
-        }
-      }
-    },
     "map-obj": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
@@ -15425,11 +15025,6 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
     },
-    "mimic-response": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
-      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA=="
-    },
     "min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -15464,33 +15059,11 @@
         "kind-of": "^6.0.3"
       }
     },
-    "minipass": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-      "integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
-      "requires": {
-        "yallist": "^4.0.0"
-      }
-    },
-    "minizlib": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
-      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
-      "requires": {
-        "minipass": "^3.0.0",
-        "yallist": "^4.0.0"
-      }
-    },
     "mix-color": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/mix-color/-/mix-color-1.1.2.tgz",
       "integrity": "sha512-dl0x92sQ+cMM37GVo5MpLJfPbLxFhyqTrf6paYp/k+1rRPK1aPPPI7xajEI+GtU+eWnCsAW2Bg1q0rH1gLbI7w=="
     },
-    "mkdirp": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
-    },
     "modify-values": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
@@ -15516,11 +15089,6 @@
         "thunky": "^1.0.2"
       }
     },
-    "nan": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.16.0.tgz",
-      "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA=="
-    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -15565,6 +15133,7 @@
       "version": "2.6.7",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
       "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "dev": true,
       "requires": {
         "whatwg-url": "^5.0.0"
       }
@@ -15579,14 +15148,6 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz",
       "integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q=="
     },
-    "nopt": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
-      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
-      "requires": {
-        "abbrev": "1"
-      }
-    },
     "normalize-package-data": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
@@ -17319,17 +16880,6 @@
         "path-key": "^3.0.0"
       }
     },
-    "npmlog": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
-      "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
-      "requires": {
-        "are-we-there-yet": "^2.0.0",
-        "console-control-strings": "^1.1.0",
-        "gauge": "^3.0.0",
-        "set-blocking": "^2.0.0"
-      }
-    },
     "nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -17338,11 +16888,6 @@
         "boolbase": "^1.0.0"
       }
     },
-    "object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
-    },
     "object-inspect": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
@@ -18265,11 +17810,6 @@
         "send": "0.18.0"
       }
     },
-    "set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
-    },
     "setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -18344,21 +17884,6 @@
         }
       }
     },
-    "simple-concat": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
-      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q=="
-    },
-    "simple-get": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
-      "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
-      "requires": {
-        "decompress-response": "^4.2.0",
-        "once": "^1.3.1",
-        "simple-concat": "^1.0.0"
-      }
-    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -18615,6 +18140,7 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "requires": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -18713,19 +18239,6 @@
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="
     },
-    "tar": {
-      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
-      "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
-      "requires": {
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "minipass": "^3.0.0",
-        "minizlib": "^2.1.1",
-        "mkdirp": "^1.0.3",
-        "yallist": "^4.0.0"
-      }
-    },
     "temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -18836,7 +18349,8 @@
     "tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
+      "dev": true
     },
     "traverse": {
       "version": "0.6.6",
@@ -19120,7 +18634,8 @@
     "webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+      "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=",
+      "dev": true
     },
     "webpack": {
       "version": "5.73.0",
@@ -19334,6 +18849,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+      "dev": true,
       "requires": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -19347,14 +18863,6 @@
         "isexe": "^2.0.0"
       }
     },
-    "wide-align": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
-      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
-      "requires": {
-        "string-width": "^1.0.2 || 2 || 3 || 4"
-      }
-    },
     "wildcard": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
diff --git a/package.json b/package.json
index 32ecd10e..0a8a9cc0 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,6 @@
     "@types/prismjs": "^1.26.0",
     "@types/three": "^0.141.0",
     "@types/webpack-env": "^1.17.0",
-    "canvas": "^2.9.1",
     "html-webpack-plugin": "^5.5.0",
     "image-size": "^1.0.1",
     "konva": "^8.3.9",
diff --git a/src/bootstrap.ts b/src/bootstrap.ts
index 70c81799..148dd5f7 100644
--- a/src/bootstrap.ts
+++ b/src/bootstrap.ts
@@ -4,7 +4,7 @@ import type {SceneRunner} from './Scene';
 import {Project, ProjectSize} from './Project';
 import {Player} from './player';
 import {hot} from './hot';
-import {AudioManager} from './audio';
+import {AudioManager} from './media';
 
 interface BootstrapConfig {
   name: string;
diff --git a/src/components/AnimationClip.ts b/src/components/AnimationClip.ts
index c3c94bbe..931e0e36 100644
--- a/src/components/AnimationClip.ts
+++ b/src/components/AnimationClip.ts
@@ -1,14 +1,15 @@
 import {getset, KonvaNode} from '../decorators';
-import {Sprite, SpriteData} from './Sprite';
+import {Sprite} from './Sprite';
 import {GetSet} from 'konva/lib/types';
 import {LinearLayout} from './LinearLayout';
 import {Center} from '../types';
 import {Surface, SurfaceConfig} from './Surface';
 import {getStyle, Style} from '../styles';
+import {ImageDataSource} from '../media';
 
 export interface AnimationClipConfig extends SurfaceConfig {
-  animation: SpriteData[];
-  skin?: SpriteData;
+  animation: ImageDataSource[];
+  skin?: ImageDataSource;
   frame?: number;
   style?: Partial<Style>;
 }
diff --git a/src/components/Sprite.ts b/src/components/Sprite.ts
index 27ae7d8c..dd4f8b8f 100644
--- a/src/components/Sprite.ts
+++ b/src/components/Sprite.ts
@@ -1,88 +1,97 @@
 import {Context} from 'konva/lib/Context';
-import {Util} from 'konva/lib/Util';
 import {GetSet, Vector2d} from 'konva/lib/types';
 import {waitFor} from '../flow';
-import {getset, KonvaNode, threadable} from '../decorators';
+import {cached, getset, KonvaNode, threadable} from '../decorators';
 import {GeneratorHelper} from '../helpers';
 import {InterpolationFunction, map, tween} from '../tweening';
 import {cancel, ThreadGenerator} from '../threading';
 import {parseColor} from 'mix-color';
 import {Shape, ShapeConfig} from 'konva/lib/Shape';
+import {getImageData, ImageDataSource} from '../media';
 
-export interface SpriteData {
-  fileName: string;
-  src: string;
-  data: number[];
-  width: number;
-  height: number;
-}
+export const SPRITE_CHANGE_EVENT = 'spriteChange';
 
 export interface SpriteConfig extends ShapeConfig {
-  animation: SpriteData[];
-  skin?: SpriteData;
-  mask?: SpriteData;
+  animation: ImageDataSource[];
+  skin?: ImageDataSource;
+  mask?: ImageDataSource;
   playing?: boolean;
   fps?: number;
   maskBlend?: number;
   frame?: number;
 }
 
-export const SPRITE_CHANGE_EVENT = 'spriteChange';
-
-const COMPUTE_CANVAS_SIZE = 64;
-
+/**
+ * A class for animated sprites.
+ *
+ * Allows to use custom alpha masks and skins.
+ */
 @KonvaNode()
 export class Sprite extends Shape {
-  @getset(null, Sprite.prototype.recalculate)
+  @getset(null, Sprite.prototype.updateAnimation)
   public animation: GetSet<SpriteConfig['animation'], this>;
-  @getset(null, Sprite.prototype.recalculate)
-  public skin: GetSet<SpriteConfig['skin'], this>;
-  @getset(null, Sprite.prototype.recalculate, Sprite.prototype.maskTween)
-  public mask: GetSet<SpriteConfig['mask'], this>;
+  @getset(0, Sprite.prototype.updateAnimation)
+  public frame: GetSet<SpriteConfig['frame'], this>;
   @getset(false)
   public playing: GetSet<SpriteConfig['playing'], this>;
   @getset(10)
   public fps: GetSet<SpriteConfig['fps'], this>;
-  @getset(0, Sprite.prototype.recalculate)
-  public maskBlend: GetSet<SpriteConfig['maskBlend'], this>;
-  @getset(0, Sprite.prototype.recalculate)
-  public frame: GetSet<SpriteConfig['frame'], this>;
 
-  private spriteData: SpriteData = {
-    height: 0,
-    width: 0,
-    src: '',
-    data: [],
-    fileName: '',
-  };
+  /**
+   * An image used for 2D UV mapping.
+   */
+  @getset(null, Sprite.prototype.updateSkin)
+  public skin: GetSet<SpriteConfig['skin'], this>;
+
+  /**
+   * An image that defines which parts of the sprite should be visible.
+   *
+   * The red channel is used for sampling.
+   */
+  @getset(null, Sprite.prototype.updateMask, Sprite.prototype.maskTween)
+  public mask: GetSet<SpriteConfig['mask'], this>;
+
+  /**
+   * The blend between the original opacity and the opacity calculated using the
+   * mask.
+   */
+  @getset(0, Sprite.prototype.updateFrame)
+  public maskBlend: GetSet<SpriteConfig['maskBlend'], this>;
+
   private task: ThreadGenerator | null = null;
-  private imageData: ImageData;
-  private baseMask: SpriteData;
+  private baseMask: ImageDataSource;
   private baseMaskBlend = 0;
+  private synced = false;
 
   private readonly computeCanvas: HTMLCanvasElement;
   private readonly context: CanvasRenderingContext2D;
 
   public constructor(config?: SpriteConfig) {
     super(config);
-    this.computeCanvas = Util.createCanvasElement();
-    this.computeCanvas.width = COMPUTE_CANVAS_SIZE;
-    this.computeCanvas.height = COMPUTE_CANVAS_SIZE;
+    this.computeCanvas = document.createElement('canvas');
     this.context = this.computeCanvas.getContext('2d');
-
-    this.recalculate();
   }
 
-  public _sceneFunc(context: Context) {
+  protected _sceneFunc(context: Context) {
     const size = this.getSize();
+    let source: ImageDataSource = this.computeCanvas;
+    if (this.requiresProcessing()) {
+      // Make sure the compute canvas is up-to-date
+      this.getFrameData();
+    } else {
+      const animation = this.animation();
+      const frame = this.frame();
+      source = animation[frame % animation.length];
+    }
+
     context.save();
     context._context.imageSmoothingEnabled = false;
     context.drawImage(
-      this.computeCanvas,
+      source,
       0,
       0,
-      this.spriteData.width,
-      this.spriteData.height,
+      source.width,
+      source.height,
       size.width / -2,
       size.height / -2,
       size.width,
@@ -91,63 +100,124 @@ export class Sprite extends Shape {
     context.restore();
   }
 
-  private recalculate() {
+  private updateSkin() {
+    this._clearCache(this.getSkinData);
+    this.updateFrame();
+  }
+
+  private updateAnimation() {
+    this._clearCache(this.getRawFrameData);
+    this.updateFrame();
+  }
+
+  private updateMask() {
+    this._clearCache(this.getMaskData);
+    this.updateFrame();
+  }
+
+  private updateFrame() {
+    this._clearCache(this.getFrameData);
+  }
+
+  @cached('Sprite.skinData')
+  private getSkinData() {
     const skin = this.skin();
+    return skin ? getImageData(skin) : null;
+  }
+
+  @cached('Sprite.maskData')
+  private getMaskData() {
+    const mask = this.mask();
+    return mask ? getImageData(mask) : null;
+  }
+
+  @cached('Sprite.baseMaskData')
+  private getBaseMaskData() {
+    return this.baseMask ? getImageData(this.baseMask) : null;
+  }
+
+  @cached('Sprite.rawFrameData')
+  private getRawFrameData() {
     const animation = this.animation();
+    const frameId = this.frame() % animation.length;
+    return getImageData(animation[frameId]);
+  }
+
+  @cached('Sprite.frameData')
+  private getFrameData() {
+    if (!this.requiresProcessing()) {
+      return this.getRawFrameData();
+    }
+
+    const skin = this.skin();
     const mask = this.mask();
     const blend = this.maskBlend();
-    if (!this.context || !animation || animation.length === 0) return;
+    const rawFrameData = this.getRawFrameData();
+    const frameData = this.context.createImageData(rawFrameData);
 
-    const frameId = this.frame() % animation.length;
-    this.spriteData = animation[frameId];
-    this.offset(this.getOriginOffset());
-
-    this.imageData = this.context.createImageData(
-      this.spriteData.width,
-      this.spriteData.height,
-    );
+    this.computeCanvas.width = rawFrameData.width;
+    this.computeCanvas.height = rawFrameData.height;
 
     if (skin) {
-      for (let y = 0; y < this.spriteData.height; y++) {
-        for (let x = 0; x < this.spriteData.width; x++) {
+      const skinData = this.getSkinData();
+      for (let y = 0; y < rawFrameData.height; y++) {
+        for (let x = 0; x < rawFrameData.width; x++) {
           const id = this.positionToId({x, y});
-          const skinX = this.spriteData.data[id];
-          const skinY = this.spriteData.data[id + 1];
+          const skinX = rawFrameData.data[id];
+          const skinY = rawFrameData.data[id + 1];
           const skinId = ((skin.height - 1 - skinY) * skin.width + skinX) * 4;
 
-          this.imageData.data[id] = skin.data[skinId];
-          this.imageData.data[id + 1] = skin.data[skinId + 1];
-          this.imageData.data[id + 2] = skin.data[skinId + 2];
-          this.imageData.data[id + 3] = Math.round(
-            (this.spriteData.data[id + 3] / 255) *
-              (skin.data[skinId + 3] / 255) *
+          frameData.data[id] = skinData.data[skinId];
+          frameData.data[id + 1] = skinData.data[skinId + 1];
+          frameData.data[id + 2] = skinData.data[skinId + 2];
+          frameData.data[id + 3] = Math.round(
+            (rawFrameData.data[id + 3] / 255) *
+              (skinData.data[skinId + 3] / 255) *
               255,
           );
         }
       }
     } else {
-      this.imageData.data.set(this.spriteData.data);
+      frameData.data.set(rawFrameData.data);
     }
 
     if (mask || this.baseMask) {
-      for (let y = 0; y < this.spriteData.height; y++) {
-        for (let x = 0; x < this.spriteData.width; x++) {
+      const maskData = this.getMaskData();
+      const baseMaskData = this.getBaseMaskData();
+      for (let y = 0; y < rawFrameData.height; y++) {
+        for (let x = 0; x < rawFrameData.width; x++) {
           const id = this.positionToId({x, y});
           const maskValue = map(
-            mask?.data[id] ?? 255,
-            this.baseMask?.data[id] ?? 255,
+            maskData?.data[id] ?? 255,
+            baseMaskData?.data[id] ?? 255,
             this.baseMaskBlend,
           );
-          this.imageData.data[id + 3] *= map(1, maskValue / 255, blend);
+          frameData.data[id + 3] *= map(1, maskValue / 255, blend);
         }
       }
     }
 
-    this.context.putImageData(this.imageData, 0, 0);
+    this.context.putImageData(frameData, 0, 0);
     this.fire(SPRITE_CHANGE_EVENT);
-    this.markDirty();
+
+    return frameData;
   }
 
+  private requiresProcessing(): boolean {
+    return !!(this.skin() || this.mask() || this.baseMask);
+  }
+
+  /**
+   * A generator that runs this sprite's animation.
+   *
+   * For the animation to actually play, the {@link Sprite.playing} value has to
+   * be set to `true`.
+   *
+   * Should be run concurrently:
+   * ```ts
+   * yield sprite.play();
+   * ```
+   */
   public play(): ThreadGenerator {
     const runTask = this.playRunner();
     if (this.task) {
@@ -164,10 +234,17 @@ export class Sprite extends Shape {
     return this.task;
   }
 
+  /**
+   * Play the given animation once.
+   *
+   * @param animation The animation to play.
+   * @param next An optional animation that should be switched to next. If not
+   *             present the sprite will go back to the previous animation.
+   */
   @threadable()
   public *playOnce(
-    animation: SpriteData[],
-    next: SpriteData[] = null,
+    animation: ImageDataSource[],
+    next: ImageDataSource[] = null,
   ): ThreadGenerator {
     next ??= this.animation();
     this.animation(animation);
@@ -178,6 +255,11 @@ export class Sprite extends Shape {
     this.animation(next);
   }
 
+  /**
+   * Cancel the current {@link Sprite.play()} generator.
+   *
+   * Should be used instead of manually canceling the generator.
+   */
   @threadable()
   public *stop() {
     if (this.task) {
@@ -186,8 +268,6 @@ export class Sprite extends Shape {
     }
   }
 
-  private synced = false;
-
   @threadable('spriteAnimationRunner')
   private *playRunner(): ThreadGenerator {
     this.frame(0);
@@ -202,6 +282,11 @@ export class Sprite extends Shape {
     }
   }
 
+  /**
+   * Wait until the given frame is shown.
+   *
+   * @param frame
+   */
   @threadable()
   public *waitForFrame(frame: number): ThreadGenerator {
     let limit = 1000;
@@ -221,45 +306,52 @@ export class Sprite extends Shape {
 
   @threadable()
   private *maskTween(
-    from: SpriteData,
-    to: SpriteData,
+    from: ImageDataSource,
+    to: ImageDataSource,
     time: number,
     interpolation: InterpolationFunction,
     onEnd: () => void,
   ): ThreadGenerator {
     this.baseMask = from;
+    this._clearCache(this.getBaseMaskData);
+
     this.baseMaskBlend = 1;
     this.mask(to);
 
     yield* tween(time, value => {
       this.baseMaskBlend = interpolation(1 - value);
-      this.recalculate();
+      this.updateFrame();
     });
+    this.baseMask = null;
+    this.baseMaskBlend = 0;
     onEnd();
   }
 
   public getColorAt(position: Vector2d): string {
     const id = this.positionToId(position);
-    return `rgba(${this.imageData.data[id]
+    const frameData = this.getFrameData();
+    return `rgba(${frameData.data[id]
       .toString()
-      .padStart(3, ' ')}, ${this.imageData.data[id + 1]
+      .padStart(3, ' ')}, ${frameData.data[id + 1]
       .toString()
-      .padStart(3, ' ')}, ${this.imageData.data[id + 2]
+      .padStart(3, ' ')}, ${frameData.data[id + 2]
       .toString()
-      .padStart(3, ' ')}, ${this.imageData.data[id + 3] / 255})`;
+      .padStart(3, ' ')}, ${frameData.data[id + 3] / 255})`;
   }
 
   public getParsedColorAt(position: Vector2d): ReturnType<typeof parseColor> {
     const id = this.positionToId(position);
+    const frameData = this.getFrameData();
     return {
-      r: this.imageData.data[id],
-      g: this.imageData.data[id + 1],
-      b: this.imageData.data[id + 2],
-      a: this.imageData.data[id + 3],
+      r: frameData.data[id],
+      g: frameData.data[id + 1],
+      b: frameData.data[id + 2],
+      a: frameData.data[id + 3],
     };
   }
 
   public positionToId(position: Vector2d): number {
-    return (position.y * this.imageData.width + position.x) * 4;
+    const frameData = this.getRawFrameData();
+    return (position.y * frameData.width + position.x) * 4;
   }
 }
diff --git a/src/globals.ts b/src/globals.ts
index 6c49f42a..1258550c 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -1,22 +1,47 @@
 /* eslint-disable @typescript-eslint/no-unused-vars,@typescript-eslint/no-namespace */
 
 declare module '*.png' {
-  const value: import('./components/Sprite').SpriteData;
-  export = value;
-}
-
-declare module '*.glsl' {
   const value: string;
   export = value;
 }
 
-declare module '*.label' {
-  const value: Record<string, number>;
+declare module '*.png?img' {
+  const value: Promise<HTMLImageElement>;
   export = value;
 }
 
-declare module '*.anim' {
-  const value: import('./components/Sprite').SpriteData[];
+declare module '*.png?anim' {
+  const value: Promise<HTMLImageElement[]>;
+  export = value;
+}
+
+declare module '*.jpg' {
+  const value: string;
+  export = value;
+}
+
+declare module '*.jpg?img' {
+  const value: Promise<HTMLImageElement>;
+  export = value;
+}
+
+declare module '*.jpg?anim' {
+  const value: Promise<HTMLImageElement[]>;
+  export = value;
+}
+
+declare module '*.jpeg' {
+  const value: string;
+  export = value;
+}
+
+declare module '*.jpeg?img' {
+  const value: Promise<HTMLImageElement>;
+  export = value;
+}
+
+declare module '*.jpeg?anim' {
+  const value: Promise<HTMLImageElement[]>;
   export = value;
 }
 
@@ -25,12 +50,27 @@ declare module '*.wav' {
   export = value;
 }
 
+declare module '*.mp3' {
+  const value: string;
+  export = value;
+}
+
+declare module '*.ogg' {
+  const value: string;
+  export = value;
+}
+
+declare module '*.mp4' {
+  const value: string;
+  export = value;
+}
+
 declare module '*.csv' {
   const value: unknown;
   export = value;
 }
 
-declare module '*.mp4' {
+declare module '*.glsl' {
   const value: string;
   export = value;
 }
diff --git a/src/audio/AudioData.ts b/src/media/AudioData.ts
similarity index 100%
rename from src/audio/AudioData.ts
rename to src/media/AudioData.ts
diff --git a/src/audio/AudioManager.ts b/src/media/AudioManager.ts
similarity index 100%
rename from src/audio/AudioManager.ts
rename to src/media/AudioManager.ts
diff --git a/src/video/MP4Demuxer.js b/src/media/MP4Demuxer.js
similarity index 100%
rename from src/video/MP4Demuxer.js
rename to src/media/MP4Demuxer.js
diff --git a/src/audio/index.ts b/src/media/index.ts
similarity index 51%
rename from src/audio/index.ts
rename to src/media/index.ts
index 31b0ccc2..cd1ada0b 100644
--- a/src/audio/index.ts
+++ b/src/media/index.ts
@@ -1,2 +1,4 @@
 export * from './AudioData';
 export * from './AudioManager';
+export * from './loadImage';
+export * from './loadVideo';
diff --git a/src/media/loadImage.ts b/src/media/loadImage.ts
new file mode 100644
index 00000000..5c0f2abb
--- /dev/null
+++ b/src/media/loadImage.ts
@@ -0,0 +1,31 @@
+import {Size} from '../types';
+
+const imageLookup: Record<string, HTMLImageElement> = {};
+const canvas = document.createElement('canvas');
+const context = canvas.getContext('2d');
+
+export type ImageDataSource = CanvasImageSource & Size;
+
+export async function loadImage(source: string): Promise<HTMLImageElement> {
+  if (!imageLookup[source]) {
+    const image = new Image();
+    imageLookup[source] = image;
+    image.src = source;
+    await new Promise(resolve => (image.onload = resolve));
+  }
+
+  return imageLookup[source];
+}
+
+export function loadAnimation(sources: string[]): Promise<HTMLImageElement[]> {
+  return Promise.all(sources.map(loadImage));
+}
+
+export function getImageData(image: ImageDataSource) {
+  canvas.width = image.width;
+  canvas.height = image.height;
+  context.clearRect(0, 0, image.width, image.height);
+  context.drawImage(image, 0, 0);
+
+  return context.getImageData(0, 0, image.width, image.height);
+}
diff --git a/src/video/loadVideo.ts b/src/media/loadVideo.ts
similarity index 100%
rename from src/video/loadVideo.ts
rename to src/media/loadVideo.ts
diff --git a/src/patches/Node.ts b/src/patches/Node.ts
index 10387131..1bfbe961 100644
--- a/src/patches/Node.ts
+++ b/src/patches/Node.ts
@@ -9,24 +9,129 @@ import {useScene} from '../utils';
 
 declare module 'konva/lib/Node' {
   export interface Node {
+    /**
+     * @internal
+     */
     _centroid: boolean;
+
     style?: GetSet<Partial<Style>, this>;
+
+    /**
+     * The empty space between the borders of this node and its content.
+     *
+     * Analogous to CSS padding.
+     */
     padd: GetSet<PossibleSpacing, this>;
+
+    /**
+     * The empty space between the borders of this node and surrounding nodes.
+     *
+     * Analogous to CSS margin.
+     */
     margin: GetSet<PossibleSpacing, this>;
+
+    /**
+     * The origin of this node.
+     *
+     * By default, each node has its origin in the middle.
+     *
+     * Analogous to CSS margin.
+     */
     origin: GetSet<Origin, this>;
-    drawOrigin: GetSet<Origin, this>;
+
+    /**
+     * @param value
+     * @ignore
+     */
     setX(value: number): this;
+
+    /**
+     * @param value
+     * @ignore
+     */
     setY(value: number): this;
+
+    /**
+     * @param width
+     * @ignore
+     */
     setWidth(width: number): void;
+
+    /**
+     * @param height
+     * @ignore
+     */
     setHeight(height: number): void;
+
+    /**
+     * @param value
+     * @ignore
+     */
     setPadd(value: PossibleSpacing): this;
+
+    /**
+     * @param value
+     * @ignore
+     */
     setMargin(value: PossibleSpacing): this;
+
+    /**
+     * @param value
+     * @ignore
+     */
     setOrigin(value: Origin): this;
+
+    /**
+     * @ignore
+     */
     getPadd(): Spacing;
+
+    /**
+     * @ignore
+     */
     getMargin(): Spacing;
+
+    /**
+     * @ignore
+     */
     getOrigin(): Origin;
+
+    /**
+     * Get the size of this node used for layout calculations.
+     *
+     * The returned size should include the padding.
+     * A node can use the size of its children to derive its own dimensions.
+     *
+     * @param custom Custom node configuration to use during the calculations.
+     *               When present, the method will return the layout size that
+     *               the node would have, if it had these options configured.
+     */
     getLayoutSize(custom?: NodeConfig): Size;
+
+    /**
+     * Get the vector from the local origin of this node to its current origin.
+     *
+     * The local origin is the center of coordinates of the canvas when drawing
+     * the node. Centroid nodes will have their local origin at the center.
+     * Other shapes will have it in the top left corner.
+     *
+     * The current origin is configured via {@link Node.origin}.
+     *
+     * @param custom Custom node configuration to use during the calculations.
+     *               When present, the method will return the origin offset that
+     *               the node would have, if it had these options configured.
+     */
     getOriginOffset(custom?: NodeConfig): Vector2d;
+
+    /**
+     * Get the vector from the current origin of this node to the `newOrigin`.
+     *
+     * @param newOrigin The origin to which the delta should be calculated.
+     *
+     * @param custom Custom node configuration to use during the calculations.
+     *               When present, the method will return the origin offset that
+     *               the node would have, if it had these options configured.
+     */
     getOriginDelta(newOrigin: Origin, custom?: NodeConfig): Vector2d;
 
     /**
diff --git a/src/player/Player.ts b/src/player/Player.ts
index f1038159..f6a4b121 100644
--- a/src/player/Player.ts
+++ b/src/player/Player.ts
@@ -3,7 +3,7 @@ import {
   SimpleEventDispatcher,
 } from 'strongly-typed-events';
 
-import {AudioManager} from '../audio';
+import {AudioManager} from '../media';
 import type {Project} from '../Project';
 
 const MAX_AUDIO_DESYNC = 1 / 50;
diff --git a/src/video/index.ts b/src/video/index.ts
deleted file mode 100644
index 4838a4cd..00000000
--- a/src/video/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './loadVideo';
diff --git a/typedoc.json b/typedoc.json
index 09f14faa..2396015b 100644
--- a/typedoc.json
+++ b/typedoc.json
@@ -1,5 +1,6 @@
 {
   "out": "api",
+  "excludeExternals": true,
   "entryPoints": [
     "src",
     "src/animations",