Merge pull request #157 from Tresjs/next

v2 alpha

.eslintignore

@@ -1,4 +1,4 @@
-packages/**/dist
+dist
 **.spec.js
 **.test.ts
 **.test.js

.github/dependabot.yml

@@ -1,11 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
-version: 2
-updates:
-  - package-ecosystem: "" # See documentation for possible values
-    directory: "/" # Location of package manifests
-    schedule:
-      interval: "weekly"

.github/workflows/lint-pr.yml

@@ -0,0 +1,17 @@
+name: 'Lint PR'
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+
+jobs:
+  main:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/lint.yml

@@ -7,7 +7,7 @@ env:
 
 jobs:
   lint:
-    name: Lint all projects
+    name: Lint
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout

.gitignore

@@ -1,10 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
+dist
+dist-ssr
+*.local
+coverage
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
 .DS_Store
-apps/.DS_Store
-packages/.DS_Store
-.pnpm-store/
-# Local Netlify folder
-.netlify
-docs/.vitepress/dist
-docs/.vitepress/cache/
-apps/love-vue-threejs/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.vitepress/dist
+.vitepress/cache

.release-it.json

@@ -0,0 +1,21 @@
+{
+    "git": {
+        "commitMessage": "chore: release v${version}"
+    },
+    "github": {
+        "release": true,
+        "releaseName": "v${version}"
+    },
+    "plugins": {
+        "@release-it/conventional-changelog": {
+        "preset": "conventionalcommits",
+        "infile": "CHANGELOG.md"
+        }
+    },
+    "hooks": {
+        "before:init": ["pnpm run lint", "pnpm test:ci"],
+        "after:bump": "pnpm run build",
+        "after:git:release": "echo After git push, before github release",
+        "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}."
+    }
+}

CHANGELOG.md

@@ -0,0 +1,164 @@
+
+
+## [2.0.0-beta.10](https://github.com/Tresjs/tres/compare/2.0.0-beta.9...2.0.0-beta.10) (2023-04-19)
+
+
+### Bug Fixes
+
+* **core:** fixed [#209](https://github.com/Tresjs/tres/issues/209) ([9648935](https://github.com/Tresjs/tres/commit/9648935d23e68363071cb543a7876b9a23c512fe))
+
+## [2.0.0-beta.9](https://github.com/Tresjs/tres/compare/2.0.0-beta.8...2.0.0-beta.9) (2023-04-18)
+
+
+### Bug Fixes
+
+* incorrect implementation of disable render on canvas ([2442935](https://github.com/Tresjs/tres/commit/244293551663623fde0817e0a64676df12964257))
+
+## [2.0.0-beta.8](https://github.com/Tresjs/tres/compare/2.0.0-beta.7...2.0.0-beta.8) (2023-04-17)
+
+
+### Features
+
+* add disable render prop for postprocessing ([b2fd557](https://github.com/Tresjs/tres/commit/b2fd557c33733e390e15d546a2b61ce504486902))
+
+## [2.0.0-beta.7](https://github.com/Tresjs/tres/compare/2.0.0-beta.6...2.0.0-beta.7) (2023-04-15)
+
+
+### Bug Fixes
+
+* remove object assign for non primitive ([f9e0d4b](https://github.com/Tresjs/tres/commit/f9e0d4b8933235e133cf81a788861b8ee84e8e0e))
+
+## [2.0.0-beta.6](https://github.com/Tresjs/tres/compare/2.0.0-beta.5...2.0.0-beta.6) (2023-04-15)
+
+## [2.0.0-beta.5](https://github.com/Tresjs/tres/compare/2.0.0-beta.4...2.0.0-beta.5) (2023-04-14)
+
+
+### Features
+
+* **core:** fixed nodeOps remove test ([2706f48](https://github.com/Tresjs/tres/commit/2706f487aa4c2c2e447f45d7ed030f2a766ad593))
+* **core:** fixed nodeOps remove test (this time correctly 😉) ([f5fca28](https://github.com/Tresjs/tres/commit/f5fca28a1cd8f625c210cf6536e39651caa9451a))
+* **core:** made custom renderer determine whether materials and geometries should be disposed ([36c8cf5](https://github.com/Tresjs/tres/commit/36c8cf5ed01c525106a722a5cf963e189e16ce34))
+* **core:** made custom renderer traverse the scene tree to dispose obsolete materials and geometries ([cae21b1](https://github.com/Tresjs/tres/commit/cae21b1aa31fefb85c2cce6cb43f999d42d433d2))
+* first try concerning conditional rendering of components ([31bdd96](https://github.com/Tresjs/tres/commit/31bdd96443e980930e36a7410c8a96db589cf29a))
+* primitive ([ab63e14](https://github.com/Tresjs/tres/commit/ab63e14018d44997906255256b7633abce02a8c1))
+
+
+### Bug Fixes
+
+* [@pointer-move](https://github.com/pointer-move) events ([b451862](https://github.com/Tresjs/tres/commit/b451862ebed7a404ebdb702e4706de61b940065a))
+* correct casing of key names when pierced props ([b6a808f](https://github.com/Tresjs/tres/commit/b6a808f71685a1d29ccc8de9d6c36d19a8474742))
+
+## [2.0.0-beta.4](https://github.com/Tresjs/tres/compare/2.0.0-beta.3...2.0.0-beta.4) (2023-04-06)
+
+
+### Bug Fixes
+
+* optional chaining on object pointer events ([421a7d5](https://github.com/Tresjs/tres/commit/421a7d54c045cabb3378035a3e90b0c85197ab90))
+
+## [2.0.0-beta.3](https://github.com/Tresjs/tres/compare/2.0.0-beta.2...2.0.0-beta.3) (2023-04-06)
+
+
+### Bug Fixes
+
+* added default position and direction to camera if props are not passed ([63a340f](https://github.com/Tresjs/tres/commit/63a340f91ae709c6ffd3c4d793c6b91f51186eef))
+* tres-canvas window-size now support 'true' string ([a63e33f](https://github.com/Tresjs/tres/commit/a63e33f28fc83654ffa7e895252fd1e05494c4b3))
+
+## [2.0.0-beta.2](https://github.com/Tresjs/tres/compare/2.0.0-beta.1...2.0.0-beta.2) (2023-04-05)
+
+
+### Bug Fixes
+
+* move raycaster logic from nodeOps to TresCanvas ([d2200ae](https://github.com/Tresjs/tres/commit/d2200aee41e6a0fad90e4ddf11f0c8e7eadadbf4))
+* raycaster events listener on canvas rather than windows ([bfe82b0](https://github.com/Tresjs/tres/commit/bfe82b052a1f898a1f85f243311b308330ab1fab))
+
+## [2.0.0-beta.1](https://github.com/Tresjs/tres/compare/2.0.0-beta.0...2.0.0-beta.1) (2023-04-04)
+
+
+### Features
+
+* expose state from TresCanvas ([eeeff2e](https://github.com/Tresjs/tres/commit/eeeff2e4ba8b947e5b3f5f6a0e1683a07595b6d4))
+
+## [2.0.0-beta.0](https://github.com/Tresjs/tres/compare/2.0.0-alpha.6...2.0.0-beta.0) (2023-04-04)
+
+
+### Features
+
+* cleanup of obsolete code ([f55ef36](https://github.com/Tresjs/tres/commit/f55ef3673e8b6e69666ebe9b3d0632f504b83537))
+* **core:** performance improvement concerning raycaster ([#139](https://github.com/Tresjs/tres/issues/139)) ([597e917](https://github.com/Tresjs/tres/commit/597e9174bcab6d110de9a38bed1b3c7e04171a82))
+* use tres provider and context ([46cdd00](https://github.com/Tresjs/tres/commit/46cdd001f6c9b84568781f135d417640041e269a))
+
+## [2.0.0-alpha.6](https://github.com/Tresjs/tres/compare/2.0.0-alpha.5...2.0.0-alpha.6) (2023-03-30)
+
+### Features
+
+- add alphaMap to useTexture ([f66c363](https://github.com/Tresjs/tres/commit/f66c36394ae188cb380e8d793eb9ec429b5aa925))
+- add matcap to useTexture ([ce374d6](https://github.com/Tresjs/tres/commit/ce374d6c93abf3ab4816c288419c9a30a1caa54e))
+- adding warning when canvas parent height is 0px ([4224103](https://github.com/Tresjs/tres/commit/42241036f01299a969a0c49b2d8a24e77871010e))
+
+### Bug Fixes
+
+- removed key split on buffer geometry attributes ([a29cb2b](https://github.com/Tresjs/tres/commit/a29cb2bb908c3cfdccd81fb71b97f4ebe5c4ef59))
+
+## [2.0.0-alpha.5](https://github.com/Tresjs/tres/compare/2.0.0-alpha.4...2.0.0-alpha.5) (2023-03-28)
+
+### Features
+
+- useSeek composable ([bd00001](https://github.com/Tresjs/tres/commit/bd00001948f963c955231a4a406889fa2f2a7051))
+
+## [2.0.0-alpha.4](https://github.com/Tresjs/tres/compare/2.0.0-alpha.3...2.0.0-alpha.4) (2023-03-27)
+
+### Bug Fixes
+
+- removing resetState and going for more granular approach of disposal ([6f1e38b](https://github.com/Tresjs/tres/commit/6f1e38b3361a08d047b7c094285cfd67145502ad))
+- reset state on unmounted ([dbbaee7](https://github.com/Tresjs/tres/commit/dbbaee748a51166cb1b03fecdc1a086772b4a437))
+
+## [2.0.0-alpha.3](https://github.com/Tresjs/tres/compare/2.0.0-alpha.2...2.0.0-alpha.3) (2023-03-26)
+
+### Bug Fixes
+
+- ensure parent for nodeOps target when key is a function ([c07d963](https://github.com/Tresjs/tres/commit/c07d963bd50910f9df519db05ed7f1a496ff03cc))
+
+## [2.0.0-alpha.2](https://github.com/Tresjs/tres/compare/2.0.0-alpha.1...2.0.0-alpha.2) (2023-03-23)
+
+### Features
+
+- buffergeometry setAttribute logic ([beee7b3](https://github.com/Tresjs/tres/commit/beee7b3d564e983e64b51bb4e97c6c357c6de89a))
+
+## [2.0.0-alpha.1](https://github.com/Tresjs/tres/compare/2.0.0-alpha.0...2.0.0-alpha.1) (2023-03-22)
+
+### Bug Fixes
+
+- set scene to state ([1ead941](https://github.com/Tresjs/tres/commit/1ead941eda465a6a6a319a9172052285dd4c146d))
+
+## [2.0.0-alpha.0](https://github.com/Tresjs/tres/compare/@tresjs/core@1.8.1...2.0.0-alpha.0) (2023-03-22)
+
+### Features
+
+- **cientos:** better typ support useEnvironment ([821b6a6](https://github.com/Tresjs/tres/commit/821b6a6b8eea0d9648e371b7b971461f0cb84d15))
+- **cientos:** correctly typed Text3D ([61efbfb](https://github.com/Tresjs/tres/commit/61efbfbd08c6f1843c6ad8dd7d893cd287018ba0))
+- **cientos:** orbit controls typed ([e38e699](https://github.com/Tresjs/tres/commit/e38e6996d5eb136bb9bf0a828547c2c9403aebd5))
+- **cientos:** shapes types ([aa7361b](https://github.com/Tresjs/tres/commit/aa7361b8059d5582fc03710ccdde56b60243fe9b))
+- **cientos:** typed usePamCameraMouse ([07609be](https://github.com/Tresjs/tres/commit/07609be5c8401fce5ab8cd4aa3d70c1e117160cc))
+- **core:** adding composables to the solution ([9a3f8bb](https://github.com/Tresjs/tres/commit/9a3f8bb7461c253a175107c834f7eb50717602c9))
+- **core:** auto generated tres component types ([7430d2c](https://github.com/Tresjs/tres/commit/7430d2c7583a14a71f591b02ccdbdd5835123595))
+- **core:** cleaning up a little bit ([8bdd825](https://github.com/Tresjs/tres/commit/8bdd825d64617584d058866a176fb13d12aa9cc8))
+- **core:** export useLogger ([4ad1a3e](https://github.com/Tresjs/tres/commit/4ad1a3efa84cd43d35688329749704a549fa7134))
+- **core:** fixing black screen ([f4f198c](https://github.com/Tresjs/tres/commit/f4f198c9d04ab1a7fd22be2099c62e5ab8e2c461))
+- **core:** function props and demos updated ([fa072cd](https://github.com/Tresjs/tres/commit/fa072cddc0fca4c1862a49fa2877d3ef5c96dbd2))
+- **core:** nice warning for camera at [0,0,0] ([71eff1b](https://github.com/Tresjs/tres/commit/71eff1b5d0c6531a062b15790a315dad13a7ea18))
+- **core:** provide inject worked again ([2390ec1](https://github.com/Tresjs/tres/commit/2390ec1a757d17bbf02418f1b45848dbbe694da7))
+- **core:** re-structure and tres custom renderer base ([aad0953](https://github.com/Tresjs/tres/commit/aad0953c2d94004231366e20a82a73389f60c7ad))
+- **core:** tres components typing auto generated ([6736b4c](https://github.com/Tresjs/tres/commit/6736b4c6598cf6ad058fac1882257ca337f0902e))
+- **core:** types for TresCanvas ([42ee984](https://github.com/Tresjs/tres/commit/42ee984249ab528d15c1f2a33f950dc9aafbfa82))
+- **core:** v-if working on custom renderer ([e19da3a](https://github.com/Tresjs/tres/commit/e19da3a52d428e8deb32e414df5cfa49db20cd01))
+- createTres wrapper for mounting options ([d480b36](https://github.com/Tresjs/tres/commit/d480b364d4da76776515e6f9138e8f08f7d51e0f))
+
+### Bug Fixes
+
+- **cientos:** added default props to orbit controls ([68d8673](https://github.com/Tresjs/tres/commit/68d8673f0ce794d3d1e09905ead69e575e6e2f3c))
+- **cientos:** cone props ([5f20368](https://github.com/Tresjs/tres/commit/5f2036859733ec864f1736bb3796a86193e9fb51))
+- **cientos:** remove unused extend ([5d5b487](https://github.com/Tresjs/tres/commit/5d5b4870d9d3452c00cf4a0e4295a911950d07bd))
+- **core:** added handleHMR update ([594ab73](https://github.com/Tresjs/tres/commit/594ab738f60c6d1d4e6a9ac0339bb8a3c0d44eb8))
+- **core:** fixed type issues ([bd4be33](https://github.com/Tresjs/tres/commit/bd4be33ab77372307ef59b0ff3bc8989fb40151f))
+- **core:** nodeOps no op ([9044c99](https://github.com/Tresjs/tres/commit/9044c99878f312c6e4c120e9eeee61ea675754e8))
+- useTexture to show indentation for code snippet ([e983c5d](https://github.com/Tresjs/tres/commit/e983c5d945fe2d72083edf03cf08152fe517cbe9))

README.md

@@ -1,30 +1,14 @@
-![repository-banner.png](/public/github-banner.png)
-
-<p align="center">
-  <a href="https://www.npmjs.com/package/@tresjs/core"><img src="https://img.shields.io/npm/v/@tresjs/core?color=%2382DBCA" alt="npm package"></a>
-  <a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/@tresjs/core.svg" alt="node compatibility"></a>
-  <a href="https://discord.gg/tfY9aSNT"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
-</p>
-<br/>
-
-# Tres
+# @tresjs/core ▲ ■ ●
 
 > Declarative ThreeJS using Vue Components
 
-- 💡 Build a 3D scene working only with Vue components.
+- 💡 Build 3D scene as they were Vue components
 - ⚡️ Powered by Vite
 - 🥰 It brings all the updated features of ThreeJS right awayregardless the version
 - 🦾 Fully Typed
 
 Tres (Spanish word for "three", pronounced `/tres/` ) is a way of creating ThreeJS scenes with Vue components in a declarative fashion. Think of it as a [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) or [Lunchbox](https://github.com/breakfast-studio/lunchboxjs) but without the need of a [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html).
 
-## Packages
-
-| Package                     | Version (click for changelogs)                                                                                               |
-| --------------------------- | :--------------------------------------------------------------------------------------------------------------------------- |
-| [Tres](packages/tres)       | [![tres version](https://img.shields.io/npm/v/@tresjs/core.svg?label=%20&color=%2382DBCA)](packages/tres/CHANGELOG.md)       |
-| [Cientos](packages/cientos) | [![tres version](https://img.shields.io/npm/v/@tresjs/cientos.svg?label=%20&color=%23f19b00)](packages/cientos/CHANGELOG.md) |
-
 ## Docs
 
 Checkout the [docs](https://tresjs.org)
@@ -33,10 +17,53 @@ Checkout the [docs](https://tresjs.org)
 
 - [Stackblitz Collection](https://stackblitz.com/@alvarosabu/collections/tresjs)
 
+## Ecosystem
+
+| Package                     | Version                                                                                           |
+| --------------------------- | :------------------------------------------------------------------------------------------------ |
+| [Tres](packages/tres)       | ![tres version](https://img.shields.io/npm/v/@tresjs/core/alpha.svg?label=%20&color=%2382DBCA)    |
+| [Cientos](packages/cientos) | ![tres version](https://img.shields.io/npm/v/@tresjs/cientos/alpha.svg?label=%20&color=%23f19b00) |
+
 ## Contribution
 
 We are open to contributions, please read the [contributing guide](/CONTRIBUTING.md) to get started.
 
+### Setup
+
+```
+pnpm install --shamefully-hoist
+```
+
+### Playground
+
+To run the small playground
+
+```
+pnpm run playground
+```
+
+### Build lib
+
+To build the core as library mode just use
+
+```
+pnpm run build
+```
+
+### Docs
+
+To run de docs in dev mode
+
+```bash
+pnpm run docs:dev
+```
+
+To build them
+
+```bash
+pnpm run docs:build
+```
+
 ## License
 
 [MIT](/LICENSE)

docs/.vitepress/cache/deps/@stackblitz_sdk.js

@@ -0,0 +1,523 @@
+import "./chunk-JC4IRQUL.js";
+
+// node_modules/.pnpm/@stackblitz+sdk@1.9.0/node_modules/@stackblitz/sdk/bundles/sdk.m.js
+var CONNECT_INTERVAL = 500;
+var CONNECT_MAX_ATTEMPTS = 20;
+var DEFAULT_FRAME_HEIGHT = 300;
+var DEFAULT_ORIGIN = "https://stackblitz.com";
+var PROJECT_TEMPLATES = [
+  "angular-cli",
+  "create-react-app",
+  "html",
+  "javascript",
+  "node",
+  "polymer",
+  "typescript",
+  "vue"
+];
+var UI_SIDEBAR_VIEWS = ["project", "search", "ports", "settings"];
+var UI_THEMES = ["light", "dark"];
+var UI_VIEWS = ["editor", "preview"];
+var generators = {
+  clickToLoad: (value) => trueParam("ctl", value),
+  devToolsHeight: (value) => percentParam("devtoolsheight", value),
+  forceEmbedLayout: (value) => trueParam("embed", value),
+  hideDevTools: (value) => trueParam("hidedevtools", value),
+  hideExplorer: (value) => trueParam("hideExplorer", value),
+  hideNavigation: (value) => trueParam("hideNavigation", value),
+  openFile: (value) => stringParams("file", value),
+  showSidebar: (value) => booleanParam("showSidebar", value),
+  sidebarView: (value) => enumParam("sidebarView", value, UI_SIDEBAR_VIEWS),
+  startScript: (value) => stringParams("startScript", value),
+  terminalHeight: (value) => percentParam("terminalHeight", value),
+  theme: (value) => enumParam("theme", value, UI_THEMES),
+  view: (value) => enumParam("view", value, UI_VIEWS),
+  zenMode: (value) => trueParam("zenMode", value)
+};
+function buildParams(options = {}) {
+  const params = Object.entries(options).map(([key, value]) => {
+    if (value != null && generators.hasOwnProperty(key)) {
+      return generators[key](value);
+    }
+    return "";
+  }).filter(Boolean);
+  return params.length ? `?${params.join("&")}` : "";
+}
+function trueParam(name, value) {
+  if (value === true) {
+    return `${name}=1`;
+  }
+  return "";
+}
+function booleanParam(name, value) {
+  if (typeof value === "boolean") {
+    return `${name}=${value ? "1" : "0"}`;
+  }
+  return "";
+}
+function percentParam(name, value) {
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    const clamped = Math.min(100, Math.max(0, value));
+    return `${name}=${encodeURIComponent(Math.round(clamped))}`;
+  }
+  return "";
+}
+function enumParam(name, value = "", allowList = []) {
+  if (allowList.includes(value)) {
+    return `${name}=${encodeURIComponent(value)}`;
+  }
+  return "";
+}
+function stringParams(name, value) {
+  const values = Array.isArray(value) ? value : [value];
+  return values.filter((val) => typeof val === "string" && val.trim() !== "").map((val) => `${name}=${encodeURIComponent(val)}`).join("&");
+}
+function genID() {
+  return Math.random().toString(36).slice(2, 6) + Math.random().toString(36).slice(2, 6);
+}
+function openUrl(route, options) {
+  return `${getOrigin(options)}${route}${buildParams(options)}`;
+}
+function embedUrl(route, options) {
+  const config = {
+    forceEmbedLayout: true
+  };
+  if (options && typeof options === "object") {
+    Object.assign(config, options);
+  }
+  return `${getOrigin(config)}${route}${buildParams(config)}`;
+}
+function getOrigin(options = {}) {
+  const origin = typeof options.origin === "string" ? options.origin : DEFAULT_ORIGIN;
+  return origin.replace(/\/$/, "");
+}
+function replaceAndEmbed(target, frame, options) {
+  if (!frame || !target || !target.parentNode) {
+    throw new Error("Invalid Element");
+  }
+  if (target.id) {
+    frame.id = target.id;
+  }
+  if (target.className) {
+    frame.className = target.className;
+  }
+  setFrameDimensions(frame, options);
+  target.replaceWith(frame);
+}
+function findElement(elementOrId) {
+  if (typeof elementOrId === "string") {
+    const element = document.getElementById(elementOrId);
+    if (!element) {
+      throw new Error(`Could not find element with id '${elementOrId}'`);
+    }
+    return element;
+  } else if (elementOrId instanceof HTMLElement) {
+    return elementOrId;
+  }
+  throw new Error(`Invalid element: ${elementOrId}`);
+}
+function openTarget(options) {
+  return options && options.newWindow === false ? "_self" : "_blank";
+}
+function setFrameDimensions(frame, options = {}) {
+  const height = Object.hasOwnProperty.call(options, "height") ? `${options.height}` : `${DEFAULT_FRAME_HEIGHT}`;
+  const width = Object.hasOwnProperty.call(options, "width") ? `${options.width}` : void 0;
+  frame.setAttribute("height", height);
+  if (width) {
+    frame.setAttribute("width", width);
+  } else {
+    frame.setAttribute("style", "width:100%;");
+  }
+}
+var RDC = class {
+  constructor(port) {
+    this.pending = {};
+    this.port = port;
+    this.port.onmessage = this.messageListener.bind(this);
+  }
+  request({ type, payload }) {
+    return new Promise((resolve, reject) => {
+      const id = genID();
+      this.pending[id] = { resolve, reject };
+      this.port.postMessage({
+        type,
+        payload: {
+          ...payload,
+          // Ensure the payload object includes the request ID
+          __reqid: id
+        }
+      });
+    });
+  }
+  messageListener(event) {
+    var _a;
+    if (typeof ((_a = event.data.payload) == null ? void 0 : _a.__reqid) !== "string") {
+      return;
+    }
+    const { type, payload } = event.data;
+    const { __reqid: id, __success: success, __error: error } = payload;
+    if (this.pending[id]) {
+      if (success) {
+        this.pending[id].resolve(this.cleanResult(payload));
+      } else {
+        this.pending[id].reject(error ? `${type}: ${error}` : type);
+      }
+      delete this.pending[id];
+    }
+  }
+  cleanResult(payload) {
+    const result = { ...payload };
+    delete result.__reqid;
+    delete result.__success;
+    delete result.__error;
+    return Object.keys(result).length ? result : null;
+  }
+};
+var VM = class {
+  constructor(port, config) {
+    this.editor = {
+      /**
+       * Open one of several files in tabs and/or split panes.
+       *
+       * @since 1.7.0 Added support for opening multiple files
+       */
+      openFile: (path) => {
+        return this._rdc.request({
+          type: "SDK_OPEN_FILE",
+          payload: { path }
+        });
+      },
+      /**
+       * Set a project file as the currently selected file.
+       *
+       * - This may update the highlighted file in the file explorer,
+       *   and the currently open and/or focused editor tab.
+       * - It will _not_ open a new editor tab if the provided path does not
+       *   match a currently open tab. See `vm.editor.openFile` to open files.
+       *
+       * @since 1.7.0
+       * @experimental
+       */
+      setCurrentFile: (path) => {
+        return this._rdc.request({
+          type: "SDK_SET_CURRENT_FILE",
+          payload: { path }
+        });
+      },
+      /**
+       * Change the color theme
+       *
+       * @since 1.7.0
+       */
+      setTheme: (theme) => {
+        return this._rdc.request({
+          type: "SDK_SET_UI_THEME",
+          payload: { theme }
+        });
+      },
+      /**
+       * Change the display mode of the project:
+       *
+       * - `default`: show the editor and preview pane
+       * - `editor`: show the editor pane only
+       * - `preview`: show the preview pane only
+       *
+       * @since 1.7.0
+       */
+      setView: (view) => {
+        return this._rdc.request({
+          type: "SDK_SET_UI_VIEW",
+          payload: { view }
+        });
+      },
+      /**
+       * Change the display mode of the sidebar:
+       *
+       * - `true`: show the sidebar
+       * - `false`: hide the sidebar
+       *
+       * @since 1.7.0
+       */
+      showSidebar: (visible = true) => {
+        return this._rdc.request({
+          type: "SDK_TOGGLE_SIDEBAR",
+          payload: { visible }
+        });
+      }
+    };
+    this.preview = {
+      /**
+       * The origin (protocol and domain) of the preview iframe.
+       *
+       * In WebContainers-based projects, the origin will always be `null`;
+       * try using `vm.preview.getUrl` instead.
+       *
+       * @see https://developer.stackblitz.com/guides/user-guide/available-environments
+       */
+      origin: "",
+      /**
+       * Get the current preview URL.
+       *
+       * In both and EngineBlock and WebContainers-based projects, the preview URL
+       * may not reflect the exact path of the current page, after user navigation.
+       *
+       * In WebContainers-based projects, the preview URL will be `null` initially,
+       * and until the project starts a web server.
+       *
+       * @since 1.7.0
+       * @experimental
+       */
+      getUrl: () => {
+        return this._rdc.request({
+          type: "SDK_GET_PREVIEW_URL",
+          payload: {}
+        }).then((data) => (data == null ? void 0 : data.url) ?? null);
+      },
+      /**
+       * Change the path of the preview URL.
+       *
+       * In WebContainers-based projects, this will be ignored if there is no
+       * currently running web server.
+       *
+       * @since 1.7.0
+       * @experimental
+       */
+      setUrl: (path = "/") => {
+        if (typeof path !== "string" || !path.startsWith("/")) {
+          throw new Error(`Invalid argument: expected a path starting with '/', got '${path}'`);
+        }
+        return this._rdc.request({
+          type: "SDK_SET_PREVIEW_URL",
+          payload: { path }
+        });
+      }
+    };
+    this._rdc = new RDC(port);
+    Object.defineProperty(this.preview, "origin", {
+      value: typeof config.previewOrigin === "string" ? config.previewOrigin : null,
+      writable: false
+    });
+  }
+  /**
+   * Apply batch updates to the project files in one call.
+   */
+  applyFsDiff(diff) {
+    const isObject = (val) => val !== null && typeof val === "object";
+    if (!isObject(diff) || !isObject(diff.create)) {
+      throw new Error("Invalid diff object: expected diff.create to be an object.");
+    } else if (!Array.isArray(diff.destroy)) {
+      throw new Error("Invalid diff object: expected diff.destroy to be an array.");
+    }
+    return this._rdc.request({
+      type: "SDK_APPLY_FS_DIFF",
+      payload: diff
+    });
+  }
+  /**
+   * Get the project’s defined dependencies.
+   *
+   * In EngineBlock projects, version numbers represent the resolved dependency versions.
+   * In WebContainers-based projects, returns data from the project’s `package.json` without resolving installed version numbers.
+   */
+  getDependencies() {
+    return this._rdc.request({
+      type: "SDK_GET_DEPS_SNAPSHOT",
+      payload: {}
+    });
+  }
+  /**
+   * Get a snapshot of the project files and their content.
+   */
+  getFsSnapshot() {
+    return this._rdc.request({
+      type: "SDK_GET_FS_SNAPSHOT",
+      payload: {}
+    });
+  }
+};
+var connections = [];
+var Connection = class {
+  constructor(element) {
+    this.id = genID();
+    this.element = element;
+    this.pending = new Promise((resolve, reject) => {
+      const listenForSuccess = ({ data, ports }) => {
+        if ((data == null ? void 0 : data.action) === "SDK_INIT_SUCCESS" && data.id === this.id) {
+          this.vm = new VM(ports[0], data.payload);
+          resolve(this.vm);
+          cleanup();
+        }
+      };
+      const pingFrame = () => {
+        var _a;
+        (_a = this.element.contentWindow) == null ? void 0 : _a.postMessage(
+          {
+            action: "SDK_INIT",
+            id: this.id
+          },
+          "*"
+        );
+      };
+      function cleanup() {
+        window.clearInterval(interval);
+        window.removeEventListener("message", listenForSuccess);
+      }
+      window.addEventListener("message", listenForSuccess);
+      pingFrame();
+      let attempts = 0;
+      const interval = window.setInterval(() => {
+        if (this.vm) {
+          cleanup();
+          return;
+        }
+        if (attempts >= CONNECT_MAX_ATTEMPTS) {
+          cleanup();
+          reject("Timeout: Unable to establish a connection with the StackBlitz VM");
+          connections.forEach((connection, index) => {
+            if (connection.id === this.id) {
+              connections.splice(index, 1);
+            }
+          });
+          return;
+        }
+        attempts++;
+        pingFrame();
+      }, CONNECT_INTERVAL);
+    });
+    connections.push(this);
+  }
+};
+var getConnection = (identifier) => {
+  const key = identifier instanceof Element ? "element" : "id";
+  return connections.find((c) => c[key] === identifier) ?? null;
+};
+function createHiddenInput(name, value) {
+  const input = document.createElement("input");
+  input.type = "hidden";
+  input.name = name;
+  input.value = value;
+  return input;
+}
+function encodeFilePath(path) {
+  return path.replace(/\[/g, "%5B").replace(/\]/g, "%5D");
+}
+function createProjectForm({
+  template,
+  title,
+  description,
+  dependencies,
+  files,
+  settings
+}) {
+  if (!PROJECT_TEMPLATES.includes(template)) {
+    const names = PROJECT_TEMPLATES.map((t) => `'${t}'`).join(", ");
+    console.warn(`Unsupported project.template: must be one of ${names}`);
+  }
+  const inputs = [];
+  const addInput = (name, value, defaultValue = "") => {
+    inputs.push(createHiddenInput(name, typeof value === "string" ? value : defaultValue));
+  };
+  addInput("project[title]", title);
+  if (typeof description === "string" && description.length > 0) {
+    addInput("project[description]", description);
+  }
+  addInput("project[template]", template, "javascript");
+  if (dependencies) {
+    if (template === "node") {
+      console.warn(
+        `Invalid project.dependencies: dependencies must be provided as a 'package.json' file when using the 'node' template.`
+      );
+    } else {
+      addInput("project[dependencies]", JSON.stringify(dependencies));
+    }
+  }
+  if (settings) {
+    addInput("project[settings]", JSON.stringify(settings));
+  }
+  Object.entries(files).forEach(([path, contents]) => {
+    addInput(`project[files][${encodeFilePath(path)}]`, contents);
+  });
+  const form = document.createElement("form");
+  form.method = "POST";
+  form.setAttribute("style", "display:none!important;");
+  form.append(...inputs);
+  return form;
+}
+function createProjectFrameHTML(project, options) {
+  const form = createProjectForm(project);
+  form.action = embedUrl("/run", options);
+  form.id = "sb_run";
+  const html = `<!doctype html>
+<html>
+<head><title></title></head>
+<body>
+  ${form.outerHTML}
+  <script>document.getElementById('${form.id}').submit();<\/script>
+</body>
+</html>`;
+  return html;
+}
+function openNewProject(project, options) {
+  const form = createProjectForm(project);
+  form.action = openUrl("/run", options);
+  form.target = openTarget(options);
+  document.body.appendChild(form);
+  form.submit();
+  document.body.removeChild(form);
+}
+function connect(frameEl) {
+  if (!(frameEl == null ? void 0 : frameEl.contentWindow)) {
+    return Promise.reject("Provided element is not an iframe.");
+  }
+  const connection = getConnection(frameEl) ?? new Connection(frameEl);
+  return connection.pending;
+}
+function openProject(project, options) {
+  openNewProject(project, options);
+}
+function openProjectId(projectId, options) {
+  const url = openUrl(`/edit/${projectId}`, options);
+  const target = openTarget(options);
+  window.open(url, target);
+}
+function openGithubProject(repoSlug, options) {
+  const url = openUrl(`/github/${repoSlug}`, options);
+  const target = openTarget(options);
+  window.open(url, target);
+}
+function embedProject(elementOrId, project, options) {
+  var _a;
+  const element = findElement(elementOrId);
+  const html = createProjectFrameHTML(project, options);
+  const frame = document.createElement("iframe");
+  replaceAndEmbed(element, frame, options);
+  (_a = frame.contentDocument) == null ? void 0 : _a.write(html);
+  return connect(frame);
+}
+function embedProjectId(elementOrId, projectId, options) {
+  const element = findElement(elementOrId);
+  const frame = document.createElement("iframe");
+  frame.src = embedUrl(`/edit/${projectId}`, options);
+  replaceAndEmbed(element, frame, options);
+  return connect(frame);
+}
+function embedGithubProject(elementOrId, repoSlug, options) {
+  const element = findElement(elementOrId);
+  const frame = document.createElement("iframe");
+  frame.src = embedUrl(`/github/${repoSlug}`, options);
+  replaceAndEmbed(element, frame, options);
+  return connect(frame);
+}
+var StackBlitzSDK = {
+  connect,
+  embedGithubProject,
+  embedProject,
+  embedProjectId,
+  openGithubProject,
+  openProject,
+  openProjectId
+};
+export {
+  StackBlitzSDK as default
+};
+//# sourceMappingURL=@stackblitz_sdk.js.map

docs/.vitepress/cache/deps/@tresjs_core.js

@@ -0,0 +1,42 @@
+import {
+  Ct,
+  D,
+  Et,
+  I,
+  Lt,
+  Me,
+  N,
+  Pt,
+  Qe,
+  Rt,
+  bt,
+  ct,
+  ft,
+  he,
+  lt,
+  st,
+  we
+} from "./chunk-DESKY23Y.js";
+import "./chunk-LZPJ5JBW.js";
+import "./chunk-4QXXOI63.js";
+import "./chunk-JC4IRQUL.js";
+export {
+  Qe as CameraType,
+  bt as TresCanvas,
+  he as catalogue,
+  Lt as default,
+  we as extend,
+  Pt as isProd,
+  ct as trasverseObjects,
+  N as useCamera,
+  Et as useLoader,
+  I as useLogger,
+  lt as useRaycaster,
+  Me as useRenderLoop,
+  st as useRenderer,
+  Rt as useSeek,
+  Ct as useTexture,
+  D as useTres,
+  ft as useTresProvider
+};
+//# sourceMappingURL=@tresjs_core.js.map

docs/.vitepress/cache/deps/@tresjs_core.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

docs/.vitepress/cache/deps/_metadata.json

@@ -0,0 +1,56 @@
+{
+  "hash": "73411b7d",
+  "browserHash": "0bbf8bc7",
+  "optimized": {
+    "vue": {
+      "src": "../../../../node_modules/.pnpm/vue@3.2.47/node_modules/vue/dist/vue.runtime.esm-bundler.js",
+      "file": "vue.js",
+      "fileHash": "1ab1f91c",
+      "needsInterop": false
+    },
+    "three": {
+      "src": "../../../../node_modules/.pnpm/three@0.150.1/node_modules/three/build/three.module.js",
+      "file": "three.js",
+      "fileHash": "c93e162c",
+      "needsInterop": false
+    },
+    "@tresjs/core": {
+      "src": "../../../../node_modules/.pnpm/@tresjs+core@2.0.0-beta.5_three@0.150.1_vue@3.2.47/node_modules/@tresjs/core/dist/tres.js",
+      "file": "@tresjs_core.js",
+      "fileHash": "dc076c3b",
+      "needsInterop": false
+    },
+    "@tresjs/cientos": {
+      "src": "../../../../node_modules/.pnpm/@tresjs+cientos@2.0.0-beta.1_@tresjs+core@2.0.0-beta.5_three@0.150.1_vue@3.2.47/node_modules/@tresjs/cientos/dist/trescientos.js",
+      "file": "@tresjs_cientos.js",
+      "fileHash": "c0bcd255",
+      "needsInterop": false
+    },
+    "@stackblitz/sdk": {
+      "src": "../../../../node_modules/.pnpm/@stackblitz+sdk@1.9.0/node_modules/@stackblitz/sdk/bundles/sdk.m.js",
+      "file": "@stackblitz_sdk.js",
+      "fileHash": "68a20abf",
+      "needsInterop": false
+    },
+    "gsap": {
+      "src": "../../../../node_modules/.pnpm/gsap@3.11.5/node_modules/gsap/index.js",
+      "file": "gsap.js",
+      "fileHash": "a4e0a5be",
+      "needsInterop": false
+    }
+  },
+  "chunks": {
+    "chunk-DESKY23Y": {
+      "file": "chunk-DESKY23Y.js"
+    },
+    "chunk-LZPJ5JBW": {
+      "file": "chunk-LZPJ5JBW.js"
+    },
+    "chunk-4QXXOI63": {
+      "file": "chunk-4QXXOI63.js"
+    },
+    "chunk-JC4IRQUL": {
+      "file": "chunk-JC4IRQUL.js"
+    }
+  }
+}

docs/.vitepress/cache/deps/chunk-DESKY23Y.js

@@ -0,0 +1,957 @@
+import {
+  computed,
+  createRenderer,
+  defineComponent,
+  getCurrentInstance,
+  getCurrentScope,
+  h,
+  inject,
+  nextTick,
+  onMounted,
+  onScopeDispose,
+  onUnmounted,
+  provide,
+  readonly,
+  ref,
+  shallowReactive,
+  shallowRef,
+  toRef,
+  toRefs,
+  unref,
+  watch,
+  watchEffect
+} from "./chunk-LZPJ5JBW.js";
+import {
+  ACESFilmicToneMapping,
+  BufferAttribute,
+  Clock,
+  Color,
+  LinearEncoding,
+  LoadingManager,
+  MathUtils,
+  NoToneMapping,
+  OrthographicCamera,
+  PCFShadowMap,
+  PCFSoftShadowMap,
+  PerspectiveCamera,
+  Raycaster,
+  Scene,
+  TextureLoader,
+  Vector2,
+  WebGLRenderer,
+  sRGBEncoding,
+  three_module_exports
+} from "./chunk-4QXXOI63.js";
+
+// node_modules/.pnpm/@vueuse+shared@9.13.0_vue@3.2.47/node_modules/@vueuse/shared/index.mjs
+var _a;
+var isClient = typeof window !== "undefined";
+var isFunction = (val) => typeof val === "function";
+var isString = (val) => typeof val === "string";
+var noop = () => {
+};
+var isIOS = isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+function resolveUnref(r) {
+  return typeof r === "function" ? r() : unref(r);
+}
+function identity(arg) {
+  return arg;
+}
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+function createEventHook() {
+  const fns = [];
+  const off = (fn) => {
+    const index = fns.indexOf(fn);
+    if (index !== -1)
+      fns.splice(index, 1);
+  };
+  const on = (fn) => {
+    fns.push(fn);
+    const offFn = () => off(fn);
+    tryOnScopeDispose(offFn);
+    return {
+      off: offFn
+    };
+  };
+  const trigger = (param) => {
+    fns.forEach((fn) => fn(param));
+  };
+  return {
+    on,
+    off,
+    trigger
+  };
+}
+function tryOnMounted(fn, sync = true) {
+  if (getCurrentInstance())
+    onMounted(fn);
+  else if (sync)
+    fn();
+  else
+    nextTick(fn);
+}
+
+// node_modules/.pnpm/@vueuse+core@9.13.0_vue@3.2.47/node_modules/@vueuse/core/index.mjs
+function unrefElement(elRef) {
+  var _a2;
+  const plain = resolveUnref(elRef);
+  return (_a2 = plain == null ? void 0 : plain.$el) != null ? _a2 : plain;
+}
+var defaultWindow = isClient ? window : void 0;
+var defaultDocument = isClient ? window.document : void 0;
+var defaultNavigator = isClient ? window.navigator : void 0;
+var defaultLocation = isClient ? window.location : void 0;
+function useEventListener(...args) {
+  let target;
+  let events;
+  let listeners;
+  let options;
+  if (isString(args[0]) || Array.isArray(args[0])) {
+    [events, listeners, options] = args;
+    target = defaultWindow;
+  } else {
+    [target, events, listeners, options] = args;
+  }
+  if (!target)
+    return noop;
+  if (!Array.isArray(events))
+    events = [events];
+  if (!Array.isArray(listeners))
+    listeners = [listeners];
+  const cleanups = [];
+  const cleanup = () => {
+    cleanups.forEach((fn) => fn());
+    cleanups.length = 0;
+  };
+  const register = (el, event, listener, options2) => {
+    el.addEventListener(event, listener, options2);
+    return () => el.removeEventListener(event, listener, options2);
+  };
+  const stopWatch = watch(() => [unrefElement(target), resolveUnref(options)], ([el, options2]) => {
+    cleanup();
+    if (!el)
+      return;
+    cleanups.push(...events.flatMap((event) => {
+      return listeners.map((listener) => register(el, event, listener, options2));
+    }));
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return stop;
+}
+function useSupported(callback, sync = false) {
+  const isSupported = ref();
+  const update = () => isSupported.value = Boolean(callback());
+  update();
+  tryOnMounted(update, sync);
+  return isSupported;
+}
+var _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+var globalKey = "__vueuse_ssr_handlers__";
+_global[globalKey] = _global[globalKey] || {};
+var handlers = _global[globalKey];
+function useDevicePixelRatio({
+  window: window2 = defaultWindow
+} = {}) {
+  const pixelRatio = ref(1);
+  if (window2) {
+    let observe = function() {
+      pixelRatio.value = window2.devicePixelRatio;
+      cleanup();
+      media = window2.matchMedia(`(resolution: ${pixelRatio.value}dppx)`);
+      media.addEventListener("change", observe, { once: true });
+    }, cleanup = function() {
+      media == null ? void 0 : media.removeEventListener("change", observe);
+    };
+    let media;
+    observe();
+    tryOnScopeDispose(cleanup);
+  }
+  return { pixelRatio };
+}
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+var __objRest$2 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function useResizeObserver(target, callback, options = {}) {
+  const _a2 = options, { window: window2 = defaultWindow } = _a2, observerOptions = __objRest$2(_a2, ["window"]);
+  let observer;
+  const isSupported = useSupported(() => window2 && "ResizeObserver" in window2);
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const stopWatch = watch(() => unrefElement(target), (el) => {
+    cleanup();
+    if (isSupported.value && window2 && el) {
+      observer = new ResizeObserver(callback);
+      observer.observe(el, observerOptions);
+    }
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+function useRafFn(fn, options = {}) {
+  const {
+    immediate = true,
+    window: window2 = defaultWindow
+  } = options;
+  const isActive = ref(false);
+  let previousFrameTimestamp = 0;
+  let rafId = null;
+  function loop(timestamp2) {
+    if (!isActive.value || !window2)
+      return;
+    const delta = timestamp2 - previousFrameTimestamp;
+    fn({ delta, timestamp: timestamp2 });
+    previousFrameTimestamp = timestamp2;
+    rafId = window2.requestAnimationFrame(loop);
+  }
+  function resume() {
+    if (!isActive.value && window2) {
+      isActive.value = true;
+      rafId = window2.requestAnimationFrame(loop);
+    }
+  }
+  function pause() {
+    isActive.value = false;
+    if (rafId != null && window2) {
+      window2.cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  }
+  if (immediate)
+    resume();
+  tryOnScopeDispose(pause);
+  return {
+    isActive: readonly(isActive),
+    pause,
+    resume
+  };
+}
+function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
+  const { window: window2 = defaultWindow, box = "content-box" } = options;
+  const isSVG = computed(() => {
+    var _a2, _b;
+    return (_b = (_a2 = unrefElement(target)) == null ? void 0 : _a2.namespaceURI) == null ? void 0 : _b.includes("svg");
+  });
+  const width = ref(initialSize.width);
+  const height = ref(initialSize.height);
+  useResizeObserver(target, ([entry]) => {
+    const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
+    if (window2 && isSVG.value) {
+      const $elem = unrefElement(target);
+      if ($elem) {
+        const styles = window2.getComputedStyle($elem);
+        width.value = parseFloat(styles.width);
+        height.value = parseFloat(styles.height);
+      }
+    } else {
+      if (boxSize) {
+        const formatBoxSize = Array.isArray(boxSize) ? boxSize : [boxSize];
+        width.value = formatBoxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
+        height.value = formatBoxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+      } else {
+        width.value = entry.contentRect.width;
+        height.value = entry.contentRect.height;
+      }
+    }
+  }, options);
+  watch(() => unrefElement(target), (ele) => {
+    width.value = ele ? initialSize.width : 0;
+    height.value = ele ? initialSize.height : 0;
+  });
+  return {
+    width,
+    height
+  };
+}
+var defaultState = {
+  x: 0,
+  y: 0,
+  pointerId: 0,
+  pressure: 0,
+  tiltX: 0,
+  tiltY: 0,
+  width: 0,
+  height: 0,
+  twist: 0,
+  pointerType: null
+};
+var keys = Object.keys(defaultState);
+var SwipeDirection;
+(function(SwipeDirection2) {
+  SwipeDirection2["UP"] = "UP";
+  SwipeDirection2["RIGHT"] = "RIGHT";
+  SwipeDirection2["DOWN"] = "DOWN";
+  SwipeDirection2["LEFT"] = "LEFT";
+  SwipeDirection2["NONE"] = "NONE";
+})(SwipeDirection || (SwipeDirection = {}));
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var _TransitionPresets = {
+  easeInSine: [0.12, 0, 0.39, 0],
+  easeOutSine: [0.61, 1, 0.88, 1],
+  easeInOutSine: [0.37, 0, 0.63, 1],
+  easeInQuad: [0.11, 0, 0.5, 0],
+  easeOutQuad: [0.5, 1, 0.89, 1],
+  easeInOutQuad: [0.45, 0, 0.55, 1],
+  easeInCubic: [0.32, 0, 0.67, 0],
+  easeOutCubic: [0.33, 1, 0.68, 1],
+  easeInOutCubic: [0.65, 0, 0.35, 1],
+  easeInQuart: [0.5, 0, 0.75, 0],
+  easeOutQuart: [0.25, 1, 0.5, 1],
+  easeInOutQuart: [0.76, 0, 0.24, 1],
+  easeInQuint: [0.64, 0, 0.78, 0],
+  easeOutQuint: [0.22, 1, 0.36, 1],
+  easeInOutQuint: [0.83, 0, 0.17, 1],
+  easeInExpo: [0.7, 0, 0.84, 0],
+  easeOutExpo: [0.16, 1, 0.3, 1],
+  easeInOutExpo: [0.87, 0, 0.13, 1],
+  easeInCirc: [0.55, 0, 1, 0.45],
+  easeOutCirc: [0, 0.55, 0.45, 1],
+  easeInOutCirc: [0.85, 0, 0.15, 1],
+  easeInBack: [0.36, 0, 0.66, -0.56],
+  easeOutBack: [0.34, 1.56, 0.64, 1],
+  easeInOutBack: [0.68, -0.6, 0.32, 1.6]
+};
+var TransitionPresets = __spreadValues({
+  linear: identity
+}, _TransitionPresets);
+function useWindowSize(options = {}) {
+  const {
+    window: window2 = defaultWindow,
+    initialWidth = Infinity,
+    initialHeight = Infinity,
+    listenOrientation = true,
+    includeScrollbar = true
+  } = options;
+  const width = ref(initialWidth);
+  const height = ref(initialHeight);
+  const update = () => {
+    if (window2) {
+      if (includeScrollbar) {
+        width.value = window2.innerWidth;
+        height.value = window2.innerHeight;
+      } else {
+        width.value = window2.document.documentElement.clientWidth;
+        height.value = window2.document.documentElement.clientHeight;
+      }
+    }
+  };
+  update();
+  tryOnMounted(update);
+  useEventListener("resize", update, { passive: true });
+  if (listenOrientation)
+    useEventListener("orientationchange", update, { passive: true });
+  return { width, height };
+}
+
+// node_modules/.pnpm/@tresjs+core@2.0.0-beta.5_three@0.150.1_vue@3.2.47/node_modules/@tresjs/core/dist/tres.js
+var he = ref({ uuid: MathUtils.generateUUID() });
+var we = (e) => void Object.assign(he.value, e);
+var Qe = ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Qe || {});
+var Ze = 45;
+var _;
+function N() {
+  const { state: e, setState: t, aspectRatio: o } = D();
+  function a(i = "Perspective", c) {
+    var u, f, m;
+    if (i === "Perspective") {
+      const { near: d, far: P, fov: g } = c || {
+        near: 0.1,
+        far: 1e3,
+        fov: Ze
+      };
+      _ = new PerspectiveCamera(g, ((u = e.aspectRatio) == null ? void 0 : u.value) || window.innerWidth / window.innerHeight, d, P), (f = e.cameras) == null || f.push(_);
+    } else {
+      const { left: d, right: P, top: g, bottom: R, near: w, far: p } = c || {
+        left: -100,
+        right: 100,
+        top: 100,
+        bottom: -100,
+        near: 0.1,
+        far: 1e3
+      };
+      _ = new OrthographicCamera(d, P, g, R, w, p), (m = e.cameras) == null || m.push(_);
+    }
+    return e.camera = _, t("camera", e.camera), _;
+  }
+  function n() {
+    var i;
+    e.camera instanceof PerspectiveCamera && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (i = e.camera) == null || i.updateProjectionMatrix();
+  }
+  function r(i) {
+    var c;
+    (c = e.cameras) == null || c.push(i), i instanceof PerspectiveCamera && e.aspectRatio && (i.aspect = e.aspectRatio.value), i.updateProjectionMatrix(), t("camera", i);
+  }
+  function s() {
+    e.cameras = [];
+  }
+  return watchEffect(() => {
+    o != null && o.value && n();
+  }), {
+    activeCamera: toRef(e, "camera"),
+    createCamera: a,
+    updateCamera: n,
+    pushCamera: r,
+    clearCameras: s
+  };
+}
+var be = createEventHook();
+var ye = createEventHook();
+var K = createEventHook();
+var j = new Clock();
+var G = 0;
+var V = 0;
+var { pause: et, resume: tt, isActive: at } = useRafFn(
+  () => {
+    be.trigger({ delta: G, elapsed: V, clock: j }), ye.trigger({ delta: G, elapsed: V, clock: j }), K.trigger({ delta: G, elapsed: V, clock: j });
+  },
+  { immediate: false }
+);
+K.on(() => {
+  G = j.getDelta(), V = j.getElapsedTime();
+});
+function Me() {
+  return {
+    onBeforeLoop: be.on,
+    onLoop: ye.on,
+    onAfterLoop: K.on,
+    pause: et,
+    resume: tt,
+    isActive: at
+  };
+}
+function nt(e) {
+  return e instanceof Color ? e : Array.isArray(e) ? new Color(...e) : new Color(e);
+}
+var $ = {
+  realistic: {
+    outputEncoding: sRGBEncoding,
+    toneMapping: ACESFilmicToneMapping,
+    toneMappingExposure: 3,
+    shadowMap: {
+      enabled: true,
+      type: PCFSoftShadowMap
+    }
+  }
+};
+var xe = (e, t) => {
+  for (const o of Object.keys(t))
+    t[o] instanceof Object && Object.assign(t[o], xe(e[o], t[o]));
+  return Object.assign(e || {}, t), e;
+};
+var rt = "html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot";
+var ot = it(rt);
+function z(e) {
+  return e.replace(/-([a-z])/g, (t, o) => o.toUpperCase());
+}
+function it(e, t) {
+  const o = /* @__PURE__ */ Object.create(null), a = e.split(",");
+  for (let n = 0; n < a.length; n++)
+    o[a[n]] = true;
+  return t ? (n) => !!o[n.toLowerCase()] : (n) => !!o[n];
+}
+function st(e) {
+  var Z, ee;
+  const t = shallowRef(), o = ref(false), {
+    alpha: a = true,
+    antialias: n = true,
+    depth: r,
+    logarithmicDepthBuffer: s,
+    failIfMajorPerformanceCaveat: i,
+    precision: c,
+    premultipliedAlpha: u,
+    stencil: f,
+    shadows: m = false,
+    shadowMapType: d = PCFShadowMap,
+    physicallyCorrectLights: P = false,
+    useLegacyLights: g = false,
+    outputEncoding: R = LinearEncoding,
+    toneMapping: w = NoToneMapping,
+    toneMappingExposure: p = 1,
+    context: x = void 0,
+    powerPreference: b = "default",
+    preserveDrawingBuffer: y = false,
+    clearColor: M,
+    windowSize: E = false,
+    preset: L = void 0
+  } = toRefs(e), { state: h2, setState: T } = D(), { width: C, height: O } = resolveUnref(E) == true || resolveUnref(E) === "" || resolveUnref(E) === "true" ? useWindowSize() : useElementSize(h2.container), { logError: B, logWarning: Pe } = I(), { pixelRatio: J } = useDevicePixelRatio(), { pause: Re, resume: Le } = Me(), U = computed(() => C.value / O.value);
+  !resolveUnref(E) && ((ee = (Z = h2.container) == null ? void 0 : Z.value) == null ? void 0 : ee.offsetHeight) === 0 && Pe(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
+You could set windowSize=true to force the canvas to be the size of the window.`);
+  const X = () => {
+    t.value && (t.value.setSize(C.value, O.value), t.value.setPixelRatio(Math.min(J.value, 2)));
+  }, Q = () => {
+    if (!t.value)
+      return;
+    const A = resolveUnref(L);
+    if (A) {
+      A in $ || B("Renderer Preset must be one of these: " + Object.keys($).join(", ")), xe(t.value, $[A]);
+      return;
+    }
+    t.value.shadowMap.enabled = resolveUnref(m), t.value.shadowMap.type = resolveUnref(d), t.value.toneMapping = resolveUnref(w) || NoToneMapping, t.value.toneMappingExposure = resolveUnref(p), t.value.outputEncoding = resolveUnref(R) || LinearEncoding, M != null && M.value && t.value.setClearColor(nt(resolveUnref(M))), t.value.useLegacyLights = resolveUnref(g);
+  }, Te = () => {
+    const A = unrefElement(h2.canvas);
+    A && (t.value = new WebGLRenderer({
+      canvas: A,
+      alpha: resolveUnref(a),
+      antialias: resolveUnref(n),
+      context: resolveUnref(x),
+      depth: resolveUnref(r),
+      failIfMajorPerformanceCaveat: resolveUnref(i),
+      logarithmicDepthBuffer: resolveUnref(s),
+      powerPreference: resolveUnref(b),
+      precision: resolveUnref(c),
+      stencil: resolveUnref(f),
+      preserveDrawingBuffer: resolveUnref(y),
+      premultipliedAlpha: resolveUnref(u)
+    }), T("renderer", t.value), T("clock", new Clock()), T("aspectRatio", U), Q(), X(), Le(), o.value = true);
+  }, Ae = () => {
+    t.value && (t.value.dispose(), t.value = void 0, o.value = false, Re());
+  };
+  return watch([U, J], X), watch(
+    [m, d, R, g, w, p, M],
+    Q
+  ), watch(
+    () => [h2.canvas, h2.container],
+    () => {
+      unrefElement(h2.canvas) && unrefElement(h2.container) && Te();
+    },
+    { immediate: true, deep: true }
+  ), {
+    renderer: t,
+    isReady: o,
+    dispose: Ae,
+    aspectRatio: U
+  };
+}
+var Ee = (e) => !!e && e.constructor === Array;
+function ct(e) {
+  const t = { nodes: {}, materials: {} };
+  return e && e.traverse((o) => {
+    o.name && (t.nodes[o.name] = o), o.material && !t.materials[o.material.name] && (t.materials[o.material.name] = o.material);
+  }), t;
+}
+async function Et(e, t, o, a, n) {
+  const { logError: r } = I(), s = new e();
+  n && n(s), o && o(s);
+  const c = (Array.isArray(t) ? t : [t]).map(
+    (u) => new Promise((f, m) => {
+      s.load(
+        u,
+        (d) => {
+          d.scene && Object.assign(d, ct(d.scene)), f(d);
+        },
+        a,
+        (d) => m(r("[useLoader] - Failed to load resource", d))
+      );
+    })
+  );
+  return Ee(t) ? await Promise.all(c) : await c[0];
+}
+async function Ct(e) {
+  const t = new LoadingManager(), o = new TextureLoader(t), a = (n) => new Promise((r, s) => {
+    o.load(
+      n,
+      (i) => r(i),
+      () => null,
+      () => {
+        s(new Error("[useTextures] - Failed to load texture"));
+      }
+    );
+  });
+  if (Ee(e)) {
+    const n = await Promise.all(e.map((r) => a(r)));
+    return e.length > 1 ? n : n[0];
+  } else {
+    const {
+      map: n,
+      displacementMap: r,
+      normalMap: s,
+      roughnessMap: i,
+      metalnessMap: c,
+      aoMap: u,
+      alphaMap: f,
+      matcap: m
+    } = e;
+    return {
+      map: n ? await a(n) : null,
+      displacementMap: r ? await a(r) : null,
+      normalMap: s ? await a(s) : null,
+      roughnessMap: i ? await a(i) : null,
+      metalnessMap: c ? await a(c) : null,
+      aoMap: u ? await a(u) : null,
+      alphaMap: f ? await a(f) : null,
+      matcap: m ? await a(m) : null
+    };
+  }
+}
+var v = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0a", "0b", "0c", "0d", "0e", "0f", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "1a", "1b", "1c", "1d", "1e", "1f", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "2a", "2b", "2c", "2d", "2e", "2f", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "3a", "3b", "3c", "3d", "3e", "3f", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "4a", "4b", "4c", "4d", "4e", "4f", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "5a", "5b", "5c", "5d", "5e", "5f", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "6a", "6b", "6c", "6d", "6e", "6f", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "7a", "7b", "7c", "7d", "7e", "7f", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "8a", "8b", "8c", "8d", "8e", "8f", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "9a", "9b", "9c", "9d", "9e", "9f", "a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "aa", "ab", "ac", "ad", "ae", "af", "b0", "b1", "b2", "b3", "b4", "b5", "b6", "b7", "b8", "b9", "ba", "bb", "bc", "bd", "be", "bf", "c0", "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "ca", "cb", "cc", "cd", "ce", "cf", "d0", "d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8", "d9", "da", "db", "dc", "dd", "de", "df", "e0", "e1", "e2", "e3", "e4", "e5", "e6", "e7", "e8", "e9", "ea", "eb", "ec", "ed", "ee", "ef", "f0", "f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "fa", "fb", "fc", "fd", "fe", "ff"];
+function ut() {
+  const e = Math.random() * 4294967295 | 0, t = Math.random() * 4294967295 | 0, o = Math.random() * 4294967295 | 0, a = Math.random() * 4294967295 | 0;
+  return (v[e & 255] + v[e >> 8 & 255] + v[e >> 16 & 255] + v[e >> 24 & 255] + "-" + v[t & 255] + v[t >> 8 & 255] + "-" + v[t >> 16 & 15 | 64] + v[t >> 24 & 255] + "-" + v[o & 63 | 128] + v[o >> 8 & 255] + "-" + v[o >> 16 & 255] + v[o >> 24 & 255] + v[a & 255] + v[a >> 8 & 255] + v[a >> 16 & 255] + v[a >> 24 & 255]).toLowerCase();
+}
+var Ce = Symbol();
+function ft() {
+  const e = shallowReactive({
+    uuid: ut(),
+    camera: void 0,
+    cameras: [],
+    scene: void 0,
+    renderer: void 0,
+    aspectRatio: computed(() => window.innerWidth / window.innerHeight)
+  });
+  function t(n) {
+    return e[n];
+  }
+  function o(n, r) {
+    e[n] = r;
+  }
+  const a = {
+    state: e,
+    ...toRefs(e),
+    getState: t,
+    setState: o
+  };
+  return provide(Ce, a), a;
+}
+var D = () => inject(Ce, {
+  state: shallowReactive({
+    camera: void 0,
+    cameras: [],
+    scene: void 0,
+    renderer: void 0
+  })
+});
+function lt() {
+  var s;
+  const e = shallowRef(new Raycaster()), t = ref(new Vector2()), o = ref(null), { setState: a, state: n } = D();
+  a("raycaster", e.value), a("pointer", t), a("currentInstance", o);
+  function r(i) {
+    t.value.x = i.clientX / window.innerWidth * 2 - 1, t.value.y = -(i.clientY / window.innerHeight) * 2 + 1;
+  }
+  return (s = n == null ? void 0 : n.renderer) == null || s.domElement.addEventListener("pointermove", r), onUnmounted(() => {
+    var i;
+    (i = n == null ? void 0 : n.renderer) == null || i.domElement.removeEventListener("pointermove", r);
+  }), {
+    raycaster: e,
+    pointer: t
+  };
+}
+var Pt = true;
+var re = "[TresJS ▲ ■ ●] ";
+function I() {
+  function e(a, n) {
+    console.error(`${re} ${a}`, n || "");
+  }
+  function t(a) {
+    console.warn(`${re} ${a}`);
+  }
+  function o(a, n) {
+  }
+  return {
+    logError: e,
+    logWarning: t,
+    logMessage: o
+  };
+}
+function Rt() {
+  const { logWarning: e } = I();
+  function t(a, n, r) {
+    let s = null;
+    return a.traverse((i) => {
+      i[n] === r && (s = i);
+    }), s || e(`Child with ${n} '${r}' not found.`), s;
+  }
+  function o(a, n) {
+    return t(a, "name", n);
+  }
+  return {
+    seek: t,
+    seekByName: o
+  };
+}
+var dt = /^on[^a-z]/;
+var pt = (e) => dt.test(e);
+var oe = null;
+var ie = {
+  GEOMETRY_VIA_PROP: "tres__geometryViaProp",
+  MATERIAL_VIA_PROP: "tres__materialViaProp"
+};
+var { logError: se } = I();
+var mt = {
+  createElement(e, t, o, a) {
+    var c, u;
+    if (a || (a = {}), a.args || (a.args = []), e === "template" || ot(e))
+      return null;
+    let n = e.replace("Tres", ""), r;
+    if (e === "primitive") {
+      (a == null ? void 0 : a.object) === void 0 && se("Tres primitives need a prop 'object'");
+      const f = a.object;
+      n = f.type, r = Object.assign(f, { type: n, attach: a.attach, primitive: true });
+    } else {
+      const f = he.value[n];
+      f || se(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`), r = Object.assign(new f(...a.args), { type: n, attach: a.attach });
+    }
+    if (r.isCamera) {
+      a != null && a.position || r.position.set(3, 3, 3), a != null && a.lookAt || r.lookAt(0, 0, 0);
+      const { pushCamera: f } = N();
+      f(r);
+    }
+    (a == null ? void 0 : a.attach) === void 0 && (r.isMaterial ? r.attach = "material" : r.isBufferGeometry && (r.attach = "geometry"));
+    const { GEOMETRY_VIA_PROP: s, MATERIAL_VIA_PROP: i } = ie;
+    return r.isObject3D && ((c = a == null ? void 0 : a.material) != null && c.isMaterial && (r.userData[i] = true), (u = a == null ? void 0 : a.geometry) != null && u.isBufferGeometry && (r.userData[s] = true)), r.events = {}, r;
+  },
+  insert(e, t) {
+    var o, a;
+    if (((e == null ? void 0 : e.__vnode.type) === "TresGroup" || (e == null ? void 0 : e.__vnode.type) === "TresObject3D") && t === null && !((a = (o = e == null ? void 0 : e.__vnode) == null ? void 0 : o.ctx) != null && a.asyncResolved)) {
+      oe = e;
+      return;
+    }
+    t || (t = oe), e != null && e.isObject3D && (t != null && t.isObject3D) ? (t.add(e), e.dispatchEvent({ type: "added" })) : typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[t == null ? void 0 : t.attach], t && (t[e.attach] = e));
+  },
+  remove(e) {
+    var t, o;
+    if (e) {
+      if (e.isObject3D) {
+        const a = e, n = (r) => {
+          var c, u;
+          const { GEOMETRY_VIA_PROP: s, MATERIAL_VIA_PROP: i } = ie;
+          r.userData[i] || (c = r.material) == null || c.dispose(), r.userData[s] || (u = r.geometry) == null || u.dispose();
+        };
+        a.traverse((r) => n(r)), n(a);
+      }
+      (t = e.removeFromParent) == null || t.call(e), (o = e.dispose) == null || o.call(e);
+    }
+  },
+  patchProp(e, t, o, a) {
+    if (e) {
+      let n = e, r = t, s = z(r), i = n == null ? void 0 : n[s];
+      if (n.type === "BufferGeometry") {
+        n.setAttribute(
+          z(r),
+          new BufferAttribute(...a)
+        );
+        return;
+      }
+      if (r.includes("-") && i === void 0) {
+        const u = r.split("-");
+        i = u.reduce((f, m) => f[z(m)], n), r = u.pop(), s = r.toLowerCase(), i != null && i.set || (n = u.reduce((f, m) => f[z(m)], n));
+      }
+      pt(r) && (e.events[r] = a);
+      let c = a;
+      if (c === "" && (c = true), isFunction(i)) {
+        Array.isArray(c) ? e[s](...c) : e[s](c);
+        return;
+      }
+      !(i != null && i.set) && !isFunction(i) ? n[s] = c : i.constructor === c.constructor && (i != null && i.copy) ? i == null || i.copy(c) : Array.isArray(c) ? i.set(...c) : !i.isColor && i.setScalar ? i.setScalar(c) : i.set(c);
+    }
+  },
+  parentNode(e) {
+    return (e == null ? void 0 : e.parent) || null;
+  },
+  createText: () => void 0,
+  createComment: () => void 0,
+  setText: () => void 0,
+  setElementText: () => void 0,
+  nextSibling: () => void 0,
+  querySelector: () => void 0,
+  setScopeId: () => void 0,
+  cloneNode: () => void 0,
+  insertStaticContent: () => void 0
+};
+var { createApp: vt } = createRenderer(mt);
+var gt = (e) => {
+  const t = vt(o);
+  function o() {
+    return e && e.default ? e.default() : [];
+  }
+  return t;
+};
+we(three_module_exports);
+var { logWarning: ht } = I();
+var wt = defineComponent({
+  name: "TresScene",
+  props: [
+    "shadows",
+    "shadowMapType",
+    "physicallyCorrectLights",
+    "useLegacyLights",
+    "outputEncoding",
+    "toneMapping",
+    "toneMappingExposure",
+    "context",
+    "powerPreference",
+    "preserveDrawingBuffer",
+    "clearColor",
+    "windowSize",
+    "preset"
+  ],
+  setup(e, { slots: t, expose: o }) {
+    e.physicallyCorrectLights === true && ht("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
+    const a = ref(), n = ref(), r = new Scene(), { setState: s } = D();
+    s("scene", r), s("canvas", n), s("container", a);
+    const { pushCamera: i } = N();
+    i(new PerspectiveCamera()), onMounted(() => {
+      c();
+    }), onUnmounted(() => {
+      s("renderer", null);
+    });
+    function c() {
+      const { renderer: m } = st(e), { activeCamera: d } = N(), { onLoop: P } = Me(), { raycaster: g, pointer: R } = lt();
+      let w = null, p = null;
+      watchEffect(() => {
+        d.value && g.value.setFromCamera(R.value, d.value);
+      }), P(() => {
+        var x, b, y, M, E, L, h2, T, C, O;
+        if (d.value && ((x = m.value) == null || x.render(r, d.value)), g.value) {
+          const B = g.value.intersectObjects(r.children);
+          B.length > 0 ? (p = B[0], w === null && ((M = (y = (b = p.object) == null ? void 0 : b.events) == null ? void 0 : y.onPointerEnter) == null || M.call(y, p)), (h2 = (L = (E = p.object) == null ? void 0 : E.events) == null ? void 0 : L.onPointerMove) == null || h2.call(L, p)) : w !== null && ((O = (C = (T = p == null ? void 0 : p.object) == null ? void 0 : T.events) == null ? void 0 : C.onPointerLeave) == null || O.call(C, w), p = null), w = p;
+        }
+      }), useEventListener(n.value, "click", () => {
+        var x, b, y;
+        p !== null && ((y = (b = (x = p.object) == null ? void 0 : x.events) == null ? void 0 : b.onClick) == null || y.call(b, p));
+      });
+    }
+    let u;
+    function f() {
+      u = gt(t), u.provide("useTres", D()), u.provide("extend", we), u.mount(r);
+    }
+    return f(), o({
+      scene: r
+    }), () => h(
+      h(
+        "div",
+        {
+          ref: a,
+          "data-scene": r.uuid,
+          key: r.uuid,
+          style: {
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            pointerEvents: "auto",
+            touchAction: "none"
+          }
+        },
+        [
+          h(
+            "div",
+            {
+              style: {
+                width: "100%",
+                height: "100%"
+              }
+            },
+            [
+              h("canvas", {
+                ref: n,
+                "data-scene": r.uuid,
+                style: {
+                  display: "block",
+                  width: "100%",
+                  height: "100%",
+                  position: e.windowSize ? "fixed" : "absolute",
+                  top: 0,
+                  left: 0
+                }
+              })
+            ]
+          )
+        ]
+      )
+    );
+  }
+});
+var bt = defineComponent({
+  name: "TresCanvas",
+  props: [
+    "shadows",
+    "shadowMapType",
+    "physicallyCorrectLights",
+    "useLegacyLights",
+    "outputEncoding",
+    "toneMapping",
+    "toneMappingExposure",
+    "context",
+    "powerPreference",
+    "preserveDrawingBuffer",
+    "clearColor",
+    "windowSize",
+    "preset"
+  ],
+  setup(e, { slots: t, expose: o }) {
+    const a = ft();
+    return o(a), () => h(wt, e, t);
+  }
+});
+var Lt = {
+  install(e) {
+    e.component("TresCanvas", bt);
+  }
+};
+
+export {
+  he,
+  we,
+  Qe,
+  N,
+  Me,
+  st,
+  ct,
+  Et,
+  Ct,
+  ft,
+  D,
+  lt,
+  Pt,
+  I,
+  Rt,
+  bt,
+  Lt
+};
+//# sourceMappingURL=chunk-DESKY23Y.js.map

docs/.vitepress/cache/deps/chunk-JC4IRQUL.js

@@ -0,0 +1,10 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export {
+  __export
+};
+//# sourceMappingURL=chunk-JC4IRQUL.js.map

docs/.vitepress/cache/deps/chunk-JC4IRQUL.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

docs/.vitepress/cache/deps/gsap.js

@@ -0,0 +1,4273 @@
+import "./chunk-JC4IRQUL.js";
+
+// node_modules/.pnpm/gsap@3.11.5/node_modules/gsap/gsap-core.js
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+  return self;
+}
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  subClass.__proto__ = superClass;
+}
+var _config = {
+  autoSleep: 120,
+  force3D: "auto",
+  nullTargetWarn: 1,
+  units: {
+    lineHeight: ""
+  }
+};
+var _defaults = {
+  duration: 0.5,
+  overwrite: false,
+  delay: 0
+};
+var _suppressOverwrites;
+var _reverting;
+var _context;
+var _bigNum = 1e8;
+var _tinyNum = 1 / _bigNum;
+var _2PI = Math.PI * 2;
+var _HALF_PI = _2PI / 4;
+var _gsID = 0;
+var _sqrt = Math.sqrt;
+var _cos = Math.cos;
+var _sin = Math.sin;
+var _isString = function _isString2(value) {
+  return typeof value === "string";
+};
+var _isFunction = function _isFunction2(value) {
+  return typeof value === "function";
+};
+var _isNumber = function _isNumber2(value) {
+  return typeof value === "number";
+};
+var _isUndefined = function _isUndefined2(value) {
+  return typeof value === "undefined";
+};
+var _isObject = function _isObject2(value) {
+  return typeof value === "object";
+};
+var _isNotFalse = function _isNotFalse2(value) {
+  return value !== false;
+};
+var _windowExists = function _windowExists2() {
+  return typeof window !== "undefined";
+};
+var _isFuncOrString = function _isFuncOrString2(value) {
+  return _isFunction(value) || _isString(value);
+};
+var _isTypedArray = typeof ArrayBuffer === "function" && ArrayBuffer.isView || function() {
+};
+var _isArray = Array.isArray;
+var _strictNumExp = /(?:-?\.?\d|\.)+/gi;
+var _numExp = /[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g;
+var _numWithUnitExp = /[-+=.]*\d+[.e-]*\d*[a-z%]*/g;
+var _complexStringNumExp = /[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi;
+var _relExp = /[+-]=-?[.\d]+/;
+var _delimitedValueExp = /[^,'"\[\]\s]+/gi;
+var _unitExp = /^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i;
+var _globalTimeline;
+var _win;
+var _coreInitted;
+var _doc;
+var _globals = {};
+var _installScope = {};
+var _coreReady;
+var _install = function _install2(scope) {
+  return (_installScope = _merge(scope, _globals)) && gsap;
+};
+var _missingPlugin = function _missingPlugin2(property, value) {
+  return console.warn("Invalid property", property, "set to", value, "Missing plugin? gsap.registerPlugin()");
+};
+var _warn = function _warn2(message, suppress) {
+  return !suppress && console.warn(message);
+};
+var _addGlobal = function _addGlobal2(name, obj) {
+  return name && (_globals[name] = obj) && _installScope && (_installScope[name] = obj) || _globals;
+};
+var _emptyFunc = function _emptyFunc2() {
+  return 0;
+};
+var _startAtRevertConfig = {
+  suppressEvents: true,
+  isStart: true,
+  kill: false
+};
+var _revertConfigNoKill = {
+  suppressEvents: true,
+  kill: false
+};
+var _revertConfig = {
+  suppressEvents: true
+};
+var _reservedProps = {};
+var _lazyTweens = [];
+var _lazyLookup = {};
+var _lastRenderedFrame;
+var _plugins = {};
+var _effects = {};
+var _nextGCFrame = 30;
+var _harnessPlugins = [];
+var _callbackNames = "";
+var _harness = function _harness2(targets) {
+  var target = targets[0], harnessPlugin, i;
+  _isObject(target) || _isFunction(target) || (targets = [targets]);
+  if (!(harnessPlugin = (target._gsap || {}).harness)) {
+    i = _harnessPlugins.length;
+    while (i-- && !_harnessPlugins[i].targetTest(target)) {
+    }
+    harnessPlugin = _harnessPlugins[i];
+  }
+  i = targets.length;
+  while (i--) {
+    targets[i] && (targets[i]._gsap || (targets[i]._gsap = new GSCache(targets[i], harnessPlugin))) || targets.splice(i, 1);
+  }
+  return targets;
+};
+var _getCache = function _getCache2(target) {
+  return target._gsap || _harness(toArray(target))[0]._gsap;
+};
+var _getProperty = function _getProperty2(target, property, v) {
+  return (v = target[property]) && _isFunction(v) ? target[property]() : _isUndefined(v) && target.getAttribute && target.getAttribute(property) || v;
+};
+var _forEachName = function _forEachName2(names, func) {
+  return (names = names.split(",")).forEach(func) || names;
+};
+var _round = function _round2(value) {
+  return Math.round(value * 1e5) / 1e5 || 0;
+};
+var _roundPrecise = function _roundPrecise2(value) {
+  return Math.round(value * 1e7) / 1e7 || 0;
+};
+var _parseRelative = function _parseRelative2(start, value) {
+  var operator = value.charAt(0), end = parseFloat(value.substr(2));
+  start = parseFloat(start);
+  return operator === "+" ? start + end : operator === "-" ? start - end : operator === "*" ? start * end : start / end;
+};
+var _arrayContainsAny = function _arrayContainsAny2(toSearch, toFind) {
+  var l = toFind.length, i = 0;
+  for (; toSearch.indexOf(toFind[i]) < 0 && ++i < l; ) {
+  }
+  return i < l;
+};
+var _lazyRender = function _lazyRender2() {
+  var l = _lazyTweens.length, a = _lazyTweens.slice(0), i, tween;
+  _lazyLookup = {};
+  _lazyTweens.length = 0;
+  for (i = 0; i < l; i++) {
+    tween = a[i];
+    tween && tween._lazy && (tween.render(tween._lazy[0], tween._lazy[1], true)._lazy = 0);
+  }
+};
+var _lazySafeRender = function _lazySafeRender2(animation, time, suppressEvents, force) {
+  _lazyTweens.length && !_reverting && _lazyRender();
+  animation.render(time, suppressEvents, force || _reverting && time < 0 && (animation._initted || animation._startAt));
+  _lazyTweens.length && !_reverting && _lazyRender();
+};
+var _numericIfPossible = function _numericIfPossible2(value) {
+  var n = parseFloat(value);
+  return (n || n === 0) && (value + "").match(_delimitedValueExp).length < 2 ? n : _isString(value) ? value.trim() : value;
+};
+var _passThrough = function _passThrough2(p) {
+  return p;
+};
+var _setDefaults = function _setDefaults2(obj, defaults2) {
+  for (var p in defaults2) {
+    p in obj || (obj[p] = defaults2[p]);
+  }
+  return obj;
+};
+var _setKeyframeDefaults = function _setKeyframeDefaults2(excludeDuration) {
+  return function(obj, defaults2) {
+    for (var p in defaults2) {
+      p in obj || p === "duration" && excludeDuration || p === "ease" || (obj[p] = defaults2[p]);
+    }
+  };
+};
+var _merge = function _merge2(base, toMerge) {
+  for (var p in toMerge) {
+    base[p] = toMerge[p];
+  }
+  return base;
+};
+var _mergeDeep = function _mergeDeep2(base, toMerge) {
+  for (var p in toMerge) {
+    p !== "__proto__" && p !== "constructor" && p !== "prototype" && (base[p] = _isObject(toMerge[p]) ? _mergeDeep2(base[p] || (base[p] = {}), toMerge[p]) : toMerge[p]);
+  }
+  return base;
+};
+var _copyExcluding = function _copyExcluding2(obj, excluding) {
+  var copy = {}, p;
+  for (p in obj) {
+    p in excluding || (copy[p] = obj[p]);
+  }
+  return copy;
+};
+var _inheritDefaults = function _inheritDefaults2(vars) {
+  var parent = vars.parent || _globalTimeline, func = vars.keyframes ? _setKeyframeDefaults(_isArray(vars.keyframes)) : _setDefaults;
+  if (_isNotFalse(vars.inherit)) {
+    while (parent) {
+      func(vars, parent.vars.defaults);
+      parent = parent.parent || parent._dp;
+    }
+  }
+  return vars;
+};
+var _arraysMatch = function _arraysMatch2(a1, a2) {
+  var i = a1.length, match = i === a2.length;
+  while (match && i-- && a1[i] === a2[i]) {
+  }
+  return i < 0;
+};
+var _addLinkedListItem = function _addLinkedListItem2(parent, child, firstProp, lastProp, sortBy) {
+  if (firstProp === void 0) {
+    firstProp = "_first";
+  }
+  if (lastProp === void 0) {
+    lastProp = "_last";
+  }
+  var prev = parent[lastProp], t;
+  if (sortBy) {
+    t = child[sortBy];
+    while (prev && prev[sortBy] > t) {
+      prev = prev._prev;
+    }
+  }
+  if (prev) {
+    child._next = prev._next;
+    prev._next = child;
+  } else {
+    child._next = parent[firstProp];
+    parent[firstProp] = child;
+  }
+  if (child._next) {
+    child._next._prev = child;
+  } else {
+    parent[lastProp] = child;
+  }
+  child._prev = prev;
+  child.parent = child._dp = parent;
+  return child;
+};
+var _removeLinkedListItem = function _removeLinkedListItem2(parent, child, firstProp, lastProp) {
+  if (firstProp === void 0) {
+    firstProp = "_first";
+  }
+  if (lastProp === void 0) {
+    lastProp = "_last";
+  }
+  var prev = child._prev, next = child._next;
+  if (prev) {
+    prev._next = next;
+  } else if (parent[firstProp] === child) {
+    parent[firstProp] = next;
+  }
+  if (next) {
+    next._prev = prev;
+  } else if (parent[lastProp] === child) {
+    parent[lastProp] = prev;
+  }
+  child._next = child._prev = child.parent = null;
+};
+var _removeFromParent = function _removeFromParent2(child, onlyIfParentHasAutoRemove) {
+  child.parent && (!onlyIfParentHasAutoRemove || child.parent.autoRemoveChildren) && child.parent.remove(child);
+  child._act = 0;
+};
+var _uncache = function _uncache2(animation, child) {
+  if (animation && (!child || child._end > animation._dur || child._start < 0)) {
+    var a = animation;
+    while (a) {
+      a._dirty = 1;
+      a = a.parent;
+    }
+  }
+  return animation;
+};
+var _recacheAncestors = function _recacheAncestors2(animation) {
+  var parent = animation.parent;
+  while (parent && parent.parent) {
+    parent._dirty = 1;
+    parent.totalDuration();
+    parent = parent.parent;
+  }
+  return animation;
+};
+var _rewindStartAt = function _rewindStartAt2(tween, totalTime, suppressEvents, force) {
+  return tween._startAt && (_reverting ? tween._startAt.revert(_revertConfigNoKill) : tween.vars.immediateRender && !tween.vars.autoRevert || tween._startAt.render(totalTime, true, force));
+};
+var _hasNoPausedAncestors = function _hasNoPausedAncestors2(animation) {
+  return !animation || animation._ts && _hasNoPausedAncestors2(animation.parent);
+};
+var _elapsedCycleDuration = function _elapsedCycleDuration2(animation) {
+  return animation._repeat ? _animationCycle(animation._tTime, animation = animation.duration() + animation._rDelay) * animation : 0;
+};
+var _animationCycle = function _animationCycle2(tTime, cycleDuration) {
+  var whole = Math.floor(tTime /= cycleDuration);
+  return tTime && whole === tTime ? whole - 1 : whole;
+};
+var _parentToChildTotalTime = function _parentToChildTotalTime2(parentTime, child) {
+  return (parentTime - child._start) * child._ts + (child._ts >= 0 ? 0 : child._dirty ? child.totalDuration() : child._tDur);
+};
+var _setEnd = function _setEnd2(animation) {
+  return animation._end = _roundPrecise(animation._start + (animation._tDur / Math.abs(animation._ts || animation._rts || _tinyNum) || 0));
+};
+var _alignPlayhead = function _alignPlayhead2(animation, totalTime) {
+  var parent = animation._dp;
+  if (parent && parent.smoothChildTiming && animation._ts) {
+    animation._start = _roundPrecise(parent._time - (animation._ts > 0 ? totalTime / animation._ts : ((animation._dirty ? animation.totalDuration() : animation._tDur) - totalTime) / -animation._ts));
+    _setEnd(animation);
+    parent._dirty || _uncache(parent, animation);
+  }
+  return animation;
+};
+var _postAddChecks = function _postAddChecks2(timeline2, child) {
+  var t;
+  if (child._time || child._initted && !child._dur) {
+    t = _parentToChildTotalTime(timeline2.rawTime(), child);
+    if (!child._dur || _clamp(0, child.totalDuration(), t) - child._tTime > _tinyNum) {
+      child.render(t, true);
+    }
+  }
+  if (_uncache(timeline2, child)._dp && timeline2._initted && timeline2._time >= timeline2._dur && timeline2._ts) {
+    if (timeline2._dur < timeline2.duration()) {
+      t = timeline2;
+      while (t._dp) {
+        t.rawTime() >= 0 && t.totalTime(t._tTime);
+        t = t._dp;
+      }
+    }
+    timeline2._zTime = -_tinyNum;
+  }
+};
+var _addToTimeline = function _addToTimeline2(timeline2, child, position, skipChecks) {
+  child.parent && _removeFromParent(child);
+  child._start = _roundPrecise((_isNumber(position) ? position : position || timeline2 !== _globalTimeline ? _parsePosition(timeline2, position, child) : timeline2._time) + child._delay);
+  child._end = _roundPrecise(child._start + (child.totalDuration() / Math.abs(child.timeScale()) || 0));
+  _addLinkedListItem(timeline2, child, "_first", "_last", timeline2._sort ? "_start" : 0);
+  _isFromOrFromStart(child) || (timeline2._recent = child);
+  skipChecks || _postAddChecks(timeline2, child);
+  timeline2._ts < 0 && _alignPlayhead(timeline2, timeline2._tTime);
+  return timeline2;
+};
+var _scrollTrigger = function _scrollTrigger2(animation, trigger) {
+  return (_globals.ScrollTrigger || _missingPlugin("scrollTrigger", trigger)) && _globals.ScrollTrigger.create(trigger, animation);
+};
+var _attemptInitTween = function _attemptInitTween2(tween, time, force, suppressEvents, tTime) {
+  _initTween(tween, time, tTime);
+  if (!tween._initted) {
+    return 1;
+  }
+  if (!force && tween._pt && !_reverting && (tween._dur && tween.vars.lazy !== false || !tween._dur && tween.vars.lazy) && _lastRenderedFrame !== _ticker.frame) {
+    _lazyTweens.push(tween);
+    tween._lazy = [tTime, suppressEvents];
+    return 1;
+  }
+};
+var _parentPlayheadIsBeforeStart = function _parentPlayheadIsBeforeStart2(_ref) {
+  var parent = _ref.parent;
+  return parent && parent._ts && parent._initted && !parent._lock && (parent.rawTime() < 0 || _parentPlayheadIsBeforeStart2(parent));
+};
+var _isFromOrFromStart = function _isFromOrFromStart2(_ref2) {
+  var data = _ref2.data;
+  return data === "isFromStart" || data === "isStart";
+};
+var _renderZeroDurationTween = function _renderZeroDurationTween2(tween, totalTime, suppressEvents, force) {
+  var prevRatio = tween.ratio, ratio = totalTime < 0 || !totalTime && (!tween._start && _parentPlayheadIsBeforeStart(tween) && !(!tween._initted && _isFromOrFromStart(tween)) || (tween._ts < 0 || tween._dp._ts < 0) && !_isFromOrFromStart(tween)) ? 0 : 1, repeatDelay = tween._rDelay, tTime = 0, pt, iteration, prevIteration;
+  if (repeatDelay && tween._repeat) {
+    tTime = _clamp(0, tween._tDur, totalTime);
+    iteration = _animationCycle(tTime, repeatDelay);
+    tween._yoyo && iteration & 1 && (ratio = 1 - ratio);
+    if (iteration !== _animationCycle(tween._tTime, repeatDelay)) {
+      prevRatio = 1 - ratio;
+      tween.vars.repeatRefresh && tween._initted && tween.invalidate();
+    }
+  }
+  if (ratio !== prevRatio || _reverting || force || tween._zTime === _tinyNum || !totalTime && tween._zTime) {
+    if (!tween._initted && _attemptInitTween(tween, totalTime, force, suppressEvents, tTime)) {
+      return;
+    }
+    prevIteration = tween._zTime;
+    tween._zTime = totalTime || (suppressEvents ? _tinyNum : 0);
+    suppressEvents || (suppressEvents = totalTime && !prevIteration);
+    tween.ratio = ratio;
+    tween._from && (ratio = 1 - ratio);
+    tween._time = 0;
+    tween._tTime = tTime;
+    pt = tween._pt;
+    while (pt) {
+      pt.r(ratio, pt.d);
+      pt = pt._next;
+    }
+    totalTime < 0 && _rewindStartAt(tween, totalTime, suppressEvents, true);
+    tween._onUpdate && !suppressEvents && _callback(tween, "onUpdate");
+    tTime && tween._repeat && !suppressEvents && tween.parent && _callback(tween, "onRepeat");
+    if ((totalTime >= tween._tDur || totalTime < 0) && tween.ratio === ratio) {
+      ratio && _removeFromParent(tween, 1);
+      if (!suppressEvents && !_reverting) {
+        _callback(tween, ratio ? "onComplete" : "onReverseComplete", true);
+        tween._prom && tween._prom();
+      }
+    }
+  } else if (!tween._zTime) {
+    tween._zTime = totalTime;
+  }
+};
+var _findNextPauseTween = function _findNextPauseTween2(animation, prevTime, time) {
+  var child;
+  if (time > prevTime) {
+    child = animation._first;
+    while (child && child._start <= time) {
+      if (child.data === "isPause" && child._start > prevTime) {
+        return child;
+      }
+      child = child._next;
+    }
+  } else {
+    child = animation._last;
+    while (child && child._start >= time) {
+      if (child.data === "isPause" && child._start < prevTime) {
+        return child;
+      }
+      child = child._prev;
+    }
+  }
+};
+var _setDuration = function _setDuration2(animation, duration, skipUncache, leavePlayhead) {
+  var repeat = animation._repeat, dur = _roundPrecise(duration) || 0, totalProgress = animation._tTime / animation._tDur;
+  totalProgress && !leavePlayhead && (animation._time *= dur / animation._dur);
+  animation._dur = dur;
+  animation._tDur = !repeat ? dur : repeat < 0 ? 1e10 : _roundPrecise(dur * (repeat + 1) + animation._rDelay * repeat);
+  totalProgress > 0 && !leavePlayhead && _alignPlayhead(animation, animation._tTime = animation._tDur * totalProgress);
+  animation.parent && _setEnd(animation);
+  skipUncache || _uncache(animation.parent, animation);
+  return animation;
+};
+var _onUpdateTotalDuration = function _onUpdateTotalDuration2(animation) {
+  return animation instanceof Timeline ? _uncache(animation) : _setDuration(animation, animation._dur);
+};
+var _zeroPosition = {
+  _start: 0,
+  endTime: _emptyFunc,
+  totalDuration: _emptyFunc
+};
+var _parsePosition = function _parsePosition2(animation, position, percentAnimation) {
+  var labels = animation.labels, recent = animation._recent || _zeroPosition, clippedDuration = animation.duration() >= _bigNum ? recent.endTime(false) : animation._dur, i, offset, isPercent;
+  if (_isString(position) && (isNaN(position) || position in labels)) {
+    offset = position.charAt(0);
+    isPercent = position.substr(-1) === "%";
+    i = position.indexOf("=");
+    if (offset === "<" || offset === ">") {
+      i >= 0 && (position = position.replace(/=/, ""));
+      return (offset === "<" ? recent._start : recent.endTime(recent._repeat >= 0)) + (parseFloat(position.substr(1)) || 0) * (isPercent ? (i < 0 ? recent : percentAnimation).totalDuration() / 100 : 1);
+    }
+    if (i < 0) {
+      position in labels || (labels[position] = clippedDuration);
+      return labels[position];
+    }
+    offset = parseFloat(position.charAt(i - 1) + position.substr(i + 1));
+    if (isPercent && percentAnimation) {
+      offset = offset / 100 * (_isArray(percentAnimation) ? percentAnimation[0] : percentAnimation).totalDuration();
+    }
+    return i > 1 ? _parsePosition2(animation, position.substr(0, i - 1), percentAnimation) + offset : clippedDuration + offset;
+  }
+  return position == null ? clippedDuration : +position;
+};
+var _createTweenType = function _createTweenType2(type, params, timeline2) {
+  var isLegacy = _isNumber(params[1]), varsIndex = (isLegacy ? 2 : 1) + (type < 2 ? 0 : 1), vars = params[varsIndex], irVars, parent;
+  isLegacy && (vars.duration = params[1]);
+  vars.parent = timeline2;
+  if (type) {
+    irVars = vars;
+    parent = timeline2;
+    while (parent && !("immediateRender" in irVars)) {
+      irVars = parent.vars.defaults || {};
+      parent = _isNotFalse(parent.vars.inherit) && parent.parent;
+    }
+    vars.immediateRender = _isNotFalse(irVars.immediateRender);
+    type < 2 ? vars.runBackwards = 1 : vars.startAt = params[varsIndex - 1];
+  }
+  return new Tween(params[0], vars, params[varsIndex + 1]);
+};
+var _conditionalReturn = function _conditionalReturn2(value, func) {
+  return value || value === 0 ? func(value) : func;
+};
+var _clamp = function _clamp2(min, max, value) {
+  return value < min ? min : value > max ? max : value;
+};
+var getUnit = function getUnit2(value, v) {
+  return !_isString(value) || !(v = _unitExp.exec(value)) ? "" : v[1];
+};
+var clamp = function clamp2(min, max, value) {
+  return _conditionalReturn(value, function(v) {
+    return _clamp(min, max, v);
+  });
+};
+var _slice = [].slice;
+var _isArrayLike = function _isArrayLike2(value, nonEmpty) {
+  return value && _isObject(value) && "length" in value && (!nonEmpty && !value.length || value.length - 1 in value && _isObject(value[0])) && !value.nodeType && value !== _win;
+};
+var _flatten = function _flatten2(ar, leaveStrings, accumulator) {
+  if (accumulator === void 0) {
+    accumulator = [];
+  }
+  return ar.forEach(function(value) {
+    var _accumulator;
+    return _isString(value) && !leaveStrings || _isArrayLike(value, 1) ? (_accumulator = accumulator).push.apply(_accumulator, toArray(value)) : accumulator.push(value);
+  }) || accumulator;
+};
+var toArray = function toArray2(value, scope, leaveStrings) {
+  return _context && !scope && _context.selector ? _context.selector(value) : _isString(value) && !leaveStrings && (_coreInitted || !_wake()) ? _slice.call((scope || _doc).querySelectorAll(value), 0) : _isArray(value) ? _flatten(value, leaveStrings) : _isArrayLike(value) ? _slice.call(value, 0) : value ? [value] : [];
+};
+var selector = function selector2(value) {
+  value = toArray(value)[0] || _warn("Invalid scope") || {};
+  return function(v) {
+    var el = value.current || value.nativeElement || value;
+    return toArray(v, el.querySelectorAll ? el : el === value ? _warn("Invalid scope") || _doc.createElement("div") : value);
+  };
+};
+var shuffle = function shuffle2(a) {
+  return a.sort(function() {
+    return 0.5 - Math.random();
+  });
+};
+var distribute = function distribute2(v) {
+  if (_isFunction(v)) {
+    return v;
+  }
+  var vars = _isObject(v) ? v : {
+    each: v
+  }, ease = _parseEase(vars.ease), from = vars.from || 0, base = parseFloat(vars.base) || 0, cache = {}, isDecimal = from > 0 && from < 1, ratios = isNaN(from) || isDecimal, axis = vars.axis, ratioX = from, ratioY = from;
+  if (_isString(from)) {
+    ratioX = ratioY = {
+      center: 0.5,
+      edges: 0.5,
+      end: 1
+    }[from] || 0;
+  } else if (!isDecimal && ratios) {
+    ratioX = from[0];
+    ratioY = from[1];
+  }
+  return function(i, target, a) {
+    var l = (a || vars).length, distances = cache[l], originX, originY, x, y, d, j, max, min, wrapAt;
+    if (!distances) {
+      wrapAt = vars.grid === "auto" ? 0 : (vars.grid || [1, _bigNum])[1];
+      if (!wrapAt) {
+        max = -_bigNum;
+        while (max < (max = a[wrapAt++].getBoundingClientRect().left) && wrapAt < l) {
+        }
+        wrapAt--;
+      }
+      distances = cache[l] = [];
+      originX = ratios ? Math.min(wrapAt, l) * ratioX - 0.5 : from % wrapAt;
+      originY = wrapAt === _bigNum ? 0 : ratios ? l * ratioY / wrapAt - 0.5 : from / wrapAt | 0;
+      max = 0;
+      min = _bigNum;
+      for (j = 0; j < l; j++) {
+        x = j % wrapAt - originX;
+        y = originY - (j / wrapAt | 0);
+        distances[j] = d = !axis ? _sqrt(x * x + y * y) : Math.abs(axis === "y" ? y : x);
+        d > max && (max = d);
+        d < min && (min = d);
+      }
+      from === "random" && shuffle(distances);
+      distances.max = max - min;
+      distances.min = min;
+      distances.v = l = (parseFloat(vars.amount) || parseFloat(vars.each) * (wrapAt > l ? l - 1 : !axis ? Math.max(wrapAt, l / wrapAt) : axis === "y" ? l / wrapAt : wrapAt) || 0) * (from === "edges" ? -1 : 1);
+      distances.b = l < 0 ? base - l : base;
+      distances.u = getUnit(vars.amount || vars.each) || 0;
+      ease = ease && l < 0 ? _invertEase(ease) : ease;
+    }
+    l = (distances[i] - distances.min) / distances.max || 0;
+    return _roundPrecise(distances.b + (ease ? ease(l) : l) * distances.v) + distances.u;
+  };
+};
+var _roundModifier = function _roundModifier2(v) {
+  var p = Math.pow(10, ((v + "").split(".")[1] || "").length);
+  return function(raw) {
+    var n = _roundPrecise(Math.round(parseFloat(raw) / v) * v * p);
+    return (n - n % 1) / p + (_isNumber(raw) ? 0 : getUnit(raw));
+  };
+};
+var snap = function snap2(snapTo, value) {
+  var isArray = _isArray(snapTo), radius, is2D;
+  if (!isArray && _isObject(snapTo)) {
+    radius = isArray = snapTo.radius || _bigNum;
+    if (snapTo.values) {
+      snapTo = toArray(snapTo.values);
+      if (is2D = !_isNumber(snapTo[0])) {
+        radius *= radius;
+      }
+    } else {
+      snapTo = _roundModifier(snapTo.increment);
+    }
+  }
+  return _conditionalReturn(value, !isArray ? _roundModifier(snapTo) : _isFunction(snapTo) ? function(raw) {
+    is2D = snapTo(raw);
+    return Math.abs(is2D - raw) <= radius ? is2D : raw;
+  } : function(raw) {
+    var x = parseFloat(is2D ? raw.x : raw), y = parseFloat(is2D ? raw.y : 0), min = _bigNum, closest = 0, i = snapTo.length, dx, dy;
+    while (i--) {
+      if (is2D) {
+        dx = snapTo[i].x - x;
+        dy = snapTo[i].y - y;
+        dx = dx * dx + dy * dy;
+      } else {
+        dx = Math.abs(snapTo[i] - x);
+      }
+      if (dx < min) {
+        min = dx;
+        closest = i;
+      }
+    }
+    closest = !radius || min <= radius ? snapTo[closest] : raw;
+    return is2D || closest === raw || _isNumber(raw) ? closest : closest + getUnit(raw);
+  });
+};
+var random = function random2(min, max, roundingIncrement, returnFunction) {
+  return _conditionalReturn(_isArray(min) ? !max : roundingIncrement === true ? !!(roundingIncrement = 0) : !returnFunction, function() {
+    return _isArray(min) ? min[~~(Math.random() * min.length)] : (roundingIncrement = roundingIncrement || 1e-5) && (returnFunction = roundingIncrement < 1 ? Math.pow(10, (roundingIncrement + "").length - 2) : 1) && Math.floor(Math.round((min - roundingIncrement / 2 + Math.random() * (max - min + roundingIncrement * 0.99)) / roundingIncrement) * roundingIncrement * returnFunction) / returnFunction;
+  });
+};
+var pipe = function pipe2() {
+  for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {
+    functions[_key] = arguments[_key];
+  }
+  return function(value) {
+    return functions.reduce(function(v, f) {
+      return f(v);
+    }, value);
+  };
+};
+var unitize = function unitize2(func, unit) {
+  return function(value) {
+    return func(parseFloat(value)) + (unit || getUnit(value));
+  };
+};
+var normalize = function normalize2(min, max, value) {
+  return mapRange(min, max, 0, 1, value);
+};
+var _wrapArray = function _wrapArray2(a, wrapper, value) {
+  return _conditionalReturn(value, function(index) {
+    return a[~~wrapper(index)];
+  });
+};
+var wrap = function wrap2(min, max, value) {
+  var range = max - min;
+  return _isArray(min) ? _wrapArray(min, wrap2(0, min.length), max) : _conditionalReturn(value, function(value2) {
+    return (range + (value2 - min) % range) % range + min;
+  });
+};
+var wrapYoyo = function wrapYoyo2(min, max, value) {
+  var range = max - min, total = range * 2;
+  return _isArray(min) ? _wrapArray(min, wrapYoyo2(0, min.length - 1), max) : _conditionalReturn(value, function(value2) {
+    value2 = (total + (value2 - min) % total) % total || 0;
+    return min + (value2 > range ? total - value2 : value2);
+  });
+};
+var _replaceRandom = function _replaceRandom2(value) {
+  var prev = 0, s = "", i, nums, end, isArray;
+  while (~(i = value.indexOf("random(", prev))) {
+    end = value.indexOf(")", i);
+    isArray = value.charAt(i + 7) === "[";
+    nums = value.substr(i + 7, end - i - 7).match(isArray ? _delimitedValueExp : _strictNumExp);
+    s += value.substr(prev, i - prev) + random(isArray ? nums : +nums[0], isArray ? 0 : +nums[1], +nums[2] || 1e-5);
+    prev = end + 1;
+  }
+  return s + value.substr(prev, value.length - prev);
+};
+var mapRange = function mapRange2(inMin, inMax, outMin, outMax, value) {
+  var inRange = inMax - inMin, outRange = outMax - outMin;
+  return _conditionalReturn(value, function(value2) {
+    return outMin + ((value2 - inMin) / inRange * outRange || 0);
+  });
+};
+var interpolate = function interpolate2(start, end, progress, mutate) {
+  var func = isNaN(start + end) ? 0 : function(p2) {
+    return (1 - p2) * start + p2 * end;
+  };
+  if (!func) {
+    var isString = _isString(start), master = {}, p, i, interpolators, l, il;
+    progress === true && (mutate = 1) && (progress = null);
+    if (isString) {
+      start = {
+        p: start
+      };
+      end = {
+        p: end
+      };
+    } else if (_isArray(start) && !_isArray(end)) {
+      interpolators = [];
+      l = start.length;
+      il = l - 2;
+      for (i = 1; i < l; i++) {
+        interpolators.push(interpolate2(start[i - 1], start[i]));
+      }
+      l--;
+      func = function func2(p2) {
+        p2 *= l;
+        var i2 = Math.min(il, ~~p2);
+        return interpolators[i2](p2 - i2);
+      };
+      progress = end;
+    } else if (!mutate) {
+      start = _merge(_isArray(start) ? [] : {}, start);
+    }
+    if (!interpolators) {
+      for (p in end) {
+        _addPropTween.call(master, start, p, "get", end[p]);
+      }
+      func = function func2(p2) {
+        return _renderPropTweens(p2, master) || (isString ? start.p : start);
+      };
+    }
+  }
+  return _conditionalReturn(progress, func);
+};
+var _getLabelInDirection = function _getLabelInDirection2(timeline2, fromTime, backward) {
+  var labels = timeline2.labels, min = _bigNum, p, distance, label;
+  for (p in labels) {
+    distance = labels[p] - fromTime;
+    if (distance < 0 === !!backward && distance && min > (distance = Math.abs(distance))) {
+      label = p;
+      min = distance;
+    }
+  }
+  return label;
+};
+var _callback = function _callback2(animation, type, executeLazyFirst) {
+  var v = animation.vars, callback = v[type], prevContext = _context, context3 = animation._ctx, params, scope, result;
+  if (!callback) {
+    return;
+  }
+  params = v[type + "Params"];
+  scope = v.callbackScope || animation;
+  executeLazyFirst && _lazyTweens.length && _lazyRender();
+  context3 && (_context = context3);
+  result = params ? callback.apply(scope, params) : callback.call(scope);
+  _context = prevContext;
+  return result;
+};
+var _interrupt = function _interrupt2(animation) {
+  _removeFromParent(animation);
+  animation.scrollTrigger && animation.scrollTrigger.kill(!!_reverting);
+  animation.progress() < 1 && _callback(animation, "onInterrupt");
+  return animation;
+};
+var _quickTween;
+var _registerPluginQueue = [];
+var _createPlugin = function _createPlugin2(config3) {
+  if (!_windowExists()) {
+    _registerPluginQueue.push(config3);
+    return;
+  }
+  config3 = !config3.name && config3["default"] || config3;
+  var name = config3.name, isFunc = _isFunction(config3), Plugin = name && !isFunc && config3.init ? function() {
+    this._props = [];
+  } : config3, instanceDefaults = {
+    init: _emptyFunc,
+    render: _renderPropTweens,
+    add: _addPropTween,
+    kill: _killPropTweensOf,
+    modifier: _addPluginModifier,
+    rawVars: 0
+  }, statics = {
+    targetTest: 0,
+    get: 0,
+    getSetter: _getSetter,
+    aliases: {},
+    register: 0
+  };
+  _wake();
+  if (config3 !== Plugin) {
+    if (_plugins[name]) {
+      return;
+    }
+    _setDefaults(Plugin, _setDefaults(_copyExcluding(config3, instanceDefaults), statics));
+    _merge(Plugin.prototype, _merge(instanceDefaults, _copyExcluding(config3, statics)));
+    _plugins[Plugin.prop = name] = Plugin;
+    if (config3.targetTest) {
+      _harnessPlugins.push(Plugin);
+      _reservedProps[name] = 1;
+    }
+    name = (name === "css" ? "CSS" : name.charAt(0).toUpperCase() + name.substr(1)) + "Plugin";
+  }
+  _addGlobal(name, Plugin);
+  config3.register && config3.register(gsap, Plugin, PropTween);
+};
+var _255 = 255;
+var _colorLookup = {
+  aqua: [0, _255, _255],
+  lime: [0, _255, 0],
+  silver: [192, 192, 192],
+  black: [0, 0, 0],
+  maroon: [128, 0, 0],
+  teal: [0, 128, 128],
+  blue: [0, 0, _255],
+  navy: [0, 0, 128],
+  white: [_255, _255, _255],
+  olive: [128, 128, 0],
+  yellow: [_255, _255, 0],
+  orange: [_255, 165, 0],
+  gray: [128, 128, 128],
+  purple: [128, 0, 128],
+  green: [0, 128, 0],
+  red: [_255, 0, 0],
+  pink: [_255, 192, 203],
+  cyan: [0, _255, _255],
+  transparent: [_255, _255, _255, 0]
+};
+var _hue = function _hue2(h, m1, m2) {
+  h += h < 0 ? 1 : h > 1 ? -1 : 0;
+  return (h * 6 < 1 ? m1 + (m2 - m1) * h * 6 : h < 0.5 ? m2 : h * 3 < 2 ? m1 + (m2 - m1) * (2 / 3 - h) * 6 : m1) * _255 + 0.5 | 0;
+};
+var splitColor = function splitColor2(v, toHSL, forceAlpha) {
+  var a = !v ? _colorLookup.black : _isNumber(v) ? [v >> 16, v >> 8 & _255, v & _255] : 0, r, g, b, h, s, l, max, min, d, wasHSL;
+  if (!a) {
+    if (v.substr(-1) === ",") {
+      v = v.substr(0, v.length - 1);
+    }
+    if (_colorLookup[v]) {
+      a = _colorLookup[v];
+    } else if (v.charAt(0) === "#") {
+      if (v.length < 6) {
+        r = v.charAt(1);
+        g = v.charAt(2);
+        b = v.charAt(3);
+        v = "#" + r + r + g + g + b + b + (v.length === 5 ? v.charAt(4) + v.charAt(4) : "");
+      }
+      if (v.length === 9) {
+        a = parseInt(v.substr(1, 6), 16);
+        return [a >> 16, a >> 8 & _255, a & _255, parseInt(v.substr(7), 16) / 255];
+      }
+      v = parseInt(v.substr(1), 16);
+      a = [v >> 16, v >> 8 & _255, v & _255];
+    } else if (v.substr(0, 3) === "hsl") {
+      a = wasHSL = v.match(_strictNumExp);
+      if (!toHSL) {
+        h = +a[0] % 360 / 360;
+        s = +a[1] / 100;
+        l = +a[2] / 100;
+        g = l <= 0.5 ? l * (s + 1) : l + s - l * s;
+        r = l * 2 - g;
+        a.length > 3 && (a[3] *= 1);
+        a[0] = _hue(h + 1 / 3, r, g);
+        a[1] = _hue(h, r, g);
+        a[2] = _hue(h - 1 / 3, r, g);
+      } else if (~v.indexOf("=")) {
+        a = v.match(_numExp);
+        forceAlpha && a.length < 4 && (a[3] = 1);
+        return a;
+      }
+    } else {
+      a = v.match(_strictNumExp) || _colorLookup.transparent;
+    }
+    a = a.map(Number);
+  }
+  if (toHSL && !wasHSL) {
+    r = a[0] / _255;
+    g = a[1] / _255;
+    b = a[2] / _255;
+    max = Math.max(r, g, b);
+    min = Math.min(r, g, b);
+    l = (max + min) / 2;
+    if (max === min) {
+      h = s = 0;
+    } else {
+      d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+      h *= 60;
+    }
+    a[0] = ~~(h + 0.5);
+    a[1] = ~~(s * 100 + 0.5);
+    a[2] = ~~(l * 100 + 0.5);
+  }
+  forceAlpha && a.length < 4 && (a[3] = 1);
+  return a;
+};
+var _colorOrderData = function _colorOrderData2(v) {
+  var values = [], c = [], i = -1;
+  v.split(_colorExp).forEach(function(v2) {
+    var a = v2.match(_numWithUnitExp) || [];
+    values.push.apply(values, a);
+    c.push(i += a.length + 1);
+  });
+  values.c = c;
+  return values;
+};
+var _formatColors = function _formatColors2(s, toHSL, orderMatchData) {
+  var result = "", colors = (s + result).match(_colorExp), type = toHSL ? "hsla(" : "rgba(", i = 0, c, shell, d, l;
+  if (!colors) {
+    return s;
+  }
+  colors = colors.map(function(color) {
+    return (color = splitColor(color, toHSL, 1)) && type + (toHSL ? color[0] + "," + color[1] + "%," + color[2] + "%," + color[3] : color.join(",")) + ")";
+  });
+  if (orderMatchData) {
+    d = _colorOrderData(s);
+    c = orderMatchData.c;
+    if (c.join(result) !== d.c.join(result)) {
+      shell = s.replace(_colorExp, "1").split(_numWithUnitExp);
+      l = shell.length - 1;
+      for (; i < l; i++) {
+        result += shell[i] + (~c.indexOf(i) ? colors.shift() || type + "0,0,0,0)" : (d.length ? d : colors.length ? colors : orderMatchData).shift());
+      }
+    }
+  }
+  if (!shell) {
+    shell = s.split(_colorExp);
+    l = shell.length - 1;
+    for (; i < l; i++) {
+      result += shell[i] + colors[i];
+    }
+  }
+  return result + shell[l];
+};
+var _colorExp = function() {
+  var s = "(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3,4}){1,2}\\b", p;
+  for (p in _colorLookup) {
+    s += "|" + p + "\\b";
+  }
+  return new RegExp(s + ")", "gi");
+}();
+var _hslExp = /hsl[a]?\(/;
+var _colorStringFilter = function _colorStringFilter2(a) {
+  var combined = a.join(" "), toHSL;
+  _colorExp.lastIndex = 0;
+  if (_colorExp.test(combined)) {
+    toHSL = _hslExp.test(combined);
+    a[1] = _formatColors(a[1], toHSL);
+    a[0] = _formatColors(a[0], toHSL, _colorOrderData(a[1]));
+    return true;
+  }
+};
+var _tickerActive;
+var _ticker = function() {
+  var _getTime = Date.now, _lagThreshold = 500, _adjustedLag = 33, _startTime = _getTime(), _lastUpdate = _startTime, _gap = 1e3 / 240, _nextTime = _gap, _listeners2 = [], _id, _req, _raf, _self, _delta, _i, _tick = function _tick2(v) {
+    var elapsed = _getTime() - _lastUpdate, manual = v === true, overlap, dispatch, time, frame;
+    elapsed > _lagThreshold && (_startTime += elapsed - _adjustedLag);
+    _lastUpdate += elapsed;
+    time = _lastUpdate - _startTime;
+    overlap = time - _nextTime;
+    if (overlap > 0 || manual) {
+      frame = ++_self.frame;
+      _delta = time - _self.time * 1e3;
+      _self.time = time = time / 1e3;
+      _nextTime += overlap + (overlap >= _gap ? 4 : _gap - overlap);
+      dispatch = 1;
+    }
+    manual || (_id = _req(_tick2));
+    if (dispatch) {
+      for (_i = 0; _i < _listeners2.length; _i++) {
+        _listeners2[_i](time, _delta, frame, v);
+      }
+    }
+  };
+  _self = {
+    time: 0,
+    frame: 0,
+    tick: function tick() {
+      _tick(true);
+    },
+    deltaRatio: function deltaRatio(fps) {
+      return _delta / (1e3 / (fps || 60));
+    },
+    wake: function wake() {
+      if (_coreReady) {
+        if (!_coreInitted && _windowExists()) {
+          _win = _coreInitted = window;
+          _doc = _win.document || {};
+          _globals.gsap = gsap;
+          (_win.gsapVersions || (_win.gsapVersions = [])).push(gsap.version);
+          _install(_installScope || _win.GreenSockGlobals || !_win.gsap && _win || {});
+          _raf = _win.requestAnimationFrame;
+          _registerPluginQueue.forEach(_createPlugin);
+        }
+        _id && _self.sleep();
+        _req = _raf || function(f) {
+          return setTimeout(f, _nextTime - _self.time * 1e3 + 1 | 0);
+        };
+        _tickerActive = 1;
+        _tick(2);
+      }
+    },
+    sleep: function sleep() {
+      (_raf ? _win.cancelAnimationFrame : clearTimeout)(_id);
+      _tickerActive = 0;
+      _req = _emptyFunc;
+    },
+    lagSmoothing: function lagSmoothing(threshold, adjustedLag) {
+      _lagThreshold = threshold || Infinity;
+      _adjustedLag = Math.min(adjustedLag || 33, _lagThreshold);
+    },
+    fps: function fps(_fps) {
+      _gap = 1e3 / (_fps || 240);
+      _nextTime = _self.time * 1e3 + _gap;
+    },
+    add: function add(callback, once, prioritize) {
+      var func = once ? function(t, d, f, v) {
+        callback(t, d, f, v);
+        _self.remove(func);
+      } : callback;
+      _self.remove(callback);
+      _listeners2[prioritize ? "unshift" : "push"](func);
+      _wake();
+      return func;
+    },
+    remove: function remove(callback, i) {
+      ~(i = _listeners2.indexOf(callback)) && _listeners2.splice(i, 1) && _i >= i && _i--;
+    },
+    _listeners: _listeners2
+  };
+  return _self;
+}();
+var _wake = function _wake2() {
+  return !_tickerActive && _ticker.wake();
+};
+var _easeMap = {};
+var _customEaseExp = /^[\d.\-M][\d.\-,\s]/;
+var _quotesExp = /["']/g;
+var _parseObjectInString = function _parseObjectInString2(value) {
+  var obj = {}, split = value.substr(1, value.length - 3).split(":"), key = split[0], i = 1, l = split.length, index, val, parsedVal;
+  for (; i < l; i++) {
+    val = split[i];
+    index = i !== l - 1 ? val.lastIndexOf(",") : val.length;
+    parsedVal = val.substr(0, index);
+    obj[key] = isNaN(parsedVal) ? parsedVal.replace(_quotesExp, "").trim() : +parsedVal;
+    key = val.substr(index + 1).trim();
+  }
+  return obj;
+};
+var _valueInParentheses = function _valueInParentheses2(value) {
+  var open = value.indexOf("(") + 1, close = value.indexOf(")"), nested = value.indexOf("(", open);
+  return value.substring(open, ~nested && nested < close ? value.indexOf(")", close + 1) : close);
+};
+var _configEaseFromString = function _configEaseFromString2(name) {
+  var split = (name + "").split("("), ease = _easeMap[split[0]];
+  return ease && split.length > 1 && ease.config ? ease.config.apply(null, ~name.indexOf("{") ? [_parseObjectInString(split[1])] : _valueInParentheses(name).split(",").map(_numericIfPossible)) : _easeMap._CE && _customEaseExp.test(name) ? _easeMap._CE("", name) : ease;
+};
+var _invertEase = function _invertEase2(ease) {
+  return function(p) {
+    return 1 - ease(1 - p);
+  };
+};
+var _propagateYoyoEase = function _propagateYoyoEase2(timeline2, isYoyo) {
+  var child = timeline2._first, ease;
+  while (child) {
+    if (child instanceof Timeline) {
+      _propagateYoyoEase2(child, isYoyo);
+    } else if (child.vars.yoyoEase && (!child._yoyo || !child._repeat) && child._yoyo !== isYoyo) {
+      if (child.timeline) {
+        _propagateYoyoEase2(child.timeline, isYoyo);
+      } else {
+        ease = child._ease;
+        child._ease = child._yEase;
+        child._yEase = ease;
+        child._yoyo = isYoyo;
+      }
+    }
+    child = child._next;
+  }
+};
+var _parseEase = function _parseEase2(ease, defaultEase) {
+  return !ease ? defaultEase : (_isFunction(ease) ? ease : _easeMap[ease] || _configEaseFromString(ease)) || defaultEase;
+};
+var _insertEase = function _insertEase2(names, easeIn, easeOut, easeInOut) {
+  if (easeOut === void 0) {
+    easeOut = function easeOut2(p) {
+      return 1 - easeIn(1 - p);
+    };
+  }
+  if (easeInOut === void 0) {
+    easeInOut = function easeInOut2(p) {
+      return p < 0.5 ? easeIn(p * 2) / 2 : 1 - easeIn((1 - p) * 2) / 2;
+    };
+  }
+  var ease = {
+    easeIn,
+    easeOut,
+    easeInOut
+  }, lowercaseName;
+  _forEachName(names, function(name) {
+    _easeMap[name] = _globals[name] = ease;
+    _easeMap[lowercaseName = name.toLowerCase()] = easeOut;
+    for (var p in ease) {
+      _easeMap[lowercaseName + (p === "easeIn" ? ".in" : p === "easeOut" ? ".out" : ".inOut")] = _easeMap[name + "." + p] = ease[p];
+    }
+  });
+  return ease;
+};
+var _easeInOutFromOut = function _easeInOutFromOut2(easeOut) {
+  return function(p) {
+    return p < 0.5 ? (1 - easeOut(1 - p * 2)) / 2 : 0.5 + easeOut((p - 0.5) * 2) / 2;
+  };
+};
+var _configElastic = function _configElastic2(type, amplitude, period) {
+  var p1 = amplitude >= 1 ? amplitude : 1, p2 = (period || (type ? 0.3 : 0.45)) / (amplitude < 1 ? amplitude : 1), p3 = p2 / _2PI * (Math.asin(1 / p1) || 0), easeOut = function easeOut2(p) {
+    return p === 1 ? 1 : p1 * Math.pow(2, -10 * p) * _sin((p - p3) * p2) + 1;
+  }, ease = type === "out" ? easeOut : type === "in" ? function(p) {
+    return 1 - easeOut(1 - p);
+  } : _easeInOutFromOut(easeOut);
+  p2 = _2PI / p2;
+  ease.config = function(amplitude2, period2) {
+    return _configElastic2(type, amplitude2, period2);
+  };
+  return ease;
+};
+var _configBack = function _configBack2(type, overshoot) {
+  if (overshoot === void 0) {
+    overshoot = 1.70158;
+  }
+  var easeOut = function easeOut2(p) {
+    return p ? --p * p * ((overshoot + 1) * p + overshoot) + 1 : 0;
+  }, ease = type === "out" ? easeOut : type === "in" ? function(p) {
+    return 1 - easeOut(1 - p);
+  } : _easeInOutFromOut(easeOut);
+  ease.config = function(overshoot2) {
+    return _configBack2(type, overshoot2);
+  };
+  return ease;
+};
+_forEachName("Linear,Quad,Cubic,Quart,Quint,Strong", function(name, i) {
+  var power = i < 5 ? i + 1 : i;
+  _insertEase(name + ",Power" + (power - 1), i ? function(p) {
+    return Math.pow(p, power);
+  } : function(p) {
+    return p;
+  }, function(p) {
+    return 1 - Math.pow(1 - p, power);
+  }, function(p) {
+    return p < 0.5 ? Math.pow(p * 2, power) / 2 : 1 - Math.pow((1 - p) * 2, power) / 2;
+  });
+});
+_easeMap.Linear.easeNone = _easeMap.none = _easeMap.Linear.easeIn;
+_insertEase("Elastic", _configElastic("in"), _configElastic("out"), _configElastic());
+(function(n, c) {
+  var n1 = 1 / c, n2 = 2 * n1, n3 = 2.5 * n1, easeOut = function easeOut2(p) {
+    return p < n1 ? n * p * p : p < n2 ? n * Math.pow(p - 1.5 / c, 2) + 0.75 : p < n3 ? n * (p -= 2.25 / c) * p + 0.9375 : n * Math.pow(p - 2.625 / c, 2) + 0.984375;
+  };
+  _insertEase("Bounce", function(p) {
+    return 1 - easeOut(1 - p);
+  }, easeOut);
+})(7.5625, 2.75);
+_insertEase("Expo", function(p) {
+  return p ? Math.pow(2, 10 * (p - 1)) : 0;
+});
+_insertEase("Circ", function(p) {
+  return -(_sqrt(1 - p * p) - 1);
+});
+_insertEase("Sine", function(p) {
+  return p === 1 ? 1 : -_cos(p * _HALF_PI) + 1;
+});
+_insertEase("Back", _configBack("in"), _configBack("out"), _configBack());
+_easeMap.SteppedEase = _easeMap.steps = _globals.SteppedEase = {
+  config: function config(steps, immediateStart) {
+    if (steps === void 0) {
+      steps = 1;
+    }
+    var p1 = 1 / steps, p2 = steps + (immediateStart ? 0 : 1), p3 = immediateStart ? 1 : 0, max = 1 - _tinyNum;
+    return function(p) {
+      return ((p2 * _clamp(0, max, p) | 0) + p3) * p1;
+    };
+  }
+};
+_defaults.ease = _easeMap["quad.out"];
+_forEachName("onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt", function(name) {
+  return _callbackNames += name + "," + name + "Params,";
+});
+var GSCache = function GSCache2(target, harness) {
+  this.id = _gsID++;
+  target._gsap = this;
+  this.target = target;
+  this.harness = harness;
+  this.get = harness ? harness.get : _getProperty;
+  this.set = harness ? harness.getSetter : _getSetter;
+};
+var Animation = function() {
+  function Animation2(vars) {
+    this.vars = vars;
+    this._delay = +vars.delay || 0;
+    if (this._repeat = vars.repeat === Infinity ? -2 : vars.repeat || 0) {
+      this._rDelay = vars.repeatDelay || 0;
+      this._yoyo = !!vars.yoyo || !!vars.yoyoEase;
+    }
+    this._ts = 1;
+    _setDuration(this, +vars.duration, 1, 1);
+    this.data = vars.data;
+    if (_context) {
+      this._ctx = _context;
+      _context.data.push(this);
+    }
+    _tickerActive || _ticker.wake();
+  }
+  var _proto = Animation2.prototype;
+  _proto.delay = function delay(value) {
+    if (value || value === 0) {
+      this.parent && this.parent.smoothChildTiming && this.startTime(this._start + value - this._delay);
+      this._delay = value;
+      return this;
+    }
+    return this._delay;
+  };
+  _proto.duration = function duration(value) {
+    return arguments.length ? this.totalDuration(this._repeat > 0 ? value + (value + this._rDelay) * this._repeat : value) : this.totalDuration() && this._dur;
+  };
+  _proto.totalDuration = function totalDuration(value) {
+    if (!arguments.length) {
+      return this._tDur;
+    }
+    this._dirty = 0;
+    return _setDuration(this, this._repeat < 0 ? value : (value - this._repeat * this._rDelay) / (this._repeat + 1));
+  };
+  _proto.totalTime = function totalTime(_totalTime, suppressEvents) {
+    _wake();
+    if (!arguments.length) {
+      return this._tTime;
+    }
+    var parent = this._dp;
+    if (parent && parent.smoothChildTiming && this._ts) {
+      _alignPlayhead(this, _totalTime);
+      !parent._dp || parent.parent || _postAddChecks(parent, this);
+      while (parent && parent.parent) {
+        if (parent.parent._time !== parent._start + (parent._ts >= 0 ? parent._tTime / parent._ts : (parent.totalDuration() - parent._tTime) / -parent._ts)) {
+          parent.totalTime(parent._tTime, true);
+        }
+        parent = parent.parent;
+      }
+      if (!this.parent && this._dp.autoRemoveChildren && (this._ts > 0 && _totalTime < this._tDur || this._ts < 0 && _totalTime > 0 || !this._tDur && !_totalTime)) {
+        _addToTimeline(this._dp, this, this._start - this._delay);
+      }
+    }
+    if (this._tTime !== _totalTime || !this._dur && !suppressEvents || this._initted && Math.abs(this._zTime) === _tinyNum || !_totalTime && !this._initted && (this.add || this._ptLookup)) {
+      this._ts || (this._pTime = _totalTime);
+      _lazySafeRender(this, _totalTime, suppressEvents);
+    }
+    return this;
+  };
+  _proto.time = function time(value, suppressEvents) {
+    return arguments.length ? this.totalTime(Math.min(this.totalDuration(), value + _elapsedCycleDuration(this)) % (this._dur + this._rDelay) || (value ? this._dur : 0), suppressEvents) : this._time;
+  };
+  _proto.totalProgress = function totalProgress(value, suppressEvents) {
+    return arguments.length ? this.totalTime(this.totalDuration() * value, suppressEvents) : this.totalDuration() ? Math.min(1, this._tTime / this._tDur) : this.ratio;
+  };
+  _proto.progress = function progress(value, suppressEvents) {
+    return arguments.length ? this.totalTime(this.duration() * (this._yoyo && !(this.iteration() & 1) ? 1 - value : value) + _elapsedCycleDuration(this), suppressEvents) : this.duration() ? Math.min(1, this._time / this._dur) : this.ratio;
+  };
+  _proto.iteration = function iteration(value, suppressEvents) {
+    var cycleDuration = this.duration() + this._rDelay;
+    return arguments.length ? this.totalTime(this._time + (value - 1) * cycleDuration, suppressEvents) : this._repeat ? _animationCycle(this._tTime, cycleDuration) + 1 : 1;
+  };
+  _proto.timeScale = function timeScale(value) {
+    if (!arguments.length) {
+      return this._rts === -_tinyNum ? 0 : this._rts;
+    }
+    if (this._rts === value) {
+      return this;
+    }
+    var tTime = this.parent && this._ts ? _parentToChildTotalTime(this.parent._time, this) : this._tTime;
+    this._rts = +value || 0;
+    this._ts = this._ps || value === -_tinyNum ? 0 : this._rts;
+    this.totalTime(_clamp(-Math.abs(this._delay), this._tDur, tTime), true);
+    _setEnd(this);
+    return _recacheAncestors(this);
+  };
+  _proto.paused = function paused(value) {
+    if (!arguments.length) {
+      return this._ps;
+    }
+    if (this._ps !== value) {
+      this._ps = value;
+      if (value) {
+        this._pTime = this._tTime || Math.max(-this._delay, this.rawTime());
+        this._ts = this._act = 0;
+      } else {
+        _wake();
+        this._ts = this._rts;
+        this.totalTime(this.parent && !this.parent.smoothChildTiming ? this.rawTime() : this._tTime || this._pTime, this.progress() === 1 && Math.abs(this._zTime) !== _tinyNum && (this._tTime -= _tinyNum));
+      }
+    }
+    return this;
+  };
+  _proto.startTime = function startTime(value) {
+    if (arguments.length) {
+      this._start = value;
+      var parent = this.parent || this._dp;
+      parent && (parent._sort || !this.parent) && _addToTimeline(parent, this, value - this._delay);
+      return this;
+    }
+    return this._start;
+  };
+  _proto.endTime = function endTime(includeRepeats) {
+    return this._start + (_isNotFalse(includeRepeats) ? this.totalDuration() : this.duration()) / Math.abs(this._ts || 1);
+  };
+  _proto.rawTime = function rawTime(wrapRepeats) {
+    var parent = this.parent || this._dp;
+    return !parent ? this._tTime : wrapRepeats && (!this._ts || this._repeat && this._time && this.totalProgress() < 1) ? this._tTime % (this._dur + this._rDelay) : !this._ts ? this._tTime : _parentToChildTotalTime(parent.rawTime(wrapRepeats), this);
+  };
+  _proto.revert = function revert(config3) {
+    if (config3 === void 0) {
+      config3 = _revertConfig;
+    }
+    var prevIsReverting = _reverting;
+    _reverting = config3;
+    if (this._initted || this._startAt) {
+      this.timeline && this.timeline.revert(config3);
+      this.totalTime(-0.01, config3.suppressEvents);
+    }
+    this.data !== "nested" && config3.kill !== false && this.kill();
+    _reverting = prevIsReverting;
+    return this;
+  };
+  _proto.globalTime = function globalTime(rawTime) {
+    var animation = this, time = arguments.length ? rawTime : animation.rawTime();
+    while (animation) {
+      time = animation._start + time / (animation._ts || 1);
+      animation = animation._dp;
+    }
+    return !this.parent && this._sat ? this._sat.vars.immediateRender ? -1 : this._sat.globalTime(rawTime) : time;
+  };
+  _proto.repeat = function repeat(value) {
+    if (arguments.length) {
+      this._repeat = value === Infinity ? -2 : value;
+      return _onUpdateTotalDuration(this);
+    }
+    return this._repeat === -2 ? Infinity : this._repeat;
+  };
+  _proto.repeatDelay = function repeatDelay(value) {
+    if (arguments.length) {
+      var time = this._time;
+      this._rDelay = value;
+      _onUpdateTotalDuration(this);
+      return time ? this.time(time) : this;
+    }
+    return this._rDelay;
+  };
+  _proto.yoyo = function yoyo(value) {
+    if (arguments.length) {
+      this._yoyo = value;
+      return this;
+    }
+    return this._yoyo;
+  };
+  _proto.seek = function seek(position, suppressEvents) {
+    return this.totalTime(_parsePosition(this, position), _isNotFalse(suppressEvents));
+  };
+  _proto.restart = function restart(includeDelay, suppressEvents) {
+    return this.play().totalTime(includeDelay ? -this._delay : 0, _isNotFalse(suppressEvents));
+  };
+  _proto.play = function play(from, suppressEvents) {
+    from != null && this.seek(from, suppressEvents);
+    return this.reversed(false).paused(false);
+  };
+  _proto.reverse = function reverse(from, suppressEvents) {
+    from != null && this.seek(from || this.totalDuration(), suppressEvents);
+    return this.reversed(true).paused(false);
+  };
+  _proto.pause = function pause(atTime, suppressEvents) {
+    atTime != null && this.seek(atTime, suppressEvents);
+    return this.paused(true);
+  };
+  _proto.resume = function resume() {
+    return this.paused(false);
+  };
+  _proto.reversed = function reversed(value) {
+    if (arguments.length) {
+      !!value !== this.reversed() && this.timeScale(-this._rts || (value ? -_tinyNum : 0));
+      return this;
+    }
+    return this._rts < 0;
+  };
+  _proto.invalidate = function invalidate() {
+    this._initted = this._act = 0;
+    this._zTime = -_tinyNum;
+    return this;
+  };
+  _proto.isActive = function isActive() {
+    var parent = this.parent || this._dp, start = this._start, rawTime;
+    return !!(!parent || this._ts && this._initted && parent.isActive() && (rawTime = parent.rawTime(true)) >= start && rawTime < this.endTime(true) - _tinyNum);
+  };
+  _proto.eventCallback = function eventCallback(type, callback, params) {
+    var vars = this.vars;
+    if (arguments.length > 1) {
+      if (!callback) {
+        delete vars[type];
+      } else {
+        vars[type] = callback;
+        params && (vars[type + "Params"] = params);
+        type === "onUpdate" && (this._onUpdate = callback);
+      }
+      return this;
+    }
+    return vars[type];
+  };
+  _proto.then = function then(onFulfilled) {
+    var self = this;
+    return new Promise(function(resolve) {
+      var f = _isFunction(onFulfilled) ? onFulfilled : _passThrough, _resolve = function _resolve2() {
+        var _then = self.then;
+        self.then = null;
+        _isFunction(f) && (f = f(self)) && (f.then || f === self) && (self.then = _then);
+        resolve(f);
+        self.then = _then;
+      };
+      if (self._initted && self.totalProgress() === 1 && self._ts >= 0 || !self._tTime && self._ts < 0) {
+        _resolve();
+      } else {
+        self._prom = _resolve;
+      }
+    });
+  };
+  _proto.kill = function kill() {
+    _interrupt(this);
+  };
+  return Animation2;
+}();
+_setDefaults(Animation.prototype, {
+  _time: 0,
+  _start: 0,
+  _end: 0,
+  _tTime: 0,
+  _tDur: 0,
+  _dirty: 0,
+  _repeat: 0,
+  _yoyo: false,
+  parent: null,
+  _initted: false,
+  _rDelay: 0,
+  _ts: 1,
+  _dp: 0,
+  ratio: 0,
+  _zTime: -_tinyNum,
+  _prom: 0,
+  _ps: false,
+  _rts: 1
+});
+var Timeline = function(_Animation) {
+  _inheritsLoose(Timeline2, _Animation);
+  function Timeline2(vars, position) {
+    var _this;
+    if (vars === void 0) {
+      vars = {};
+    }
+    _this = _Animation.call(this, vars) || this;
+    _this.labels = {};
+    _this.smoothChildTiming = !!vars.smoothChildTiming;
+    _this.autoRemoveChildren = !!vars.autoRemoveChildren;
+    _this._sort = _isNotFalse(vars.sortChildren);
+    _globalTimeline && _addToTimeline(vars.parent || _globalTimeline, _assertThisInitialized(_this), position);
+    vars.reversed && _this.reverse();
+    vars.paused && _this.paused(true);
+    vars.scrollTrigger && _scrollTrigger(_assertThisInitialized(_this), vars.scrollTrigger);
+    return _this;
+  }
+  var _proto2 = Timeline2.prototype;
+  _proto2.to = function to(targets, vars, position) {
+    _createTweenType(0, arguments, this);
+    return this;
+  };
+  _proto2.from = function from(targets, vars, position) {
+    _createTweenType(1, arguments, this);
+    return this;
+  };
+  _proto2.fromTo = function fromTo(targets, fromVars, toVars, position) {
+    _createTweenType(2, arguments, this);
+    return this;
+  };
+  _proto2.set = function set(targets, vars, position) {
+    vars.duration = 0;
+    vars.parent = this;
+    _inheritDefaults(vars).repeatDelay || (vars.repeat = 0);
+    vars.immediateRender = !!vars.immediateRender;
+    new Tween(targets, vars, _parsePosition(this, position), 1);
+    return this;
+  };
+  _proto2.call = function call(callback, params, position) {
+    return _addToTimeline(this, Tween.delayedCall(0, callback, params), position);
+  };
+  _proto2.staggerTo = function staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {
+    vars.duration = duration;
+    vars.stagger = vars.stagger || stagger;
+    vars.onComplete = onCompleteAll;
+    vars.onCompleteParams = onCompleteAllParams;
+    vars.parent = this;
+    new Tween(targets, vars, _parsePosition(this, position));
+    return this;
+  };
+  _proto2.staggerFrom = function staggerFrom(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {
+    vars.runBackwards = 1;
+    _inheritDefaults(vars).immediateRender = _isNotFalse(vars.immediateRender);
+    return this.staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams);
+  };
+  _proto2.staggerFromTo = function staggerFromTo(targets, duration, fromVars, toVars, stagger, position, onCompleteAll, onCompleteAllParams) {
+    toVars.startAt = fromVars;
+    _inheritDefaults(toVars).immediateRender = _isNotFalse(toVars.immediateRender);
+    return this.staggerTo(targets, duration, toVars, stagger, position, onCompleteAll, onCompleteAllParams);
+  };
+  _proto2.render = function render3(totalTime, suppressEvents, force) {
+    var prevTime = this._time, tDur = this._dirty ? this.totalDuration() : this._tDur, dur = this._dur, tTime = totalTime <= 0 ? 0 : _roundPrecise(totalTime), crossingStart = this._zTime < 0 !== totalTime < 0 && (this._initted || !dur), time, child, next, iteration, cycleDuration, prevPaused, pauseTween, timeScale, prevStart, prevIteration, yoyo, isYoyo;
+    this !== _globalTimeline && tTime > tDur && totalTime >= 0 && (tTime = tDur);
+    if (tTime !== this._tTime || force || crossingStart) {
+      if (prevTime !== this._time && dur) {
+        tTime += this._time - prevTime;
+        totalTime += this._time - prevTime;
+      }
+      time = tTime;
+      prevStart = this._start;
+      timeScale = this._ts;
+      prevPaused = !timeScale;
+      if (crossingStart) {
+        dur || (prevTime = this._zTime);
+        (totalTime || !suppressEvents) && (this._zTime = totalTime);
+      }
+      if (this._repeat) {
+        yoyo = this._yoyo;
+        cycleDuration = dur + this._rDelay;
+        if (this._repeat < -1 && totalTime < 0) {
+          return this.totalTime(cycleDuration * 100 + totalTime, suppressEvents, force);
+        }
+        time = _roundPrecise(tTime % cycleDuration);
+        if (tTime === tDur) {
+          iteration = this._repeat;
+          time = dur;
+        } else {
+          iteration = ~~(tTime / cycleDuration);
+          if (iteration && iteration === tTime / cycleDuration) {
+            time = dur;
+            iteration--;
+          }
+          time > dur && (time = dur);
+        }
+        prevIteration = _animationCycle(this._tTime, cycleDuration);
+        !prevTime && this._tTime && prevIteration !== iteration && this._tTime - prevIteration * cycleDuration - this._dur <= 0 && (prevIteration = iteration);
+        if (yoyo && iteration & 1) {
+          time = dur - time;
+          isYoyo = 1;
+        }
+        if (iteration !== prevIteration && !this._lock) {
+          var rewinding = yoyo && prevIteration & 1, doesWrap = rewinding === (yoyo && iteration & 1);
+          iteration < prevIteration && (rewinding = !rewinding);
+          prevTime = rewinding ? 0 : dur;
+          this._lock = 1;
+          this.render(prevTime || (isYoyo ? 0 : _roundPrecise(iteration * cycleDuration)), suppressEvents, !dur)._lock = 0;
+          this._tTime = tTime;
+          !suppressEvents && this.parent && _callback(this, "onRepeat");
+          this.vars.repeatRefresh && !isYoyo && (this.invalidate()._lock = 1);
+          if (prevTime && prevTime !== this._time || prevPaused !== !this._ts || this.vars.onRepeat && !this.parent && !this._act) {
+            return this;
+          }
+          dur = this._dur;
+          tDur = this._tDur;
+          if (doesWrap) {
+            this._lock = 2;
+            prevTime = rewinding ? dur : -1e-4;
+            this.render(prevTime, true);
+            this.vars.repeatRefresh && !isYoyo && this.invalidate();
+          }
+          this._lock = 0;
+          if (!this._ts && !prevPaused) {
+            return this;
+          }
+          _propagateYoyoEase(this, isYoyo);
+        }
+      }
+      if (this._hasPause && !this._forcing && this._lock < 2) {
+        pauseTween = _findNextPauseTween(this, _roundPrecise(prevTime), _roundPrecise(time));
+        if (pauseTween) {
+          tTime -= time - (time = pauseTween._start);
+        }
+      }
+      this._tTime = tTime;
+      this._time = time;
+      this._act = !timeScale;
+      if (!this._initted) {
+        this._onUpdate = this.vars.onUpdate;
+        this._initted = 1;
+        this._zTime = totalTime;
+        prevTime = 0;
+      }
+      if (!prevTime && time && !suppressEvents && !iteration) {
+        _callback(this, "onStart");
+        if (this._tTime !== tTime) {
+          return this;
+        }
+      }
+      if (time >= prevTime && totalTime >= 0) {
+        child = this._first;
+        while (child) {
+          next = child._next;
+          if ((child._act || time >= child._start) && child._ts && pauseTween !== child) {
+            if (child.parent !== this) {
+              return this.render(totalTime, suppressEvents, force);
+            }
+            child.render(child._ts > 0 ? (time - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (time - child._start) * child._ts, suppressEvents, force);
+            if (time !== this._time || !this._ts && !prevPaused) {
+              pauseTween = 0;
+              next && (tTime += this._zTime = -_tinyNum);
+              break;
+            }
+          }
+          child = next;
+        }
+      } else {
+        child = this._last;
+        var adjustedTime = totalTime < 0 ? totalTime : time;
+        while (child) {
+          next = child._prev;
+          if ((child._act || adjustedTime <= child._end) && child._ts && pauseTween !== child) {
+            if (child.parent !== this) {
+              return this.render(totalTime, suppressEvents, force);
+            }
+            child.render(child._ts > 0 ? (adjustedTime - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (adjustedTime - child._start) * child._ts, suppressEvents, force || _reverting && (child._initted || child._startAt));
+            if (time !== this._time || !this._ts && !prevPaused) {
+              pauseTween = 0;
+              next && (tTime += this._zTime = adjustedTime ? -_tinyNum : _tinyNum);
+              break;
+            }
+          }
+          child = next;
+        }
+      }
+      if (pauseTween && !suppressEvents) {
+        this.pause();
+        pauseTween.render(time >= prevTime ? 0 : -_tinyNum)._zTime = time >= prevTime ? 1 : -1;
+        if (this._ts) {
+          this._start = prevStart;
+          _setEnd(this);
+          return this.render(totalTime, suppressEvents, force);
+        }
+      }
+      this._onUpdate && !suppressEvents && _callback(this, "onUpdate", true);
+      if (tTime === tDur && this._tTime >= this.totalDuration() || !tTime && prevTime) {
+        if (prevStart === this._start || Math.abs(timeScale) !== Math.abs(this._ts)) {
+          if (!this._lock) {
+            (totalTime || !dur) && (tTime === tDur && this._ts > 0 || !tTime && this._ts < 0) && _removeFromParent(this, 1);
+            if (!suppressEvents && !(totalTime < 0 && !prevTime) && (tTime || prevTime || !tDur)) {
+              _callback(this, tTime === tDur && totalTime >= 0 ? "onComplete" : "onReverseComplete", true);
+              this._prom && !(tTime < tDur && this.timeScale() > 0) && this._prom();
+            }
+          }
+        }
+      }
+    }
+    return this;
+  };
+  _proto2.add = function add(child, position) {
+    var _this2 = this;
+    _isNumber(position) || (position = _parsePosition(this, position, child));
+    if (!(child instanceof Animation)) {
+      if (_isArray(child)) {
+        child.forEach(function(obj) {
+          return _this2.add(obj, position);
+        });
+        return this;
+      }
+      if (_isString(child)) {
+        return this.addLabel(child, position);
+      }
+      if (_isFunction(child)) {
+        child = Tween.delayedCall(0, child);
+      } else {
+        return this;
+      }
+    }
+    return this !== child ? _addToTimeline(this, child, position) : this;
+  };
+  _proto2.getChildren = function getChildren(nested, tweens, timelines, ignoreBeforeTime) {
+    if (nested === void 0) {
+      nested = true;
+    }
+    if (tweens === void 0) {
+      tweens = true;
+    }
+    if (timelines === void 0) {
+      timelines = true;
+    }
+    if (ignoreBeforeTime === void 0) {
+      ignoreBeforeTime = -_bigNum;
+    }
+    var a = [], child = this._first;
+    while (child) {
+      if (child._start >= ignoreBeforeTime) {
+        if (child instanceof Tween) {
+          tweens && a.push(child);
+        } else {
+          timelines && a.push(child);
+          nested && a.push.apply(a, child.getChildren(true, tweens, timelines));
+        }
+      }
+      child = child._next;
+    }
+    return a;
+  };
+  _proto2.getById = function getById2(id) {
+    var animations = this.getChildren(1, 1, 1), i = animations.length;
+    while (i--) {
+      if (animations[i].vars.id === id) {
+        return animations[i];
+      }
+    }
+  };
+  _proto2.remove = function remove(child) {
+    if (_isString(child)) {
+      return this.removeLabel(child);
+    }
+    if (_isFunction(child)) {
+      return this.killTweensOf(child);
+    }
+    _removeLinkedListItem(this, child);
+    if (child === this._recent) {
+      this._recent = this._last;
+    }
+    return _uncache(this);
+  };
+  _proto2.totalTime = function totalTime(_totalTime2, suppressEvents) {
+    if (!arguments.length) {
+      return this._tTime;
+    }
+    this._forcing = 1;
+    if (!this._dp && this._ts) {
+      this._start = _roundPrecise(_ticker.time - (this._ts > 0 ? _totalTime2 / this._ts : (this.totalDuration() - _totalTime2) / -this._ts));
+    }
+    _Animation.prototype.totalTime.call(this, _totalTime2, suppressEvents);
+    this._forcing = 0;
+    return this;
+  };
+  _proto2.addLabel = function addLabel(label, position) {
+    this.labels[label] = _parsePosition(this, position);
+    return this;
+  };
+  _proto2.removeLabel = function removeLabel(label) {
+    delete this.labels[label];
+    return this;
+  };
+  _proto2.addPause = function addPause(position, callback, params) {
+    var t = Tween.delayedCall(0, callback || _emptyFunc, params);
+    t.data = "isPause";
+    this._hasPause = 1;
+    return _addToTimeline(this, t, _parsePosition(this, position));
+  };
+  _proto2.removePause = function removePause(position) {
+    var child = this._first;
+    position = _parsePosition(this, position);
+    while (child) {
+      if (child._start === position && child.data === "isPause") {
+        _removeFromParent(child);
+      }
+      child = child._next;
+    }
+  };
+  _proto2.killTweensOf = function killTweensOf(targets, props, onlyActive) {
+    var tweens = this.getTweensOf(targets, onlyActive), i = tweens.length;
+    while (i--) {
+      _overwritingTween !== tweens[i] && tweens[i].kill(targets, props);
+    }
+    return this;
+  };
+  _proto2.getTweensOf = function getTweensOf2(targets, onlyActive) {
+    var a = [], parsedTargets = toArray(targets), child = this._first, isGlobalTime = _isNumber(onlyActive), children;
+    while (child) {
+      if (child instanceof Tween) {
+        if (_arrayContainsAny(child._targets, parsedTargets) && (isGlobalTime ? (!_overwritingTween || child._initted && child._ts) && child.globalTime(0) <= onlyActive && child.globalTime(child.totalDuration()) > onlyActive : !onlyActive || child.isActive())) {
+          a.push(child);
+        }
+      } else if ((children = child.getTweensOf(parsedTargets, onlyActive)).length) {
+        a.push.apply(a, children);
+      }
+      child = child._next;
+    }
+    return a;
+  };
+  _proto2.tweenTo = function tweenTo(position, vars) {
+    vars = vars || {};
+    var tl = this, endTime = _parsePosition(tl, position), _vars = vars, startAt = _vars.startAt, _onStart = _vars.onStart, onStartParams = _vars.onStartParams, immediateRender = _vars.immediateRender, initted, tween = Tween.to(tl, _setDefaults({
+      ease: vars.ease || "none",
+      lazy: false,
+      immediateRender: false,
+      time: endTime,
+      overwrite: "auto",
+      duration: vars.duration || Math.abs((endTime - (startAt && "time" in startAt ? startAt.time : tl._time)) / tl.timeScale()) || _tinyNum,
+      onStart: function onStart() {
+        tl.pause();
+        if (!initted) {
+          var duration = vars.duration || Math.abs((endTime - (startAt && "time" in startAt ? startAt.time : tl._time)) / tl.timeScale());
+          tween._dur !== duration && _setDuration(tween, duration, 0, 1).render(tween._time, true, true);
+          initted = 1;
+        }
+        _onStart && _onStart.apply(tween, onStartParams || []);
+      }
+    }, vars));
+    return immediateRender ? tween.render(0) : tween;
+  };
+  _proto2.tweenFromTo = function tweenFromTo(fromPosition, toPosition, vars) {
+    return this.tweenTo(toPosition, _setDefaults({
+      startAt: {
+        time: _parsePosition(this, fromPosition)
+      }
+    }, vars));
+  };
+  _proto2.recent = function recent() {
+    return this._recent;
+  };
+  _proto2.nextLabel = function nextLabel(afterTime) {
+    if (afterTime === void 0) {
+      afterTime = this._time;
+    }
+    return _getLabelInDirection(this, _parsePosition(this, afterTime));
+  };
+  _proto2.previousLabel = function previousLabel(beforeTime) {
+    if (beforeTime === void 0) {
+      beforeTime = this._time;
+    }
+    return _getLabelInDirection(this, _parsePosition(this, beforeTime), 1);
+  };
+  _proto2.currentLabel = function currentLabel(value) {
+    return arguments.length ? this.seek(value, true) : this.previousLabel(this._time + _tinyNum);
+  };
+  _proto2.shiftChildren = function shiftChildren(amount, adjustLabels, ignoreBeforeTime) {
+    if (ignoreBeforeTime === void 0) {
+      ignoreBeforeTime = 0;
+    }
+    var child = this._first, labels = this.labels, p;
+    while (child) {
+      if (child._start >= ignoreBeforeTime) {
+        child._start += amount;
+        child._end += amount;
+      }
+      child = child._next;
+    }
+    if (adjustLabels) {
+      for (p in labels) {
+        if (labels[p] >= ignoreBeforeTime) {
+          labels[p] += amount;
+        }
+      }
+    }
+    return _uncache(this);
+  };
+  _proto2.invalidate = function invalidate(soft) {
+    var child = this._first;
+    this._lock = 0;
+    while (child) {
+      child.invalidate(soft);
+      child = child._next;
+    }
+    return _Animation.prototype.invalidate.call(this, soft);
+  };
+  _proto2.clear = function clear(includeLabels) {
+    if (includeLabels === void 0) {
+      includeLabels = true;
+    }
+    var child = this._first, next;
+    while (child) {
+      next = child._next;
+      this.remove(child);
+      child = next;
+    }
+    this._dp && (this._time = this._tTime = this._pTime = 0);
+    includeLabels && (this.labels = {});
+    return _uncache(this);
+  };
+  _proto2.totalDuration = function totalDuration(value) {
+    var max = 0, self = this, child = self._last, prevStart = _bigNum, prev, start, parent;
+    if (arguments.length) {
+      return self.timeScale((self._repeat < 0 ? self.duration() : self.totalDuration()) / (self.reversed() ? -value : value));
+    }
+    if (self._dirty) {
+      parent = self.parent;
+      while (child) {
+        prev = child._prev;
+        child._dirty && child.totalDuration();
+        start = child._start;
+        if (start > prevStart && self._sort && child._ts && !self._lock) {
+          self._lock = 1;
+          _addToTimeline(self, child, start - child._delay, 1)._lock = 0;
+        } else {
+          prevStart = start;
+        }
+        if (start < 0 && child._ts) {
+          max -= start;
+          if (!parent && !self._dp || parent && parent.smoothChildTiming) {
+            self._start += start / self._ts;
+            self._time -= start;
+            self._tTime -= start;
+          }
+          self.shiftChildren(-start, false, -Infinity);
+          prevStart = 0;
+        }
+        child._end > max && child._ts && (max = child._end);
+        child = prev;
+      }
+      _setDuration(self, self === _globalTimeline && self._time > max ? self._time : max, 1, 1);
+      self._dirty = 0;
+    }
+    return self._tDur;
+  };
+  Timeline2.updateRoot = function updateRoot(time) {
+    if (_globalTimeline._ts) {
+      _lazySafeRender(_globalTimeline, _parentToChildTotalTime(time, _globalTimeline));
+      _lastRenderedFrame = _ticker.frame;
+    }
+    if (_ticker.frame >= _nextGCFrame) {
+      _nextGCFrame += _config.autoSleep || 120;
+      var child = _globalTimeline._first;
+      if (!child || !child._ts) {
+        if (_config.autoSleep && _ticker._listeners.length < 2) {
+          while (child && !child._ts) {
+            child = child._next;
+          }
+          child || _ticker.sleep();
+        }
+      }
+    }
+  };
+  return Timeline2;
+}(Animation);
+_setDefaults(Timeline.prototype, {
+  _lock: 0,
+  _hasPause: 0,
+  _forcing: 0
+});
+var _addComplexStringPropTween = function _addComplexStringPropTween2(target, prop, start, end, setter, stringFilter, funcParam) {
+  var pt = new PropTween(this._pt, target, prop, 0, 1, _renderComplexString, null, setter), index = 0, matchIndex = 0, result, startNums, color, endNum, chunk, startNum, hasRandom, a;
+  pt.b = start;
+  pt.e = end;
+  start += "";
+  end += "";
+  if (hasRandom = ~end.indexOf("random(")) {
+    end = _replaceRandom(end);
+  }
+  if (stringFilter) {
+    a = [start, end];
+    stringFilter(a, target, prop);
+    start = a[0];
+    end = a[1];
+  }
+  startNums = start.match(_complexStringNumExp) || [];
+  while (result = _complexStringNumExp.exec(end)) {
+    endNum = result[0];
+    chunk = end.substring(index, result.index);
+    if (color) {
+      color = (color + 1) % 5;
+    } else if (chunk.substr(-5) === "rgba(") {
+      color = 1;
+    }
+    if (endNum !== startNums[matchIndex++]) {
+      startNum = parseFloat(startNums[matchIndex - 1]) || 0;
+      pt._pt = {
+        _next: pt._pt,
+        p: chunk || matchIndex === 1 ? chunk : ",",
+        //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.
+        s: startNum,
+        c: endNum.charAt(1) === "=" ? _parseRelative(startNum, endNum) - startNum : parseFloat(endNum) - startNum,
+        m: color && color < 4 ? Math.round : 0
+      };
+      index = _complexStringNumExp.lastIndex;
+    }
+  }
+  pt.c = index < end.length ? end.substring(index, end.length) : "";
+  pt.fp = funcParam;
+  if (_relExp.test(end) || hasRandom) {
+    pt.e = 0;
+  }
+  this._pt = pt;
+  return pt;
+};
+var _addPropTween = function _addPropTween2(target, prop, start, end, index, targets, modifier, stringFilter, funcParam, optional) {
+  _isFunction(end) && (end = end(index || 0, target, targets));
+  var currentValue = target[prop], parsedStart = start !== "get" ? start : !_isFunction(currentValue) ? currentValue : funcParam ? target[prop.indexOf("set") || !_isFunction(target["get" + prop.substr(3)]) ? prop : "get" + prop.substr(3)](funcParam) : target[prop](), setter = !_isFunction(currentValue) ? _setterPlain : funcParam ? _setterFuncWithParam : _setterFunc, pt;
+  if (_isString(end)) {
+    if (~end.indexOf("random(")) {
+      end = _replaceRandom(end);
+    }
+    if (end.charAt(1) === "=") {
+      pt = _parseRelative(parsedStart, end) + (getUnit(parsedStart) || 0);
+      if (pt || pt === 0) {
+        end = pt;
+      }
+    }
+  }
+  if (!optional || parsedStart !== end || _forceAllPropTweens) {
+    if (!isNaN(parsedStart * end) && end !== "") {
+      pt = new PropTween(this._pt, target, prop, +parsedStart || 0, end - (parsedStart || 0), typeof currentValue === "boolean" ? _renderBoolean : _renderPlain, 0, setter);
+      funcParam && (pt.fp = funcParam);
+      modifier && pt.modifier(modifier, this, target);
+      return this._pt = pt;
+    }
+    !currentValue && !(prop in target) && _missingPlugin(prop, end);
+    return _addComplexStringPropTween.call(this, target, prop, parsedStart, end, setter, stringFilter || _config.stringFilter, funcParam);
+  }
+};
+var _processVars = function _processVars2(vars, index, target, targets, tween) {
+  _isFunction(vars) && (vars = _parseFuncOrString(vars, tween, index, target, targets));
+  if (!_isObject(vars) || vars.style && vars.nodeType || _isArray(vars) || _isTypedArray(vars)) {
+    return _isString(vars) ? _parseFuncOrString(vars, tween, index, target, targets) : vars;
+  }
+  var copy = {}, p;
+  for (p in vars) {
+    copy[p] = _parseFuncOrString(vars[p], tween, index, target, targets);
+  }
+  return copy;
+};
+var _checkPlugin = function _checkPlugin2(property, vars, tween, index, target, targets) {
+  var plugin, pt, ptLookup, i;
+  if (_plugins[property] && (plugin = new _plugins[property]()).init(target, plugin.rawVars ? vars[property] : _processVars(vars[property], index, target, targets, tween), tween, index, targets) !== false) {
+    tween._pt = pt = new PropTween(tween._pt, target, property, 0, 1, plugin.render, plugin, 0, plugin.priority);
+    if (tween !== _quickTween) {
+      ptLookup = tween._ptLookup[tween._targets.indexOf(target)];
+      i = plugin._props.length;
+      while (i--) {
+        ptLookup[plugin._props[i]] = pt;
+      }
+    }
+  }
+  return plugin;
+};
+var _overwritingTween;
+var _forceAllPropTweens;
+var _initTween = function _initTween2(tween, time, tTime) {
+  var vars = tween.vars, ease = vars.ease, startAt = vars.startAt, immediateRender = vars.immediateRender, lazy = vars.lazy, onUpdate = vars.onUpdate, onUpdateParams = vars.onUpdateParams, callbackScope = vars.callbackScope, runBackwards = vars.runBackwards, yoyoEase = vars.yoyoEase, keyframes = vars.keyframes, autoRevert = vars.autoRevert, dur = tween._dur, prevStartAt = tween._startAt, targets = tween._targets, parent = tween.parent, fullTargets = parent && parent.data === "nested" ? parent.vars.targets : targets, autoOverwrite = tween._overwrite === "auto" && !_suppressOverwrites, tl = tween.timeline, cleanVars, i, p, pt, target, hasPriority, gsData, harness, plugin, ptLookup, index, harnessVars, overwritten;
+  tl && (!keyframes || !ease) && (ease = "none");
+  tween._ease = _parseEase(ease, _defaults.ease);
+  tween._yEase = yoyoEase ? _invertEase(_parseEase(yoyoEase === true ? ease : yoyoEase, _defaults.ease)) : 0;
+  if (yoyoEase && tween._yoyo && !tween._repeat) {
+    yoyoEase = tween._yEase;
+    tween._yEase = tween._ease;
+    tween._ease = yoyoEase;
+  }
+  tween._from = !tl && !!vars.runBackwards;
+  if (!tl || keyframes && !vars.stagger) {
+    harness = targets[0] ? _getCache(targets[0]).harness : 0;
+    harnessVars = harness && vars[harness.prop];
+    cleanVars = _copyExcluding(vars, _reservedProps);
+    if (prevStartAt) {
+      prevStartAt._zTime < 0 && prevStartAt.progress(1);
+      time < 0 && runBackwards && immediateRender && !autoRevert ? prevStartAt.render(-1, true) : prevStartAt.revert(runBackwards && dur ? _revertConfigNoKill : _startAtRevertConfig);
+      prevStartAt._lazy = 0;
+    }
+    if (startAt) {
+      _removeFromParent(tween._startAt = Tween.set(targets, _setDefaults({
+        data: "isStart",
+        overwrite: false,
+        parent,
+        immediateRender: true,
+        lazy: !prevStartAt && _isNotFalse(lazy),
+        startAt: null,
+        delay: 0,
+        onUpdate,
+        onUpdateParams,
+        callbackScope,
+        stagger: 0
+      }, startAt)));
+      tween._startAt._dp = 0;
+      tween._startAt._sat = tween;
+      time < 0 && (_reverting || !immediateRender && !autoRevert) && tween._startAt.revert(_revertConfigNoKill);
+      if (immediateRender) {
+        if (dur && time <= 0 && tTime <= 0) {
+          time && (tween._zTime = time);
+          return;
+        }
+      }
+    } else if (runBackwards && dur) {
+      if (!prevStartAt) {
+        time && (immediateRender = false);
+        p = _setDefaults({
+          overwrite: false,
+          data: "isFromStart",
+          //we tag the tween with as "isFromStart" so that if [inside a plugin] we need to only do something at the very END of a tween, we have a way of identifying this tween as merely the one that's setting the beginning values for a "from()" tween. For example, clearProps in CSSPlugin should only get applied at the very END of a tween and without this tag, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in.
+          lazy: immediateRender && !prevStartAt && _isNotFalse(lazy),
+          immediateRender,
+          //zero-duration tweens render immediately by default, but if we're not specifically instructed to render this tween immediately, we should skip this and merely _init() to record the starting values (rendering them immediately would push them to completion which is wasteful in that case - we'd have to render(-1) immediately after)
+          stagger: 0,
+          parent
+          //ensures that nested tweens that had a stagger are handled properly, like gsap.from(".class", {y:gsap.utils.wrap([-100,100])})
+        }, cleanVars);
+        harnessVars && (p[harness.prop] = harnessVars);
+        _removeFromParent(tween._startAt = Tween.set(targets, p));
+        tween._startAt._dp = 0;
+        tween._startAt._sat = tween;
+        time < 0 && (_reverting ? tween._startAt.revert(_revertConfigNoKill) : tween._startAt.render(-1, true));
+        tween._zTime = time;
+        if (!immediateRender) {
+          _initTween2(tween._startAt, _tinyNum, _tinyNum);
+        } else if (!time) {
+          return;
+        }
+      }
+    }
+    tween._pt = tween._ptCache = 0;
+    lazy = dur && _isNotFalse(lazy) || lazy && !dur;
+    for (i = 0; i < targets.length; i++) {
+      target = targets[i];
+      gsData = target._gsap || _harness(targets)[i]._gsap;
+      tween._ptLookup[i] = ptLookup = {};
+      _lazyLookup[gsData.id] && _lazyTweens.length && _lazyRender();
+      index = fullTargets === targets ? i : fullTargets.indexOf(target);
+      if (harness && (plugin = new harness()).init(target, harnessVars || cleanVars, tween, index, fullTargets) !== false) {
+        tween._pt = pt = new PropTween(tween._pt, target, plugin.name, 0, 1, plugin.render, plugin, 0, plugin.priority);
+        plugin._props.forEach(function(name) {
+          ptLookup[name] = pt;
+        });
+        plugin.priority && (hasPriority = 1);
+      }
+      if (!harness || harnessVars) {
+        for (p in cleanVars) {
+          if (_plugins[p] && (plugin = _checkPlugin(p, cleanVars, tween, index, target, fullTargets))) {
+            plugin.priority && (hasPriority = 1);
+          } else {
+            ptLookup[p] = pt = _addPropTween.call(tween, target, p, "get", cleanVars[p], index, fullTargets, 0, vars.stringFilter);
+          }
+        }
+      }
+      tween._op && tween._op[i] && tween.kill(target, tween._op[i]);
+      if (autoOverwrite && tween._pt) {
+        _overwritingTween = tween;
+        _globalTimeline.killTweensOf(target, ptLookup, tween.globalTime(time));
+        overwritten = !tween.parent;
+        _overwritingTween = 0;
+      }
+      tween._pt && lazy && (_lazyLookup[gsData.id] = 1);
+    }
+    hasPriority && _sortPropTweensByPriority(tween);
+    tween._onInit && tween._onInit(tween);
+  }
+  tween._onUpdate = onUpdate;
+  tween._initted = (!tween._op || tween._pt) && !overwritten;
+  keyframes && time <= 0 && tl.render(_bigNum, true, true);
+};
+var _updatePropTweens = function _updatePropTweens2(tween, property, value, start, startIsRelative, ratio, time) {
+  var ptCache = (tween._pt && tween._ptCache || (tween._ptCache = {}))[property], pt, rootPT, lookup, i;
+  if (!ptCache) {
+    ptCache = tween._ptCache[property] = [];
+    lookup = tween._ptLookup;
+    i = tween._targets.length;
+    while (i--) {
+      pt = lookup[i][property];
+      if (pt && pt.d && pt.d._pt) {
+        pt = pt.d._pt;
+        while (pt && pt.p !== property && pt.fp !== property) {
+          pt = pt._next;
+        }
+      }
+      if (!pt) {
+        _forceAllPropTweens = 1;
+        tween.vars[property] = "+=0";
+        _initTween(tween, time);
+        _forceAllPropTweens = 0;
+        return 1;
+      }
+      ptCache.push(pt);
+    }
+  }
+  i = ptCache.length;
+  while (i--) {
+    rootPT = ptCache[i];
+    pt = rootPT._pt || rootPT;
+    pt.s = (start || start === 0) && !startIsRelative ? start : pt.s + (start || 0) + ratio * pt.c;
+    pt.c = value - pt.s;
+    rootPT.e && (rootPT.e = _round(value) + getUnit(rootPT.e));
+    rootPT.b && (rootPT.b = pt.s + getUnit(rootPT.b));
+  }
+};
+var _addAliasesToVars = function _addAliasesToVars2(targets, vars) {
+  var harness = targets[0] ? _getCache(targets[0]).harness : 0, propertyAliases = harness && harness.aliases, copy, p, i, aliases;
+  if (!propertyAliases) {
+    return vars;
+  }
+  copy = _merge({}, vars);
+  for (p in propertyAliases) {
+    if (p in copy) {
+      aliases = propertyAliases[p].split(",");
+      i = aliases.length;
+      while (i--) {
+        copy[aliases[i]] = copy[p];
+      }
+    }
+  }
+  return copy;
+};
+var _parseKeyframe = function _parseKeyframe2(prop, obj, allProps, easeEach) {
+  var ease = obj.ease || easeEach || "power1.inOut", p, a;
+  if (_isArray(obj)) {
+    a = allProps[prop] || (allProps[prop] = []);
+    obj.forEach(function(value, i) {
+      return a.push({
+        t: i / (obj.length - 1) * 100,
+        v: value,
+        e: ease
+      });
+    });
+  } else {
+    for (p in obj) {
+      a = allProps[p] || (allProps[p] = []);
+      p === "ease" || a.push({
+        t: parseFloat(prop),
+        v: obj[p],
+        e: ease
+      });
+    }
+  }
+};
+var _parseFuncOrString = function _parseFuncOrString2(value, tween, i, target, targets) {
+  return _isFunction(value) ? value.call(tween, i, target, targets) : _isString(value) && ~value.indexOf("random(") ? _replaceRandom(value) : value;
+};
+var _staggerTweenProps = _callbackNames + "repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert";
+var _staggerPropsToSkip = {};
+_forEachName(_staggerTweenProps + ",id,stagger,delay,duration,paused,scrollTrigger", function(name) {
+  return _staggerPropsToSkip[name] = 1;
+});
+var Tween = function(_Animation2) {
+  _inheritsLoose(Tween2, _Animation2);
+  function Tween2(targets, vars, position, skipInherit) {
+    var _this3;
+    if (typeof vars === "number") {
+      position.duration = vars;
+      vars = position;
+      position = null;
+    }
+    _this3 = _Animation2.call(this, skipInherit ? vars : _inheritDefaults(vars)) || this;
+    var _this3$vars = _this3.vars, duration = _this3$vars.duration, delay = _this3$vars.delay, immediateRender = _this3$vars.immediateRender, stagger = _this3$vars.stagger, overwrite = _this3$vars.overwrite, keyframes = _this3$vars.keyframes, defaults2 = _this3$vars.defaults, scrollTrigger = _this3$vars.scrollTrigger, yoyoEase = _this3$vars.yoyoEase, parent = vars.parent || _globalTimeline, parsedTargets = (_isArray(targets) || _isTypedArray(targets) ? _isNumber(targets[0]) : "length" in vars) ? [targets] : toArray(targets), tl, i, copy, l, p, curTarget, staggerFunc, staggerVarsToMerge;
+    _this3._targets = parsedTargets.length ? _harness(parsedTargets) : _warn("GSAP target " + targets + " not found. https://greensock.com", !_config.nullTargetWarn) || [];
+    _this3._ptLookup = [];
+    _this3._overwrite = overwrite;
+    if (keyframes || stagger || _isFuncOrString(duration) || _isFuncOrString(delay)) {
+      vars = _this3.vars;
+      tl = _this3.timeline = new Timeline({
+        data: "nested",
+        defaults: defaults2 || {},
+        targets: parent && parent.data === "nested" ? parent.vars.targets : parsedTargets
+      });
+      tl.kill();
+      tl.parent = tl._dp = _assertThisInitialized(_this3);
+      tl._start = 0;
+      if (stagger || _isFuncOrString(duration) || _isFuncOrString(delay)) {
+        l = parsedTargets.length;
+        staggerFunc = stagger && distribute(stagger);
+        if (_isObject(stagger)) {
+          for (p in stagger) {
+            if (~_staggerTweenProps.indexOf(p)) {
+              staggerVarsToMerge || (staggerVarsToMerge = {});
+              staggerVarsToMerge[p] = stagger[p];
+            }
+          }
+        }
+        for (i = 0; i < l; i++) {
+          copy = _copyExcluding(vars, _staggerPropsToSkip);
+          copy.stagger = 0;
+          yoyoEase && (copy.yoyoEase = yoyoEase);
+          staggerVarsToMerge && _merge(copy, staggerVarsToMerge);
+          curTarget = parsedTargets[i];
+          copy.duration = +_parseFuncOrString(duration, _assertThisInitialized(_this3), i, curTarget, parsedTargets);
+          copy.delay = (+_parseFuncOrString(delay, _assertThisInitialized(_this3), i, curTarget, parsedTargets) || 0) - _this3._delay;
+          if (!stagger && l === 1 && copy.delay) {
+            _this3._delay = delay = copy.delay;
+            _this3._start += delay;
+            copy.delay = 0;
+          }
+          tl.to(curTarget, copy, staggerFunc ? staggerFunc(i, curTarget, parsedTargets) : 0);
+          tl._ease = _easeMap.none;
+        }
+        tl.duration() ? duration = delay = 0 : _this3.timeline = 0;
+      } else if (keyframes) {
+        _inheritDefaults(_setDefaults(tl.vars.defaults, {
+          ease: "none"
+        }));
+        tl._ease = _parseEase(keyframes.ease || vars.ease || "none");
+        var time = 0, a, kf, v;
+        if (_isArray(keyframes)) {
+          keyframes.forEach(function(frame) {
+            return tl.to(parsedTargets, frame, ">");
+          });
+          tl.duration();
+        } else {
+          copy = {};
+          for (p in keyframes) {
+            p === "ease" || p === "easeEach" || _parseKeyframe(p, keyframes[p], copy, keyframes.easeEach);
+          }
+          for (p in copy) {
+            a = copy[p].sort(function(a2, b) {
+              return a2.t - b.t;
+            });
+            time = 0;
+            for (i = 0; i < a.length; i++) {
+              kf = a[i];
+              v = {
+                ease: kf.e,
+                duration: (kf.t - (i ? a[i - 1].t : 0)) / 100 * duration
+              };
+              v[p] = kf.v;
+              tl.to(parsedTargets, v, time);
+              time += v.duration;
+            }
+          }
+          tl.duration() < duration && tl.to({}, {
+            duration: duration - tl.duration()
+          });
+        }
+      }
+      duration || _this3.duration(duration = tl.duration());
+    } else {
+      _this3.timeline = 0;
+    }
+    if (overwrite === true && !_suppressOverwrites) {
+      _overwritingTween = _assertThisInitialized(_this3);
+      _globalTimeline.killTweensOf(parsedTargets);
+      _overwritingTween = 0;
+    }
+    _addToTimeline(parent, _assertThisInitialized(_this3), position);
+    vars.reversed && _this3.reverse();
+    vars.paused && _this3.paused(true);
+    if (immediateRender || !duration && !keyframes && _this3._start === _roundPrecise(parent._time) && _isNotFalse(immediateRender) && _hasNoPausedAncestors(_assertThisInitialized(_this3)) && parent.data !== "nested") {
+      _this3._tTime = -_tinyNum;
+      _this3.render(Math.max(0, -delay) || 0);
+    }
+    scrollTrigger && _scrollTrigger(_assertThisInitialized(_this3), scrollTrigger);
+    return _this3;
+  }
+  var _proto3 = Tween2.prototype;
+  _proto3.render = function render3(totalTime, suppressEvents, force) {
+    var prevTime = this._time, tDur = this._tDur, dur = this._dur, isNegative = totalTime < 0, tTime = totalTime > tDur - _tinyNum && !isNegative ? tDur : totalTime < _tinyNum ? 0 : totalTime, time, pt, iteration, cycleDuration, prevIteration, isYoyo, ratio, timeline2, yoyoEase;
+    if (!dur) {
+      _renderZeroDurationTween(this, totalTime, suppressEvents, force);
+    } else if (tTime !== this._tTime || !totalTime || force || !this._initted && this._tTime || this._startAt && this._zTime < 0 !== isNegative) {
+      time = tTime;
+      timeline2 = this.timeline;
+      if (this._repeat) {
+        cycleDuration = dur + this._rDelay;
+        if (this._repeat < -1 && isNegative) {
+          return this.totalTime(cycleDuration * 100 + totalTime, suppressEvents, force);
+        }
+        time = _roundPrecise(tTime % cycleDuration);
+        if (tTime === tDur) {
+          iteration = this._repeat;
+          time = dur;
+        } else {
+          iteration = ~~(tTime / cycleDuration);
+          if (iteration && iteration === tTime / cycleDuration) {
+            time = dur;
+            iteration--;
+          }
+          time > dur && (time = dur);
+        }
+        isYoyo = this._yoyo && iteration & 1;
+        if (isYoyo) {
+          yoyoEase = this._yEase;
+          time = dur - time;
+        }
+        prevIteration = _animationCycle(this._tTime, cycleDuration);
+        if (time === prevTime && !force && this._initted) {
+          this._tTime = tTime;
+          return this;
+        }
+        if (iteration !== prevIteration) {
+          timeline2 && this._yEase && _propagateYoyoEase(timeline2, isYoyo);
+          if (this.vars.repeatRefresh && !isYoyo && !this._lock) {
+            this._lock = force = 1;
+            this.render(_roundPrecise(cycleDuration * iteration), true).invalidate()._lock = 0;
+          }
+        }
+      }
+      if (!this._initted) {
+        if (_attemptInitTween(this, isNegative ? totalTime : time, force, suppressEvents, tTime)) {
+          this._tTime = 0;
+          return this;
+        }
+        if (prevTime !== this._time) {
+          return this;
+        }
+        if (dur !== this._dur) {
+          return this.render(totalTime, suppressEvents, force);
+        }
+      }
+      this._tTime = tTime;
+      this._time = time;
+      if (!this._act && this._ts) {
+        this._act = 1;
+        this._lazy = 0;
+      }
+      this.ratio = ratio = (yoyoEase || this._ease)(time / dur);
+      if (this._from) {
+        this.ratio = ratio = 1 - ratio;
+      }
+      if (time && !prevTime && !suppressEvents && !iteration) {
+        _callback(this, "onStart");
+        if (this._tTime !== tTime) {
+          return this;
+        }
+      }
+      pt = this._pt;
+      while (pt) {
+        pt.r(ratio, pt.d);
+        pt = pt._next;
+      }
+      timeline2 && timeline2.render(totalTime < 0 ? totalTime : !time && isYoyo ? -_tinyNum : timeline2._dur * timeline2._ease(time / this._dur), suppressEvents, force) || this._startAt && (this._zTime = totalTime);
+      if (this._onUpdate && !suppressEvents) {
+        isNegative && _rewindStartAt(this, totalTime, suppressEvents, force);
+        _callback(this, "onUpdate");
+      }
+      this._repeat && iteration !== prevIteration && this.vars.onRepeat && !suppressEvents && this.parent && _callback(this, "onRepeat");
+      if ((tTime === this._tDur || !tTime) && this._tTime === tTime) {
+        isNegative && !this._onUpdate && _rewindStartAt(this, totalTime, true, true);
+        (totalTime || !dur) && (tTime === this._tDur && this._ts > 0 || !tTime && this._ts < 0) && _removeFromParent(this, 1);
+        if (!suppressEvents && !(isNegative && !prevTime) && (tTime || prevTime || isYoyo)) {
+          _callback(this, tTime === tDur ? "onComplete" : "onReverseComplete", true);
+          this._prom && !(tTime < tDur && this.timeScale() > 0) && this._prom();
+        }
+      }
+    }
+    return this;
+  };
+  _proto3.targets = function targets() {
+    return this._targets;
+  };
+  _proto3.invalidate = function invalidate(soft) {
+    (!soft || !this.vars.runBackwards) && (this._startAt = 0);
+    this._pt = this._op = this._onUpdate = this._lazy = this.ratio = 0;
+    this._ptLookup = [];
+    this.timeline && this.timeline.invalidate(soft);
+    return _Animation2.prototype.invalidate.call(this, soft);
+  };
+  _proto3.resetTo = function resetTo(property, value, start, startIsRelative) {
+    _tickerActive || _ticker.wake();
+    this._ts || this.play();
+    var time = Math.min(this._dur, (this._dp._time - this._start) * this._ts), ratio;
+    this._initted || _initTween(this, time);
+    ratio = this._ease(time / this._dur);
+    if (_updatePropTweens(this, property, value, start, startIsRelative, ratio, time)) {
+      return this.resetTo(property, value, start, startIsRelative);
+    }
+    _alignPlayhead(this, 0);
+    this.parent || _addLinkedListItem(this._dp, this, "_first", "_last", this._dp._sort ? "_start" : 0);
+    return this.render(0);
+  };
+  _proto3.kill = function kill(targets, vars) {
+    if (vars === void 0) {
+      vars = "all";
+    }
+    if (!targets && (!vars || vars === "all")) {
+      this._lazy = this._pt = 0;
+      return this.parent ? _interrupt(this) : this;
+    }
+    if (this.timeline) {
+      var tDur = this.timeline.totalDuration();
+      this.timeline.killTweensOf(targets, vars, _overwritingTween && _overwritingTween.vars.overwrite !== true)._first || _interrupt(this);
+      this.parent && tDur !== this.timeline.totalDuration() && _setDuration(this, this._dur * this.timeline._tDur / tDur, 0, 1);
+      return this;
+    }
+    var parsedTargets = this._targets, killingTargets = targets ? toArray(targets) : parsedTargets, propTweenLookup = this._ptLookup, firstPT = this._pt, overwrittenProps, curLookup, curOverwriteProps, props, p, pt, i;
+    if ((!vars || vars === "all") && _arraysMatch(parsedTargets, killingTargets)) {
+      vars === "all" && (this._pt = 0);
+      return _interrupt(this);
+    }
+    overwrittenProps = this._op = this._op || [];
+    if (vars !== "all") {
+      if (_isString(vars)) {
+        p = {};
+        _forEachName(vars, function(name) {
+          return p[name] = 1;
+        });
+        vars = p;
+      }
+      vars = _addAliasesToVars(parsedTargets, vars);
+    }
+    i = parsedTargets.length;
+    while (i--) {
+      if (~killingTargets.indexOf(parsedTargets[i])) {
+        curLookup = propTweenLookup[i];
+        if (vars === "all") {
+          overwrittenProps[i] = vars;
+          props = curLookup;
+          curOverwriteProps = {};
+        } else {
+          curOverwriteProps = overwrittenProps[i] = overwrittenProps[i] || {};
+          props = vars;
+        }
+        for (p in props) {
+          pt = curLookup && curLookup[p];
+          if (pt) {
+            if (!("kill" in pt.d) || pt.d.kill(p) === true) {
+              _removeLinkedListItem(this, pt, "_pt");
+            }
+            delete curLookup[p];
+          }
+          if (curOverwriteProps !== "all") {
+            curOverwriteProps[p] = 1;
+          }
+        }
+      }
+    }
+    this._initted && !this._pt && firstPT && _interrupt(this);
+    return this;
+  };
+  Tween2.to = function to(targets, vars) {
+    return new Tween2(targets, vars, arguments[2]);
+  };
+  Tween2.from = function from(targets, vars) {
+    return _createTweenType(1, arguments);
+  };
+  Tween2.delayedCall = function delayedCall(delay, callback, params, scope) {
+    return new Tween2(callback, 0, {
+      immediateRender: false,
+      lazy: false,
+      overwrite: false,
+      delay,
+      onComplete: callback,
+      onReverseComplete: callback,
+      onCompleteParams: params,
+      onReverseCompleteParams: params,
+      callbackScope: scope
+    });
+  };
+  Tween2.fromTo = function fromTo(targets, fromVars, toVars) {
+    return _createTweenType(2, arguments);
+  };
+  Tween2.set = function set(targets, vars) {
+    vars.duration = 0;
+    vars.repeatDelay || (vars.repeat = 0);
+    return new Tween2(targets, vars);
+  };
+  Tween2.killTweensOf = function killTweensOf(targets, props, onlyActive) {
+    return _globalTimeline.killTweensOf(targets, props, onlyActive);
+  };
+  return Tween2;
+}(Animation);
+_setDefaults(Tween.prototype, {
+  _targets: [],
+  _lazy: 0,
+  _startAt: 0,
+  _op: 0,
+  _onInit: 0
+});
+_forEachName("staggerTo,staggerFrom,staggerFromTo", function(name) {
+  Tween[name] = function() {
+    var tl = new Timeline(), params = _slice.call(arguments, 0);
+    params.splice(name === "staggerFromTo" ? 5 : 4, 0, 0);
+    return tl[name].apply(tl, params);
+  };
+});
+var _setterPlain = function _setterPlain2(target, property, value) {
+  return target[property] = value;
+};
+var _setterFunc = function _setterFunc2(target, property, value) {
+  return target[property](value);
+};
+var _setterFuncWithParam = function _setterFuncWithParam2(target, property, value, data) {
+  return target[property](data.fp, value);
+};
+var _setterAttribute = function _setterAttribute2(target, property, value) {
+  return target.setAttribute(property, value);
+};
+var _getSetter = function _getSetter2(target, property) {
+  return _isFunction(target[property]) ? _setterFunc : _isUndefined(target[property]) && target.setAttribute ? _setterAttribute : _setterPlain;
+};
+var _renderPlain = function _renderPlain2(ratio, data) {
+  return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 1e6) / 1e6, data);
+};
+var _renderBoolean = function _renderBoolean2(ratio, data) {
+  return data.set(data.t, data.p, !!(data.s + data.c * ratio), data);
+};
+var _renderComplexString = function _renderComplexString2(ratio, data) {
+  var pt = data._pt, s = "";
+  if (!ratio && data.b) {
+    s = data.b;
+  } else if (ratio === 1 && data.e) {
+    s = data.e;
+  } else {
+    while (pt) {
+      s = pt.p + (pt.m ? pt.m(pt.s + pt.c * ratio) : Math.round((pt.s + pt.c * ratio) * 1e4) / 1e4) + s;
+      pt = pt._next;
+    }
+    s += data.c;
+  }
+  data.set(data.t, data.p, s, data);
+};
+var _renderPropTweens = function _renderPropTweens2(ratio, data) {
+  var pt = data._pt;
+  while (pt) {
+    pt.r(ratio, pt.d);
+    pt = pt._next;
+  }
+};
+var _addPluginModifier = function _addPluginModifier2(modifier, tween, target, property) {
+  var pt = this._pt, next;
+  while (pt) {
+    next = pt._next;
+    pt.p === property && pt.modifier(modifier, tween, target);
+    pt = next;
+  }
+};
+var _killPropTweensOf = function _killPropTweensOf2(property) {
+  var pt = this._pt, hasNonDependentRemaining, next;
+  while (pt) {
+    next = pt._next;
+    if (pt.p === property && !pt.op || pt.op === property) {
+      _removeLinkedListItem(this, pt, "_pt");
+    } else if (!pt.dep) {
+      hasNonDependentRemaining = 1;
+    }
+    pt = next;
+  }
+  return !hasNonDependentRemaining;
+};
+var _setterWithModifier = function _setterWithModifier2(target, property, value, data) {
+  data.mSet(target, property, data.m.call(data.tween, value, data.mt), data);
+};
+var _sortPropTweensByPriority = function _sortPropTweensByPriority2(parent) {
+  var pt = parent._pt, next, pt2, first, last;
+  while (pt) {
+    next = pt._next;
+    pt2 = first;
+    while (pt2 && pt2.pr > pt.pr) {
+      pt2 = pt2._next;
+    }
+    if (pt._prev = pt2 ? pt2._prev : last) {
+      pt._prev._next = pt;
+    } else {
+      first = pt;
+    }
+    if (pt._next = pt2) {
+      pt2._prev = pt;
+    } else {
+      last = pt;
+    }
+    pt = next;
+  }
+  parent._pt = first;
+};
+var PropTween = function() {
+  function PropTween2(next, target, prop, start, change, renderer, data, setter, priority) {
+    this.t = target;
+    this.s = start;
+    this.c = change;
+    this.p = prop;
+    this.r = renderer || _renderPlain;
+    this.d = data || this;
+    this.set = setter || _setterPlain;
+    this.pr = priority || 0;
+    this._next = next;
+    if (next) {
+      next._prev = this;
+    }
+  }
+  var _proto4 = PropTween2.prototype;
+  _proto4.modifier = function modifier(func, tween, target) {
+    this.mSet = this.mSet || this.set;
+    this.set = _setterWithModifier;
+    this.m = func;
+    this.mt = target;
+    this.tween = tween;
+  };
+  return PropTween2;
+}();
+_forEachName(_callbackNames + "parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger", function(name) {
+  return _reservedProps[name] = 1;
+});
+_globals.TweenMax = _globals.TweenLite = Tween;
+_globals.TimelineLite = _globals.TimelineMax = Timeline;
+_globalTimeline = new Timeline({
+  sortChildren: false,
+  defaults: _defaults,
+  autoRemoveChildren: true,
+  id: "root",
+  smoothChildTiming: true
+});
+_config.stringFilter = _colorStringFilter;
+var _media = [];
+var _listeners = {};
+var _emptyArray = [];
+var _lastMediaTime = 0;
+var _dispatch = function _dispatch2(type) {
+  return (_listeners[type] || _emptyArray).map(function(f) {
+    return f();
+  });
+};
+var _onMediaChange = function _onMediaChange2() {
+  var time = Date.now(), matches = [];
+  if (time - _lastMediaTime > 2) {
+    _dispatch("matchMediaInit");
+    _media.forEach(function(c) {
+      var queries = c.queries, conditions = c.conditions, match, p, anyMatch, toggled;
+      for (p in queries) {
+        match = _win.matchMedia(queries[p]).matches;
+        match && (anyMatch = 1);
+        if (match !== conditions[p]) {
+          conditions[p] = match;
+          toggled = 1;
+        }
+      }
+      if (toggled) {
+        c.revert();
+        anyMatch && matches.push(c);
+      }
+    });
+    _dispatch("matchMediaRevert");
+    matches.forEach(function(c) {
+      return c.onMatch(c);
+    });
+    _lastMediaTime = time;
+    _dispatch("matchMedia");
+  }
+};
+var Context = function() {
+  function Context2(func, scope) {
+    this.selector = scope && selector(scope);
+    this.data = [];
+    this._r = [];
+    this.isReverted = false;
+    func && this.add(func);
+  }
+  var _proto5 = Context2.prototype;
+  _proto5.add = function add(name, func, scope) {
+    if (_isFunction(name)) {
+      scope = func;
+      func = name;
+      name = _isFunction;
+    }
+    var self = this, f = function f2() {
+      var prev = _context, prevSelector = self.selector, result;
+      prev && prev !== self && prev.data.push(self);
+      scope && (self.selector = selector(scope));
+      _context = self;
+      result = func.apply(self, arguments);
+      _isFunction(result) && self._r.push(result);
+      _context = prev;
+      self.selector = prevSelector;
+      self.isReverted = false;
+      return result;
+    };
+    self.last = f;
+    return name === _isFunction ? f(self) : name ? self[name] = f : f;
+  };
+  _proto5.ignore = function ignore(func) {
+    var prev = _context;
+    _context = null;
+    func(this);
+    _context = prev;
+  };
+  _proto5.getTweens = function getTweens() {
+    var a = [];
+    this.data.forEach(function(e) {
+      return e instanceof Context2 ? a.push.apply(a, e.getTweens()) : e instanceof Tween && !(e.parent && e.parent.data === "nested") && a.push(e);
+    });
+    return a;
+  };
+  _proto5.clear = function clear() {
+    this._r.length = this.data.length = 0;
+  };
+  _proto5.kill = function kill(revert, matchMedia2) {
+    var _this4 = this;
+    if (revert) {
+      var tweens = this.getTweens();
+      this.data.forEach(function(t) {
+        if (t.data === "isFlip") {
+          t.revert();
+          t.getChildren(true, true, false).forEach(function(tween) {
+            return tweens.splice(tweens.indexOf(tween), 1);
+          });
+        }
+      });
+      tweens.map(function(t) {
+        return {
+          g: t.globalTime(0),
+          t
+        };
+      }).sort(function(a, b) {
+        return b.g - a.g || -1;
+      }).forEach(function(o) {
+        return o.t.revert(revert);
+      });
+      this.data.forEach(function(e) {
+        return !(e instanceof Animation) && e.revert && e.revert(revert);
+      });
+      this._r.forEach(function(f) {
+        return f(revert, _this4);
+      });
+      this.isReverted = true;
+    } else {
+      this.data.forEach(function(e) {
+        return e.kill && e.kill();
+      });
+    }
+    this.clear();
+    if (matchMedia2) {
+      var i = _media.indexOf(this);
+      !!~i && _media.splice(i, 1);
+    }
+  };
+  _proto5.revert = function revert(config3) {
+    this.kill(config3 || {});
+  };
+  return Context2;
+}();
+var MatchMedia = function() {
+  function MatchMedia2(scope) {
+    this.contexts = [];
+    this.scope = scope;
+  }
+  var _proto6 = MatchMedia2.prototype;
+  _proto6.add = function add(conditions, func, scope) {
+    _isObject(conditions) || (conditions = {
+      matches: conditions
+    });
+    var context3 = new Context(0, scope || this.scope), cond = context3.conditions = {}, mq, p, active;
+    this.contexts.push(context3);
+    func = context3.add("onMatch", func);
+    context3.queries = conditions;
+    for (p in conditions) {
+      if (p === "all") {
+        active = 1;
+      } else {
+        mq = _win.matchMedia(conditions[p]);
+        if (mq) {
+          _media.indexOf(context3) < 0 && _media.push(context3);
+          (cond[p] = mq.matches) && (active = 1);
+          mq.addListener ? mq.addListener(_onMediaChange) : mq.addEventListener("change", _onMediaChange);
+        }
+      }
+    }
+    active && func(context3);
+    return this;
+  };
+  _proto6.revert = function revert(config3) {
+    this.kill(config3 || {});
+  };
+  _proto6.kill = function kill(revert) {
+    this.contexts.forEach(function(c) {
+      return c.kill(revert, true);
+    });
+  };
+  return MatchMedia2;
+}();
+var _gsap = {
+  registerPlugin: function registerPlugin() {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    args.forEach(function(config3) {
+      return _createPlugin(config3);
+    });
+  },
+  timeline: function timeline(vars) {
+    return new Timeline(vars);
+  },
+  getTweensOf: function getTweensOf(targets, onlyActive) {
+    return _globalTimeline.getTweensOf(targets, onlyActive);
+  },
+  getProperty: function getProperty(target, property, unit, uncache) {
+    _isString(target) && (target = toArray(target)[0]);
+    var getter = _getCache(target || {}).get, format = unit ? _passThrough : _numericIfPossible;
+    unit === "native" && (unit = "");
+    return !target ? target : !property ? function(property2, unit2, uncache2) {
+      return format((_plugins[property2] && _plugins[property2].get || getter)(target, property2, unit2, uncache2));
+    } : format((_plugins[property] && _plugins[property].get || getter)(target, property, unit, uncache));
+  },
+  quickSetter: function quickSetter(target, property, unit) {
+    target = toArray(target);
+    if (target.length > 1) {
+      var setters = target.map(function(t) {
+        return gsap.quickSetter(t, property, unit);
+      }), l = setters.length;
+      return function(value) {
+        var i = l;
+        while (i--) {
+          setters[i](value);
+        }
+      };
+    }
+    target = target[0] || {};
+    var Plugin = _plugins[property], cache = _getCache(target), p = cache.harness && (cache.harness.aliases || {})[property] || property, setter = Plugin ? function(value) {
+      var p2 = new Plugin();
+      _quickTween._pt = 0;
+      p2.init(target, unit ? value + unit : value, _quickTween, 0, [target]);
+      p2.render(1, p2);
+      _quickTween._pt && _renderPropTweens(1, _quickTween);
+    } : cache.set(target, p);
+    return Plugin ? setter : function(value) {
+      return setter(target, p, unit ? value + unit : value, cache, 1);
+    };
+  },
+  quickTo: function quickTo(target, property, vars) {
+    var _merge22;
+    var tween = gsap.to(target, _merge((_merge22 = {}, _merge22[property] = "+=0.1", _merge22.paused = true, _merge22), vars || {})), func = function func2(value, start, startIsRelative) {
+      return tween.resetTo(property, value, start, startIsRelative);
+    };
+    func.tween = tween;
+    return func;
+  },
+  isTweening: function isTweening(targets) {
+    return _globalTimeline.getTweensOf(targets, true).length > 0;
+  },
+  defaults: function defaults(value) {
+    value && value.ease && (value.ease = _parseEase(value.ease, _defaults.ease));
+    return _mergeDeep(_defaults, value || {});
+  },
+  config: function config2(value) {
+    return _mergeDeep(_config, value || {});
+  },
+  registerEffect: function registerEffect(_ref3) {
+    var name = _ref3.name, effect = _ref3.effect, plugins = _ref3.plugins, defaults2 = _ref3.defaults, extendTimeline = _ref3.extendTimeline;
+    (plugins || "").split(",").forEach(function(pluginName) {
+      return pluginName && !_plugins[pluginName] && !_globals[pluginName] && _warn(name + " effect requires " + pluginName + " plugin.");
+    });
+    _effects[name] = function(targets, vars, tl) {
+      return effect(toArray(targets), _setDefaults(vars || {}, defaults2), tl);
+    };
+    if (extendTimeline) {
+      Timeline.prototype[name] = function(targets, vars, position) {
+        return this.add(_effects[name](targets, _isObject(vars) ? vars : (position = vars) && {}, this), position);
+      };
+    }
+  },
+  registerEase: function registerEase(name, ease) {
+    _easeMap[name] = _parseEase(ease);
+  },
+  parseEase: function parseEase(ease, defaultEase) {
+    return arguments.length ? _parseEase(ease, defaultEase) : _easeMap;
+  },
+  getById: function getById(id) {
+    return _globalTimeline.getById(id);
+  },
+  exportRoot: function exportRoot(vars, includeDelayedCalls) {
+    if (vars === void 0) {
+      vars = {};
+    }
+    var tl = new Timeline(vars), child, next;
+    tl.smoothChildTiming = _isNotFalse(vars.smoothChildTiming);
+    _globalTimeline.remove(tl);
+    tl._dp = 0;
+    tl._time = tl._tTime = _globalTimeline._time;
+    child = _globalTimeline._first;
+    while (child) {
+      next = child._next;
+      if (includeDelayedCalls || !(!child._dur && child instanceof Tween && child.vars.onComplete === child._targets[0])) {
+        _addToTimeline(tl, child, child._start - child._delay);
+      }
+      child = next;
+    }
+    _addToTimeline(_globalTimeline, tl, 0);
+    return tl;
+  },
+  context: function context(func, scope) {
+    return func ? new Context(func, scope) : _context;
+  },
+  matchMedia: function matchMedia(scope) {
+    return new MatchMedia(scope);
+  },
+  matchMediaRefresh: function matchMediaRefresh() {
+    return _media.forEach(function(c) {
+      var cond = c.conditions, found, p;
+      for (p in cond) {
+        if (cond[p]) {
+          cond[p] = false;
+          found = 1;
+        }
+      }
+      found && c.revert();
+    }) || _onMediaChange();
+  },
+  addEventListener: function addEventListener(type, callback) {
+    var a = _listeners[type] || (_listeners[type] = []);
+    ~a.indexOf(callback) || a.push(callback);
+  },
+  removeEventListener: function removeEventListener(type, callback) {
+    var a = _listeners[type], i = a && a.indexOf(callback);
+    i >= 0 && a.splice(i, 1);
+  },
+  utils: {
+    wrap,
+    wrapYoyo,
+    distribute,
+    random,
+    snap,
+    normalize,
+    getUnit,
+    clamp,
+    splitColor,
+    toArray,
+    selector,
+    mapRange,
+    pipe,
+    unitize,
+    interpolate,
+    shuffle
+  },
+  install: _install,
+  effects: _effects,
+  ticker: _ticker,
+  updateRoot: Timeline.updateRoot,
+  plugins: _plugins,
+  globalTimeline: _globalTimeline,
+  core: {
+    PropTween,
+    globals: _addGlobal,
+    Tween,
+    Timeline,
+    Animation,
+    getCache: _getCache,
+    _removeLinkedListItem,
+    reverting: function reverting() {
+      return _reverting;
+    },
+    context: function context2(toAdd) {
+      if (toAdd && _context) {
+        _context.data.push(toAdd);
+        toAdd._ctx = _context;
+      }
+      return _context;
+    },
+    suppressOverwrites: function suppressOverwrites(value) {
+      return _suppressOverwrites = value;
+    }
+  }
+};
+_forEachName("to,from,fromTo,delayedCall,set,killTweensOf", function(name) {
+  return _gsap[name] = Tween[name];
+});
+_ticker.add(Timeline.updateRoot);
+_quickTween = _gsap.to({}, {
+  duration: 0
+});
+var _getPluginPropTween = function _getPluginPropTween2(plugin, prop) {
+  var pt = plugin._pt;
+  while (pt && pt.p !== prop && pt.op !== prop && pt.fp !== prop) {
+    pt = pt._next;
+  }
+  return pt;
+};
+var _addModifiers = function _addModifiers2(tween, modifiers) {
+  var targets = tween._targets, p, i, pt;
+  for (p in modifiers) {
+    i = targets.length;
+    while (i--) {
+      pt = tween._ptLookup[i][p];
+      if (pt && (pt = pt.d)) {
+        if (pt._pt) {
+          pt = _getPluginPropTween(pt, p);
+        }
+        pt && pt.modifier && pt.modifier(modifiers[p], tween, targets[i], p);
+      }
+    }
+  }
+};
+var _buildModifierPlugin = function _buildModifierPlugin2(name, modifier) {
+  return {
+    name,
+    rawVars: 1,
+    //don't pre-process function-based values or "random()" strings.
+    init: function init4(target, vars, tween) {
+      tween._onInit = function(tween2) {
+        var temp, p;
+        if (_isString(vars)) {
+          temp = {};
+          _forEachName(vars, function(name2) {
+            return temp[name2] = 1;
+          });
+          vars = temp;
+        }
+        if (modifier) {
+          temp = {};
+          for (p in vars) {
+            temp[p] = modifier(vars[p]);
+          }
+          vars = temp;
+        }
+        _addModifiers(tween2, vars);
+      };
+    }
+  };
+};
+var gsap = _gsap.registerPlugin({
+  name: "attr",
+  init: function init(target, vars, tween, index, targets) {
+    var p, pt, v;
+    this.tween = tween;
+    for (p in vars) {
+      v = target.getAttribute(p) || "";
+      pt = this.add(target, "setAttribute", (v || 0) + "", vars[p], index, targets, 0, 0, p);
+      pt.op = p;
+      pt.b = v;
+      this._props.push(p);
+    }
+  },
+  render: function render(ratio, data) {
+    var pt = data._pt;
+    while (pt) {
+      _reverting ? pt.set(pt.t, pt.p, pt.b, pt) : pt.r(ratio, pt.d);
+      pt = pt._next;
+    }
+  }
+}, {
+  name: "endArray",
+  init: function init2(target, value) {
+    var i = value.length;
+    while (i--) {
+      this.add(target, i, target[i] || 0, value[i], 0, 0, 0, 0, 0, 1);
+    }
+  }
+}, _buildModifierPlugin("roundProps", _roundModifier), _buildModifierPlugin("modifiers"), _buildModifierPlugin("snap", snap)) || _gsap;
+Tween.version = Timeline.version = gsap.version = "3.11.5";
+_coreReady = 1;
+_windowExists() && _wake();
+var Power0 = _easeMap.Power0;
+var Power1 = _easeMap.Power1;
+var Power2 = _easeMap.Power2;
+var Power3 = _easeMap.Power3;
+var Power4 = _easeMap.Power4;
+var Linear = _easeMap.Linear;
+var Quad = _easeMap.Quad;
+var Cubic = _easeMap.Cubic;
+var Quart = _easeMap.Quart;
+var Quint = _easeMap.Quint;
+var Strong = _easeMap.Strong;
+var Elastic = _easeMap.Elastic;
+var Back = _easeMap.Back;
+var SteppedEase = _easeMap.SteppedEase;
+var Bounce = _easeMap.Bounce;
+var Sine = _easeMap.Sine;
+var Expo = _easeMap.Expo;
+var Circ = _easeMap.Circ;
+
+// node_modules/.pnpm/gsap@3.11.5/node_modules/gsap/CSSPlugin.js
+var _win2;
+var _doc2;
+var _docElement;
+var _pluginInitted;
+var _tempDiv;
+var _tempDivStyler;
+var _recentSetterPlugin;
+var _reverting2;
+var _windowExists3 = function _windowExists4() {
+  return typeof window !== "undefined";
+};
+var _transformProps = {};
+var _RAD2DEG = 180 / Math.PI;
+var _DEG2RAD = Math.PI / 180;
+var _atan2 = Math.atan2;
+var _bigNum2 = 1e8;
+var _capsExp = /([A-Z])/g;
+var _horizontalExp = /(left|right|width|margin|padding|x)/i;
+var _complexExp = /[\s,\(]\S/;
+var _propertyAliases = {
+  autoAlpha: "opacity,visibility",
+  scale: "scaleX,scaleY",
+  alpha: "opacity"
+};
+var _renderCSSProp = function _renderCSSProp2(ratio, data) {
+  return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 1e4) / 1e4 + data.u, data);
+};
+var _renderPropWithEnd = function _renderPropWithEnd2(ratio, data) {
+  return data.set(data.t, data.p, ratio === 1 ? data.e : Math.round((data.s + data.c * ratio) * 1e4) / 1e4 + data.u, data);
+};
+var _renderCSSPropWithBeginning = function _renderCSSPropWithBeginning2(ratio, data) {
+  return data.set(data.t, data.p, ratio ? Math.round((data.s + data.c * ratio) * 1e4) / 1e4 + data.u : data.b, data);
+};
+var _renderRoundedCSSProp = function _renderRoundedCSSProp2(ratio, data) {
+  var value = data.s + data.c * ratio;
+  data.set(data.t, data.p, ~~(value + (value < 0 ? -0.5 : 0.5)) + data.u, data);
+};
+var _renderNonTweeningValue = function _renderNonTweeningValue2(ratio, data) {
+  return data.set(data.t, data.p, ratio ? data.e : data.b, data);
+};
+var _renderNonTweeningValueOnlyAtEnd = function _renderNonTweeningValueOnlyAtEnd2(ratio, data) {
+  return data.set(data.t, data.p, ratio !== 1 ? data.b : data.e, data);
+};
+var _setterCSSStyle = function _setterCSSStyle2(target, property, value) {
+  return target.style[property] = value;
+};
+var _setterCSSProp = function _setterCSSProp2(target, property, value) {
+  return target.style.setProperty(property, value);
+};
+var _setterTransform = function _setterTransform2(target, property, value) {
+  return target._gsap[property] = value;
+};
+var _setterScale = function _setterScale2(target, property, value) {
+  return target._gsap.scaleX = target._gsap.scaleY = value;
+};
+var _setterScaleWithRender = function _setterScaleWithRender2(target, property, value, data, ratio) {
+  var cache = target._gsap;
+  cache.scaleX = cache.scaleY = value;
+  cache.renderTransform(ratio, cache);
+};
+var _setterTransformWithRender = function _setterTransformWithRender2(target, property, value, data, ratio) {
+  var cache = target._gsap;
+  cache[property] = value;
+  cache.renderTransform(ratio, cache);
+};
+var _transformProp = "transform";
+var _transformOriginProp = _transformProp + "Origin";
+var _saveStyle = function _saveStyle2(property, isNotCSS) {
+  var _this = this;
+  var target = this.target, style = target.style;
+  if (property in _transformProps) {
+    this.tfm = this.tfm || {};
+    if (property !== "transform") {
+      property = _propertyAliases[property] || property;
+      ~property.indexOf(",") ? property.split(",").forEach(function(a) {
+        return _this.tfm[a] = _get(target, a);
+      }) : this.tfm[property] = target._gsap.x ? target._gsap[property] : _get(target, property);
+    } else {
+      return _propertyAliases.transform.split(",").forEach(function(p) {
+        return _saveStyle2.call(_this, p, isNotCSS);
+      });
+    }
+    if (this.props.indexOf(_transformProp) >= 0) {
+      return;
+    }
+    if (target._gsap.svg) {
+      this.svgo = target.getAttribute("data-svg-origin");
+      this.props.push(_transformOriginProp, isNotCSS, "");
+    }
+    property = _transformProp;
+  }
+  (style || isNotCSS) && this.props.push(property, isNotCSS, style[property]);
+};
+var _removeIndependentTransforms = function _removeIndependentTransforms2(style) {
+  if (style.translate) {
+    style.removeProperty("translate");
+    style.removeProperty("scale");
+    style.removeProperty("rotate");
+  }
+};
+var _revertStyle = function _revertStyle2() {
+  var props = this.props, target = this.target, style = target.style, cache = target._gsap, i, p;
+  for (i = 0; i < props.length; i += 3) {
+    props[i + 1] ? target[props[i]] = props[i + 2] : props[i + 2] ? style[props[i]] = props[i + 2] : style.removeProperty(props[i].substr(0, 2) === "--" ? props[i] : props[i].replace(_capsExp, "-$1").toLowerCase());
+  }
+  if (this.tfm) {
+    for (p in this.tfm) {
+      cache[p] = this.tfm[p];
+    }
+    if (cache.svg) {
+      cache.renderTransform();
+      target.setAttribute("data-svg-origin", this.svgo || "");
+    }
+    i = _reverting2();
+    if ((!i || !i.isStart) && !style[_transformProp]) {
+      _removeIndependentTransforms(style);
+      cache.uncache = 1;
+    }
+  }
+};
+var _getStyleSaver = function _getStyleSaver2(target, properties) {
+  var saver = {
+    target,
+    props: [],
+    revert: _revertStyle,
+    save: _saveStyle
+  };
+  target._gsap || gsap.core.getCache(target);
+  properties && properties.split(",").forEach(function(p) {
+    return saver.save(p);
+  });
+  return saver;
+};
+var _supports3D;
+var _createElement = function _createElement2(type, ns) {
+  var e = _doc2.createElementNS ? _doc2.createElementNS((ns || "http://www.w3.org/1999/xhtml").replace(/^https/, "http"), type) : _doc2.createElement(type);
+  return e.style ? e : _doc2.createElement(type);
+};
+var _getComputedProperty = function _getComputedProperty2(target, property, skipPrefixFallback) {
+  var cs = getComputedStyle(target);
+  return cs[property] || cs.getPropertyValue(property.replace(_capsExp, "-$1").toLowerCase()) || cs.getPropertyValue(property) || !skipPrefixFallback && _getComputedProperty2(target, _checkPropPrefix(property) || property, 1) || "";
+};
+var _prefixes = "O,Moz,ms,Ms,Webkit".split(",");
+var _checkPropPrefix = function _checkPropPrefix2(property, element, preferPrefix) {
+  var e = element || _tempDiv, s = e.style, i = 5;
+  if (property in s && !preferPrefix) {
+    return property;
+  }
+  property = property.charAt(0).toUpperCase() + property.substr(1);
+  while (i-- && !(_prefixes[i] + property in s)) {
+  }
+  return i < 0 ? null : (i === 3 ? "ms" : i >= 0 ? _prefixes[i] : "") + property;
+};
+var _initCore = function _initCore2() {
+  if (_windowExists3() && window.document) {
+    _win2 = window;
+    _doc2 = _win2.document;
+    _docElement = _doc2.documentElement;
+    _tempDiv = _createElement("div") || {
+      style: {}
+    };
+    _tempDivStyler = _createElement("div");
+    _transformProp = _checkPropPrefix(_transformProp);
+    _transformOriginProp = _transformProp + "Origin";
+    _tempDiv.style.cssText = "border-width:0;line-height:0;position:absolute;padding:0";
+    _supports3D = !!_checkPropPrefix("perspective");
+    _reverting2 = gsap.core.reverting;
+    _pluginInitted = 1;
+  }
+};
+var _getBBoxHack = function _getBBoxHack2(swapIfPossible) {
+  var svg = _createElement("svg", this.ownerSVGElement && this.ownerSVGElement.getAttribute("xmlns") || "http://www.w3.org/2000/svg"), oldParent = this.parentNode, oldSibling = this.nextSibling, oldCSS = this.style.cssText, bbox;
+  _docElement.appendChild(svg);
+  svg.appendChild(this);
+  this.style.display = "block";
+  if (swapIfPossible) {
+    try {
+      bbox = this.getBBox();
+      this._gsapBBox = this.getBBox;
+      this.getBBox = _getBBoxHack2;
+    } catch (e) {
+    }
+  } else if (this._gsapBBox) {
+    bbox = this._gsapBBox();
+  }
+  if (oldParent) {
+    if (oldSibling) {
+      oldParent.insertBefore(this, oldSibling);
+    } else {
+      oldParent.appendChild(this);
+    }
+  }
+  _docElement.removeChild(svg);
+  this.style.cssText = oldCSS;
+  return bbox;
+};
+var _getAttributeFallbacks = function _getAttributeFallbacks2(target, attributesArray) {
+  var i = attributesArray.length;
+  while (i--) {
+    if (target.hasAttribute(attributesArray[i])) {
+      return target.getAttribute(attributesArray[i]);
+    }
+  }
+};
+var _getBBox = function _getBBox2(target) {
+  var bounds;
+  try {
+    bounds = target.getBBox();
+  } catch (error) {
+    bounds = _getBBoxHack.call(target, true);
+  }
+  bounds && (bounds.width || bounds.height) || target.getBBox === _getBBoxHack || (bounds = _getBBoxHack.call(target, true));
+  return bounds && !bounds.width && !bounds.x && !bounds.y ? {
+    x: +_getAttributeFallbacks(target, ["x", "cx", "x1"]) || 0,
+    y: +_getAttributeFallbacks(target, ["y", "cy", "y1"]) || 0,
+    width: 0,
+    height: 0
+  } : bounds;
+};
+var _isSVG = function _isSVG2(e) {
+  return !!(e.getCTM && (!e.parentNode || e.ownerSVGElement) && _getBBox(e));
+};
+var _removeProperty = function _removeProperty2(target, property) {
+  if (property) {
+    var style = target.style;
+    if (property in _transformProps && property !== _transformOriginProp) {
+      property = _transformProp;
+    }
+    if (style.removeProperty) {
+      if (property.substr(0, 2) === "ms" || property.substr(0, 6) === "webkit") {
+        property = "-" + property;
+      }
+      style.removeProperty(property.replace(_capsExp, "-$1").toLowerCase());
+    } else {
+      style.removeAttribute(property);
+    }
+  }
+};
+var _addNonTweeningPT = function _addNonTweeningPT2(plugin, target, property, beginning, end, onlySetAtEnd) {
+  var pt = new PropTween(plugin._pt, target, property, 0, 1, onlySetAtEnd ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue);
+  plugin._pt = pt;
+  pt.b = beginning;
+  pt.e = end;
+  plugin._props.push(property);
+  return pt;
+};
+var _nonConvertibleUnits = {
+  deg: 1,
+  rad: 1,
+  turn: 1
+};
+var _nonStandardLayouts = {
+  grid: 1,
+  flex: 1
+};
+var _convertToUnit = function _convertToUnit2(target, property, value, unit) {
+  var curValue = parseFloat(value) || 0, curUnit = (value + "").trim().substr((curValue + "").length) || "px", style = _tempDiv.style, horizontal = _horizontalExp.test(property), isRootSVG = target.tagName.toLowerCase() === "svg", measureProperty = (isRootSVG ? "client" : "offset") + (horizontal ? "Width" : "Height"), amount = 100, toPixels = unit === "px", toPercent = unit === "%", px, parent, cache, isSVG;
+  if (unit === curUnit || !curValue || _nonConvertibleUnits[unit] || _nonConvertibleUnits[curUnit]) {
+    return curValue;
+  }
+  curUnit !== "px" && !toPixels && (curValue = _convertToUnit2(target, property, value, "px"));
+  isSVG = target.getCTM && _isSVG(target);
+  if ((toPercent || curUnit === "%") && (_transformProps[property] || ~property.indexOf("adius"))) {
+    px = isSVG ? target.getBBox()[horizontal ? "width" : "height"] : target[measureProperty];
+    return _round(toPercent ? curValue / px * amount : curValue / 100 * px);
+  }
+  style[horizontal ? "width" : "height"] = amount + (toPixels ? curUnit : unit);
+  parent = ~property.indexOf("adius") || unit === "em" && target.appendChild && !isRootSVG ? target : target.parentNode;
+  if (isSVG) {
+    parent = (target.ownerSVGElement || {}).parentNode;
+  }
+  if (!parent || parent === _doc2 || !parent.appendChild) {
+    parent = _doc2.body;
+  }
+  cache = parent._gsap;
+  if (cache && toPercent && cache.width && horizontal && cache.time === _ticker.time && !cache.uncache) {
+    return _round(curValue / cache.width * amount);
+  } else {
+    (toPercent || curUnit === "%") && !_nonStandardLayouts[_getComputedProperty(parent, "display")] && (style.position = _getComputedProperty(target, "position"));
+    parent === target && (style.position = "static");
+    parent.appendChild(_tempDiv);
+    px = _tempDiv[measureProperty];
+    parent.removeChild(_tempDiv);
+    style.position = "absolute";
+    if (horizontal && toPercent) {
+      cache = _getCache(parent);
+      cache.time = _ticker.time;
+      cache.width = parent[measureProperty];
+    }
+  }
+  return _round(toPixels ? px * curValue / amount : px && curValue ? amount / px * curValue : 0);
+};
+var _get = function _get2(target, property, unit, uncache) {
+  var value;
+  _pluginInitted || _initCore();
+  if (property in _propertyAliases && property !== "transform") {
+    property = _propertyAliases[property];
+    if (~property.indexOf(",")) {
+      property = property.split(",")[0];
+    }
+  }
+  if (_transformProps[property] && property !== "transform") {
+    value = _parseTransform(target, uncache);
+    value = property !== "transformOrigin" ? value[property] : value.svg ? value.origin : _firstTwoOnly(_getComputedProperty(target, _transformOriginProp)) + " " + value.zOrigin + "px";
+  } else {
+    value = target.style[property];
+    if (!value || value === "auto" || uncache || ~(value + "").indexOf("calc(")) {
+      value = _specialProps[property] && _specialProps[property](target, property, unit) || _getComputedProperty(target, property) || _getProperty(target, property) || (property === "opacity" ? 1 : 0);
+    }
+  }
+  return unit && !~(value + "").trim().indexOf(" ") ? _convertToUnit(target, property, value, unit) + unit : value;
+};
+var _tweenComplexCSSString = function _tweenComplexCSSString2(target, prop, start, end) {
+  if (!start || start === "none") {
+    var p = _checkPropPrefix(prop, target, 1), s = p && _getComputedProperty(target, p, 1);
+    if (s && s !== start) {
+      prop = p;
+      start = s;
+    } else if (prop === "borderColor") {
+      start = _getComputedProperty(target, "borderTopColor");
+    }
+  }
+  var pt = new PropTween(this._pt, target.style, prop, 0, 1, _renderComplexString), index = 0, matchIndex = 0, a, result, startValues, startNum, color, startValue, endValue, endNum, chunk, endUnit, startUnit, endValues;
+  pt.b = start;
+  pt.e = end;
+  start += "";
+  end += "";
+  if (end === "auto") {
+    target.style[prop] = end;
+    end = _getComputedProperty(target, prop) || end;
+    target.style[prop] = start;
+  }
+  a = [start, end];
+  _colorStringFilter(a);
+  start = a[0];
+  end = a[1];
+  startValues = start.match(_numWithUnitExp) || [];
+  endValues = end.match(_numWithUnitExp) || [];
+  if (endValues.length) {
+    while (result = _numWithUnitExp.exec(end)) {
+      endValue = result[0];
+      chunk = end.substring(index, result.index);
+      if (color) {
+        color = (color + 1) % 5;
+      } else if (chunk.substr(-5) === "rgba(" || chunk.substr(-5) === "hsla(") {
+        color = 1;
+      }
+      if (endValue !== (startValue = startValues[matchIndex++] || "")) {
+        startNum = parseFloat(startValue) || 0;
+        startUnit = startValue.substr((startNum + "").length);
+        endValue.charAt(1) === "=" && (endValue = _parseRelative(startNum, endValue) + startUnit);
+        endNum = parseFloat(endValue);
+        endUnit = endValue.substr((endNum + "").length);
+        index = _numWithUnitExp.lastIndex - endUnit.length;
+        if (!endUnit) {
+          endUnit = endUnit || _config.units[prop] || startUnit;
+          if (index === end.length) {
+            end += endUnit;
+            pt.e += endUnit;
+          }
+        }
+        if (startUnit !== endUnit) {
+          startNum = _convertToUnit(target, prop, startValue, endUnit) || 0;
+        }
+        pt._pt = {
+          _next: pt._pt,
+          p: chunk || matchIndex === 1 ? chunk : ",",
+          //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.
+          s: startNum,
+          c: endNum - startNum,
+          m: color && color < 4 || prop === "zIndex" ? Math.round : 0
+        };
+      }
+    }
+    pt.c = index < end.length ? end.substring(index, end.length) : "";
+  } else {
+    pt.r = prop === "display" && end === "none" ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue;
+  }
+  _relExp.test(end) && (pt.e = 0);
+  this._pt = pt;
+  return pt;
+};
+var _keywordToPercent = {
+  top: "0%",
+  bottom: "100%",
+  left: "0%",
+  right: "100%",
+  center: "50%"
+};
+var _convertKeywordsToPercentages = function _convertKeywordsToPercentages2(value) {
+  var split = value.split(" "), x = split[0], y = split[1] || "50%";
+  if (x === "top" || x === "bottom" || y === "left" || y === "right") {
+    value = x;
+    x = y;
+    y = value;
+  }
+  split[0] = _keywordToPercent[x] || x;
+  split[1] = _keywordToPercent[y] || y;
+  return split.join(" ");
+};
+var _renderClearProps = function _renderClearProps2(ratio, data) {
+  if (data.tween && data.tween._time === data.tween._dur) {
+    var target = data.t, style = target.style, props = data.u, cache = target._gsap, prop, clearTransforms, i;
+    if (props === "all" || props === true) {
+      style.cssText = "";
+      clearTransforms = 1;
+    } else {
+      props = props.split(",");
+      i = props.length;
+      while (--i > -1) {
+        prop = props[i];
+        if (_transformProps[prop]) {
+          clearTransforms = 1;
+          prop = prop === "transformOrigin" ? _transformOriginProp : _transformProp;
+        }
+        _removeProperty(target, prop);
+      }
+    }
+    if (clearTransforms) {
+      _removeProperty(target, _transformProp);
+      if (cache) {
+        cache.svg && target.removeAttribute("transform");
+        _parseTransform(target, 1);
+        cache.uncache = 1;
+        _removeIndependentTransforms(style);
+      }
+    }
+  }
+};
+var _specialProps = {
+  clearProps: function clearProps(plugin, target, property, endValue, tween) {
+    if (tween.data !== "isFromStart") {
+      var pt = plugin._pt = new PropTween(plugin._pt, target, property, 0, 0, _renderClearProps);
+      pt.u = endValue;
+      pt.pr = -10;
+      pt.tween = tween;
+      plugin._props.push(property);
+      return 1;
+    }
+  }
+  /* className feature (about 0.4kb gzipped).
+  , className(plugin, target, property, endValue, tween) {
+  	let _renderClassName = (ratio, data) => {
+  			data.css.render(ratio, data.css);
+  			if (!ratio || ratio === 1) {
+  				let inline = data.rmv,
+  					target = data.t,
+  					p;
+  				target.setAttribute("class", ratio ? data.e : data.b);
+  				for (p in inline) {
+  					_removeProperty(target, p);
+  				}
+  			}
+  		},
+  		_getAllStyles = (target) => {
+  			let styles = {},
+  				computed = getComputedStyle(target),
+  				p;
+  			for (p in computed) {
+  				if (isNaN(p) && p !== "cssText" && p !== "length") {
+  					styles[p] = computed[p];
+  				}
+  			}
+  			_setDefaults(styles, _parseTransform(target, 1));
+  			return styles;
+  		},
+  		startClassList = target.getAttribute("class"),
+  		style = target.style,
+  		cssText = style.cssText,
+  		cache = target._gsap,
+  		classPT = cache.classPT,
+  		inlineToRemoveAtEnd = {},
+  		data = {t:target, plugin:plugin, rmv:inlineToRemoveAtEnd, b:startClassList, e:(endValue.charAt(1) !== "=") ? endValue : startClassList.replace(new RegExp("(?:\\s|^)" + endValue.substr(2) + "(?![\\w-])"), "") + ((endValue.charAt(0) === "+") ? " " + endValue.substr(2) : "")},
+  		changingVars = {},
+  		startVars = _getAllStyles(target),
+  		transformRelated = /(transform|perspective)/i,
+  		endVars, p;
+  	if (classPT) {
+  		classPT.r(1, classPT.d);
+  		_removeLinkedListItem(classPT.d.plugin, classPT, "_pt");
+  	}
+  	target.setAttribute("class", data.e);
+  	endVars = _getAllStyles(target, true);
+  	target.setAttribute("class", startClassList);
+  	for (p in endVars) {
+  		if (endVars[p] !== startVars[p] && !transformRelated.test(p)) {
+  			changingVars[p] = endVars[p];
+  			if (!style[p] && style[p] !== "0") {
+  				inlineToRemoveAtEnd[p] = 1;
+  			}
+  		}
+  	}
+  	cache.classPT = plugin._pt = new PropTween(plugin._pt, target, "className", 0, 0, _renderClassName, data, 0, -11);
+  	if (style.cssText !== cssText) { //only apply if things change. Otherwise, in cases like a background-image that's pulled dynamically, it could cause a refresh. See https://greensock.com/forums/topic/20368-possible-gsap-bug-switching-classnames-in-chrome/.
+  		style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity).
+  	}
+  	_parseTransform(target, true); //to clear the caching of transforms
+  	data.css = new gsap.plugins.css();
+  	data.css.init(target, changingVars, tween);
+  	plugin._props.push(...data.css._props);
+  	return 1;
+  }
+  */
+};
+var _identity2DMatrix = [1, 0, 0, 1, 0, 0];
+var _rotationalProperties = {};
+var _isNullTransform = function _isNullTransform2(value) {
+  return value === "matrix(1, 0, 0, 1, 0, 0)" || value === "none" || !value;
+};
+var _getComputedTransformMatrixAsArray = function _getComputedTransformMatrixAsArray2(target) {
+  var matrixString = _getComputedProperty(target, _transformProp);
+  return _isNullTransform(matrixString) ? _identity2DMatrix : matrixString.substr(7).match(_numExp).map(_round);
+};
+var _getMatrix = function _getMatrix2(target, force2D) {
+  var cache = target._gsap || _getCache(target), style = target.style, matrix = _getComputedTransformMatrixAsArray(target), parent, nextSibling, temp, addedToDOM;
+  if (cache.svg && target.getAttribute("transform")) {
+    temp = target.transform.baseVal.consolidate().matrix;
+    matrix = [temp.a, temp.b, temp.c, temp.d, temp.e, temp.f];
+    return matrix.join(",") === "1,0,0,1,0,0" ? _identity2DMatrix : matrix;
+  } else if (matrix === _identity2DMatrix && !target.offsetParent && target !== _docElement && !cache.svg) {
+    temp = style.display;
+    style.display = "block";
+    parent = target.parentNode;
+    if (!parent || !target.offsetParent) {
+      addedToDOM = 1;
+      nextSibling = target.nextElementSibling;
+      _docElement.appendChild(target);
+    }
+    matrix = _getComputedTransformMatrixAsArray(target);
+    temp ? style.display = temp : _removeProperty(target, "display");
+    if (addedToDOM) {
+      nextSibling ? parent.insertBefore(target, nextSibling) : parent ? parent.appendChild(target) : _docElement.removeChild(target);
+    }
+  }
+  return force2D && matrix.length > 6 ? [matrix[0], matrix[1], matrix[4], matrix[5], matrix[12], matrix[13]] : matrix;
+};
+var _applySVGOrigin = function _applySVGOrigin2(target, origin, originIsAbsolute, smooth, matrixArray, pluginToAddPropTweensTo) {
+  var cache = target._gsap, matrix = matrixArray || _getMatrix(target, true), xOriginOld = cache.xOrigin || 0, yOriginOld = cache.yOrigin || 0, xOffsetOld = cache.xOffset || 0, yOffsetOld = cache.yOffset || 0, a = matrix[0], b = matrix[1], c = matrix[2], d = matrix[3], tx = matrix[4], ty = matrix[5], originSplit = origin.split(" "), xOrigin = parseFloat(originSplit[0]) || 0, yOrigin = parseFloat(originSplit[1]) || 0, bounds, determinant, x, y;
+  if (!originIsAbsolute) {
+    bounds = _getBBox(target);
+    xOrigin = bounds.x + (~originSplit[0].indexOf("%") ? xOrigin / 100 * bounds.width : xOrigin);
+    yOrigin = bounds.y + (~(originSplit[1] || originSplit[0]).indexOf("%") ? yOrigin / 100 * bounds.height : yOrigin);
+  } else if (matrix !== _identity2DMatrix && (determinant = a * d - b * c)) {
+    x = xOrigin * (d / determinant) + yOrigin * (-c / determinant) + (c * ty - d * tx) / determinant;
+    y = xOrigin * (-b / determinant) + yOrigin * (a / determinant) - (a * ty - b * tx) / determinant;
+    xOrigin = x;
+    yOrigin = y;
+  }
+  if (smooth || smooth !== false && cache.smooth) {
+    tx = xOrigin - xOriginOld;
+    ty = yOrigin - yOriginOld;
+    cache.xOffset = xOffsetOld + (tx * a + ty * c) - tx;
+    cache.yOffset = yOffsetOld + (tx * b + ty * d) - ty;
+  } else {
+    cache.xOffset = cache.yOffset = 0;
+  }
+  cache.xOrigin = xOrigin;
+  cache.yOrigin = yOrigin;
+  cache.smooth = !!smooth;
+  cache.origin = origin;
+  cache.originIsAbsolute = !!originIsAbsolute;
+  target.style[_transformOriginProp] = "0px 0px";
+  if (pluginToAddPropTweensTo) {
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOrigin", xOriginOld, xOrigin);
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOrigin", yOriginOld, yOrigin);
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOffset", xOffsetOld, cache.xOffset);
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOffset", yOffsetOld, cache.yOffset);
+  }
+  target.setAttribute("data-svg-origin", xOrigin + " " + yOrigin);
+};
+var _parseTransform = function _parseTransform2(target, uncache) {
+  var cache = target._gsap || new GSCache(target);
+  if ("x" in cache && !uncache && !cache.uncache) {
+    return cache;
+  }
+  var style = target.style, invertedScaleX = cache.scaleX < 0, px = "px", deg = "deg", cs = getComputedStyle(target), origin = _getComputedProperty(target, _transformOriginProp) || "0", x, y, z, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY, perspective, xOrigin, yOrigin, matrix, angle, cos, sin, a, b, c, d, a12, a22, t1, t2, t3, a13, a23, a33, a42, a43, a32;
+  x = y = z = rotation = rotationX = rotationY = skewX = skewY = perspective = 0;
+  scaleX = scaleY = 1;
+  cache.svg = !!(target.getCTM && _isSVG(target));
+  if (cs.translate) {
+    if (cs.translate !== "none" || cs.scale !== "none" || cs.rotate !== "none") {
+      style[_transformProp] = (cs.translate !== "none" ? "translate3d(" + (cs.translate + " 0 0").split(" ").slice(0, 3).join(", ") + ") " : "") + (cs.rotate !== "none" ? "rotate(" + cs.rotate + ") " : "") + (cs.scale !== "none" ? "scale(" + cs.scale.split(" ").join(",") + ") " : "") + (cs[_transformProp] !== "none" ? cs[_transformProp] : "");
+    }
+    style.scale = style.rotate = style.translate = "none";
+  }
+  matrix = _getMatrix(target, cache.svg);
+  if (cache.svg) {
+    if (cache.uncache) {
+      t2 = target.getBBox();
+      origin = cache.xOrigin - t2.x + "px " + (cache.yOrigin - t2.y) + "px";
+      t1 = "";
+    } else {
+      t1 = !uncache && target.getAttribute("data-svg-origin");
+    }
+    _applySVGOrigin(target, t1 || origin, !!t1 || cache.originIsAbsolute, cache.smooth !== false, matrix);
+  }
+  xOrigin = cache.xOrigin || 0;
+  yOrigin = cache.yOrigin || 0;
+  if (matrix !== _identity2DMatrix) {
+    a = matrix[0];
+    b = matrix[1];
+    c = matrix[2];
+    d = matrix[3];
+    x = a12 = matrix[4];
+    y = a22 = matrix[5];
+    if (matrix.length === 6) {
+      scaleX = Math.sqrt(a * a + b * b);
+      scaleY = Math.sqrt(d * d + c * c);
+      rotation = a || b ? _atan2(b, a) * _RAD2DEG : 0;
+      skewX = c || d ? _atan2(c, d) * _RAD2DEG + rotation : 0;
+      skewX && (scaleY *= Math.abs(Math.cos(skewX * _DEG2RAD)));
+      if (cache.svg) {
+        x -= xOrigin - (xOrigin * a + yOrigin * c);
+        y -= yOrigin - (xOrigin * b + yOrigin * d);
+      }
+    } else {
+      a32 = matrix[6];
+      a42 = matrix[7];
+      a13 = matrix[8];
+      a23 = matrix[9];
+      a33 = matrix[10];
+      a43 = matrix[11];
+      x = matrix[12];
+      y = matrix[13];
+      z = matrix[14];
+      angle = _atan2(a32, a33);
+      rotationX = angle * _RAD2DEG;
+      if (angle) {
+        cos = Math.cos(-angle);
+        sin = Math.sin(-angle);
+        t1 = a12 * cos + a13 * sin;
+        t2 = a22 * cos + a23 * sin;
+        t3 = a32 * cos + a33 * sin;
+        a13 = a12 * -sin + a13 * cos;
+        a23 = a22 * -sin + a23 * cos;
+        a33 = a32 * -sin + a33 * cos;
+        a43 = a42 * -sin + a43 * cos;
+        a12 = t1;
+        a22 = t2;
+        a32 = t3;
+      }
+      angle = _atan2(-c, a33);
+      rotationY = angle * _RAD2DEG;
+      if (angle) {
+        cos = Math.cos(-angle);
+        sin = Math.sin(-angle);
+        t1 = a * cos - a13 * sin;
+        t2 = b * cos - a23 * sin;
+        t3 = c * cos - a33 * sin;
+        a43 = d * sin + a43 * cos;
+        a = t1;
+        b = t2;
+        c = t3;
+      }
+      angle = _atan2(b, a);
+      rotation = angle * _RAD2DEG;
+      if (angle) {
+        cos = Math.cos(angle);
+        sin = Math.sin(angle);
+        t1 = a * cos + b * sin;
+        t2 = a12 * cos + a22 * sin;
+        b = b * cos - a * sin;
+        a22 = a22 * cos - a12 * sin;
+        a = t1;
+        a12 = t2;
+      }
+      if (rotationX && Math.abs(rotationX) + Math.abs(rotation) > 359.9) {
+        rotationX = rotation = 0;
+        rotationY = 180 - rotationY;
+      }
+      scaleX = _round(Math.sqrt(a * a + b * b + c * c));
+      scaleY = _round(Math.sqrt(a22 * a22 + a32 * a32));
+      angle = _atan2(a12, a22);
+      skewX = Math.abs(angle) > 2e-4 ? angle * _RAD2DEG : 0;
+      perspective = a43 ? 1 / (a43 < 0 ? -a43 : a43) : 0;
+    }
+    if (cache.svg) {
+      t1 = target.getAttribute("transform");
+      cache.forceCSS = target.setAttribute("transform", "") || !_isNullTransform(_getComputedProperty(target, _transformProp));
+      t1 && target.setAttribute("transform", t1);
+    }
+  }
+  if (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) {
+    if (invertedScaleX) {
+      scaleX *= -1;
+      skewX += rotation <= 0 ? 180 : -180;
+      rotation += rotation <= 0 ? 180 : -180;
+    } else {
+      scaleY *= -1;
+      skewX += skewX <= 0 ? 180 : -180;
+    }
+  }
+  uncache = uncache || cache.uncache;
+  cache.x = x - ((cache.xPercent = x && (!uncache && cache.xPercent || (Math.round(target.offsetWidth / 2) === Math.round(-x) ? -50 : 0))) ? target.offsetWidth * cache.xPercent / 100 : 0) + px;
+  cache.y = y - ((cache.yPercent = y && (!uncache && cache.yPercent || (Math.round(target.offsetHeight / 2) === Math.round(-y) ? -50 : 0))) ? target.offsetHeight * cache.yPercent / 100 : 0) + px;
+  cache.z = z + px;
+  cache.scaleX = _round(scaleX);
+  cache.scaleY = _round(scaleY);
+  cache.rotation = _round(rotation) + deg;
+  cache.rotationX = _round(rotationX) + deg;
+  cache.rotationY = _round(rotationY) + deg;
+  cache.skewX = skewX + deg;
+  cache.skewY = skewY + deg;
+  cache.transformPerspective = perspective + px;
+  if (cache.zOrigin = parseFloat(origin.split(" ")[2]) || 0) {
+    style[_transformOriginProp] = _firstTwoOnly(origin);
+  }
+  cache.xOffset = cache.yOffset = 0;
+  cache.force3D = _config.force3D;
+  cache.renderTransform = cache.svg ? _renderSVGTransforms : _supports3D ? _renderCSSTransforms : _renderNon3DTransforms;
+  cache.uncache = 0;
+  return cache;
+};
+var _firstTwoOnly = function _firstTwoOnly2(value) {
+  return (value = value.split(" "))[0] + " " + value[1];
+};
+var _addPxTranslate = function _addPxTranslate2(target, start, value) {
+  var unit = getUnit(start);
+  return _round(parseFloat(start) + parseFloat(_convertToUnit(target, "x", value + "px", unit))) + unit;
+};
+var _renderNon3DTransforms = function _renderNon3DTransforms2(ratio, cache) {
+  cache.z = "0px";
+  cache.rotationY = cache.rotationX = "0deg";
+  cache.force3D = 0;
+  _renderCSSTransforms(ratio, cache);
+};
+var _zeroDeg = "0deg";
+var _zeroPx = "0px";
+var _endParenthesis = ") ";
+var _renderCSSTransforms = function _renderCSSTransforms2(ratio, cache) {
+  var _ref = cache || this, xPercent = _ref.xPercent, yPercent = _ref.yPercent, x = _ref.x, y = _ref.y, z = _ref.z, rotation = _ref.rotation, rotationY = _ref.rotationY, rotationX = _ref.rotationX, skewX = _ref.skewX, skewY = _ref.skewY, scaleX = _ref.scaleX, scaleY = _ref.scaleY, transformPerspective = _ref.transformPerspective, force3D = _ref.force3D, target = _ref.target, zOrigin = _ref.zOrigin, transforms = "", use3D = force3D === "auto" && ratio && ratio !== 1 || force3D === true;
+  if (zOrigin && (rotationX !== _zeroDeg || rotationY !== _zeroDeg)) {
+    var angle = parseFloat(rotationY) * _DEG2RAD, a13 = Math.sin(angle), a33 = Math.cos(angle), cos;
+    angle = parseFloat(rotationX) * _DEG2RAD;
+    cos = Math.cos(angle);
+    x = _addPxTranslate(target, x, a13 * cos * -zOrigin);
+    y = _addPxTranslate(target, y, -Math.sin(angle) * -zOrigin);
+    z = _addPxTranslate(target, z, a33 * cos * -zOrigin + zOrigin);
+  }
+  if (transformPerspective !== _zeroPx) {
+    transforms += "perspective(" + transformPerspective + _endParenthesis;
+  }
+  if (xPercent || yPercent) {
+    transforms += "translate(" + xPercent + "%, " + yPercent + "%) ";
+  }
+  if (use3D || x !== _zeroPx || y !== _zeroPx || z !== _zeroPx) {
+    transforms += z !== _zeroPx || use3D ? "translate3d(" + x + ", " + y + ", " + z + ") " : "translate(" + x + ", " + y + _endParenthesis;
+  }
+  if (rotation !== _zeroDeg) {
+    transforms += "rotate(" + rotation + _endParenthesis;
+  }
+  if (rotationY !== _zeroDeg) {
+    transforms += "rotateY(" + rotationY + _endParenthesis;
+  }
+  if (rotationX !== _zeroDeg) {
+    transforms += "rotateX(" + rotationX + _endParenthesis;
+  }
+  if (skewX !== _zeroDeg || skewY !== _zeroDeg) {
+    transforms += "skew(" + skewX + ", " + skewY + _endParenthesis;
+  }
+  if (scaleX !== 1 || scaleY !== 1) {
+    transforms += "scale(" + scaleX + ", " + scaleY + _endParenthesis;
+  }
+  target.style[_transformProp] = transforms || "translate(0, 0)";
+};
+var _renderSVGTransforms = function _renderSVGTransforms2(ratio, cache) {
+  var _ref2 = cache || this, xPercent = _ref2.xPercent, yPercent = _ref2.yPercent, x = _ref2.x, y = _ref2.y, rotation = _ref2.rotation, skewX = _ref2.skewX, skewY = _ref2.skewY, scaleX = _ref2.scaleX, scaleY = _ref2.scaleY, target = _ref2.target, xOrigin = _ref2.xOrigin, yOrigin = _ref2.yOrigin, xOffset = _ref2.xOffset, yOffset = _ref2.yOffset, forceCSS = _ref2.forceCSS, tx = parseFloat(x), ty = parseFloat(y), a11, a21, a12, a22, temp;
+  rotation = parseFloat(rotation);
+  skewX = parseFloat(skewX);
+  skewY = parseFloat(skewY);
+  if (skewY) {
+    skewY = parseFloat(skewY);
+    skewX += skewY;
+    rotation += skewY;
+  }
+  if (rotation || skewX) {
+    rotation *= _DEG2RAD;
+    skewX *= _DEG2RAD;
+    a11 = Math.cos(rotation) * scaleX;
+    a21 = Math.sin(rotation) * scaleX;
+    a12 = Math.sin(rotation - skewX) * -scaleY;
+    a22 = Math.cos(rotation - skewX) * scaleY;
+    if (skewX) {
+      skewY *= _DEG2RAD;
+      temp = Math.tan(skewX - skewY);
+      temp = Math.sqrt(1 + temp * temp);
+      a12 *= temp;
+      a22 *= temp;
+      if (skewY) {
+        temp = Math.tan(skewY);
+        temp = Math.sqrt(1 + temp * temp);
+        a11 *= temp;
+        a21 *= temp;
+      }
+    }
+    a11 = _round(a11);
+    a21 = _round(a21);
+    a12 = _round(a12);
+    a22 = _round(a22);
+  } else {
+    a11 = scaleX;
+    a22 = scaleY;
+    a21 = a12 = 0;
+  }
+  if (tx && !~(x + "").indexOf("px") || ty && !~(y + "").indexOf("px")) {
+    tx = _convertToUnit(target, "x", x, "px");
+    ty = _convertToUnit(target, "y", y, "px");
+  }
+  if (xOrigin || yOrigin || xOffset || yOffset) {
+    tx = _round(tx + xOrigin - (xOrigin * a11 + yOrigin * a12) + xOffset);
+    ty = _round(ty + yOrigin - (xOrigin * a21 + yOrigin * a22) + yOffset);
+  }
+  if (xPercent || yPercent) {
+    temp = target.getBBox();
+    tx = _round(tx + xPercent / 100 * temp.width);
+    ty = _round(ty + yPercent / 100 * temp.height);
+  }
+  temp = "matrix(" + a11 + "," + a21 + "," + a12 + "," + a22 + "," + tx + "," + ty + ")";
+  target.setAttribute("transform", temp);
+  forceCSS && (target.style[_transformProp] = temp);
+};
+var _addRotationalPropTween = function _addRotationalPropTween2(plugin, target, property, startNum, endValue) {
+  var cap = 360, isString = _isString(endValue), endNum = parseFloat(endValue) * (isString && ~endValue.indexOf("rad") ? _RAD2DEG : 1), change = endNum - startNum, finalValue = startNum + change + "deg", direction, pt;
+  if (isString) {
+    direction = endValue.split("_")[1];
+    if (direction === "short") {
+      change %= cap;
+      if (change !== change % (cap / 2)) {
+        change += change < 0 ? cap : -cap;
+      }
+    }
+    if (direction === "cw" && change < 0) {
+      change = (change + cap * _bigNum2) % cap - ~~(change / cap) * cap;
+    } else if (direction === "ccw" && change > 0) {
+      change = (change - cap * _bigNum2) % cap - ~~(change / cap) * cap;
+    }
+  }
+  plugin._pt = pt = new PropTween(plugin._pt, target, property, startNum, change, _renderPropWithEnd);
+  pt.e = finalValue;
+  pt.u = "deg";
+  plugin._props.push(property);
+  return pt;
+};
+var _assign = function _assign2(target, source) {
+  for (var p in source) {
+    target[p] = source[p];
+  }
+  return target;
+};
+var _addRawTransformPTs = function _addRawTransformPTs2(plugin, transforms, target) {
+  var startCache = _assign({}, target._gsap), exclude = "perspective,force3D,transformOrigin,svgOrigin", style = target.style, endCache, p, startValue, endValue, startNum, endNum, startUnit, endUnit;
+  if (startCache.svg) {
+    startValue = target.getAttribute("transform");
+    target.setAttribute("transform", "");
+    style[_transformProp] = transforms;
+    endCache = _parseTransform(target, 1);
+    _removeProperty(target, _transformProp);
+    target.setAttribute("transform", startValue);
+  } else {
+    startValue = getComputedStyle(target)[_transformProp];
+    style[_transformProp] = transforms;
+    endCache = _parseTransform(target, 1);
+    style[_transformProp] = startValue;
+  }
+  for (p in _transformProps) {
+    startValue = startCache[p];
+    endValue = endCache[p];
+    if (startValue !== endValue && exclude.indexOf(p) < 0) {
+      startUnit = getUnit(startValue);
+      endUnit = getUnit(endValue);
+      startNum = startUnit !== endUnit ? _convertToUnit(target, p, startValue, endUnit) : parseFloat(startValue);
+      endNum = parseFloat(endValue);
+      plugin._pt = new PropTween(plugin._pt, endCache, p, startNum, endNum - startNum, _renderCSSProp);
+      plugin._pt.u = endUnit || 0;
+      plugin._props.push(p);
+    }
+  }
+  _assign(endCache, startCache);
+};
+_forEachName("padding,margin,Width,Radius", function(name, index) {
+  var t = "Top", r = "Right", b = "Bottom", l = "Left", props = (index < 3 ? [t, r, b, l] : [t + l, t + r, b + r, b + l]).map(function(side) {
+    return index < 2 ? name + side : "border" + side + name;
+  });
+  _specialProps[index > 1 ? "border" + name : name] = function(plugin, target, property, endValue, tween) {
+    var a, vars;
+    if (arguments.length < 4) {
+      a = props.map(function(prop) {
+        return _get(plugin, prop, property);
+      });
+      vars = a.join(" ");
+      return vars.split(a[0]).length === 5 ? a[0] : vars;
+    }
+    a = (endValue + "").split(" ");
+    vars = {};
+    props.forEach(function(prop, i) {
+      return vars[prop] = a[i] = a[i] || a[(i - 1) / 2 | 0];
+    });
+    plugin.init(target, vars, tween);
+  };
+});
+var CSSPlugin = {
+  name: "css",
+  register: _initCore,
+  targetTest: function targetTest(target) {
+    return target.style && target.nodeType;
+  },
+  init: function init3(target, vars, tween, index, targets) {
+    var props = this._props, style = target.style, startAt = tween.vars.startAt, startValue, endValue, endNum, startNum, type, specialProp, p, startUnit, endUnit, relative, isTransformRelated, transformPropTween, cache, smooth, hasPriority, inlineProps;
+    _pluginInitted || _initCore();
+    this.styles = this.styles || _getStyleSaver(target);
+    inlineProps = this.styles.props;
+    this.tween = tween;
+    for (p in vars) {
+      if (p === "autoRound") {
+        continue;
+      }
+      endValue = vars[p];
+      if (_plugins[p] && _checkPlugin(p, vars, tween, index, target, targets)) {
+        continue;
+      }
+      type = typeof endValue;
+      specialProp = _specialProps[p];
+      if (type === "function") {
+        endValue = endValue.call(tween, index, target, targets);
+        type = typeof endValue;
+      }
+      if (type === "string" && ~endValue.indexOf("random(")) {
+        endValue = _replaceRandom(endValue);
+      }
+      if (specialProp) {
+        specialProp(this, target, p, endValue, tween) && (hasPriority = 1);
+      } else if (p.substr(0, 2) === "--") {
+        startValue = (getComputedStyle(target).getPropertyValue(p) + "").trim();
+        endValue += "";
+        _colorExp.lastIndex = 0;
+        if (!_colorExp.test(startValue)) {
+          startUnit = getUnit(startValue);
+          endUnit = getUnit(endValue);
+        }
+        endUnit ? startUnit !== endUnit && (startValue = _convertToUnit(target, p, startValue, endUnit) + endUnit) : startUnit && (endValue += startUnit);
+        this.add(style, "setProperty", startValue, endValue, index, targets, 0, 0, p);
+        props.push(p);
+        inlineProps.push(p, 0, style[p]);
+      } else if (type !== "undefined") {
+        if (startAt && p in startAt) {
+          startValue = typeof startAt[p] === "function" ? startAt[p].call(tween, index, target, targets) : startAt[p];
+          _isString(startValue) && ~startValue.indexOf("random(") && (startValue = _replaceRandom(startValue));
+          getUnit(startValue + "") || (startValue += _config.units[p] || getUnit(_get(target, p)) || "");
+          (startValue + "").charAt(1) === "=" && (startValue = _get(target, p));
+        } else {
+          startValue = _get(target, p);
+        }
+        startNum = parseFloat(startValue);
+        relative = type === "string" && endValue.charAt(1) === "=" && endValue.substr(0, 2);
+        relative && (endValue = endValue.substr(2));
+        endNum = parseFloat(endValue);
+        if (p in _propertyAliases) {
+          if (p === "autoAlpha") {
+            if (startNum === 1 && _get(target, "visibility") === "hidden" && endNum) {
+              startNum = 0;
+            }
+            inlineProps.push("visibility", 0, style.visibility);
+            _addNonTweeningPT(this, style, "visibility", startNum ? "inherit" : "hidden", endNum ? "inherit" : "hidden", !endNum);
+          }
+          if (p !== "scale" && p !== "transform") {
+            p = _propertyAliases[p];
+            ~p.indexOf(",") && (p = p.split(",")[0]);
+          }
+        }
+        isTransformRelated = p in _transformProps;
+        if (isTransformRelated) {
+          this.styles.save(p);
+          if (!transformPropTween) {
+            cache = target._gsap;
+            cache.renderTransform && !vars.parseTransform || _parseTransform(target, vars.parseTransform);
+            smooth = vars.smoothOrigin !== false && cache.smooth;
+            transformPropTween = this._pt = new PropTween(this._pt, style, _transformProp, 0, 1, cache.renderTransform, cache, 0, -1);
+            transformPropTween.dep = 1;
+          }
+          if (p === "scale") {
+            this._pt = new PropTween(this._pt, cache, "scaleY", cache.scaleY, (relative ? _parseRelative(cache.scaleY, relative + endNum) : endNum) - cache.scaleY || 0, _renderCSSProp);
+            this._pt.u = 0;
+            props.push("scaleY", p);
+            p += "X";
+          } else if (p === "transformOrigin") {
+            inlineProps.push(_transformOriginProp, 0, style[_transformOriginProp]);
+            endValue = _convertKeywordsToPercentages(endValue);
+            if (cache.svg) {
+              _applySVGOrigin(target, endValue, 0, smooth, 0, this);
+            } else {
+              endUnit = parseFloat(endValue.split(" ")[2]) || 0;
+              endUnit !== cache.zOrigin && _addNonTweeningPT(this, cache, "zOrigin", cache.zOrigin, endUnit);
+              _addNonTweeningPT(this, style, p, _firstTwoOnly(startValue), _firstTwoOnly(endValue));
+            }
+            continue;
+          } else if (p === "svgOrigin") {
+            _applySVGOrigin(target, endValue, 1, smooth, 0, this);
+            continue;
+          } else if (p in _rotationalProperties) {
+            _addRotationalPropTween(this, cache, p, startNum, relative ? _parseRelative(startNum, relative + endValue) : endValue);
+            continue;
+          } else if (p === "smoothOrigin") {
+            _addNonTweeningPT(this, cache, "smooth", cache.smooth, endValue);
+            continue;
+          } else if (p === "force3D") {
+            cache[p] = endValue;
+            continue;
+          } else if (p === "transform") {
+            _addRawTransformPTs(this, endValue, target);
+            continue;
+          }
+        } else if (!(p in style)) {
+          p = _checkPropPrefix(p) || p;
+        }
+        if (isTransformRelated || (endNum || endNum === 0) && (startNum || startNum === 0) && !_complexExp.test(endValue) && p in style) {
+          startUnit = (startValue + "").substr((startNum + "").length);
+          endNum || (endNum = 0);
+          endUnit = getUnit(endValue) || (p in _config.units ? _config.units[p] : startUnit);
+          startUnit !== endUnit && (startNum = _convertToUnit(target, p, startValue, endUnit));
+          this._pt = new PropTween(this._pt, isTransformRelated ? cache : style, p, startNum, (relative ? _parseRelative(startNum, relative + endNum) : endNum) - startNum, !isTransformRelated && (endUnit === "px" || p === "zIndex") && vars.autoRound !== false ? _renderRoundedCSSProp : _renderCSSProp);
+          this._pt.u = endUnit || 0;
+          if (startUnit !== endUnit && endUnit !== "%") {
+            this._pt.b = startValue;
+            this._pt.r = _renderCSSPropWithBeginning;
+          }
+        } else if (!(p in style)) {
+          if (p in target) {
+            this.add(target, p, startValue || target[p], relative ? relative + endValue : endValue, index, targets);
+          } else if (p !== "parseTransform") {
+            _missingPlugin(p, endValue);
+            continue;
+          }
+        } else {
+          _tweenComplexCSSString.call(this, target, p, startValue, relative ? relative + endValue : endValue);
+        }
+        isTransformRelated || (p in style ? inlineProps.push(p, 0, style[p]) : inlineProps.push(p, 1, startValue || target[p]));
+        props.push(p);
+      }
+    }
+    hasPriority && _sortPropTweensByPriority(this);
+  },
+  render: function render2(ratio, data) {
+    if (data.tween._time || !_reverting2()) {
+      var pt = data._pt;
+      while (pt) {
+        pt.r(ratio, pt.d);
+        pt = pt._next;
+      }
+    } else {
+      data.styles.revert();
+    }
+  },
+  get: _get,
+  aliases: _propertyAliases,
+  getSetter: function getSetter(target, property, plugin) {
+    var p = _propertyAliases[property];
+    p && p.indexOf(",") < 0 && (property = p);
+    return property in _transformProps && property !== _transformOriginProp && (target._gsap.x || _get(target, "x")) ? plugin && _recentSetterPlugin === plugin ? property === "scale" ? _setterScale : _setterTransform : (_recentSetterPlugin = plugin || {}) && (property === "scale" ? _setterScaleWithRender : _setterTransformWithRender) : target.style && !_isUndefined(target.style[property]) ? _setterCSSStyle : ~property.indexOf("-") ? _setterCSSProp : _getSetter(target, property);
+  },
+  core: {
+    _removeProperty,
+    _getMatrix
+  }
+};
+gsap.utils.checkPrefix = _checkPropPrefix;
+gsap.core.getStyleSaver = _getStyleSaver;
+(function(positionAndScale, rotation, others, aliases) {
+  var all = _forEachName(positionAndScale + "," + rotation + "," + others, function(name) {
+    _transformProps[name] = 1;
+  });
+  _forEachName(rotation, function(name) {
+    _config.units[name] = "deg";
+    _rotationalProperties[name] = 1;
+  });
+  _propertyAliases[all[13]] = positionAndScale + "," + rotation;
+  _forEachName(aliases, function(name) {
+    var split = name.split(":");
+    _propertyAliases[split[1]] = all[split[0]];
+  });
+})("x,y,z,scale,scaleX,scaleY,xPercent,yPercent", "rotation,rotationX,rotationY,skewX,skewY", "transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective", "0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY");
+_forEachName("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective", function(name) {
+  _config.units[name] = "px";
+});
+gsap.registerPlugin(CSSPlugin);
+
+// node_modules/.pnpm/gsap@3.11.5/node_modules/gsap/index.js
+var gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap;
+var TweenMaxWithCSS = gsapWithCSS.core.Tween;
+export {
+  Back,
+  Bounce,
+  CSSPlugin,
+  Circ,
+  Cubic,
+  Elastic,
+  Expo,
+  Linear,
+  Power0,
+  Power1,
+  Power2,
+  Power3,
+  Power4,
+  Quad,
+  Quart,
+  Quint,
+  Sine,
+  SteppedEase,
+  Strong,
+  Timeline as TimelineLite,
+  Timeline as TimelineMax,
+  Tween as TweenLite,
+  TweenMaxWithCSS as TweenMax,
+  gsapWithCSS as default,
+  gsapWithCSS as gsap
+};
+/*! Bundled license information:
+
+gsap/gsap-core.js:
+  (*!
+   * GSAP 3.11.5
+   * https://greensock.com
+   *
+   * @license Copyright 2008-2023, GreenSock. All rights reserved.
+   * Subject to the terms at https://greensock.com/standard-license or for
+   * Club GreenSock members, the agreement issued with that membership.
+   * @author: Jack Doyle, jack@greensock.com
+  *)
+
+gsap/CSSPlugin.js:
+  (*!
+   * CSSPlugin 3.11.5
+   * https://greensock.com
+   *
+   * Copyright 2008-2023, GreenSock. All rights reserved.
+   * Subject to the terms at https://greensock.com/standard-license or for
+   * Club GreenSock members, the agreement issued with that membership.
+   * @author: Jack Doyle, jack@greensock.com
+  *)
+*/
+//# sourceMappingURL=gsap.js.map

docs/.vitepress/cache/deps/package.json

@@ -0,0 +1 @@
+{"type":"module"}

docs/.vitepress/cache/deps/three.js

@@ -0,0 +1,822 @@
+import {
+  ACESFilmicToneMapping,
+  AddEquation,
+  AddOperation,
+  AdditiveAnimationBlendMode,
+  AdditiveBlending,
+  AlphaFormat,
+  AlwaysDepth,
+  AlwaysStencilFunc,
+  AmbientLight,
+  AmbientLightProbe,
+  AnimationClip,
+  AnimationLoader,
+  AnimationMixer,
+  AnimationObjectGroup,
+  AnimationUtils,
+  ArcCurve,
+  ArrayCamera,
+  ArrowHelper,
+  Audio,
+  AudioAnalyser,
+  AudioContext,
+  AudioListener,
+  AudioLoader,
+  AxesHelper,
+  BackSide,
+  BasicDepthPacking,
+  BasicShadowMap,
+  Bone,
+  BooleanKeyframeTrack,
+  Box2,
+  Box3,
+  Box3Helper,
+  BoxBufferGeometry,
+  BoxGeometry,
+  BoxHelper,
+  BufferAttribute,
+  BufferGeometry,
+  BufferGeometryLoader,
+  ByteType,
+  Cache,
+  Camera,
+  CameraHelper,
+  CanvasTexture,
+  CapsuleBufferGeometry,
+  CapsuleGeometry,
+  CatmullRomCurve3,
+  CineonToneMapping,
+  CircleBufferGeometry,
+  CircleGeometry,
+  ClampToEdgeWrapping,
+  Clock,
+  Color,
+  ColorKeyframeTrack,
+  ColorManagement,
+  CompressedArrayTexture,
+  CompressedTexture,
+  CompressedTextureLoader,
+  ConeBufferGeometry,
+  ConeGeometry,
+  CubeCamera,
+  CubeReflectionMapping,
+  CubeRefractionMapping,
+  CubeTexture,
+  CubeTextureLoader,
+  CubeUVReflectionMapping,
+  CubicBezierCurve,
+  CubicBezierCurve3,
+  CubicInterpolant,
+  CullFaceBack,
+  CullFaceFront,
+  CullFaceFrontBack,
+  CullFaceNone,
+  Curve,
+  CurvePath,
+  CustomBlending,
+  CustomToneMapping,
+  CylinderBufferGeometry,
+  CylinderGeometry,
+  Cylindrical,
+  Data3DTexture,
+  DataArrayTexture,
+  DataTexture,
+  DataTextureLoader,
+  DataUtils,
+  DecrementStencilOp,
+  DecrementWrapStencilOp,
+  DefaultLoadingManager,
+  DepthFormat,
+  DepthStencilFormat,
+  DepthTexture,
+  DirectionalLight,
+  DirectionalLightHelper,
+  DiscreteInterpolant,
+  DisplayP3ColorSpace,
+  DodecahedronBufferGeometry,
+  DodecahedronGeometry,
+  DoubleSide,
+  DstAlphaFactor,
+  DstColorFactor,
+  DynamicCopyUsage,
+  DynamicDrawUsage,
+  DynamicReadUsage,
+  EdgesGeometry,
+  EllipseCurve,
+  EqualDepth,
+  EqualStencilFunc,
+  EquirectangularReflectionMapping,
+  EquirectangularRefractionMapping,
+  Euler,
+  EventDispatcher,
+  ExtrudeBufferGeometry,
+  ExtrudeGeometry,
+  FileLoader,
+  Float16BufferAttribute,
+  Float32BufferAttribute,
+  Float64BufferAttribute,
+  FloatType,
+  Fog,
+  FogExp2,
+  FramebufferTexture,
+  FrontSide,
+  Frustum,
+  GLBufferAttribute,
+  GLSL1,
+  GLSL3,
+  GreaterDepth,
+  GreaterEqualDepth,
+  GreaterEqualStencilFunc,
+  GreaterStencilFunc,
+  GridHelper,
+  Group,
+  HalfFloatType,
+  HemisphereLight,
+  HemisphereLightHelper,
+  HemisphereLightProbe,
+  IcosahedronBufferGeometry,
+  IcosahedronGeometry,
+  ImageBitmapLoader,
+  ImageLoader,
+  ImageUtils,
+  IncrementStencilOp,
+  IncrementWrapStencilOp,
+  InstancedBufferAttribute,
+  InstancedBufferGeometry,
+  InstancedInterleavedBuffer,
+  InstancedMesh,
+  Int16BufferAttribute,
+  Int32BufferAttribute,
+  Int8BufferAttribute,
+  IntType,
+  InterleavedBuffer,
+  InterleavedBufferAttribute,
+  Interpolant,
+  InterpolateDiscrete,
+  InterpolateLinear,
+  InterpolateSmooth,
+  InvertStencilOp,
+  KeepStencilOp,
+  KeyframeTrack,
+  LOD,
+  LatheBufferGeometry,
+  LatheGeometry,
+  Layers,
+  LessDepth,
+  LessEqualDepth,
+  LessEqualStencilFunc,
+  LessStencilFunc,
+  Light,
+  LightProbe,
+  Line,
+  Line3,
+  LineBasicMaterial,
+  LineCurve,
+  LineCurve3,
+  LineDashedMaterial,
+  LineLoop,
+  LineSegments,
+  LinearEncoding,
+  LinearFilter,
+  LinearInterpolant,
+  LinearMipMapLinearFilter,
+  LinearMipMapNearestFilter,
+  LinearMipmapLinearFilter,
+  LinearMipmapNearestFilter,
+  LinearSRGBColorSpace,
+  LinearToneMapping,
+  Loader,
+  LoaderUtils,
+  LoadingManager,
+  LoopOnce,
+  LoopPingPong,
+  LoopRepeat,
+  LuminanceAlphaFormat,
+  LuminanceFormat,
+  MOUSE,
+  Material,
+  MaterialLoader,
+  MathUtils,
+  Matrix3,
+  Matrix4,
+  MaxEquation,
+  Mesh,
+  MeshBasicMaterial,
+  MeshDepthMaterial,
+  MeshDistanceMaterial,
+  MeshLambertMaterial,
+  MeshMatcapMaterial,
+  MeshNormalMaterial,
+  MeshPhongMaterial,
+  MeshPhysicalMaterial,
+  MeshStandardMaterial,
+  MeshToonMaterial,
+  MinEquation,
+  MirroredRepeatWrapping,
+  MixOperation,
+  MultiplyBlending,
+  MultiplyOperation,
+  NearestFilter,
+  NearestMipMapLinearFilter,
+  NearestMipMapNearestFilter,
+  NearestMipmapLinearFilter,
+  NearestMipmapNearestFilter,
+  NeverDepth,
+  NeverStencilFunc,
+  NoBlending,
+  NoColorSpace,
+  NoToneMapping,
+  NormalAnimationBlendMode,
+  NormalBlending,
+  NotEqualDepth,
+  NotEqualStencilFunc,
+  NumberKeyframeTrack,
+  Object3D,
+  ObjectLoader,
+  ObjectSpaceNormalMap,
+  OctahedronBufferGeometry,
+  OctahedronGeometry,
+  OneFactor,
+  OneMinusDstAlphaFactor,
+  OneMinusDstColorFactor,
+  OneMinusSrcAlphaFactor,
+  OneMinusSrcColorFactor,
+  OrthographicCamera,
+  PCFShadowMap,
+  PCFSoftShadowMap,
+  PMREMGenerator,
+  Path,
+  PerspectiveCamera,
+  Plane,
+  PlaneBufferGeometry,
+  PlaneGeometry,
+  PlaneHelper,
+  PointLight,
+  PointLightHelper,
+  Points,
+  PointsMaterial,
+  PolarGridHelper,
+  PolyhedronBufferGeometry,
+  PolyhedronGeometry,
+  PositionalAudio,
+  PropertyBinding,
+  PropertyMixer,
+  QuadraticBezierCurve,
+  QuadraticBezierCurve3,
+  Quaternion,
+  QuaternionKeyframeTrack,
+  QuaternionLinearInterpolant,
+  RED_GREEN_RGTC2_Format,
+  RED_RGTC1_Format,
+  REVISION,
+  RGBADepthPacking,
+  RGBAFormat,
+  RGBAIntegerFormat,
+  RGBA_ASTC_10x10_Format,
+  RGBA_ASTC_10x5_Format,
+  RGBA_ASTC_10x6_Format,
+  RGBA_ASTC_10x8_Format,
+  RGBA_ASTC_12x10_Format,
+  RGBA_ASTC_12x12_Format,
+  RGBA_ASTC_4x4_Format,
+  RGBA_ASTC_5x4_Format,
+  RGBA_ASTC_5x5_Format,
+  RGBA_ASTC_6x5_Format,
+  RGBA_ASTC_6x6_Format,
+  RGBA_ASTC_8x5_Format,
+  RGBA_ASTC_8x6_Format,
+  RGBA_ASTC_8x8_Format,
+  RGBA_BPTC_Format,
+  RGBA_ETC2_EAC_Format,
+  RGBA_PVRTC_2BPPV1_Format,
+  RGBA_PVRTC_4BPPV1_Format,
+  RGBA_S3TC_DXT1_Format,
+  RGBA_S3TC_DXT3_Format,
+  RGBA_S3TC_DXT5_Format,
+  RGB_ETC1_Format,
+  RGB_ETC2_Format,
+  RGB_PVRTC_2BPPV1_Format,
+  RGB_PVRTC_4BPPV1_Format,
+  RGB_S3TC_DXT1_Format,
+  RGFormat,
+  RGIntegerFormat,
+  RawShaderMaterial,
+  Ray,
+  Raycaster,
+  RectAreaLight,
+  RedFormat,
+  RedIntegerFormat,
+  ReinhardToneMapping,
+  RepeatWrapping,
+  ReplaceStencilOp,
+  ReverseSubtractEquation,
+  RingBufferGeometry,
+  RingGeometry,
+  SIGNED_RED_GREEN_RGTC2_Format,
+  SIGNED_RED_RGTC1_Format,
+  SRGBColorSpace,
+  Scene,
+  ShaderChunk,
+  ShaderLib,
+  ShaderMaterial,
+  ShadowMaterial,
+  Shape,
+  ShapeBufferGeometry,
+  ShapeGeometry,
+  ShapePath,
+  ShapeUtils,
+  ShortType,
+  Skeleton,
+  SkeletonHelper,
+  SkinnedMesh,
+  Source,
+  Sphere,
+  SphereBufferGeometry,
+  SphereGeometry,
+  Spherical,
+  SphericalHarmonics3,
+  SplineCurve,
+  SpotLight,
+  SpotLightHelper,
+  Sprite,
+  SpriteMaterial,
+  SrcAlphaFactor,
+  SrcAlphaSaturateFactor,
+  SrcColorFactor,
+  StaticCopyUsage,
+  StaticDrawUsage,
+  StaticReadUsage,
+  StereoCamera,
+  StreamCopyUsage,
+  StreamDrawUsage,
+  StreamReadUsage,
+  StringKeyframeTrack,
+  SubtractEquation,
+  SubtractiveBlending,
+  TOUCH,
+  TangentSpaceNormalMap,
+  TetrahedronBufferGeometry,
+  TetrahedronGeometry,
+  Texture,
+  TextureLoader,
+  TorusBufferGeometry,
+  TorusGeometry,
+  TorusKnotBufferGeometry,
+  TorusKnotGeometry,
+  Triangle,
+  TriangleFanDrawMode,
+  TriangleStripDrawMode,
+  TrianglesDrawMode,
+  TubeBufferGeometry,
+  TubeGeometry,
+  TwoPassDoubleSide,
+  UVMapping,
+  Uint16BufferAttribute,
+  Uint32BufferAttribute,
+  Uint8BufferAttribute,
+  Uint8ClampedBufferAttribute,
+  Uniform,
+  UniformsGroup,
+  UniformsLib,
+  UniformsUtils,
+  UnsignedByteType,
+  UnsignedInt248Type,
+  UnsignedIntType,
+  UnsignedShort4444Type,
+  UnsignedShort5551Type,
+  UnsignedShortType,
+  VSMShadowMap,
+  Vector2,
+  Vector3,
+  Vector4,
+  VectorKeyframeTrack,
+  VideoTexture,
+  WebGL1Renderer,
+  WebGL3DRenderTarget,
+  WebGLArrayRenderTarget,
+  WebGLCubeRenderTarget,
+  WebGLMultipleRenderTargets,
+  WebGLRenderTarget,
+  WebGLRenderer,
+  WebGLUtils,
+  WireframeGeometry,
+  WrapAroundEnding,
+  ZeroCurvatureEnding,
+  ZeroFactor,
+  ZeroSlopeEnding,
+  ZeroStencilOp,
+  _SRGBAFormat,
+  sRGBEncoding
+} from "./chunk-4QXXOI63.js";
+import "./chunk-JC4IRQUL.js";
+export {
+  ACESFilmicToneMapping,
+  AddEquation,
+  AddOperation,
+  AdditiveAnimationBlendMode,
+  AdditiveBlending,
+  AlphaFormat,
+  AlwaysDepth,
+  AlwaysStencilFunc,
+  AmbientLight,
+  AmbientLightProbe,
+  AnimationClip,
+  AnimationLoader,
+  AnimationMixer,
+  AnimationObjectGroup,
+  AnimationUtils,
+  ArcCurve,
+  ArrayCamera,
+  ArrowHelper,
+  Audio,
+  AudioAnalyser,
+  AudioContext,
+  AudioListener,
+  AudioLoader,
+  AxesHelper,
+  BackSide,
+  BasicDepthPacking,
+  BasicShadowMap,
+  Bone,
+  BooleanKeyframeTrack,
+  Box2,
+  Box3,
+  Box3Helper,
+  BoxBufferGeometry,
+  BoxGeometry,
+  BoxHelper,
+  BufferAttribute,
+  BufferGeometry,
+  BufferGeometryLoader,
+  ByteType,
+  Cache,
+  Camera,
+  CameraHelper,
+  CanvasTexture,
+  CapsuleBufferGeometry,
+  CapsuleGeometry,
+  CatmullRomCurve3,
+  CineonToneMapping,
+  CircleBufferGeometry,
+  CircleGeometry,
+  ClampToEdgeWrapping,
+  Clock,
+  Color,
+  ColorKeyframeTrack,
+  ColorManagement,
+  CompressedArrayTexture,
+  CompressedTexture,
+  CompressedTextureLoader,
+  ConeBufferGeometry,
+  ConeGeometry,
+  CubeCamera,
+  CubeReflectionMapping,
+  CubeRefractionMapping,
+  CubeTexture,
+  CubeTextureLoader,
+  CubeUVReflectionMapping,
+  CubicBezierCurve,
+  CubicBezierCurve3,
+  CubicInterpolant,
+  CullFaceBack,
+  CullFaceFront,
+  CullFaceFrontBack,
+  CullFaceNone,
+  Curve,
+  CurvePath,
+  CustomBlending,
+  CustomToneMapping,
+  CylinderBufferGeometry,
+  CylinderGeometry,
+  Cylindrical,
+  Data3DTexture,
+  DataArrayTexture,
+  DataTexture,
+  DataTextureLoader,
+  DataUtils,
+  DecrementStencilOp,
+  DecrementWrapStencilOp,
+  DefaultLoadingManager,
+  DepthFormat,
+  DepthStencilFormat,
+  DepthTexture,
+  DirectionalLight,
+  DirectionalLightHelper,
+  DiscreteInterpolant,
+  DisplayP3ColorSpace,
+  DodecahedronBufferGeometry,
+  DodecahedronGeometry,
+  DoubleSide,
+  DstAlphaFactor,
+  DstColorFactor,
+  DynamicCopyUsage,
+  DynamicDrawUsage,
+  DynamicReadUsage,
+  EdgesGeometry,
+  EllipseCurve,
+  EqualDepth,
+  EqualStencilFunc,
+  EquirectangularReflectionMapping,
+  EquirectangularRefractionMapping,
+  Euler,
+  EventDispatcher,
+  ExtrudeBufferGeometry,
+  ExtrudeGeometry,
+  FileLoader,
+  Float16BufferAttribute,
+  Float32BufferAttribute,
+  Float64BufferAttribute,
+  FloatType,
+  Fog,
+  FogExp2,
+  FramebufferTexture,
+  FrontSide,
+  Frustum,
+  GLBufferAttribute,
+  GLSL1,
+  GLSL3,
+  GreaterDepth,
+  GreaterEqualDepth,
+  GreaterEqualStencilFunc,
+  GreaterStencilFunc,
+  GridHelper,
+  Group,
+  HalfFloatType,
+  HemisphereLight,
+  HemisphereLightHelper,
+  HemisphereLightProbe,
+  IcosahedronBufferGeometry,
+  IcosahedronGeometry,
+  ImageBitmapLoader,
+  ImageLoader,
+  ImageUtils,
+  IncrementStencilOp,
+  IncrementWrapStencilOp,
+  InstancedBufferAttribute,
+  InstancedBufferGeometry,
+  InstancedInterleavedBuffer,
+  InstancedMesh,
+  Int16BufferAttribute,
+  Int32BufferAttribute,
+  Int8BufferAttribute,
+  IntType,
+  InterleavedBuffer,
+  InterleavedBufferAttribute,
+  Interpolant,
+  InterpolateDiscrete,
+  InterpolateLinear,
+  InterpolateSmooth,
+  InvertStencilOp,
+  KeepStencilOp,
+  KeyframeTrack,
+  LOD,
+  LatheBufferGeometry,
+  LatheGeometry,
+  Layers,
+  LessDepth,
+  LessEqualDepth,
+  LessEqualStencilFunc,
+  LessStencilFunc,
+  Light,
+  LightProbe,
+  Line,
+  Line3,
+  LineBasicMaterial,
+  LineCurve,
+  LineCurve3,
+  LineDashedMaterial,
+  LineLoop,
+  LineSegments,
+  LinearEncoding,
+  LinearFilter,
+  LinearInterpolant,
+  LinearMipMapLinearFilter,
+  LinearMipMapNearestFilter,
+  LinearMipmapLinearFilter,
+  LinearMipmapNearestFilter,
+  LinearSRGBColorSpace,
+  LinearToneMapping,
+  Loader,
+  LoaderUtils,
+  LoadingManager,
+  LoopOnce,
+  LoopPingPong,
+  LoopRepeat,
+  LuminanceAlphaFormat,
+  LuminanceFormat,
+  MOUSE,
+  Material,
+  MaterialLoader,
+  MathUtils,
+  Matrix3,
+  Matrix4,
+  MaxEquation,
+  Mesh,
+  MeshBasicMaterial,
+  MeshDepthMaterial,
+  MeshDistanceMaterial,
+  MeshLambertMaterial,
+  MeshMatcapMaterial,
+  MeshNormalMaterial,
+  MeshPhongMaterial,
+  MeshPhysicalMaterial,
+  MeshStandardMaterial,
+  MeshToonMaterial,
+  MinEquation,
+  MirroredRepeatWrapping,
+  MixOperation,
+  MultiplyBlending,
+  MultiplyOperation,
+  NearestFilter,
+  NearestMipMapLinearFilter,
+  NearestMipMapNearestFilter,
+  NearestMipmapLinearFilter,
+  NearestMipmapNearestFilter,
+  NeverDepth,
+  NeverStencilFunc,
+  NoBlending,
+  NoColorSpace,
+  NoToneMapping,
+  NormalAnimationBlendMode,
+  NormalBlending,
+  NotEqualDepth,
+  NotEqualStencilFunc,
+  NumberKeyframeTrack,
+  Object3D,
+  ObjectLoader,
+  ObjectSpaceNormalMap,
+  OctahedronBufferGeometry,
+  OctahedronGeometry,
+  OneFactor,
+  OneMinusDstAlphaFactor,
+  OneMinusDstColorFactor,
+  OneMinusSrcAlphaFactor,
+  OneMinusSrcColorFactor,
+  OrthographicCamera,
+  PCFShadowMap,
+  PCFSoftShadowMap,
+  PMREMGenerator,
+  Path,
+  PerspectiveCamera,
+  Plane,
+  PlaneBufferGeometry,
+  PlaneGeometry,
+  PlaneHelper,
+  PointLight,
+  PointLightHelper,
+  Points,
+  PointsMaterial,
+  PolarGridHelper,
+  PolyhedronBufferGeometry,
+  PolyhedronGeometry,
+  PositionalAudio,
+  PropertyBinding,
+  PropertyMixer,
+  QuadraticBezierCurve,
+  QuadraticBezierCurve3,
+  Quaternion,
+  QuaternionKeyframeTrack,
+  QuaternionLinearInterpolant,
+  RED_GREEN_RGTC2_Format,
+  RED_RGTC1_Format,
+  REVISION,
+  RGBADepthPacking,
+  RGBAFormat,
+  RGBAIntegerFormat,
+  RGBA_ASTC_10x10_Format,
+  RGBA_ASTC_10x5_Format,
+  RGBA_ASTC_10x6_Format,
+  RGBA_ASTC_10x8_Format,
+  RGBA_ASTC_12x10_Format,
+  RGBA_ASTC_12x12_Format,
+  RGBA_ASTC_4x4_Format,
+  RGBA_ASTC_5x4_Format,
+  RGBA_ASTC_5x5_Format,
+  RGBA_ASTC_6x5_Format,
+  RGBA_ASTC_6x6_Format,
+  RGBA_ASTC_8x5_Format,
+  RGBA_ASTC_8x6_Format,
+  RGBA_ASTC_8x8_Format,
+  RGBA_BPTC_Format,
+  RGBA_ETC2_EAC_Format,
+  RGBA_PVRTC_2BPPV1_Format,
+  RGBA_PVRTC_4BPPV1_Format,
+  RGBA_S3TC_DXT1_Format,
+  RGBA_S3TC_DXT3_Format,
+  RGBA_S3TC_DXT5_Format,
+  RGB_ETC1_Format,
+  RGB_ETC2_Format,
+  RGB_PVRTC_2BPPV1_Format,
+  RGB_PVRTC_4BPPV1_Format,
+  RGB_S3TC_DXT1_Format,
+  RGFormat,
+  RGIntegerFormat,
+  RawShaderMaterial,
+  Ray,
+  Raycaster,
+  RectAreaLight,
+  RedFormat,
+  RedIntegerFormat,
+  ReinhardToneMapping,
+  RepeatWrapping,
+  ReplaceStencilOp,
+  ReverseSubtractEquation,
+  RingBufferGeometry,
+  RingGeometry,
+  SIGNED_RED_GREEN_RGTC2_Format,
+  SIGNED_RED_RGTC1_Format,
+  SRGBColorSpace,
+  Scene,
+  ShaderChunk,
+  ShaderLib,
+  ShaderMaterial,
+  ShadowMaterial,
+  Shape,
+  ShapeBufferGeometry,
+  ShapeGeometry,
+  ShapePath,
+  ShapeUtils,
+  ShortType,
+  Skeleton,
+  SkeletonHelper,
+  SkinnedMesh,
+  Source,
+  Sphere,
+  SphereBufferGeometry,
+  SphereGeometry,
+  Spherical,
+  SphericalHarmonics3,
+  SplineCurve,
+  SpotLight,
+  SpotLightHelper,
+  Sprite,
+  SpriteMaterial,
+  SrcAlphaFactor,
+  SrcAlphaSaturateFactor,
+  SrcColorFactor,
+  StaticCopyUsage,
+  StaticDrawUsage,
+  StaticReadUsage,
+  StereoCamera,
+  StreamCopyUsage,
+  StreamDrawUsage,
+  StreamReadUsage,
+  StringKeyframeTrack,
+  SubtractEquation,
+  SubtractiveBlending,
+  TOUCH,
+  TangentSpaceNormalMap,
+  TetrahedronBufferGeometry,
+  TetrahedronGeometry,
+  Texture,
+  TextureLoader,
+  TorusBufferGeometry,
+  TorusGeometry,
+  TorusKnotBufferGeometry,
+  TorusKnotGeometry,
+  Triangle,
+  TriangleFanDrawMode,
+  TriangleStripDrawMode,
+  TrianglesDrawMode,
+  TubeBufferGeometry,
+  TubeGeometry,
+  TwoPassDoubleSide,
+  UVMapping,
+  Uint16BufferAttribute,
+  Uint32BufferAttribute,
+  Uint8BufferAttribute,
+  Uint8ClampedBufferAttribute,
+  Uniform,
+  UniformsGroup,
+  UniformsLib,
+  UniformsUtils,
+  UnsignedByteType,
+  UnsignedInt248Type,
+  UnsignedIntType,
+  UnsignedShort4444Type,
+  UnsignedShort5551Type,
+  UnsignedShortType,
+  VSMShadowMap,
+  Vector2,
+  Vector3,
+  Vector4,
+  VectorKeyframeTrack,
+  VideoTexture,
+  WebGL1Renderer,
+  WebGL3DRenderTarget,
+  WebGLArrayRenderTarget,
+  WebGLCubeRenderTarget,
+  WebGLMultipleRenderTargets,
+  WebGLRenderTarget,
+  WebGLRenderer,
+  WebGLUtils,
+  WireframeGeometry,
+  WrapAroundEnding,
+  ZeroCurvatureEnding,
+  ZeroFactor,
+  ZeroSlopeEnding,
+  ZeroStencilOp,
+  _SRGBAFormat,
+  sRGBEncoding
+};
+//# sourceMappingURL=three.js.map

docs/.vitepress/cache/deps/three.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

docs/.vitepress/cache/deps/vue.js

@@ -0,0 +1,298 @@
+import {
+  BaseTransition,
+  Comment,
+  EffectScope,
+  Fragment,
+  KeepAlive,
+  ReactiveEffect,
+  Static,
+  Suspense,
+  Teleport,
+  Text,
+  Transition,
+  TransitionGroup,
+  VueElement,
+  assertNumber,
+  callWithAsyncErrorHandling,
+  callWithErrorHandling,
+  camelize,
+  capitalize,
+  cloneVNode,
+  compatUtils,
+  compile,
+  computed,
+  createApp,
+  createBaseVNode,
+  createBlock,
+  createCommentVNode,
+  createElementBlock,
+  createHydrationRenderer,
+  createPropsRestProxy,
+  createRenderer,
+  createSSRApp,
+  createSlots,
+  createStaticVNode,
+  createTextVNode,
+  createVNode,
+  customRef,
+  defineAsyncComponent,
+  defineComponent,
+  defineCustomElement,
+  defineEmits,
+  defineExpose,
+  defineProps,
+  defineSSRCustomElement,
+  devtools,
+  effect,
+  effectScope,
+  getCurrentInstance,
+  getCurrentScope,
+  getTransitionRawChildren,
+  guardReactiveProps,
+  h,
+  handleError,
+  hydrate,
+  initCustomFormatter,
+  initDirectivesForSSR,
+  inject,
+  isMemoSame,
+  isProxy,
+  isReactive,
+  isReadonly,
+  isRef,
+  isRuntimeOnly,
+  isShallow,
+  isVNode,
+  markRaw,
+  mergeDefaults,
+  mergeProps,
+  nextTick,
+  normalizeClass,
+  normalizeProps,
+  normalizeStyle,
+  onActivated,
+  onBeforeMount,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onDeactivated,
+  onErrorCaptured,
+  onMounted,
+  onRenderTracked,
+  onRenderTriggered,
+  onScopeDispose,
+  onServerPrefetch,
+  onUnmounted,
+  onUpdated,
+  openBlock,
+  popScopeId,
+  provide,
+  proxyRefs,
+  pushScopeId,
+  queuePostFlushCb,
+  reactive,
+  readonly,
+  ref,
+  registerRuntimeCompiler,
+  render,
+  renderList,
+  renderSlot,
+  resolveComponent,
+  resolveDirective,
+  resolveDynamicComponent,
+  resolveFilter,
+  resolveTransitionHooks,
+  setBlockTracking,
+  setDevtoolsHook,
+  setTransitionHooks,
+  shallowReactive,
+  shallowReadonly,
+  shallowRef,
+  ssrContextKey,
+  ssrUtils,
+  stop,
+  toDisplayString,
+  toHandlerKey,
+  toHandlers,
+  toRaw,
+  toRef,
+  toRefs,
+  transformVNodeArgs,
+  triggerRef,
+  unref,
+  useAttrs,
+  useCssModule,
+  useCssVars,
+  useSSRContext,
+  useSlots,
+  useTransitionState,
+  vModelCheckbox,
+  vModelDynamic,
+  vModelRadio,
+  vModelSelect,
+  vModelText,
+  vShow,
+  version,
+  warn,
+  watch,
+  watchEffect,
+  watchPostEffect,
+  watchSyncEffect,
+  withAsyncContext,
+  withCtx,
+  withDefaults,
+  withDirectives,
+  withKeys,
+  withMemo,
+  withModifiers,
+  withScopeId
+} from "./chunk-LZPJ5JBW.js";
+import "./chunk-JC4IRQUL.js";
+export {
+  BaseTransition,
+  Comment,
+  EffectScope,
+  Fragment,
+  KeepAlive,
+  ReactiveEffect,
+  Static,
+  Suspense,
+  Teleport,
+  Text,
+  Transition,
+  TransitionGroup,
+  VueElement,
+  assertNumber,
+  callWithAsyncErrorHandling,
+  callWithErrorHandling,
+  camelize,
+  capitalize,
+  cloneVNode,
+  compatUtils,
+  compile,
+  computed,
+  createApp,
+  createBlock,
+  createCommentVNode,
+  createElementBlock,
+  createBaseVNode as createElementVNode,
+  createHydrationRenderer,
+  createPropsRestProxy,
+  createRenderer,
+  createSSRApp,
+  createSlots,
+  createStaticVNode,
+  createTextVNode,
+  createVNode,
+  customRef,
+  defineAsyncComponent,
+  defineComponent,
+  defineCustomElement,
+  defineEmits,
+  defineExpose,
+  defineProps,
+  defineSSRCustomElement,
+  devtools,
+  effect,
+  effectScope,
+  getCurrentInstance,
+  getCurrentScope,
+  getTransitionRawChildren,
+  guardReactiveProps,
+  h,
+  handleError,
+  hydrate,
+  initCustomFormatter,
+  initDirectivesForSSR,
+  inject,
+  isMemoSame,
+  isProxy,
+  isReactive,
+  isReadonly,
+  isRef,
+  isRuntimeOnly,
+  isShallow,
+  isVNode,
+  markRaw,
+  mergeDefaults,
+  mergeProps,
+  nextTick,
+  normalizeClass,
+  normalizeProps,
+  normalizeStyle,
+  onActivated,
+  onBeforeMount,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onDeactivated,
+  onErrorCaptured,
+  onMounted,
+  onRenderTracked,
+  onRenderTriggered,
+  onScopeDispose,
+  onServerPrefetch,
+  onUnmounted,
+  onUpdated,
+  openBlock,
+  popScopeId,
+  provide,
+  proxyRefs,
+  pushScopeId,
+  queuePostFlushCb,
+  reactive,
+  readonly,
+  ref,
+  registerRuntimeCompiler,
+  render,
+  renderList,
+  renderSlot,
+  resolveComponent,
+  resolveDirective,
+  resolveDynamicComponent,
+  resolveFilter,
+  resolveTransitionHooks,
+  setBlockTracking,
+  setDevtoolsHook,
+  setTransitionHooks,
+  shallowReactive,
+  shallowReadonly,
+  shallowRef,
+  ssrContextKey,
+  ssrUtils,
+  stop,
+  toDisplayString,
+  toHandlerKey,
+  toHandlers,
+  toRaw,
+  toRef,
+  toRefs,
+  transformVNodeArgs,
+  triggerRef,
+  unref,
+  useAttrs,
+  useCssModule,
+  useCssVars,
+  useSSRContext,
+  useSlots,
+  useTransitionState,
+  vModelCheckbox,
+  vModelDynamic,
+  vModelRadio,
+  vModelSelect,
+  vModelText,
+  vShow,
+  version,
+  warn,
+  watch,
+  watchEffect,
+  watchPostEffect,
+  watchSyncEffect,
+  withAsyncContext,
+  withCtx,
+  withDefaults,
+  withDirectives,
+  withKeys,
+  withMemo,
+  withModifiers,
+  withScopeId
+};
+//# sourceMappingURL=vue.js.map

docs/.vitepress/cache/deps/vue.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

docs/.vitepress/config.ts

@@ -1,13 +1,15 @@
 import Unocss from 'unocss/vite'
 import svgLoader from 'vite-svg-loader'
 import { defineConfig } from 'vitepress'
-import { version } from '../../packages/tres/package.json'
-import { version as cientosVersion } from '../../packages/cientos/package.json'
+import { resolve } from 'pathe'
 
 export default defineConfig({
   title: 'TresJS',
   description: 'Declarative ThreeJS using Vue Components',
-  head: [['link', { rel: 'icon', type: 'image/svg', href: '/favicon.svg' }]],
+  head: [
+    ['link', { rel: 'icon', type: 'image/svg', href: '/favicon.svg' }],
+    ['script', { defer: 'true', 'data-domain': 'tresjs.org', src: 'https://plausible.io/js/script.js' }],
+  ],
   themeConfig: {
     logo: '/logo.svg',
     sidebar: [
@@ -18,6 +20,8 @@ export default defineConfig({
           { text: 'Introduction', link: '/guide/' },
           { text: 'Getting Started', link: '/guide/getting-started' },
           { text: 'Your first Scene', link: '/guide/your-first-scene' },
+          { text: 'Troubleshooting', link: '/guide/troubleshooting' },
+          { text: 'Migrate from v1', link: '/guide/migration-guide' },
         ],
       },
       {
@@ -61,57 +65,11 @@ export default defineConfig({
         ],
       },
       {
-        text: 'Cientos 💛',
-        collapsible: true,
+        text: 'Ecosystem',
         items: [
-          { text: 'Introduction', link: '/cientos/' },
-          {
-            text: 'Abstractions',
-            items: [
-              { text: 'Text3D', link: '/cientos/abstractions/text-3d' },
-              { text: 'useAnimations', link: '/cientos/abstractions/use-animations' },
-              { text: 'Environment', link: '/cientos/abstractions/environment' },
-              { text: 'useEnvironment', link: '/cientos/abstractions/use-environment' },
-              { text: 'usePamMouse', link: '/cientos/abstractions/pam-camera-mouse' },
-            ],
-          },
-          {
-            text: 'Controls',
-            items: [
-              { text: 'OrbitControls', link: '/cientos/controls/orbit-controls' },
-              { text: 'TransformControls', link: '/cientos/controls/transform-controls' },
-            ],
-          },
-          {
-            text: 'Loaders',
-            items: [
-              { text: 'useGLTF', link: '/cientos/loaders/use-gltf' },
-              { text: 'GLTFModel', link: '/cientos/loaders/gltf-model' },
-              { text: 'useFBX', link: '/cientos/loaders/use-fbx' },
-              { text: 'FBXModel', link: '/cientos/loaders/fbx-model' },
-            ],
-          },
           {
-            text: 'Shapes',
-            items: [
-              { text: 'Box', link: '/cientos/shapes/box' },
-              { text: 'Circle', link: '/cientos/shapes/circle' },
-              { text: 'Cone', link: '/cientos/shapes/cone' },
-              { text: 'Dodecahedron', link: '/cientos/shapes/dodecahedron' },
-              { text: 'Icosahedron', link: '/cientos/shapes/icosahedron' },
-              { text: 'Octahedron', link: '/cientos/shapes/octahedron' },
-              { text: 'Plane', link: '/cientos/shapes/plane' },
-              { text: 'Ring', link: '/cientos/shapes/ring' },
-              { text: 'Sphere', link: '/cientos/shapes/sphere' },
-              { text: 'Tetrahedron', link: '/cientos/shapes/tetrahedron' },
-              { text: 'Torus', link: '/cientos/shapes/torus' },
-              { text: 'TorusKnot', link: '/cientos/shapes/torus-knot' },
-              { text: 'Tube', link: '/cientos/shapes/tube' },
-            ],
-          },
-          {
-            text: 'Misc',
-            items: [{ text: 'useTweakpane', link: '/cientos/misc/use-tweakpane' }],
+            text: `Cientos 💛`,
+            link: 'https://cientos.tresjs.org/',
           },
         ],
       },
@@ -121,37 +79,28 @@ export default defineConfig({
       { text: 'API', link: '/api/renderer' },
       /*       { text: 'API', link: '/api/' },
       { text: 'Config', link: '/config/' }, */
-      /*  {
+      {
         text: 'Ecosystem',
-        activeMatch: `^/ecosystem/`,
         items: [
           {
-            text: `Core v${version}`,
-            items: [
-              {
-                text: 'Release Notes ',
-                link: `https://github.com/Tresjs/tres/releases/tag/%40tresjs%2Fcore%40${version}`,
-              },
-            ],
-          },
-          {
-            text: `Cientos v${cientosVersion}`,
-            items: [
-              {
-                text: 'Release Notes ',
-                link: `https://github.com/Tresjs/tres/releases/tag/%40tresjs%2Fcientos%40${cientosVersion}`,
-              },
-            ],
+            text: `Cientos 💛`,
+            link: 'https://cientos.tresjs.org/',
           },
         ],
-      }, */
+      },
     ],
     socialLinks: [
       /*  { icon: 'github', link: 'https://github.com/tresjs/tres' }, */
       { icon: 'twitter', link: 'https://twitter.com/alvarosabu' },
+      { icon: 'discord', link: 'https://discord.gg/wXx63MwW' },
     ],
   },
   vite: {
     plugins: [svgLoader(), Unocss()],
+    resolve: {
+      alias: {
+        '/@': resolve(__dirname, '../../src'),
+      },
+    },
   },
 })

docs/.vitepress/theme/components/DonutExample.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
+
+import { OrbitControls } from '@tresjs/cientos'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputEncoding: sRGBEncoding,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[3, 3, 3]" :fov="45" />
+    <OrbitControls />
+    <TresMesh>
+      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+      <TresMeshBasicMaterial color="orange" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/EmbedExperiment.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+  url: string
+}>()
+</script>
+<template>
+  <iframe
+    frameborder="0"
+    class="w-full aspect-video border-inset-0 b-1 b-gray-500 border-opacity-50 rounded"
+    src="https://playground.tresjs.org/experiments/tres-donut/"
+  />
+</template>

docs/.vitepress/theme/components/FirstScene.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { Color, sRGBEncoding, ACESFilmicToneMapping } from 'three'
+import { sRGBEncoding } from 'three'
+import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 const LightRef = ref()
 
@@ -17,28 +18,27 @@ onMounted(() => {
 
 <template>
   <TresCanvas clear-color="#82DBC5" shadows alpha physically-correct-lights :output-encoding="sRGBEncoding">
-    <OrbitControls />
     <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-    <TresScene>
-      <TresMesh :position="[-2, 6, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
-        <TresConeGeometry :args="[1, 1.5, 3]" />
-        <TresMeshToonMaterial color="#82DBC5" />
-      </TresMesh>
-      <TresMesh :position="[0, 4, 0]" cast-shadow>
-        <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-        <TresMeshToonMaterial color="#4F4F4F" />
-      </TresMesh>
-      <TresMesh :position="[2, 2, 0]" cast-shadow>
-        <TresSphereGeometry />
-        <TresMeshToonMaterial color="#FBB03B" />
-      </TresMesh>
-      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
-      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
-        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-        <TresMeshToonMaterial color="greenyellow" />
-      </TresMesh>
-      <TresAmbientLight :intensity="0.75" />
-      <TresDirectionalLight ref="LightRef" :position="[-4, 8, 4]" :intensity="0.5" cast-shadow />
-    </TresScene>
+
+    <OrbitControls />
+    <TresMesh :position="[-2, 6, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
+      <TresConeGeometry :args="[1, 1.5, 3]" />
+      <TresMeshToonMaterial color="#82DBC5" />
+    </TresMesh>
+    <TresMesh :position="[0, 4, 0]" cast-shadow>
+      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+      <TresMeshToonMaterial color="#4F4F4F" />
+    </TresMesh>
+    <TresMesh :position="[2, 2, 0]" cast-shadow>
+      <TresSphereGeometry />
+      <TresMeshToonMaterial color="#FBB03B" />
+    </TresMesh>
+    <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
+    <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
+      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+      <TresMeshToonMaterial color="greenyellow" />
+    </TresMesh>
+    <TresAmbientLight :intensity="0.75" />
+    <TresDirectionalLight ref="LightRef" :position="[-4, 8, 4]" :intensity="0.5" cast-shadow />
   </TresCanvas>
 </template>

docs/.vitepress/theme/components/FirstSceneLightToon.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 
 const styles = {
@@ -14,13 +15,11 @@ const styles = {
     <TresCanvas shadows clear-color="#fff" :style="styles">
       <TresPerspectiveCamera :position="[0, 2, 4]" />
       <OrbitControls />
-      <TresScene>
-        <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
-        <TresMesh :rotation="[-Math.PI / 4, -Math.PI / 4, Math.PI / 4]">
-          <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
-          <TresMeshToonMaterial color="#FBB03B" />
-        </TresMesh>
-      </TresScene>
+      <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
+      <TresMesh :rotation="[-Math.PI / 4, -Math.PI / 4, Math.PI / 4]">
+        <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+        <TresMeshToonMaterial color="#FBB03B" />
+      </TresMesh>
     </TresCanvas>
   </ClientOnly>
 </template>

docs/.vitepress/theme/index.ts

@@ -1,12 +1,26 @@
-import Tres from '@tresjs/core'
 import 'uno.css'
 // .vitepress/theme/index.ts
 import DefaultTheme from 'vitepress/theme'
 import './config.css'
 import FirstScene from './components/FirstScene.vue'
+
 import StackBlitzEmbed from './components/StackBlitzEmbed.vue'
+import EmbedExperiment from './components/EmbedExperiment.vue'
+import DonutExample from './components/DonutExample.vue'
+
 import TresLayout from './TresLayout.vue'
 
+/* const plausible = createPlausible({
+  init: {
+    trackLocalhost: false,
+  },
+  settings: {
+    enableAutoOutboundTracking: true,
+    enableAutoPageviews: true,
+  },
+  partytown: false,
+}) */
+
 export default {
   ...DefaultTheme,
 
@@ -14,17 +28,10 @@ export default {
     DefaultTheme.enhanceApp(ctx)
     ctx.app.component('FirstScene', FirstScene)
     ctx.app.component('StackBlitzEmbed', StackBlitzEmbed)
-    /*  ctx.app.use(Tres)
-     */
-    if (!import.meta.env.SSR) {
-      // ... server only logic
-      ctx.app.use(Tres)
-    }
+    ctx.app.component('EmbedExperiment', EmbedExperiment)
+    ctx.app.component('DonutExample', DonutExample)
+
+    /* ctx.app.use(plausible) */
   },
   Layout: TresLayout,
-  /* Layout() {
-    return h(DefaultTheme.Layout, null, {
-      'home-hero-image': () => h('div', null, 'Hello'),
-    })
-  }, */
 }

docs/advanced/extending.md

@@ -2,60 +2,34 @@
 
 Tres offers bare bones functionality, but it's easy to add third-party elements and extend them into its internal catalogue.
 
-## Adding a third-party element
-
-Most of 3D experience uses `OrbitControls` which is not part of the core library. To add it, you need to import it and add it to the `extends` option when installing the plugin:
+Most of 3D experience uses `OrbitControls` which is not part of the core library. You can add it to your project by importing it from the `three/addons/controls/OrbitControls` module.
 
 ```js
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
-
-app.use(plugin, {
-  extends: {
-    OrbitControls,
-  },
-})
-```
-
-This will automatically add a `<TresOrbitControls>` to the catalogue, so you can use it in your templates:
-
-```vue
-<template>
-  <TresCanvas shadows alpha>
-    <TresPerspectiveCamera :position="[5, 5, 5]" />
-    <TresScene>
-      <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
-    </TresScene>
-  </TresCanvas>
-</template>
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
 ```
 
-## Extending an element dynamically <Badge type="tip" text="^1.1.0" />
+## Extending an element dynamically
 
 Or you can also add it dynamically in your components:
 
-```vue{2,3,5,8,17,19}
+```vue {2,3,4,7,13,15}
 <script setup lang="ts">
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
-import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
-
-const { extend } = useCatalogue()
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
 
 // Add the element to the catalogue
 extend({ TextGeometry, OrbitControls })
-
-/* Rest of the code */
 </script>
 
 <template>
   <TresCanvas shadows alpha>
     <TresPerspectiveCamera :position="[5, 5, 5]" />
-    <TresScene>
-      <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
-      <TresMesh>
-        <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
-        <TresMeshMatcapMaterial :matcap="matcapTexture" />
-      </TresMesh>
-    </TresScene>
+    <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
+    <TresMesh>
+      <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+      <TresMeshMatcapMaterial :matcap="matcapTexture" />
+    </TresMesh>
   </TresCanvas>
 </template>
 ```

docs/api/composables.md

@@ -78,7 +78,7 @@ console.log(isActive) // true
 The `useLoader` composable allows you to load assets using the [THREE.js loaders](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models). It returns a promise with loaded asset.
 
 ```ts
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
 
 const { scene } = await useLoader(THREE.GLTFLoader, 'path/to/asset.gltf')
 ```
@@ -109,17 +109,21 @@ const texture = await useTexture(['path/to/texture.png'])
 - `roughnessMap`: a texture that is used to add roughness or a matte finish to the object's surface
 - `metalnessMap`: a texture that is used to add a metallic effect to the object's surface
 - `aoMap`: a texture that is used to add ambient occlusion (shading in areas where light is blocked by other objects) to the object.
+- `alphaMap`: a texture that is used to add alpha (the black part render as transparent) to the object. It's necessary to set :trasparent="true" on the material to use this map
+- `matcap`: this textures encodes the material color and shading.
 
 In that case it will return an object with the loaded textures.
 
 ```ts
-const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap } = await useTexture({
+const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap, alphaMap, matcap } = await useTexture({
   map: 'path/to/albedo.png',
   displacementMap: 'path/to/height.png',
   normalMap: 'path/to/normal.png',
   roughnessMap: 'path/to/roughness.png',
   metalnessMap: 'path/to/metalness.png',
   aoMap: 'path/to/ambien-occlusion.png',
+  alphaMap: 'path/to/alpha.png',
+  matcap: 'path/to/matcap.png',
 })
 ```
 
@@ -127,50 +131,55 @@ Then you can bind the textures to the material.
 
 ```vue
 <template>
-  <TresMesh>
-    <TresMeshSphereGeometry />
-    <TresMeshStandardMaterial
-      :map="map"
-      :displacementMap="displacementMap"
-      :normalMap="normalMap"
-      :roughnessMap="roughnessMap"
-      :metalnessMap="metalnessMap"
-      :aoMap="aoMap"
-    />
-  </TresMesh>
+  <TresCanvas>
+    <TresMesh>
+      <TresMeshSphereGeometry />
+      <TresMeshStandardMaterial
+        :map="map"
+        :displacementMap="displacementMap"
+        :normalMap="normalMap"
+        :roughnessMap="roughnessMap"
+        :metalnessMap="metalnessMap"
+        :aoMap="aoMap"
+        :alphaMap="alphaMap"
+      />
+    </TresMesh>
+  </TresCanvas>
 </template>
 ```
 
 Similar to above composable, the `useTexture` composable returns a promise, you can use it with `async/await` or `then/catch`. If you are using it on a component make sure you wrap it with a `Suspense` component.
 
-## useCatalogue
-
-The `useCatalogue` composable allows you to extend the internal catalogue of components. It returns a function that you can use to register new components.
+## useSeek
 
-This is specially useful if you want to use objects that are not part of ThreeJS core like[OrbitControls](https://threejs.org/docs/#examples/en/controls/OrbitControls) or third party functionality, like physics.
+The `useSeek` composable provides utilities to easily traverse and navigate through complex ThreeJS scenes and object children graphs. It exports two functions, `seek` and `seekByName`, which allow you to find child objects based on specific properties.
 
 ```ts
-import { useCatalogue } from '@tresjs/core'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+const { seek, seekbyName } = useSeek()
+```
 
-const { extend } = useCatalogue()
+The seek function accepts three parameters:
 
-extend({ OrbitControls })
-```
+- `parent`: A ThreeJS scene or Object3D.
+- `property`: The property to be used in the search condition.
+- `value`: The value of the property to match.
 
-Then you can use the new component in your template. Notice that the new component is prefixed with `Tres` to avoid name collisions with native HTML elements, similar to the rest of the core components.
+Both function traverses the object and returns the child object with the specified property and value. If no child with the given property and value is found, it returns null and logs a warning.
 
-```vue
-<template>
-  <TresCanvas shadows alpha>
-    <TresScene>
-      <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
-    </TresScene>
-  </TresCanvas>
-</template>
+```ts
+const carRef = ref(null)
+
+watch(carRef, ({ model }) => {
+  if (model) {
+    const car = model.children[0]
+
+    const body = seek(car, 'name', 'Octane_Octane_Body_0')
+    body.color.set(new Color('blue'))
+  }
+)
 ```
 
-## useTres <Badge type="warning" text="^1.7.0" />
+## useTres
 
 This composable aims to provide access to the state model which contains the default renderer, camera, scene, and other useful properties.
 
@@ -180,3 +189,23 @@ const { state } = useTres()
 console.log(state.camera) // THREE.PerspectiveCamera
 console.log(state.renderer) // THREE.WebGLRenderer
 ```
+
+::: warning
+useTres composable can be only be used between the context of `TresCanvas` (inside sub-components) since Canvas component is the provider.
+:::
+
+```vue
+<TresCanvas>
+  <MyModel />
+</TresCanvas>
+```
+
+```vue
+// MyModel.vue
+
+<script lang="ts" setup>
+import { useTres } from '@tresjs/core'
+
+const { state } = useTres()
+</script>
+```

docs/api/events.md

@@ -1,4 +1,4 @@
-# Events <Badge type="warning" text="^1.6.0" />
+# Events
 
 **TresJS** Mesh objects emit pointer events when they are interacted with using `raycaster` and `pointer` objects under the hood.
 

docs/api/renderer.md

@@ -2,13 +2,11 @@
 
 The `Renderer` component is the main component of Tres. It's the one that creates the ThreeJS `WebGLRenderer` and define your Tres Scene.
 
-```vue{2,7}
+```vue{2,5}
 <template>
   <TresCanvas shadows :output-encoding="sRGBEncoding">
     <TresPerspectiveCamera />
-    <TresScene>
       <!-- Your scene goes here -->
-    </TresScene>
   </TresCanvas>
 </template>
 ```
@@ -42,7 +40,7 @@ body {
 }
 ```
 
-## Presets <Badge warning text="v1.7.0+" />
+## Presets
 
 Tres comes with a few presets for the `Renderer` component. You can use them by setting the `preset` prop.
 
@@ -84,6 +82,7 @@ renderer.shadowMap.type: PCFSoftShadowMap
 | **preserveDrawingBuffer**   | Whether to preserve the buffers until manually cleared or overwritten..                                                                                         | `false`            |
 | **clearColor**              | The color the renderer will use to clear the canvas.                                                                                                            | `#000000`          |
 | **windowSize**              | Whether to use the window size as the canvas size or the parent element.                                                                                        | `false`            |
+| **disableRender**           | Disable render on requestAnimationFrame, usefull for PostProcessing                                                                                             | `false`            |
 
 ## Defaults
 

docs/cientos/abstractions/environment.md

@@ -1,67 +0,0 @@
-# Environment <Badge type="warning" text="^1.7.0" />
-
-![Environment](/cientos/environment.png)
-
-Is a component abstraction that automatically sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`,
-
-It uses the composable [useEnvironment](/cientos/abstractions/use-environment) under the hood to load the cubemap.
-
-## Usage
-
-```html
-<Environment
-  :files="[
-    '/px.jpg',
-    '/nx.jpg',
-    '/py.jpg',
-    '/ny.jpg',
-    '/pz.jpg',
-    '/nz.jpg'
-]"
-/>
-```
-
-You can also pass the `.hdr` file directly:
-
-```html
-<Environment files="/sunset.hdr" />
-```
-
-![Environment](/cientos/envmaps.png)
-
-## Texture reference
-
-You can access the model reference by pasing a `ref` to the `<Environment />` prop and then using the method `getTexture()` to get the object.
-
-```vue{4,6,9,14,17}
-<script setup lang="ts">
-import { Environment } from '@tresjs/cientos'
-
-let envMap = null
-
-const environmentTexture = shallowRef()
-
-watch(environmentTexture, ({ getTexture }) => {
-  envMap = getTexture()
-})
-</script>
-
-<template>
-  <Environment ref="environmentTexture" />
-  <TresMesh>
-    <TresSphereGeometry />
-    <TresMeshStandardMaterial :env-map="envMap" />
-  </TresMesh>
-</template>
-```
-
-## Props
-
-| Prop         | Description                                                          | Default                                                                        |
-| :----------- | :------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
-| `files`      | Array of 6 urls to images, one for each side of the CubeTexture.     | `undefined`                                                                    |
-| `path`       | Path to the environment map files.                                   | `undefined`                                                                    |
-| `encoding`   | Encoding of the environment map.                                     | `sRGBEncoding` for an array of files and `LinearEncoding` for a single texture |
-| `background` | If `true`, the environment map will be used as the scene background. | `false`                                                                        |
-| `blur`       | Blur factor between 0 and 1. (only works with three 0.146 and up)    | 0                                                                              |
-| `preset`     | Preset environment map.                                              | `undefined`                                                                    |

docs/cientos/abstractions/pam-camera-mouse.md

@@ -1,33 +0,0 @@
-# PamCameraMouse
-
-![](/cientos/PamCameraMouse.gif)
-
-`<PamCameraMouse />` is a component that allow you to create easily the pam mouse camera effect. The camera will update automatically according to the mouse position, creating a beautiful nice effect
-
-## Usage
-
-You only need import it and use it `<PamCameraMouse />` additionally you can pass two props, disabled and factor. Factor is a number to increase the movement range of the camera
-
-```vue
-<template>
-  <TresCanvas>
-    <PamCameraMouse />
-    <TresScene>
-      <Text3D text="TresJS" font="/fonts/FiraCodeRegular.json">
-        <TresMeshNormalMaterial />
-      </Text3D>
-    </TresScene>
-  </TresCanvas>
-</template>
-```
-
-::: warning
-By the nature of the pam mouse camera effect it creates conflicts if it's used in combination with OrbitControls
-:::
-
-## Props [[1]](#1)
-
-| Prop         | Description                                             | Default |
-| :----------- | :------------------------------------------------------ | ------- |
-| **disabled** | enable or disabled the effect, boolean                  | false   |
-| **factor**   | Number use to increase the range of the camera movement | 5       |

docs/cientos/abstractions/text-3d.md

@@ -1,56 +0,0 @@
-# Text3D <Badge type="warning" text="^1.1.0" />
-
-`<Text3D />` is a component that renders a 3D text. It is a wrapper around the [TextGeometry](https://threejs.org/docs/#api/en/geometries/TextGeometry) class.
-
-<StackBlitzEmbed projectId="tresjs-text3d-cientos" />
-
-## Usage
-
-To use the `<Text3D />` component you need to pass the `font` prop with the URL of the font JSON file you want to use. TextGeometry uses `typeface`.json generated fonts, you can generate yours [here](http://gero3.github.io/facetype.js/)
-
-```vue
-<template>
-  <TresCanvas>
-    <TresScene>
-      <Text3D text="TresJS" font="/fonts/FiraCodeRegular.json">
-        <TresMeshNormalMaterial />
-      </Text3D>
-    </TresScene>
-  </TresCanvas>
-</template>
-```
-
-Notice that you need to pass the `<TresMeshNormalMaterial />` component as a child of the `<Text3D />` component. This is because `<Text3D />` is a `Mesh` component, so it needs a material. The geometry is created automatically. Also you can pass the text as a slot or as a prop like this:
-
-```vue
-<template>
-  <TresCanvas>
-    <TresScene>
-      <Text3D font="/fonts/FiraCodeRegular.json">
-        TresJS
-        <TresMeshNormalMaterial />
-      </Text3D>
-    </TresScene>
-  </TresCanvas>
-</template>
-```
-
-## Props [[1]](#1)
-
-| Prop               | Description                                                            | Default |
-| :----------------- | :--------------------------------------------------------------------- | ------- |
-| **font**           | The font data or font name to use for the text.                        |         |
-| **text**           | The text to display.                                                   |         |
-| **size**           | The size of the text.                                                  | 0.5     |
-| **height**         | The height of the text.                                                | 0.2     |
-| **curveSegments**  | The number of curve segments to use when generating the text geometry. | 5       |
-| **bevelEnabled**   | A flag indicating whether beveling should be enabled for the text.     | true    |
-| **bevelThickness** | The thickness of the beveled edge on the text.                         | 0.05    |
-| **bevelSize**      | The size of the beveled edge on the text.                              | 0.02    |
-| **bevelOffset**    | The offset of the beveled edge on the text.                            | 0       |
-| **bevelSegments**  | The number of bevel segments to use when generating the text geometry. | 4       |
-
-## References
-
-<a id="1">[1]</a>
-This table was generated by [ChatGPT](https://chat.openai.com/chat) based on the Vue component props.

docs/cientos/abstractions/use-animations.md

@@ -1,21 +0,0 @@
-# useAnimations <Badge type="warning" text="^1.5.0" />
-
-`useAnimation` is a composable that returns a `shallowReactive` with all the models actions based on the animations provided. It is a wrapper around the [AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer) class.
-
-<StackBlitzEmbed projectId="tresjs-use-animations" />
-
-## Usage
-
-```ts
-import { useAnimations } from '@tresjs/cientos'
-
-const { scene: model, animations } = await useGLTF('/models/ugly-naked-bunny.gltf')
-
-// Animations [ { name: 'Greeting'}, { name: 'Idle' } ]
-
-const { actions, mixer } = useAnimations(animations, model)
-
-let currentAction = actions.Greeting
-
-currentAction.play()
-```

docs/cientos/abstractions/use-environment.md

@@ -1,44 +0,0 @@
-# UseEnvironment <Badge type="warning" text="^1.7.0" />
-
-`useEnvironment` composable that automatically sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`.
-
-It uses the [CubeTextureLoader](https://threejs.org/docs/#api/en/loaders/CubeTextureLoader) to load the cubemap
-
-## Usage
-
-```ts
-import { useEnvironment } from '@tresjs/cientos'
-
-const texture = await useEnvironment({
-  files: [
-    '/textures/environmentMaps/0/px.jpg',
-    '/textures/environmentMaps/0/nx.jpg',
-    '/textures/environmentMaps/0/py.jpg',
-    '/textures/environmentMaps/0/ny.jpg',
-    '/textures/environmentMaps/0/pz.jpg',
-    '/textures/environmentMaps/0/nz.jpg',
-  ],
-  path: '',
-  encoding: sRGBEncoding,
-})
-```
-
-Then you can use the `texture` in your scene:
-
-```html{3}
-<TresMesh>
-    <TresSphereGeometry />
-    <TresMeshStandardMaterial :map="texture" />
-</TresMesh>
-```
-
-## Options
-
-| Name           | Type       | Default                                                                        | Description                                                       |
-| :------------- | ---------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------- |
-| **files**      | `Array`    | `undefined`                                                                    | Array of 6 urls to images, one for each side of the CubeTexture.  |
-| **path**       | `boolean`  | `false`                                                                        | Path to the environment map files.                                |
-| **encoding**   | `Encoding` | `sRGBEncoding` for an array of files and `LinearEncoding` for a single texture | Encoding of the environment map.                                  |
-| **background** | `boolean`  | `false`                                                                        | If `true` the texture will be used as the scene background.       |
-| **blur**       | `number`   | `0`                                                                            | Blur factor between 0 and 1. (only works with three 0.146 and up) |
-| **preset**     | `string`   | `undefined`                                                                    | Preset environment map.                                           |

docs/cientos/controls/orbit-controls.md

@@ -1,30 +0,0 @@
-# OrbitControls
-
-[OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.
-
-However, it is not part of the core of ThreeJS. So to use it you would need to import it from the `three/examples/jsm/controls/OrbitControls` module.
-
-Here is where the fancy part begins. ✨  
-The `cientos` package provides a component called `<OrbitControls />` that is a wrapper of the `OrbitControls` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
-
-The nicest part? You don't need to extend the catalog or pass any arguments.  
-It just works. 💯
-
-```vue{3}
-<template>
-  <TresCanvas shadows alpha>
-    <OrbitControls />
-    <TresScene> ... </TresScene>
-  </TresCanvas>
-</template>
-```
-
-## Props
-
-| Prop              | Description                                                                                                      | Default     |
-| :---------------- | :--------------------------------------------------------------------------------------------------------------- | ----------- |
-| **makeDefault**   | If `true`, the controls will be set as the default controls for the scene.                                       | `false`     |
-| **camera**        | The camera to control.                                                                                           | `undefined` |
-| **domElement**    | The dom element to listen to.                                                                                    | `undefined` |
-| **target**        | The target to orbit around.                                                                                      | `undefined` |
-| **enableDamping** | If `true`, the controls will use damping (inertia), which can be used to give a sense of weight to the controls. | `false`     |

docs/cientos/controls/transform-controls.md

@@ -1,101 +0,0 @@
-# Transform Controls
-
-The [Transform Controls](https://threejs.org/docs/#examples/en/controls/TransformControls) are a set of three gizmos that can be used to translate, rotate and scale objects in the scene. It adapts a similar interaction model of DCC tools like Blender
-
-<StackBlitzEmbed projectId="tresjs-transform-controls" />
-
-## Usage
-
-To use the Transform Controls, simply add the `TransformControls` component to your scene. You can pass the `templateRef`of the instance you want to control as a prop.
-
-```vue{2,6,8}
-<script setup>
-const boxRef = shallowRef()
-</script>
-<template>
-  <TresCanvas>
-    <OrbitControls make-default />
-    <TresScene>
-        <TransformControls :object="boxRef" />
-        <TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
-            <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-            <TresMeshToonMaterial color="#4F4F4F" />
-        </TresMesh>
-    </TresScene>
-  </TresCanvas>
-</template>
-```
-
-::: warning
-If you are using other controls ([OrbitControls](/cientos/controls/orbit-controls)) they will interfere with each other when dragging. To avoid this, you can set the `makeDefault` prop to `true` on the **OrbitControls**.
-:::
-
-## Modes
-
-The Transform Controls can be used in three different modes:
-
-### Translate
-
-![Translate](/cientos/transform-controls-translate.png)
-
-The default mode allows you to move the object around the scene.
-
-```html
-<TransformControls mode="translate" :object="sphereRef" />
-```
-
-### Rotate
-
-![Rotate](/cientos/transform-controls-rotate.png)
-
-The rotate mode allows you to rotate the object around the scene.
-
-```html
-<TransformControls mode="rotate" :object="boxRef" />
-```
-
-### Scale
-
-![Scale](/cientos/transform-controls-scale.png)
-
-The scale mode allows you to scale the object around the scene.
-
-```html
-<TransformControls mode="scale" :object="sphereRef" />
-```
-
-## Props
-
-| Prop                | Description                                                                                   | Default     |
-| :------------------ | :-------------------------------------------------------------------------------------------- | ----------- |
-|  **object**         | The instance [Object3D](https://threejs.org/docs/index.html#api/en/core/Object3D) to control. | `null`      |
-| **mode**            | The mode of the controls. Can be `translate`, `rotate` or `scale`.                            | `translate` |
-| **enabled**         | If `true`, the controls will be enabled.                                                      | `true`      |
-| **axis**            | The axis to use for the controls. Can be `X`, `Y`, `Z`, `XY`, `YZ`, `XZ`, `XYZ`.              | `XYZ`       |
-| **space**           | The space to use for the controls. Can be `local` or `world`.                                 | `local`     |
-| **size**            | The size of the controls.                                                                     | `1`         |
-| **translationSnap** | The distance to snap to when translating. (World units)                                       | `null`      |
-| **rotationSnap**    | The angle to snap to when rotating. (Radians)                                                 | `null`      |
-| **scaleSnap**       | The scale to snap to when scaling.                                                            | `null`      |
-| **showX**           | If `true`, the X-axis helper will be shown.                                                   | `true`      |
-| **showY**           | If `true`, the Y-axis helper will be shown.                                                   | `true`      |
-| **showZ**           | If `true`, the Z-axis helper will be shown.                                                   | `true`      |
-
-## Events
-
-| Event            | Description                                                    |
-| :--------------- | :------------------------------------------------------------- |
-| **dragging**     | Fired when the user starts or stops dragging the controls.     |
-| **change**       | Fired when the user changes the controls.                      |
-| **mouseDown**    | Fired when the user clicks on the controls.                    |
-| **mouseUp**      | Fired when the user releases the mouse button on the controls. |
-| **objectChange** | Fired when the user changes the object.                        |
-
-<style scoped>
-img {
-    aspect-ratio: 16/9;
-    object-fit: cover;
-    object-position: top;
-    border-radius: 8px;
-}
-</style>

docs/cientos/index.md

@@ -1,44 +0,0 @@
-<script setup>
-    import cientos from '../../packages/cientos/package.json'
-</script>
-
-# Cientos <Badge :text="`v${cientos.version}`" type="warning" vertical="middle" />
-
-![Cientos banner](/cientos-banner.png)
-
-> Cientos (Spanish word for "hundreds", pronounced `/θjentos/` ) is is a collection of useful ready-to-go helpers and components that are not part of the [core](/guide/index.md) package. The name uses the word uses in spanish to multiply by 100, to refer to the potential reach of the package to hold a amazing abstractions.
-
-The `cientos` package uses [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module under the hood instead of the `three/examples/jsm` module. This means that you don't need to extend the catalogue of components using the `extend` method of the [useCatalogue](/api/composables#useCatalogue) composable, `cientos` does it for you.
-
-It just works. 💯
-
-::: info
-This package is not required to use the core library, but they can make your DX way better, specially for complex scenes.
-:::
-
-## Installation
-
-```bash
-npm install @tresjs/cientos -D
-```
-
-## Basic Usage
-
-```ts
-import { OrbitControls } from '@tresjs/cientos'
-```
-
-Now you can use the `OrbitControls` component in your scene.
-
-```html
-<template>
-  <TresCanvas shadows alpha>
-    <OrbitControls />
-    <TresScene> ... </TresScene>
-  </TresCanvas>
-</template>
-```
-
-::: warning
-Notice that you don't need to write the prefix `Tres` such as `<TresOrbitControl />` to use the component
-:::

docs/cientos/loaders/fbx-model.md

@@ -1,27 +0,0 @@
-# Using `FBXModel`
-
-The `FBXModel` component is a wrapper around [`useFBX`](./use-fbx.md) composable and accepts the same options as props.
-
-```vue{2,10}
-<script setup lang="ts">
-import { OrbitControls, FBXModel } from '@tresjs/cientos'
-</script>
-<template>
-  <Suspense>
-    <TresCanvas clear-color="#82DBC5" shadows alpha>
-      <TresPerspectiveCamera :position="[11, 11, 11]" />
-      <OrbitControls />
-      <TresScene>
-        <FBXModel path="/models/AkuAku.fbx" />
-        <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-      </TresScene>
-    </TresCanvas>
-  </Suspense>
-</template>
-```
-
-## Props
-
-| Prop   | Description             | Default     |
-| :----- | :---------------------- | ----------- |
-| `path` | Path to the model file. | `undefined` |

docs/cientos/loaders/gltf-model.md

@@ -1,52 +0,0 @@
-# Using `GLTFModel`
-
-The `GLTFModel` component is a wrapper around [`useGLTF`](./use-gltf.md) composable and accepts the same options as props.
-
-```vue{2,10}
-<script setup lang="ts">
-import { OrbitControls, GLTFModel } from '@tresjs/cientos'
-</script>
-<template>
-  <Suspense>
-    <TresCanvas clear-color="#82DBC5" shadows alpha>
-      <TresPerspectiveCamera :position="[11, 11, 11]" />
-      <OrbitControls />
-      <TresScene>
-        <GLTFModel path="/models/AkuAku.gltf" draco />
-        <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-      </TresScene>
-    </TresCanvas>
-  </Suspense>
-</template>
-```
-
-## Model reference
-
-You can access the model reference by pasing a `ref` to the `model` prop and then using the method `getModel()` to get the object.
-
-```vue{3,6}
-<script setup lang="ts">
-import { OrbitControls, GLTFModel } from '@tresjs/cientos'
-
-const modelRef = shallowRef<THREE.Object3D>()
-
-watch(modelRef, ({getModel}) => {
-  const model = getModel()
-
-  model.traverse((child) => {
-    if (child.isMesh) {
-      child.castShadow = true
-      child.receiveShadow = true
-    }
-  })
-})
-</script>
-```
-
-## Props
-
-| Prop          | Description                                                                                                           | Default     |
-| :------------ | :-------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `path`        | Path to the model file.                                                                                               | `undefined` |
-| `draco`       | Enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. | `false`     |
-| `decoderPath` | Path to a local Draco decoder.                                                                                        | `undefined` |

docs/cientos/loaders/use-fbx.md

@@ -1,23 +0,0 @@
-# useFBX
-
-A composable that allows you to easily load glTF models into your **TresJS** scene.
-
-## Usage
-
-```ts
-import { useFBX } from '@tresjs/cientos'
-
-const model = await useFBX('/models/AkuAku.fbx')
-```
-
-Then is as straightforward as adding the scene to your scene:
-
-```html{4}
-<Suspense>
-  <TresCanvas shadows alpha>
-    <TresScene>
-      <TresMesh v-bind="scene" />
-    </TresScene>
-  </TresCanvas>
-</Suspense>
-```

docs/cientos/loaders/use-gltf.md

@@ -1,38 +0,0 @@
-# useGLTF
-
-A composable that allows you to easily load glTF models into your **TresJS** scene.
-
-## Usage
-
-```ts
-import { useGLTF } from '@tresjs/cientos'
-
-const { scene } = await useGLTF('/models/AkuAku.gltf')
-```
-
-Then is as straightforward as adding the scene to your scene:
-
-```html{4}
-<Suspense>
-  <TresCanvas shadows alpha>
-    <TresScene>
-      <TresMesh v-bind="scene" />
-    </TresScene>
-  </TresCanvas>
-</Suspense>
-```
-
-An advantage of using `useGLTF`is that you can pass a `draco` prop to enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. This will reduce the size of the model and improve performance.
-
-```ts
-import { useGLTF } from '@tresjs/cientos'
-
-const { scene } = await useGLTF('/models/AkuAku.gltf', { draco: true })
-```
-
-## Options
-
-| Name            | Type      | Default     | Description                          |
-| :-------------- | --------- | ----------- | ------------------------------------ |
-| **draco**       | `boolean` | `false`     | Whether to enable Draco compression. |
-| **decoderPath** | `string`  | `undefined` | Local path to the Draco decoder.     |

docs/cientos/misc/use-tweakpane.md

@@ -1,40 +0,0 @@
-# useTweakPane
-
-[TweakPane](https://cocopon.github.io/tweakpane/) is a JavaScript library for creating a user interface for tweaking values of JavaScript variables. It's a great tool for fine-tuning parameters and monitoring value changes on your three.js applications.
-
-**TresJS** provides a composables called `useTweakPane` that creates a Tweakpane panel to your container so you can add tweaks to it. By default, the panel is created on the top right corner of the canvas and includes a FPS graph monitor to keep and eye on the performance of your scene.
-
-::: info
-You can change the container of the panel by passing the `selector` option to the `useTweakPane` function.
-:::
-
-## Basic usage
-
-```ts
-import { useTweakPane } from '@tresjs/cientos'
-
-const { pane } = useTweakPane()
-
-const experiment = reactive({
-  clearColor: '#000000',
-  alpha: true,
-  shadow: true,
-})
-
-pane.addInput(experiment, 'clearColor', {
-  label: 'Clear Color',
-  colorMode: 'hex',
-})
-
-pane.addInput(experiment, 'alpha')
-```
-
-The result will be something like this:
-
-![](/use-tweakpane.png)
-
-## Options
-
-| Name         | Type     | Default     | Description                                                    |
-| :----------- | -------- | ----------- | -------------------------------------------------------------- |
-| **selector** | `string` | `undefined` | The selector of the container where the panel will be created. |

docs/cientos/shapes/box.md

@@ -1,29 +0,0 @@
-# Box <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/box.png)
-
-The `cientos` package provides a `<Box />` component that serves as a short-cut for a `BoxGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  width: number,
-  height: number,
-  depth: number,
-  widthSegments: number,
-  heightSegments: number,
-  depthSegments: number
-]
-```
-
-Reference: [BoxGeometry](https://threejs.org/docs/?q=box#api/en/geometries/BoxGeometry)
-
-## Usage
-
-```html
-<Box :args="[1, 1, 1]" color="orange" />
-
-// Box with a custom material transformations
-<Box ref="boxRef" :args="[1, 1, 1]" :position="[0, 4, 0]">
-  <TresMeshToonMaterial color="orange" />
-</Box>
-```

docs/cientos/shapes/circle.md

@@ -1,22 +0,0 @@
-# Circle <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/circle.png)
-
-The `cientos` package provides a `<Circle />` component that serves as a short-cut for a `CircleGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [radius: number, segments: number, thetaStart: number, thetaLength: number]
-```
-
-Reference: [CircleGeometry](https://threejs.org/docs/?q=circle#api/en/geometries/CircleGeometry)
-
-## Usage
-
-```html
-<Circle :args="[1, 32]" color="lightsalmon" />
-
-// Circle with a custom material transformations
-<Circle ref="circleRef" :args="[1, 32]" :position="[0, 0, 0]">
-  <TresMeshToonMaterial color="lightsalmon" />
-</Circle>
-```

docs/cientos/shapes/cone.md

@@ -1,30 +0,0 @@
-# Cone <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/cone.png)
-
-The `cientos` package provides a `<Cone />` component that serves as a short-cut for a `ConeGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  radius: number,
-  height: number,
-  radialSegments: number,
-  heightSegments: number,
-  openEnded: boolean,
-  thetaStart: number,
-  thetaLength: number
-]
-```
-
-Reference: [ConeGeometry](https://threejs.org/docs/?q=cone#api/en/geometries/ConeGeometry)
-
-## Usage
-
-```html
-<Cone :args="[1, 1, 8]" color="orange" />
-
-// Cone with a custom material transformations
-<Cone ref="coneRef" :args="[1, 1, 8]" :position="[0, 4, 0]">
-  <TresMeshToonMaterial color="orange" />
-</Cone>
-```

docs/cientos/shapes/dodecahedron.md

@@ -1,22 +0,0 @@
-# Dodecahedron <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/dodecahedron.png)
-
-The `cientos` package provides a `<Dodecahedron />` component that serves as a short-cut for a `DodecahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [radius: number, detail: number]
-```
-
-Reference: [DodecahedronGeometry](https://threejs.org/docs/?q=dode#api/en/geometries/DodecahedronGeometry)
-
-## Usage
-
-```html
-<Dodecahedron :args="[1, 0]" color="deeppink" />
-
-// Dodecahedron with a custom material transformations
-<Dodecahedron ref="dodecahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="deeppink" />
-</Dodecahedron>
-```

docs/cientos/shapes/icosahedron.md

@@ -1,22 +0,0 @@
-# Icosahedron <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/icosahedron.png)
-
-The `cientos` package provides a `<Icosahedron />` component that serves as a short-cut for a `IcosahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [radius: number, detail: number]
-```
-
-Reference: [IcosahedronGeometry](https://threejs.org/docs/?q=ico#api/en/geometries/IcosahedronGeometry)
-
-## Usage
-
-```html
-<Icosahedron :args="[1, 0]" color="red" />
-
-// Icosahedron with a custom material transformations
-<Icosahedron ref="icosahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="red" />
-</Icosahedron>
-```

docs/cientos/shapes/octahedron.md

@@ -1,22 +0,0 @@
-# Octahedron <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/octahedron.png)
-
-The `cientos` package provides a `<Octahedron />` component that serves as a short-cut for a `OctahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [radius: number, detail: number]
-```
-
-Reference: [OctahedronGeometry](https://threejs.org/docs/?q=octa#api/en/geometries/OctahedronGeometry)
-
-## Usage
-
-```html
-<Octahedron :args="[1, 0]" color="red" />
-
-// Octahedron with a custom material transformations
-<Octahedron ref="icosahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="red" />
-</Octahedron>
-```

docs/cientos/shapes/plane.md

@@ -1,26 +0,0 @@
-# Plane <Badge type="warning" text="^1.5.0" />
-
-![](/cientos/plane.png)
-
-The `cientos` package provides a `<Plane />` component that serves as a short-cut for a `PlaneGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [width: number, height: number, widthSegments: number, heightSegments: number]
-```
-
-Reference: [PlaneGeometry](https://threejs.org/docs/?q=plane#api/en/geometries/PlaneGeometry)
-
-::: info
-A convenient default rotation is applied to the _x-axis_ of the plane (`-Math.PI / 2`), so that it is facing up (along the Y axis).
-:::
-
-## Usage
-
-```html
-<Plane :args="[1, 1]" color="teal" />
-
-// Plane with a custom material transformations
-<Plane ref="planeRef" :args="[8, 8]" :position="[0, 4, 0]">
-  <TresMeshToonMaterial color="teal" />
-</Plane>
-```

docs/cientos/shapes/ring.md

@@ -1,29 +0,0 @@
-# Ring <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/ring.png)
-
-The `cientos` package provides a `<Ring />` component that serves as a short-cut for a `RingGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  innerRadius: number,
-  outerRadius: number,
-  thetaSegments: number,
-  phiSegments: number,
-  thetaStart: number,
-  thetaLength: number
-]
-```
-
-Reference: [RingGeometry](https://threejs.org/docs/?q=ring#api/en/geometries/RingGeometry)
-
-## Usage
-
-```html
-<Ring :args="[0.5, 1, 32]" color="purple" />
-
-// Ring with a custom material transformations
-<Ring ref="ringRef" :args="[0.5, 1, 32]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="purple" />
-</Ring>
-```

docs/cientos/shapes/sphere.md

@@ -1,30 +0,0 @@
-# Sphere <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/sphere.png)
-
-The `cientos` package provides a `<Sphere />` component that serves as a short-cut for a `SphereGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  radius: number,
-  widthSegments: number,
-  heightSegments: number,
-  phiStart: number,
-  phiLength: number,
-  thetaStart: number,
-  thetaLength: number
-]
-```
-
-Reference: [SphereGeometry](https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry)
-
-## Usage
-
-```html
-<Sphere :args="[1, 1, 1]" color="pink" />
-
-// Sphere with a custom material transformations
-<Sphere ref="planeRef" :args="[1, 1, 1]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="pink" />
-</Sphere>
-```

docs/cientos/shapes/tetrahedron.md

@@ -1,22 +0,0 @@
-# Tetrahedron <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/tetrahedron.png)
-
-The `cientos` package provides a `<Tetrahedron />` component that serves as a short-cut for a `TetrahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [radius: number, detail: number]
-```
-
-Reference: [TetrahedronGeometry](https://threejs.org/docs/?q=tetr#api/en/geometries/TetrahedronGeometry)
-
-## Usage
-
-```html
-<Tetrahedron :args="[1, 0]" color="yellow" />
-
-// Tetrahedron with a custom material transformations
-<Tetrahedron ref="tetrahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
-  <TresMeshToonMaterial color="yellow" />
-</Tetrahedron>
-```

docs/cientos/shapes/torus-knot.md

@@ -1,29 +0,0 @@
-# TorusKnot <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/torus-knot.png)
-
-The `cientos` package provides a `<TorusKnot />` component that serves as a short-cut for a `TorusKnotGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  radius: number,
-  tube: number,
-  tubularSegments: number,
-  radialSegments: number,
-  p: number,
-  q: number
-]
-```
-
-Reference: [TorusKnotGeometry](https://threejs.org/docs/?q=torus#api/en/geometries/TorusKnotGeometry)
-
-## Usage
-
-```html
-<TorusKnot :args="[0.6, 0.2, 64, 8]" color="lime" />
-
-// TorusKnot with a custom material transformations
-<TorusKnot ref="torusKnotRef" :args="[0.6, 0.2, 64, 8]" :position="[-2, 6, 2]">
-  <TresMeshToonMaterial color="lime" />
-</TorusKnot>
-```

docs/cientos/shapes/torus.md

@@ -1,28 +0,0 @@
-# Torus <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/torus.png)
-
-The `cientos` package provides a `<Torus />` component that serves as a short-cut for a `TorusGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-args: [
-  radius: number,
-  tube: number,
-  radialSegments: number,
-  tubularSegments: number,
-  arc: number
-]
-```
-
-Reference: [TorusGeometry](https://threejs.org/docs/?q=torus#api/en/geometries/TorusGeometry)
-
-## Usage
-
-```html
-<Torus :args="[2, 0.4, 42, 100]" color="cyan" />
-
-// Torus with a custom material transformations
-<Torus ref="torusRef" :args="[0.75, 0.4, 16, 80]" :position="[-2, 6, 0]">
-  <TresMeshToonMaterial color="cyan" />
-</Torus>
-```

docs/cientos/shapes/tube.md

@@ -1,50 +0,0 @@
-# Tube <Badge type="warning" text="^1.6.0" />
-
-![](/cientos/tube.png)
-
-The `cientos` package provides a `<Tube />` component that serves as a short-cut for a `TubeGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
-
-```typescript
-<script>
-export default {
-  setup() {
-    const tubePath = ref(new CubicBezierCurve3(
-          new Vector3(-1, 0, 0),
-          new Vector3(-0.5, -1, 0),
-          new Vector3(0.5, 1, 0),
-          new Vector3(1, 0, 0),
-          ));
-
-    return {
-      tubePath
-    }
-  },
-}
-</script>
-```
-
-```typescript
-type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3
-
-args: [
-  path: CurveType,
-  tubularSegments: number,
-  radius: number,
-  radialSegments: number,
-  closed: boolean
-]
-```
-
-Reference: [TubeGeometry](https://threejs.org/docs/?q=tube#api/en/geometries/TubeGeometry)
-
-## Usage
-
-```html
-// TubeGeometry needs a curve path to be construct
-<Tube :args="[tubePath, 20, 0.2, 8, false]" color="lightblue" />
-
-// Tube with a custom material transformations
-<Tube ref="tubeRef" :args="[tubePath, 20, 0.2, 8, false]" :position="[0, 4, 0]">
-  <TresMeshToonMaterial color="lightblue" />
-</Tube>
-```

docs/examples/basic-animations.md

@@ -29,14 +29,17 @@ To improve the performance, we will use a [Shallow Ref](https://v3.vuejs.org/gui
 
 ```vue
 <script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
 const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
 </script>
 
 <template>
-  <TresMesh ref="boxRef" :scale="1" cast-shadow>
-    <TresBoxGeometry :args="[1, 1, 1]" />
-    <TresMeshStandardMaterial v-bind="pbrTexture" />
-  </TresMesh>
+  <TresCanvas>
+    <TresMesh ref="boxRef" :scale="1" cast-shadow>
+      <TresBoxGeometry :args="[1, 1, 1]" />
+      <TresMeshStandardMaterial v-bind="pbrTexture" />
+    </TresMesh>
+  </TresCanvas>
 </template>
 ```
 
@@ -54,3 +57,30 @@ onLoop(({ _delta, elapsed }) => {
 ```
 
 You can also use the `delta` from the internal [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock) or the `elapsed` to animate the cube.
+
+## But why not using reactivity?
+
+You might be wondering why we are not using reactivity to animate the cube. The answer is simple, performance.
+
+```vue
+// This is a bad idea ❌
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+
+const boxRotation = reactive([0, 0, 0])
+
+onLoop(({ _delta, elapsed }) => {
+  boxRotation[1] += 0.01
+  boxRotation[2] = elapsed * 0.2
+})
+</script>
+```
+
+We can be tempted to use reactivity to animate the cube. But it would be a bad idea.
+The reason is that [Vue's reactivity is based on Proxies](https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue) and it's not designed to be used in a render loop that updates 60 or more times per second.
+
+The embedded page below shows the [benchmark of a proxy vs a regular object](https://measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter). As you can see, the proxy is 5 times slower than the regular object.
+
+<EmbedExperiment src="https://measurethat.net/Embed?id=399142" />
+
+You can read more about this in the [Caveats](../advanced/caveats.md#reactivity) section.

docs/examples/groups.md

@@ -1,4 +1,4 @@
-# Group <Badge type="warning" text="^1.5.0" />
+# Group
 
 A `<TresGroup>` is an instance of the [THREE.Group](https://threejs.org/docs/#api/en/objects/Group) class which is almost the same as a [THREE.Object3D](https://threejs.org/docs/#api/en/objects/Object3D) but allows you to **group together multiple objects in the scene** so that they can be manipulated as a single unit (transform, rotation, etc).
 
@@ -6,7 +6,7 @@ A `<TresGroup>` is an instance of the [THREE.Group](https://threejs.org/docs/#ap
 
 ## Usage
 
-```vue{12,21}
+```vue{13,22}
 <script setup lang="ts">
 const groupRef = ref()
 const { onLoop } = useRenderLoop()
@@ -18,15 +18,17 @@ onLoop(() => {
 })
 </script>
 <template>
-  <TresGroup ref="groupRef" :position="[2,0,0]">
-    <TresMesh>
-      <TresBoxGeometry />
-      <TresMeshBasicMaterial color="red" />
-    </TresMesh>
-    <TresMesh>
-      <TresSphereGeometry />
-      <TresMeshBasicMaterial color="blue" />
-    </TresMesh>
-  </TresGroup>
+  <TresCanvas>
+    <TresGroup ref="groupRef" :position="[2,0,0]">
+      <TresMesh>
+        <TresBoxGeometry />
+        <TresMeshBasicMaterial color="red" />
+      </TresMesh>
+      <TresMesh>
+        <TresSphereGeometry />
+        <TresMeshBasicMaterial color="blue" />
+      </TresMesh>
+    </TresGroup>
+  </TresCanvas>
 </template>
 ```

docs/examples/load-models.md

@@ -18,23 +18,23 @@ For a detailed explanation of how to use `useLoader`, check out the [useLoader](
 
 ```ts
 import { useLoader } from '@tresjs/core'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
 
 const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
 ```
 
-Then you can pass the model scene to a `TresMesh` component:
+Then you can pass the model scene to a TresJS `primitive`:
 
-```html{4}
-<Suspense>
-  <TresCanvas>
-    <TresScene>
-      <TresMesh v-bind="scene" />
-    </TresScene>
-  </TresCanvas>
-</Suspense>
+```html{3}
+<TresCanvas>
+  <Suspense>
+    <primitive :object="scene" />
+  </Suspense>
+</TresCanvas>
 ```
 
+> The `<primitive />` component is not a standalone component in the Tres source code. Instead, it's a part of the Tres core functionality. When you use `<primitive>`, it is translated to a `createElement` call, which creates the appropriate Three.js object based on the provided "object" prop.
+
 Notice in the example above that we are using the `Suspense` component to wrap the `TresCanvas` component. This is because `useLoader` returns a `Promise` and we need to wait for it to resolve before rendering the scene.
 
 ## Using `useGLTF`
@@ -44,7 +44,7 @@ A more convenient way of loading models is using the `useGLTF` composable availa
 ```ts
 import { useGLTF } from '@tresjs/cientos'
 
-const { scene } = await useGLTF('/models/AkuAku.gltf')
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf')
 ```
 
 An advantage of using `useGLTF`is that you can pass a `draco` prop to enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. This will reduce the size of the model and improve performance.
@@ -52,28 +52,45 @@ An advantage of using `useGLTF`is that you can pass a `draco` prop to enable [Dr
 ```ts
 import { useGLTF } from '@tresjs/cientos'
 
-const { scene } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+```
+
+Alternatively you can easily select Objects inside the model using `nodes` property
+
+```vue
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+</script>
+<template>
+  <TresCanvas clear-color="#82DBC5" shadows alpha>
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+    <Suspense>
+      <primitive :object="nodes.MyModel" />
+    </Suspense>
+  </TresCanvas>
+</template>
 ```
 
 ## Using `GLTFModel`
 
 The `GLTFModel` component is a wrapper around `useGLTF` that's available from [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.
 
-```vue{2,10}
+```vue{2,9}
 <script setup lang="ts">
 import { OrbitControls, GLTFModel } from '@tresjs/cientos'
 </script>
 <template>
-  <Suspense>
-    <TresCanvas clear-color="#82DBC5" shadows alpha>
-      <TresPerspectiveCamera :position="[11, 11, 11]" />
-      <OrbitControls />
-      <TresScene>
-        <GLTFModel path="/models/AkuAku.gltf" draco />
-        <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-      </TresScene>
-    </TresCanvas>
-  </Suspense>
+  <TresCanvas clear-color="#82DBC5" shadows alpha>
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+    <Suspense>
+      <GLTFModel path="/models/AkuAku.gltf" draco />
+    </Suspense>
+    <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
+  </TresCanvas>
 </template>
 ```
 
@@ -91,34 +108,30 @@ const model = await useFBX('/models/AkuAku.fbx')
 
 Then is as straightforward as adding the scene to your scene:
 
-```html{4}
-<Suspense>
-  <TresCanvas shadows alpha>
-    <TresScene>
-      <TresMesh v-bind="scene" />
-    </TresScene>
-  </TresCanvas>
-</Suspense>
+```html{3}
+<TresCanvas shadows alpha>
+  <Suspense>
+    <primitive :object="scene" />
+  </Suspense>
+</TresCanvas>
 ```
 
-## FBXModel
+## FBXModel
 
 The `FBXModel` component is a wrapper around `useFBX` that's available from [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package. It's similar usage to `GLTFModel`:
 
-```vue{2,10}
+```vue{2,9}
 <script setup lang="ts">
 import { OrbitControls, FBXModel } from '@tresjs/cientos'
 </script>
 <template>
-  <Suspense>
-    <TresCanvas clear-color="#82DBC5" shadows alpha>
-      <TresPerspectiveCamera :position="[11, 11, 11]" />
-      <OrbitControls />
-      <TresScene>
+  <TresCanvas clear-color="#82DBC5" shadows alpha>
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+      <Suspense>
         <FBXModel path="/models/AkuAku.fbx" />
-        <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-      </TresScene>
-    </TresCanvas>
-  </Suspense>
+      </Suspense>
+      <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
+  </TresCanvas>
 </template>
 ```

docs/examples/load-textures.md

@@ -16,7 +16,7 @@ For a detailed explanation of how to use `useLoader`, check out the [useLoader](
 
 ```ts
 import { useLoader } from '@tresjs/core'
-import { TextureLoader } from 'three/examples/jsm/loaders/TextureLoader'
+import { TextureLoader } from 'three/addons/loaders/TextureLoader'
 
 const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')
 ```
@@ -26,12 +26,10 @@ Then you can pass the texture to a material:
 ```html
 <Suspense>
   <TresCanvas>
-    <TresScene>
-      <TresMesh>
-        <TresSphereGeometry :args="[1,32,32]" />
-        <TresMeshStandardMaterial :map="texture" />
-      </TresMesh>
-    </TresScene>
+    <TresMesh>
+      <TresSphereGeometry :args="[1,32,32]" />
+      <TresMeshStandardMaterial :map="texture" />
+    </TresMesh>
   </TresCanvas>
 </Suspense>
 ```
@@ -61,18 +59,16 @@ Similar to the previous example, we can pass all the textures to a material via
 ```html
 <Suspense>
   <TresCanvas>
-    <TresScene>
-      <TresMesh>
-        <TresSphereGeometry :args="[1,32,32]" />
-        <TresMeshStandardMaterial
-          :map="pbrTexture.map"
-          :displacementMap="pbrTexture.displacementMap"
-          :roughnessMap="pbrTexture.roughnessMap"
-          :normalMap="pbrTexture.normalMap"
-          :ambientOcclusionMap="pbrTexture.ambientOcclusionMap"
-        />
-      </TresMesh>
-    </TresScene>
+    <TresMesh>
+      <TresSphereGeometry :args="[1,32,32]" />
+      <TresMeshStandardMaterial
+        :map="pbrTexture.map"
+        :displacementMap="pbrTexture.displacementMap"
+        :roughnessMap="pbrTexture.roughnessMap"
+        :normalMap="pbrTexture.normalMap"
+        :ambientOcclusionMap="pbrTexture.ambientOcclusionMap"
+      />
+    </TresMesh>
   </TresCanvas>
 </Suspense>
 ```

docs/examples/orbit-controls.md

@@ -4,29 +4,27 @@
 
 [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.
 
-However, it is not part of the core of ThreeJS. So to use it you would need to import it from the `three/examples/jsm/controls/OrbitControls` module.
+However, it is not part of the core of ThreeJS. So to use it you would need to import it from the `three/addons/controls/OrbitControls` module.
 
 This creates a problem because **TresJS** automatically creates a catalog of the core of Three so you can use them as components.
 
-Fortunately, **TresJS** provides a way to extend the catalog of components. You can do it by using the `extend` method using the [useCatalogue](/api/composables#usecatalog) composable.
+Fortunately, **TresJS** provides a way to extend the catalog of components. You can do it by using the `extend` method from the core library.
 
 For more information about extending your TresJS catalog, refer to the [extending](/advanced/extending.md) section.
 
 ## Using OrbitControls
 
-To use `OrbitControls` you need to import it from the `three/examples/jsm/controls/OrbitControls` module.
+To use `OrbitControls` you need to import it from the `three/addons/controls/OrbitControls` module.
 
 ```js
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
 ```
 
-Then you need to extend the catalogue of components using the `extend` method of the [useCatalogue](/api/composables#usecatalog) composable.
+Then you need to extend the catalogue of components using the `extend` method.
 
 ```js
-import { useCatalogue } from '@tresjs/core'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
-
-const { extend } = useCatalogue()
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
 
 extend({ OrbitControls })
 ```
@@ -36,9 +34,8 @@ Now you can use the `TresOrbitControls` component in your scene.
 ```vue
 <template>
   <TresCanvas shadows alpha>
-    <TresScene>
-      <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
-    </TresScene>
+    <TresPerspectiveCamera :args="[45," 1, 0.1, 1000] />
+    <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
   </TresCanvas>
 </template>
 ```
@@ -57,20 +54,17 @@ So the final code would be something like this:
 
 ```vue
 <script setup lang="ts">
-import { useCatalogue } from '@tresjs/core'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
 
-const { extend } = useCatalogue()
 extend({ OrbitControls })
 
 const { state } = useThree()
 </script>
 <template>
   <TresCanvas shadows alpha>
-    <TresScene>
-      <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
-      ...
-    </TresScene>
+    <TresPerspectiveCamera :args="[45," 1, 0.1, 1000] />
+    <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
   </TresCanvas>
 </template>
 ```
@@ -86,8 +80,8 @@ It just works. 💯
 ```vue
 <template>
   <TresCanvas shadows alpha>
+    <TresPerspectiveCamera :args="[45," 1, 0.1, 1000] />
     <OrbitControls />
-    <TresScene> ... </TresScene>
   </TresCanvas>
 </template>
 ```

docs/examples/text-3d.md

@@ -4,29 +4,27 @@
 
 <StackBlitzEmbed projectId="tresjs-text3d-cientos" />
 
-However, it is not part of the core of ThreeJS. So to use it you would need to import it from the `three/examples/jsm/controls/TextGeometry` module.
+However, it is not part of the core of ThreeJS. So to use it you would need to import it from the `three/addons/controls/TextGeometry` module.
 
 This creates a problem because **TresJS** automatically creates a catalog of the core of Three so you can use them as components.
 
-Fortunately, **TresJS** provides a way to extend the catalog of components. You can do it by using the `extend` method using the [useCatalogue](/api/composables#usecatalog) composable.
+Fortunately, **TresJS** provides a way to extend the catalog of components. You can do it by using the `extend` method from the core library.
 
 For more information about extending your TresJS catalog, refer to the [extending](/advanced/extending.md) section.
 
 ## Using TextGeometry
 
-To use `TextGeometry` you need to import it from the `three/examples/jsm/geometries/TextGeometry` module.
+To use `TextGeometry` you need to import it from the `three/addons/geometries/TextGeometry` module.
 
 ```js
-import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
 ```
 
-Then you need to extend the catalogue of components using the `extend` method of the [useCatalogue](/api/composables#usecatalog) composable.
+Then you need to extend the catalogue of components using the `extend` method.
 
 ```js
-import { useCatalogue } from '@tresjs/core'
-import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
-
-const { extend } = useCatalogue()
+import { extend } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
 
 extend({ TextGeometry: TextGeometry })
 ```
@@ -54,11 +52,9 @@ Now you can use the `TresTextGeometry` component inside a TresMesh in your scene
 ```vue
 <template>
   <TresCanvas shadows alpha>
-    <TresScene>
-      <TresMesh>
-        <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
-      </TresMesh>
-    </TresScene>
+    <TresMesh>
+      <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+    </TresMesh>
   </TresCanvas>
 </template>
 ```
@@ -93,10 +89,10 @@ So the final code would be something like this:
 
 ```vue
 <script setup lang="ts">
-import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
-import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
-import { useCatalogue, useTexture } from '/@/core'
-const { extend } = useCatalogue()
+import { extend } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+import { FontLoader } from 'three/addons/loaders/FontLoader'
+import { useTexture } from '/@/composables'
 
 extend({ TextGeometry: TextGeometry })
 
@@ -128,10 +124,12 @@ const font = await new Promise((resolve, reject) => {
 const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
 </script>
 <template>
-  <TresMesh>
-    <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
-    <TresMeshNormalMaterial :matcap="matcapTexture" />
-  </TresMesh>
+  <TresCanvas shadows alpha>
+    <TresMesh>
+      <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+      <TresMeshNormalMaterial :matcap="matcapTexture" />
+    </TresMesh>
+  </TresCanvas>
 </template>
 ```
 
@@ -147,9 +145,7 @@ It just works. 💯 (if not text is provided, the text will be TresJS)
 ```vue
 <template>
   <TresCanvas shadows alpha>
-    <TresScene>
-      <Text3D :font="fontPath" />
-    </TresScene>
+    <Text3D :font="fontPath" />
   </TresCanvas>
 </template>
 ```
@@ -175,6 +171,6 @@ bevelSegments: 4,
 
 By default text in ThreeJS starts at the mesh initial position, so it's [0,0,0] the text will start there but we can center it by just passing the flag "center"
 
-```js
-<Text3D :font="fontPath" :text="my 3d text" center  />
+```vue
+<Text3D :font="fontPath" :text="my 3d text" center />
 ```

docs/guide/getting-started.md

@@ -1,19 +1,19 @@
-# Instalation
+# Installation
 
 Learn how to install TresJS
 
 ::: code-group
 
 ```bash [pnpm]
-pnpm add three @tresjs/core -D
+pnpm add three @tresjs/core
 ```
 
 ```bash [npm]
-npm install three @tresjs/core -D
+npm install three @tresjs/core
 ```
 
 ```bash [yarn]
-yarn add three @tresjs/core -D
+yarn add three @tresjs/core
 ```
 
 :::
@@ -36,6 +36,43 @@ app.use(Tres)
 app.mount('#app')
 ```
 
+Or you can use it directly in your component
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+</script>
+<template>
+  <TresCanvas>
+    <!-- Your scene here -->
+  </TresCanvas>
+</template>
+```
+
+::: tip
+This is recommended for performance and bundle size reasons, Three-shaking will work better and you will only import the components that you use.
+:::
+
+## Vite
+
+Since v2 is a custom renderer, we need to let the `vue-compiler` of your app know that the components of Tres are ok to be included to avoid the `[Vue warn]: Failed to resolve component` warning.
+
+You just need to add this to your `vite.config.ts` inside of the vue plugin:
+
+```ts
+export default defineConfig({
+  plugins: [vue({
+    template: {
+      compilerOptions: {
+        isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
+      },
+    },
+  }),
+})
+```
+
 ### Nuxt
 
-Soon.
+Nuxt official module `@tresjs/nuxt` is comming soon, planned for the Q2 of 2023 ;)
+
+![Roadmap](/nuxt-roadmap.png)

docs/guide/index.md

@@ -4,18 +4,26 @@
     <FirstScene style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"/>
 </ClientOnly>
 
+This is the documentation for the `v2.0.0-beta` of TresJS. If you are looking for the documentation for the version 1, check [V1 TresJS](https://v1.tresjs.org/).
+
+::: info
+
+TresJS v2 is still in beta stage, you can expect minor changes and bug fixing towards first stable release.
+
+:::
+
 ::: code-group
 
 ```bash [npm]
-npm install three @tresjs/core -D
+npm install three @tresjs/core@beta
 ```
 
 ```bash [yarn]
-yarn add three @tresjs/core -D
+yarn add three @tresjs/core@beta
 ```
 
 ```bash [pnpm]
-pnpm add three @tresjs/core -D
+pnpm add three @tresjs/core@beta
 ```
 
 :::
@@ -34,9 +42,7 @@ React ecosystem has an impresive **custom render** solution called [React-three-
 
 In my search for something similar in the VueJS ecosystem, I found this amazing library called [Lunchbox](https://github.com/breakfast-studio/lunchboxjs) which works with the same concept that R3F, it provides a [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html). I'm also contributing to improve this library so it gets as mature and feature-rich as R3F.
 
-The only problem is, mixing different renderers in Vue 3 is something the Vue community is still working on - see [here](https://github.com/vuejs/vue-loader/pull/1645) for more information.
-
-Until there is a solution similar to [React Reconciliation](https://reactjs.org/docs/reconciliation.html) you will need to create 2 separate `Apps` which might be not ideal.
+The only problem is, mixing compilers renderers in Vue 3 is something the Vue community is still working on - see [here](https://github.com/vuejs/vue-loader/pull/1645) for more information.
 
 ```ts
 // Example Vite setup
@@ -55,4 +61,8 @@ const lunchboxApp = createLunchboxApp(LunchboxApp)
 lunchboxApp.mount('#lunchbox')
 ```
 
-So I was inspired by both libraries to create something that wouldn't require creating a **custom renderer** but intelligent enough to generate Vue components based on the ThreeJS constructors with 0-to-none manteinance required `three:latest`. That's **TresjS**.
+So I was inspired by both libraries to create ~~something that wouldn't require creating a **custom renderer** but intelligent enough to generate Vue components based on the ThreeJS constructors with 0-to-none manteinance required `three:latest`. That's **TresjS v1**~~.
+
+Although v1 was a decent solution 😄, it has some limitations that would only be solved by creating a proper **custom renderer**. After several POCs, I decided to create a new version of TresJS that would be based on a Vue custom renderer but saving the user to do any weird stuff. That's **TresJS v2**.
+
+To learn more how to migrate from v1, check the [migration guide](/guide/migration-guide.html).

docs/guide/migration-guide.md

@@ -0,0 +1,190 @@
+# Migration Guide
+
+This guide is intended to help you migrate from v1 to brand new shiny v2 🤩✨ of TresJS.
+
+::: code-group
+
+```bash [pnpm]
+pnpm update @tresjs/core
+```
+
+```bash [npm]
+npm update @tresjs/core
+```
+
+```bash [yarn]
+yarn upgrade @tresjs/core
+```
+
+:::
+
+## What's new?
+
+### Vue Custom Renderer
+
+**TresJS** is now a [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) 🎉 that lives inside of a wrapper component `TresCanvas` that is responsible for creating the `WebGLRenderer` and the `Scene` for you and creating a **new Vue App instance** to render the scene.
+
+### Typescript support and Intellisense 🦾
+
+![TresJS v2 Intellisense](/v2-intellisense.gif)
+
+This was probably the most **requested feature for TresJS**. Now Tres components work with Volar and provide type intellisense.
+
+**TresJS** now generates type declaration on build time for all the components based of the catalog from ThreeJS. This means that you can use all the components from ThreeJS and get type intellisense for them.
+
+### Tres Plugin is optional 👍
+
+The `TresPlugin` is now optional. You can use TresJS without it by importing the components directly from `tresjs/core`:
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      :position="cameraPosition"
+      :fov="cameraFov"
+      :aspect="cameraAspect"
+      :near="cameraNear"
+      :far="cameraFar"
+    />
+    <TresMesh :geometry="geometry" :material="material" />
+  </TresCanvas>
+</template>
+```
+
+::: info
+This is recommended for performance and bundle size reasons, Three-shaking will work better and you will only import the components that you use.
+:::
+
+### TresScene no longer needed
+
+The `<TresScene />` component is now deprecated since the scene is now created by the `<TresCanvas />`.
+
+In the beginning, I thought that it would be a good idea to have a separate component for the scene in terms of verbosity and keep it as similar to plain ThreeJS, but it turned out that it was not really useful.
+
+You can now create a scene like this:
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      :position="cameraPosition"
+      :fov="cameraFov"
+      :aspect="cameraAspect"
+      :near="cameraNear"
+      :far="cameraFar"
+    />
+    <TresMesh :geometry="geometry" :material="material" />
+  </TresCanvas>
+</template>
+```
+
+To migrate your code, you can just remove the `<TresScene />` component and move the children to the `<TresCanvas />` component.
+
+### `useCatalog` is now deprecated
+
+The `useCatalog` function is now deprecated. You can now import the catalog directly from `@tresjs/core`
+
+You can read more about it here: [Extending](/advanced/extending.md)
+
+Change this:
+
+```ts {2,5,7}
+// Wrong ❌
+import { useCatalog } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+const { extend } = useCatalog()
+
+extend({ TextGeometry })
+```
+
+To this:
+
+```ts {2,6}
+// Correct ✅
+import { extend } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+// Add the element to the catalogue
+extend({ TextGeometry })
+```
+
+### Model's ref value `getModel` is now deprecated
+
+The `getModel` function is now deprecated. You can now use the `model` property directly.
+
+Change this:
+
+```vue {7,9-12}
+// Wrong ❌
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+
+const modelRef = ref()
+
+watch(modelRef, ({ getModel }) => {
+  const model = getModel()
+  model.position.set(0, 0, 0)
+})
+</script>
+<template>
+  <primitive :object="nodes.MyModel" />
+</template>
+```
+
+To this:
+
+```vue {7,9-12}
+// Correct ✅
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+
+const modelRef = ref()
+
+watch(modelRef, model => {
+  // Do something with the model
+  model.position.set(0, 0, 0)
+})
+</script>
+<template>
+  <primitive :object="nodes.MyModel" />
+</template>
+```
+
+### Cameras need to be before any control 🎥
+
+The `TresOrbitControls` component needs to be after the camera in the tree. This is because the controls need to know the camera to work.
+
+Read more about it here: [Troubleshooting](/guide/troubleshooting.md)
+
+Change this:
+
+```vue {3,5}
+// Wrong ❌
+<template>
+  <TresCanvas>
+    <TresOrbitControls />
+    <TresPerspectiveCamera />
+  </TresCanvas>
+</template>
+```
+
+To this:
+
+```vue {3,5}
+// Correct ✅
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <TresOrbitControls />
+  </TresCanvas>
+</template>
+```

docs/guide/troubleshooting.md

@@ -0,0 +1,114 @@
+# The hilarious guide of common issues and how to solve them
+
+![Troubleshooting](https://media.giphy.com/media/LHZyixOnHwDDy/giphy.gif)
+
+Welcome to **TresJS v2 troubleshooting guide**. Where 3D stands for _"Dazzlingly Delightful Difficulties"_! We know 3D can be as complex as a tangled ball of yarn 🧶 or as unpredictable as a cat on a keyboard 🐈 ⌨️ , but fear not!
+
+This guide is intended to help you solve the most common issues that you might encounter when using TresJS v2.
+
+## I can't see my 3D scene 😭!
+
+You followed the [Getting started guide](/guide/getting-started.md) but you still can see your scene renderered.
+
+These are the most common reasons why you might not be able to see your scene:
+
+### Make sure you have a camera 🎥
+
+The first thing you need to do is to make sure you have a camera in your scene. If you don't have a camera, you won't be able to see anything.
+
+![No camera found](/no-camera-found.png)
+
+```vue
+<!-- Wrong ❌ -->
+<TresCanvas>
+  <TresOrbitControls />
+</TresCanvas>
+```
+
+```vue
+<!-- Correct ✅ -->
+<TresCanvas>
+  <TresPerspectiveCamera />
+  <TresOrbitControls />
+</TresCanvas>
+```
+
+### Check the height of your canvas 📏
+
+Another common issue is that the `TresCanvas` component is creating by default a `canvas` element takes the `width` and `height` of the parent element. If the parent element has no height, the canvas will have no height either.
+
+![No height found](/canvas-height.png)
+
+You will also see this error in the console:
+
+![Canvas height warning](/canvas-height-warning.png)
+
+A easy way to fix this is to set the height of the parent element to `100%`:
+
+```css
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#app {
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+}
+```
+
+Or you can set the `window-size` prop of the `TresCanvas` component:
+
+```vue
+<TresCanvas window-size>
+  <TresPerspectiveCamera />
+  <TresOrbitControls />
+</TresCanvas>
+```
+
+## Failed resolve component: TresComponent... 🤔
+
+![](/failed-to-resolve-component.png)
+
+Since **TresJS v2** is using a Vue Custom Renderer inside of the main Vue App instance, the core Vue renderer that acts as parent is not going to recognize the components inside of `TresCanvas` component. Even if it doesn't affect the rendering, it will show a warning in the console.
+
+![](/failed-to-resolve-component.png)
+
+At this moment, there is no native Vue support to define the renderer used on the `<template />` but there is a quick workaround to remove the warnings
+
+Got to your `vite.config.ts` and add the following configuration to the `@vitejs/plugin-vue`:
+
+```ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: tag => (tag.startsWith('Tres') && tag !== 'TresCanvas') || tag === 'primitive',
+        },
+      },
+    }),
+  ],
+})
+```
+
+This will remove the warning from the console.
+
+# Help Us Make TresJS Purr-fect! 😼
+
+We know that even the best cat nappers occasionally make mistakes, and we need you help to make TresJS even better! If you find a bug, please open a ticket at [the
+repo](https://github.com/Tresjs/playground) and **please provide a reproduction link**.
+
+::: warning
+Tickets without a reproduction link will be closed.
+:::
+
+Our team of coding cat lovers
+will jump into action to squash those pesky bugs and improve TresJS for everyone. Together, let's make TresJS the cat's
+meow of 3D rendering in Vue!

docs/guide/your-first-scene.md

@@ -2,15 +2,24 @@
 
 This guide will help you to create your first Tres scene. 🍩
 
+<ClientOnly>
+    <DonutExample style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"/>
+</ClientOnly>
+
 ## Setting up the experience Canvas
 
-Before we can create an Scene, we need somewhere to display it. Using plain [ThreeJS](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) we would need to create a `canvas` html element to mount the `WebglRenderer` and initialize the `scene`
+Before we can create a Scene, we need somewhere to display it. Using plain [ThreeJS](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) we would need to create a `canvas` HTML element to mount the `WebglRenderer` and initialize the `scene`
 
-With **TresJS** you only need to add the default component `<TresCanvas />` to the template of your Vue component.
+With **TresJS** you only need to import the default component `<TresCanvas />` and add it to the template of your Vue component.
 
 ```vue
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+</script>
 <template>
-  <TresCanvas> // Your scene is going to live here </TresCanvas>
+  <TresCanvas window-size>
+    <!-- Your scene goes here -->
+  </TresCanvas>
 </template>
 ```
 
@@ -23,22 +32,62 @@ The `TresCanvas` component is going to do some setup work behind the scene:
 - It creates a [**WebGLRenderer**](https://threejs.org/docs/index.html?q=webglrend#api/en/renderers/WebGLRenderer) that automatically updates every frame.
 - It sets the render loop to be called on every frame based on the browser refresh rate.
 
+## Canvas size
+
+By default, `TresCanvas` component will take the **parent's width and height**, if you are experiencing a blank page make sure the parent element have a proper size.
+
+```vue
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+</script>
+<template>
+  <TresCanvas>
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+<style>
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#app {
+  height: 100%;
+  width: 100%;
+}
+</style>
+```
+
+If your scene is not gonna be part of a UI, you can also force the canvas to take the width and height of the full window by using the `window-size` prop like this:
+
+```vue
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+</script>
+<template>
+  <TresCanvas window-size>
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
 ## Creating a scene
 
-We need 3 core elements to create a 3D experience:
+We need 4 core elements to create a 3D experience:
 
+- An [**Scene**](https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene) to hold the camera and the object(s) together.
+- An [**Renderer**](https://threejs.org/docs/index.html?q=renderer#api/en/renderers/WebGLRenderer) to render the scene into the DOM.
 - A [**Camera**](https://threejs.org/docs/index.html?q=camera#api/en/cameras/Camera)
 - An [**Object**](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D)
-- An [**Scene**](https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene) to hold the camera and the object(s) together.
 
-With **TresJS** you can create a Scene using the `<TresScene />` component.
+With **TresJS** you only need to add the `<TresCanvas />` component to the template of your Vue component and it will automatically create a `Renderer` (`canvas` DOM Element) and `Scene` for you.
 
 ```vue
 <template>
-  <TresCanvas>
-    <TresScene>
-      <!-- Your scene goes here -->
-    </TresScene>
+  <TresCanvas window-size>
+    <!-- Your scene goes here -->
   </TresCanvas>
 </template>
 ```
@@ -47,18 +96,19 @@ Then you can add a [**PerspectiveCamera**](https://threejs.org/docs/index.html?q
 
 ```vue
 <template>
-  <TresCanvas>
+  <TresCanvas window-size>
     <TresPerspectiveCamera />
-    <TresScene>
-      <!-- Your scene goes here -->
-    </TresScene>
   </TresCanvas>
 </template>
 ```
 
-## Adding a Sphere
+::: warning
+A common issue is that the camera default position is the origin of the scene (0,0,0), if you still can see your scene try adding a position to the camera `<TresPerspectiveCamera :position="[3, 3, 3]" />`
+:::
+
+## Adding a 🍩
 
-That scene looks a litle empty, let's add a basic object. If we where using plain **ThreeJS** we would need to create a [**Mesh**](https://threejs.org/docs/index.html?q=mesh#api/en/objects/Mesh) object and attach to it a [**Material**](https://threejs.org/docs/index.html?q=material#api/en/materials/Material) and a [**Geometry**](https://threejs.org/docs/index.html?q=geometry#api/en/core/BufferGeometry) like this:
+That scene looks a little empty, let's add a basic object. If we where using plain **ThreeJS** we would need to create a [**Mesh**](https://threejs.org/docs/index.html?q=mesh#api/en/objects/Mesh) object and attach to it a [**Material**](https://threejs.org/docs/index.html?q=material#api/en/materials/Material) and a [**Geometry**](https://threejs.org/docs/index.html?q=geometry#api/en/core/BufferGeometry) like this:
 
 ```ts
 const geometry = new THREE.TorusGeometry(1, 0.5, 16, 32)
@@ -67,28 +117,43 @@ const donut = new THREE.Mesh(geometry, material)
 scene.add(donut)
 ```
 
-A Mesh is a basic scene object in three.js, and it's used to hold the geometry and the material needed to represent a shape in 3D space.
+A **Mesh** is a basic scene object in three.js, and it's used to hold the geometry and the material needed to represent a shape in 3D space.
 
 Now let's see how we can easily achieve the same with **TresJS**. To do that we are going to use `<TresMesh />` component, and between the default slots, we are going to pass a `<TresTorusGeometry />` and a `<TresMeshBasicMaterial />`.
 
 ```vue
 <template>
-  <TresCanvas>
+  <TresCanvas window-size>
     <TresPerspectiveCamera />
-    <TresScene>
-      <TresMesh>
-        <TresTorusGeometry />
-        <TresMeshBasicMaterial color="orange" />
-      </TresMesh>
-    </TresScene>
+    <TresMesh>
+      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+      <TresMeshBasicMaterial color="orange" />
+    </TresMesh>
   </TresCanvas>
 </template>
 ```
 
 ::: info
-Notice that we don't need to import anything, thats because **TresJS** automatically generate a **Vue Component based of the Three Object you want to use in CamelCase with a Tres prefix**. For example, if you want to use a `AmbientLight` you would use `<TresAmbientLight />` component.
+Notice that we don't need to import anything, that's because **TresJS** automatically generate a **Vue Component based on the Three Object you want to use in CamelCase with a Tres prefix**. For example, if you want to use an `AmbientLight` you would use `<TresAmbientLight />` component.
 :::
 
-<FirstScene />
+<StackBlitzEmbed projectId="tresjs-first-scene" />
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5" window-size>
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
+    <TresMesh>
+      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+      <TresMeshBasicMaterial color="orange" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+```
 
 From here onwards you can start adding more objects to your scene and start playing with the properties of the components to see how they affect the scene.

package.json

@@ -1,72 +1,104 @@
 {
-  "name": "tres",
+  "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "1.0.0",
+  "version": "2.0.0-beta.10",
+  "type": "module",
+  "packageManager": "pnpm@8.2.0",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
-  "engines": {
-    "node": ">=16.0.0"
-  },
-  "workspaces": [
-    "apps/**",
-    "packages/*"
+  "files": [
+    "dist"
   ],
-  "scripts": {
-    "preinstall": "npx only-allow pnpm",
-    "postinstall": "pnpm run build:ci",
-    "update-deps": "pnpm update -i -r --latest",
-    "build:ci": "pnpm run build:tres && pnpm run build:cientos",
-    "build:tres": "pnpm --filter @tresjs/core build",
-    "build:cientos": "pnpm --filter @tresjs/cientos build",
-    "build:all": "pnpm run build",
-    "test": "pnpm run test:tres",
-    "test:tres": "pnpm --filter @tresjs/core test:ci",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:serve": "vitepress serve docs",
-    "ci:version": "pnpm changelog && pnpm changeset version && pnpm install --no-frozen-lockfile --shamefully-hoist && git add .",
-    "ci:publish": "pnpm build:ci && git status && pnpm publish:pkgs && pnpm changeset tag",
-    "changeset": "changeset",
-    "publish:pkgs": "pnpm run publish:tres && pnpm publish:cientos",
-    "publish:tres": "pnpm publish --filter @tresjs/core",
-    "publish:cientos": "pnpm publish --filter @tresjs/cientos",
-    "changeset-publish": "changeset publish",
-    "changeset-tag": "changeset tag",
-    "changelog": "pnpm run changelog:tres && pnpm run changelog:cientos",
-    "changelog:tres": "echo 'generate @tresjs/core changelog' && conventional-changelog -p angular -i ./packages/tres/CHANGELOG.md -s  --commit-path ./packages/tres && git add ./packages/tres/CHANGELOG.md",
-    "changelog:cientos": "echo 'generate @tresjs/cientos changelog' && conventional-changelog -p angular -i ./packages/cientos/CHANGELOG.md -s  --commit-path ./packages/cientos && git add ./packages/cientos/CHANGELOG.md",
-    "lint": "pnpm run lint:tres && pnpm run lint:cientos",
-    "lint:tres": "pnpm --filter @tresjs/core lint",
-    "lint:cientos": "pnpm --filter @tresjs/cientos lint",
-    "clean": "pnpm -r exec rm -rf node_modules"
+  "license": "MIT",
+  "main": "./dist/tres.umd.cjs",
+  "module": "./dist/tres.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/tres.js",
+      "require": "./dist/tres.umd.cjs"
+    },
+    "./types": {
+      "require": "./dist/index.d.ts",
+      "import": "./dist/index.d.ts"
+    },
+    "./components": {
+      "types": "./dist/types/tres-components.d.ts"
+    },
+    "./styles": "./dist/style.css",
+    "./*": "./dist/tres.js"
+  },
+  "publishConfig": {
+    "access": "public"
   },
   "keywords": [
     "vue",
+    "3d",
     "threejs",
-    "declarative",
-    "composables"
+    "three",
+    "threejs-vue"
   ],
-  "license": "MIT",
-  "devDependencies": {
-    "@alvarosabu/prettier-config": "^1.2.0",
-    "@changesets/changelog-github": "^0.4.7",
-    "@changesets/cli": "^2.25.2",
-    "@stackblitz/sdk": "^1.8.1",
-    "@tresjs/cientos": "workspace:^1.8.0",
-    "@tresjs/core": "workspace:^1.8.1",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
-    "conventional-changelog-cli": "^2.2.2",
-    "eslint": "^8.26.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-vue": "^9.7.0",
-    "prettier": "^2.7.1",
-    "unocss": "^0.48.0",
-    "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-alpha.38",
-    "vue": "^3.2.45",
-    "vue-eslint-parser": "^9.1.0"
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "playground": "cd playground && npm run dev",
+    "test": "vitest",
+    "test:ci": "vitest run",
+    "test:ui": "vitest --ui",
+    "release": "release-it",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs"
+  },
+  "peerDependencies": {
+    "three": "latest",
+    "vue": "^3.2.47"
   },
   "dependencies": {
-    "gsap": "^3.11.4"
+    "@alvarosabu/utils": "^2.3.0",
+    "@vueuse/core": "^9.13.0"
+  },
+  "devDependencies": {
+    "@tresjs/core": "2.0.0-beta.5",
+    "@alvarosabu/prettier-config": "^1.3.0",
+    "@huntersofbook/plausible-vue": "^1.0.0",
+    "@release-it/conventional-changelog": "^5.1.1",
+    "@stackblitz/sdk": "^1.9.0",
+    "@tresjs/cientos": "2.0.0-beta.1",
+    "@types/three": "latest",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitest/coverage-c8": "^0.30.1",
+    "@vitest/ui": "^0.29.2",
+    "@vue/test-utils": "^2.3.2",
+    "eslint": "^8.38.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-vue": "^9.11.0",
+    "gsap": "^3.11.5",
+    "happy-dom": "^9.6.1",
+    "jsdom": "^21.1.1",
+    "kolorist": "^1.7.0",
+    "pathe": "^1.1.0",
+    "prettier": "^2.8.7",
+    "release-it": "^15.10.1",
+    "rollup-plugin-analyzer": "^4.0.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-visualizer": "^5.9.0",
+    "three": "^0.150.1",
+    "unocss": "^0.51.4",
+    "unplugin": "^1.3.1",
+    "unplugin-vue-components": "^0.24.1",
+    "vite": "^4.2.1",
+    "vite-plugin-banner": "^0.7.0",
+    "vite-plugin-dts": "2.2.0",
+    "vite-plugin-inspect": "^0.7.22",
+    "vite-plugin-require-transform": "^1.0.12",
+    "vite-svg-loader": "^4.0.0",
+    "vitepress": "1.0.0-alpha.65",
+    "vitest": "^0.30.1",
+    "vue-demi": "^0.14.0"
   }
 }

packages/cientos/package.json

@@ -1,61 +0,0 @@
-{
-  "name": "@tresjs/cientos",
-  "description": "Collection of useful helpers and fully functional, ready-made abstractions for Tres",
-  "version": "1.8.0",
-  "type": "module",
-  "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
-  "files": [
-    "dist"
-  ],
-  "license": "MIT",
-  "main": "./dist/trescientos.umd.cjs",
-  "module": "./dist/trescientos.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/trescientos.js",
-      "require": "./dist/trescientos.umd.cjs"
-    },
-    "./styles": "./dist/style.css",
-    "./*": "./dist/trescientos.js"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "keywords": [
-    "vue",
-    "3d",
-    "threejs",
-    "three",
-    "threejs-vue"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
-  },
-  "peerDependencies": {
-    "@tresjs/core": "workspace:^1.8.1",
-    "three": "latest",
-    "vue": "^3.2.47"
-  },
-  "devDependencies": {
-    "@tweakpane/plugin-essentials": "^0.1.8",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "kolorist": "^1.7.0",
-    "pathe": "^1.1.0",
-    "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-visualizer": "^5.9.0",
-    "tweakpane": "^3.1.4",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.2",
-    "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-dts": "2.0.0-beta.1"
-  },
-  "dependencies": {
-    "@tresjs/core": "workspace:^1.8.1",
-    "three-stdlib": "^2.21.8"
-  }
-}

packages/cientos/src/composables/useLogger.ts

@@ -1,32 +0,0 @@
-/* eslint-disable no-console */
-export const isProd = import.meta.env.MODE === 'production'
-
-const logPrefix = '[TresJS - Cientos ▲ ■ ♥] '
-
-interface LoggerComposition {
-  logError: (message: string, error?: Error | ErrorEvent) => void
-  logWarning: (message: string) => void
-  logMessage: (name: string, value: any) => void
-}
-
-export function useLogger(): LoggerComposition {
-  function logError(message: string, error?: Error | ErrorEvent) {
-    console.error(`${logPrefix} ${message}`, error || '')
-  }
-
-  function logWarning(message: string) {
-    console.warn(`${logPrefix} ${message}`)
-  }
-
-  function logMessage(name: string, value: any) {
-    if (!isProd) {
-      console.log(`${logPrefix} - ${name}:`, value)
-    }
-  }
-
-  return {
-    logError,
-    logWarning,
-    logMessage,
-  }
-}

packages/cientos/src/core/Box.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { TresColor, TresObject } from '@tresjs/core'
-
-import { shallowRef } from 'vue'
-
-export interface BoxProps extends TresObject {
-  /**
-   * The width, height and depth of the box.
-   * @default [1, 1, 1]
-   * @type {number[]}
-   * @memberof BoxProps
-   * @see https://threejs.org/docs/#api/en/geometries/BoxGeometry
-   *
-   */
-  args?: number[]
-  /**
-   * The color of the box.
-   * @default 0xffffff
-   * @type {TresColor}
-   * @memberof BoxProps
-   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
-   */
-  color?: TresColor
-}
-withDefaults(defineProps<BoxProps>(), {
-  args: () => [1, 1, 1],
-  color: '0xffffff',
-})
-
-const boxRef = shallowRef()
-
-defineExpose({
-  value: boxRef,
-})
-</script>
-<template>
-  <TresMesh ref="boxRef" v-bind="$attrs">
-    <TresBoxGeometry :args="args" />
-    <slot>
-      <TresMeshBasicMaterial :color="color" />
-    </slot>
-  </TresMesh>
-</template>

packages/cientos/src/core/Circle.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { TresColor, TresObject } from '@tresjs/core'
-import { shallowRef } from 'vue'
-
-export interface CircleProps extends TresObject {
-  /**
-   * The radius, segment, thetaStart, thetaLength of the circle.
-   * @default [1, 32, 0, Math.PI * 2]
-   * @type {number[]}
-   * @memberof CircleProps
-   * @see https://threejs.org/docs/#api/en/geometries/CircleGeometry
-   */
-  args?: number[]
-  /**
-   * The color of the circle.
-   * @default 0xffffff
-   * @type {TresColor}
-   * @memberof CircleProps
-   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
-   */
-  color?: TresColor
-}
-withDefaults(
-  defineProps<{
-    args?: number[]
-    color?: TresColor
-  }>(),
-  {
-    args: () => [1, 32, 0, Math.PI * 2],
-    color: '0xffffff',
-  },
-)
-
-const circleRef = shallowRef()
-
-defineExpose({
-  value: circleRef,
-})
-</script>
-<template>
-  <TresMesh ref="circleRef" v-bind="$attrs">
-    <TresCircleGeometry :args="args" />
-    <slot>
-      <TresMeshBasicMaterial :color="color" />
-    </slot>
-  </TresMesh>
-</template>

packages/cientos/src/core/Cone.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { TresColor, TresObject } from '@tresjs/core'
-import { shallowRef } from 'vue'
-
-export interface ConeProps extends TresObject {
-  /**
-   * The radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength of the cone.
-   * @default [1, 1, 12, false, 0, Math.PI * 2]
-   * @type {any[]}
-   * @memberof ConeProps
-   * @see https://threejs.org/docs/#api/en/geometries/ConeGeometry
-   */
-  args?: [number, number, number, boolean?, number?, number?]
-  /**
-   * The color of the cone.
-   * @default 0xffffff
-   * @type {TresColor}
-   * @memberof ConeProps
-   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
-   */
-  color?: TresColor
-}
-
-withDefaults(defineProps<ConeProps>(), {
-  args: () => [1, 1, 12, false, 0, Math.PI * 2],
-  color: '0xffffff',
-})
-
-const coneRef = shallowRef()
-
-defineExpose({
-  value: coneRef,
-})
-</script>
-<template>
-  <TresMesh ref="coneRef" v-bind="$attrs">
-    <TresConeGeometry :args="args" />
-    <slot>
-      <TresMeshBasicMaterial :color="color" />
-    </slot>
-  </TresMesh>
-</template>

packages/cientos/src/core/Dodecahedron.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { TresColor, TresObject } from '@tresjs/core'
-import { shallowRef } from 'vue'
-
-export interface DodecahedronProps extends TresObject {
-  /**
-   * The radius and detail of the dodecahedron.
-   * @default [1, 0]
-   * @type {number[]}
-   * @memberof DodecahedronProps
-   * @see https://threejs.org/docs/#api/en/geometries/DodecahedronGeometry
-   */
-  args?: number[]
-  /**
-   * The color of the dodecahedron.
-   * @default 0xffffff
-   * @type {TresColor}
-   * @memberof DodecahedronProps
-   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
-   */
-  color?: TresColor
-}
-
-withDefaults(defineProps<DodecahedronProps>(), {
-  args: () => [1, 0],
-  color: '0xffffff',
-})
-
-const dodecahedronRef = shallowRef()
-
-defineExpose({
-  value: dodecahedronRef,
-})
-</script>
-<template>
-  <TresMesh ref="dodecahedronRef" v-bind="$attrs">
-    <TresDodecahedronGeometry :args="args" />
-    <slot>
-      <TresMeshBasicMaterial :color="color" />
-    </slot>
-  </TresMesh>
-</template>

packages/cientos/src/core/Icosahedron.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { TresColor, TresObject } from '@tresjs/core'
-import { shallowRef } from 'vue'
-
-export interface IcosahedronProps extends TresObject {
-  /**
-   * The radius and detail of the icosahedron.
-   * @default [1, 0]
-   * @type {number[]}
-   * @memberof IcosahedronProps
-   * @see https://threejs.org/docs/#api/en/geometries/IcosahedronGeometry
-   */
-  args?: number[]
-  /**
-   * The color of the icosahedron.
-   * @default 0xffffff
-   * @type {TresColor}
-   * @memberof IcosahedronProps
-   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
-   */
-  color?: TresColor
-}
-withDefaults(defineProps<IcosahedronProps>(), {
-  args: () => [1, 0],
-  color: '0xffffff',
-})
-
-const icosahedronRef = shallowRef()
-
-defineExpose({
-  value: icosahedronRef,
-})
-</script>
-<template>
-  <TresMesh ref="icosahedronRef" v-bind="$attrs">
-    <TresIcosahedronGeometry :args="args" />
-    <slot>
-      <TresMeshBasicMaterial :color="color" />
-    </slot>
-  </TresMesh>
-</template>

packages/cientos/src/core/Octahedron.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { TresColor, TresObject } from '@tresjs/core'
-import { shallowRef } from 'vue'
-
-export interface OctahedronProps extends TresObject {
-  /**
-   * The radius and detail of the octahedron.
-   * @default [1, 0]
-   * @type {number[]}
-   * @memberof OctahedronProps
-   * @see https://threejs.org/docs/#api/en/geometries/OctahedronGeometry
-   */
-  args?: number[]
-  /**
-   * The color of the octahedron.
-   * @default 0xffffff
-   * @type {TresColor}
-   * @memberof OctahedronProps
-   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
-   */
-  color?: TresColor
-}
-
-withDefaults(defineProps<OctahedronProps>(), {
-  args: () => [1, 0],
-  color: '0xffffff',
-})
-
-const octahedronRef = shallowRef()
-
-defineExpose({
-  value: octahedronRef,
-})
-</script>
-<template>
-  <TresMesh ref="octahedronRef" v-bind="$attrs">
-    <TresOctahedronGeometry :args="args" />
-    <slot>
-      <TresMeshBasicMaterial :color="color" />
-    </slot>
-  </TresMesh>
-</template>

packages/cientos/src/core/OrbitControls.vue

@@ -1,79 +0,0 @@
-<script lang="ts" setup>
-import { Camera, Vector3 } from 'three'
-import { OrbitControls } from 'three-stdlib'
-import { ref, watch, unref, type Ref } from 'vue'
-
-import { useCientos } from './useCientos'
-
-export interface OrbitControlsProps {
-  /**
-   * Whether to make this the default controls.
-   *
-   * @default false
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
-   */
-  makeDefault?: boolean
-  /**
-   * The camera to control.
-   *
-   * @type {Camera}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
-   */
-  camera?: Camera
-  /**
-   * The dom element to listen to.
-   *
-   * @type {HTMLElement}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
-   */
-  domElement?: HTMLElement
-  /**
-   * The target to orbit around.
-   *
-   * @type {Ref<Vector3>}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
-   */
-  target?: Ref<Vector3>
-  /**
-   * Whether to enable damping.
-   *
-   * @default false
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
-   */
-  enableDamping?: boolean
-}
-
-const props = withDefaults(defineProps<OrbitControlsProps>(), {
-  makeDefault: false,
-})
-
-const { state, setState, extend } = useCientos()
-
-const controls = ref(null)
-
-extend({ OrbitControls })
-
-watch(controls, value => {
-  if (value && props.makeDefault) {
-    setState('controls', value)
-  } else {
-    setState('controls', null)
-  }
-})
-</script>
-
-<template>
-  <TresOrbitControls
-    v-if="state.camera && state.renderer"
-    ref="controls"
-    :args="[unref(state.camera) || camera, state.renderer?.domElement || domElement]"
-    :enabling-dampling="enableDamping"
-  />
-</template>

packages/cientos/src/core/Plane.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { TresColor, TresObject } from '@tresjs/core'
-import { shallowRef } from 'vue'
-
-export interface PlaneProps extends TresObject {
-  /**
-   * The width and height, widthSegments, heightSegments of the plane.
-   * @default [1, 1, 1, 1]
-   * @type {number[]}
-   * @memberof PlaneProps
-   * @see https://threejs.org/docs/#api/en/geometries/PlaneGeometry
-   */
-  args?: number[]
-  /**
-   * The color of the plane.
-   * @default 0xffffff
-   * @type {TresColor}
-   * @memberof PlaneProps
-   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
-   */
-  color?: TresColor
-}
-
-withDefaults(
-  defineProps<{
-    args?: number[]
-    color?: TresColor
-  }>(),
-  {
-    args: () => [1, 1],
-    color: '0xffffff',
-  },
-)
-
-const planeRef = shallowRef()
-
-defineExpose({
-  value: planeRef,
-})
-</script>
-<template>
-  <TresMesh ref="planeRef" :rotation="[-Math.PI / 2, 0, 0]" v-bind="$attrs">
-    <TresPlaneGeometry :args="args" />
-    <slot>
-      <TresMeshBasicMaterial :color="color" />
-    </slot>
-  </TresMesh>
-</template>