diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index f332b3292..3c2deed95 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -65,6 +65,7 @@ export default defineConfig({
         text: 'Abstractions',
         items: [
           { text: 'Text3D', link: '/guide/abstractions/text-3d' },
+          { text: 'TextTroika', link: '/guide/abstractions/text-troika' },
           { text: 'Levioso (Float)', link: '/guide/abstractions/levioso' },
           { text: 'useAnimations', link: '/guide/abstractions/use-animations' },
           { text: 'MouseParallax', link: '/guide/abstractions/mouse-parallax' },
@@ -75,16 +76,17 @@ export default defineConfig({
           { text: 'useFBO', link: '/guide/abstractions/use-fbo' },
           { text: 'useSurfaceSampler', link: '/guide/abstractions/use-surface-sampler' },
           { text: 'Sampler', link: '/guide/abstractions/sampler' },
-          /* { text: 'Edges', link: '/guide/abstractions/edges' }, */
+          { text: 'Edges', link: '/guide/abstractions/edges' },
           { text: 'PositionalAudio', link: '/guide/abstractions/positional-audio' },
           { text: 'AnimatedSprite', link: '/guide/abstractions/animated-sprite' },
-          /*           { text: 'Mask', link: '/guide/abstractions/mask' },
+          { text: 'MarchingCubes', link: '/guide/abstractions/marching-cubes' },
+          { text: 'Mask', link: '/guide/abstractions/mask' },
           { text: 'CubeCamera', link: '/guide/abstractions/cube-camera' },
           { text: 'ScreenSizer', link: '/guide/abstractions/screen-sizer' },
           { text: 'ScreenSpace', link: '/guide/abstractions/screen-space' },
           { text: 'Outline', link: '/guide/abstractions/outline' },
           { text: 'Image', link: '/guide/abstractions/image' },
-          { text: 'Billboard', link: '/guide/abstractions/billboard' }, */
+          { text: 'Billboard', link: '/guide/abstractions/billboard' },
         ],
       },
       {
@@ -97,6 +99,7 @@ export default defineConfig({
           { text: 'KeyboardControls', link: '/guide/controls/keyboard-controls' },
           { text: 'ScrollControls', link: '/guide/controls/scroll-controls' },
           { text: 'MapControls', link: '/guide/controls/map-controls' },
+          { text: 'Helper', link: '/guide/controls/helper' },
         ],
       },
       {
@@ -119,7 +122,8 @@ export default defineConfig({
           { text: 'MeshGlassMaterial', link: '/guide/materials/glass-material' },
           { text: 'CustomShaderMaterial', link: '/guide/materials/custom-shader-material' },
           { text: 'MeshReflectionMaterial', link: '/guide/materials/mesh-reflection-material' },
-          /*           { text: 'MeshDiscardMaterial', link: '/guide/materials/mesh-discard-material' }, */
+          { text: 'PointMaterial', link: '/guide/materials/point-material' },
+          { text: 'MeshDiscardMaterial', link: '/guide/materials/mesh-discard-material' },
         ],
       },
       {
@@ -130,14 +134,17 @@ export default defineConfig({
           { text: 'CatmullRomCurve3', link: '/guide/shapes/catmullromcurve3' },
           { text: 'Circle', link: '/guide/shapes/circle' },
           { text: 'Cone', link: '/guide/shapes/cone' },
+          { text: 'CubicBezierLine', link: '/guide/shapes/cubic-bezier-line' },
           { text: 'Cylinder', link: '/guide/shapes/cylinder' },
           { text: 'Dodecahedron', link: '/guide/shapes/dodecahedron' },
           { text: 'Icosahedron', link: '/guide/shapes/icosahedron' },
           { text: 'Line2', link: '/guide/shapes/line2' },
           { text: 'Octahedron', link: '/guide/shapes/octahedron' },
           { text: 'Plane', link: '/guide/shapes/plane' },
+          { text: 'QuadraticBezierLine', link: '/guide/shapes/quadratic-bezier-line' },
           { text: 'Ring', link: '/guide/shapes/ring' },
           { text: 'RoundedBox', link: '/guide/shapes/rounded-box' },
+          { text: 'ScreenQuad', link: '/guide/shapes/screen-quad' },
           { text: 'Sphere', link: '/guide/shapes/sphere' },
           { text: 'Superformula', link: '/guide/shapes/superformula' },
           { text: 'Tetrahedron', link: '/guide/shapes/tetrahedron' },
@@ -155,13 +162,19 @@ export default defineConfig({
           { text: 'Sky', link: '/guide/staging/sky' },
           { text: 'Stars', link: '/guide/staging/stars' },
           { text: 'Smoke', link: '/guide/staging/smoke' },
+          { text: 'AccumulativeShadows', link: '/guide/staging/accumulative-shadows' },
           { text: 'ContactShadows', link: '/guide/staging/contact-shadows' },
           { text: 'Precipitation', link: '/guide/staging/precipitation' },
           { text: 'Sparkles', link: '/guide/staging/sparkles' },
           { text: 'Ocean', link: '/guide/staging/ocean' },
-          /*           { text: 'Align', link: '/guide/staging/align' },
+          { text: 'Align', link: '/guide/staging/align' },
           { text: 'SoftShadows', link: '/guide/staging/soft-shadows' },
-          { text: 'Grid', link: '/guide/staging/grid' }, */
+          { text: 'Grid', link: '/guide/staging/grid' },
+          { text: 'CircleShadow', link: '/guide/staging/circle-shadow' },
+          { text: 'Bounds', link: '/guide/staging/bounds' },
+          { text: 'RandomizedLights', link: '/guide/staging/randomized-lights' },
+          { text: 'Bounds', link: '/guide/staging/bounds' },
+          { text: 'Stage', link: '/guide/staging/stage' },
         ],
       },
       {
@@ -173,6 +186,8 @@ export default defineConfig({
           { text: 'StatsGl', link: '/guide/misc/stats-gl' },
           { text: 'useGLTFExporter', link: '/guide/misc/use-gltf-exporter' },
           { text: 'BakeShadows', link: '/guide/misc/bake-shadows' },
+          { text: 'useIntersect', link: '/guide/misc/use-intersect' },
+          { text: 'LOD', link: '/guide/misc/lod' },
         ],
       },
     ],
diff --git a/docs/.vitepress/theme/components/AccumulativeShadowsDemo.vue b/docs/.vitepress/theme/components/AccumulativeShadowsDemo.vue
new file mode 100644
index 000000000..1cbc6d22d
--- /dev/null
+++ b/docs/.vitepress/theme/components/AccumulativeShadowsDemo.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { AccumulativeShadows, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#fbb03b" :shadows="true">
+    <OrbitControls />
+    <TresMesh :position-y="0.3" :scale="0.4" :cast-shadow="true">
+      <TresTorusKnotGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <AccumulativeShadows
+      :blend="100"
+      color="#fbb03b"
+      once
+      :position-y="-0.4"
+    />
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/BoundsDemo.vue b/docs/.vitepress/theme/components/BoundsDemo.vue
new file mode 100644
index 000000000..4c95a476e
--- /dev/null
+++ b/docs/.vitepress/theme/components/BoundsDemo.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Bounds, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { Vector3 } from 'three'
+import { shallowRef } from 'vue'
+
+const { sin, cos, PI } = Math
+const positions = Array.from(
+  { length: 8 },
+  (_, i) => new Vector3(cos(i * PI / 4) * 4, sin(i * PI / 4) * 4, 0),
+)
+
+const b = shallowRef()
+</script>
+
+<template>
+  <TresCanvas clear-color="#4f4f4f">
+    <TresPerspectiveCamera :position="[0, 0, -15]" />
+    <OrbitControls make-default />
+    <Bounds ref="b" clip use-mounted :offset="0.75">
+      <TresMesh
+        v-for="p, i of positions"
+        :key="i"
+        :position="p"
+        @click="(e) => b.instance.lookAt(e.object)"
+      >
+        <TresBoxGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </Bounds>
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/CircleShadowDemo.vue b/docs/.vitepress/theme/components/CircleShadowDemo.vue
new file mode 100644
index 000000000..4f7dbd89d
--- /dev/null
+++ b/docs/.vitepress/theme/components/CircleShadowDemo.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { CircleShadow, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+    <TresGroup :position-y="-0.5">
+      <TresMesh :position-y="1">
+        <TresBoxGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+      <CircleShadow :scale="1.5" />
+    </TresGroup>
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/CubicBezierLineDemo.vue b/docs/.vitepress/theme/components/CubicBezierLineDemo.vue
new file mode 100644
index 000000000..4a7a684c6
--- /dev/null
+++ b/docs/.vitepress/theme/components/CubicBezierLineDemo.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { CubicBezierLine, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas clear-color="#4f4f4f">
+    <TresPerspectiveCamera :position="[0, 4, 0]" />
+    <CubicBezierLine
+      :start="[-1, 0, 0]"
+      :end="[1, 0, 0]"
+      :midA="[-1, 2, -2]"
+      :midB="[1, 2, 2]"
+      :line-width="10"
+      color="#82dbc5"
+    />
+    <TresGridHelper />
+    <OrbitControls />
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/HelperDemo.vue b/docs/.vitepress/theme/components/HelperDemo.vue
new file mode 100644
index 000000000..c6b81b9bb
--- /dev/null
+++ b/docs/.vitepress/theme/components/HelperDemo.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { BoxHelper, PointLightHelper } from 'three'
+import { VertexNormalsHelper } from 'three-stdlib'
+import { Helper, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#222">
+    <TresPerspectiveCamera :position="[10, 10, 10]" />
+    <OrbitControls />
+
+    <TresPointLight :position="[5, 5, -5]">
+      <Helper :type="PointLightHelper" :args="[0.5]" />
+    </TresPointLight>
+
+    <TresGroup>
+      <Helper :type="BoxHelper" :args="['royalblue']" />
+
+      <TresMesh :position="[-2, 2, -1]">
+        <TresSphereGeometry />
+        <TresMeshBasicMaterial />
+        <Helper :type="BoxHelper" :args="['red']" />
+      </TresMesh>
+
+      <TresMesh :position="[2, -2, 1]">
+        <TresBoxGeometry />
+        <TresMeshBasicMaterial />
+        <Helper :type="VertexNormalsHelper" :args="[1, 'red']" />
+      </TresMesh>
+    </TresGroup>
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/LODDemo.vue b/docs/.vitepress/theme/components/LODDemo.vue
new file mode 100644
index 000000000..4e66fae63
--- /dev/null
+++ b/docs/.vitepress/theme/components/LODDemo.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { LOD } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BoxGeometry, IcosahedronGeometry, MeshBasicMaterial, Vector3 } from 'three'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const COUNT = 1000
+const positions = Array.from({ length: COUNT }).fill(0).map((_, i) => {
+  return new Vector3(
+    Math.cos(i) * 1000,
+    Math.sin(i) * 1000,
+    8000 * (2 * i / COUNT - 1),
+  )
+})
+
+const geometries = [
+  new IcosahedronGeometry(100, 4),
+  new IcosahedronGeometry(100, 0),
+  new BoxGeometry(100, 100, 100),
+]
+
+const materials = [
+  new MeshBasicMaterial({ color: '#fbb03b', wireframe: true }),
+  new MeshBasicMaterial({ color: '#82dbc5', wireframe: true }),
+  new MeshBasicMaterial({ color: '#4f4f4f', wireframe: true }),
+]
+
+const z = ref(0)
+let intervalId: ReturnType<typeof setInterval>
+let elapsed = 0
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    elapsed += 0.005
+    z.value = Math.cos(elapsed) * 5000
+  }, 1000 / 30)
+})
+
+onUnmounted(() => {
+  clearInterval(intervalId)
+})
+</script>
+
+<template>
+  <TresCanvas clear-color="gray">
+    <TresPerspectiveCamera :near="1" :far="25000" :position="[0, 0, 0]" />
+    <TresGroup :position-z="z">
+      <LOD v-for="position, i of positions" :key="i" :levels="[1500, 3000, 4000]" :position="position">
+        <TresMesh :geometry="geometries[0]" :material="materials[0]" />
+        <TresMesh :geometry="geometries[1]" :material="materials[1]" />
+        <TresMesh :geometry="geometries[2]" :material="materials[2]" />
+      </LOD>
+    </TresGroup>
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/MarchingCubesDemo.vue b/docs/.vitepress/theme/components/MarchingCubesDemo.vue
new file mode 100644
index 000000000..ed3aa37ef
--- /dev/null
+++ b/docs/.vitepress/theme/components/MarchingCubesDemo.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { MarchingCube, MarchingCubes, MarchingPlane, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { NoToneMapping, Vector3 } from 'three'
+
+const rand = () => (Math.random() - 0.5) * 1.25
+const positions = Array.from({ length: 40 }, () => new Vector3(rand(), rand(), rand()))
+</script>
+
+<template>
+  <TresCanvas clear-color="#222" :tone-mapping="NoToneMapping">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+
+    <MarchingCubes :resolution="40" :max-poly-count="40000">
+      <MarchingPlane plane-type="y" />
+      <MarchingCube
+        v-for="position, i of positions"
+        :key="i"
+        :position="position"
+      />
+      <TresMeshPhongMaterial specular="#111111" :shininess="30" color="#049ef4" :reflectivity="1" />
+    </MarchingCubes>
+
+    <TresAxesHelper />
+    <TresDirectionalLight color="#ffffff" :intensity="3" :position="[0, 200, 0]" />
+    <TresDirectionalLight color="#ffffff" :intensity="3" :position="[100, 200, 100]" />
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/PointMaterialDemo.vue b/docs/.vitepress/theme/components/PointMaterialDemo.vue
new file mode 100644
index 000000000..96a2e9405
--- /dev/null
+++ b/docs/.vitepress/theme/components/PointMaterialDemo.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { MathUtils, NoToneMapping } from 'three'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, PointMaterial } from '@tresjs/cientos'
+
+const positions = new Float32Array(Array.from({ length: 100 }, () => [
+  MathUtils.randFloatSpread(8),
+  MathUtils.randFloatSpread(8),
+  MathUtils.randFloatSpread(8),
+]).flat())
+</script>
+
+<template>
+  <TresCanvas :tone-mapping="NoToneMapping" clear-color="#4F4F4F" :raycaster="{ params: { Points: { threshold: 0.2 } } }">
+    <TresPerspectiveCamera :position="[10, 10, 10]" />
+    <OrbitControls />
+    <TresPoints :limit="positions.length">
+      <PointMaterial
+        color="#82dbc5"
+        :transparent="true"
+        :size="10"
+        :size-attenuation="false"
+        :depth-test="false"
+        :tone-mapped="false"
+      />
+      <TresBufferGeometry>
+        <TresBufferAttribute :args="[positions, 3]" attach="attributes-position" />
+      </TresBufferGeometry>
+    </TresPoints>
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/QuadraticBezierLineDemo.vue b/docs/.vitepress/theme/components/QuadraticBezierLineDemo.vue
new file mode 100644
index 000000000..daf41704c
--- /dev/null
+++ b/docs/.vitepress/theme/components/QuadraticBezierLineDemo.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { OrbitControls, QuadraticBezierLine } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas clear-color="#4f4f4f">
+    <QuadraticBezierLine
+      :start="[-1, 0, 0]"
+      :end="[1, 2, 0]"
+      :line-width="10"
+      color="#fbb03b"
+    />
+    <TresGridHelper />
+    <OrbitControls />
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/ScreenQuadDemo.vue b/docs/.vitepress/theme/components/ScreenQuadDemo.vue
new file mode 100644
index 000000000..b006b09aa
--- /dev/null
+++ b/docs/.vitepress/theme/components/ScreenQuadDemo.vue
@@ -0,0 +1,13 @@
+<script setup>
+import { TresCanvas } from '@tresjs/core'
+import { ScreenQuad } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresOrthographicCamera :args="[-1, 1, 1, -1, 0, 1000]" :position="[0, 0, 1]" :manual="true" />
+    <ScreenQuad>
+      <TresMeshBasicMaterial color="red" />
+    </ScreenQuad>
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/StageDemo.vue b/docs/.vitepress/theme/components/StageDemo.vue
new file mode 100644
index 000000000..e9f39d945
--- /dev/null
+++ b/docs/.vitepress/theme/components/StageDemo.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { OrbitControls, Stage } from '@tresjs/cientos'
+import { type LoaderProto, TresCanvas, useLoader } from '@tresjs/core'
+import type { Mesh, Object3D } from 'three'
+import { type GLTF, GLTFLoader } from 'three-stdlib'
+
+const scene = await useLoader(GLTFLoader as LoaderProto<GLTF>, 'https://raw.githubusercontent.com/Tresjs/assets/215208b4a54736965d525ab9c47d82dbfe4b2a02/models/gltf/suzanne/suzanne.glb') as unknown as { nodes: { Suzanne: Object3D } }
+const suzanne = scene.nodes.Suzanne as Mesh
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[0, 5, 15]" />
+    <OrbitControls make-default />
+    <Stage
+      :adjust-camera="0.05"
+      :shadows="{ type: 'contact', color: '#012' }"
+      :align="{ top: true, disableX: true }"
+      :rotation-y="0.5"
+    >
+      <Suspense>
+        <primitive
+          :object="suzanne"
+          :rotation="[5.6548, Math.PI, 0]"
+          :position="[0, 0.90, 1]"
+        >
+          <TresMeshStandardMaterial color="#fbb03b" :metalness="1" :roughness="0" />
+        </primitive>
+      </Suspense>
+
+      <TresMesh
+        :position="[-1.75, 0.25, 1.25]"
+        :scale="0.5"
+      >
+        <TresBoxGeometry />
+        <TresMeshStandardMaterial color="#4f4f4f" />
+      </TresMesh>
+
+      <TresMesh :position="[-1.65, 1, -1.5]">
+        <TresSphereGeometry />
+        <TresMeshStandardMaterial color="#82dbc5" />
+      </TresMesh>
+    </Stage>
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/TextTroikaDemo.vue b/docs/.vitepress/theme/components/TextTroikaDemo.vue
new file mode 100644
index 000000000..21235daf5
--- /dev/null
+++ b/docs/.vitepress/theme/components/TextTroikaDemo.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { OrbitControls, TextTroika } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { NoToneMapping } from 'three'
+
+const fontURL = 'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff'
+</script>
+
+<template>
+  <TresCanvas clear-color="#fbb03b" :tone-mapping="NoToneMapping">
+    <TresPerspectiveCamera :position="[0, 0, 3]" />
+    <OrbitControls />
+    <Suspense>
+      <TextTroika
+        text="hola"
+        :font="fontURL"
+        :font-size="1"
+        anchor-x="center"
+        anchor-y="middle"
+      />
+    </Suspense>
+  </TresCanvas>
+</template>
diff --git a/docs/component-list/components.ts b/docs/component-list/components.ts
index bc0f235f7..2a28d2b76 100644
--- a/docs/component-list/components.ts
+++ b/docs/component-list/components.ts
@@ -3,6 +3,7 @@ export default [
     text: 'Abstractions',
     items: [
       { text: 'Text3D', link: '/guide/abstractions/text-3d' },
+      { text: 'TextTroika', link: '/guide/abstractions/text-troika' },
       { text: 'Levioso (Float)', link: '/guide/abstractions/levioso' },
       { text: 'useAnimations', link: '/guide/abstractions/use-animations' },
       { text: 'MouseParallax', link: '/guide/abstractions/mouse-parallax' },
@@ -17,13 +18,14 @@ export default [
       },
       { text: 'Sampler', link: '/guide/abstractions/sampler' },
       { text: 'PositionalAudio', link: '/guide/abstractions/positional-audio' },
-      /*       { text: 'Mask', link: '/guide/abstractions/mask' },
+      { text: 'MarchingCubes', link: '/guide/abstractions/marching-cubes' },
+      { text: 'Mask', link: '/guide/abstractions/mask' },
       { text: 'CubeCamera', link: '/guide/abstractions/cube-camera' },
       { text: 'GradientTexture', link: '/guide/abstractions/gradient-texture' },
       { text: 'ScreenSpace', link: '/guide/abstractions/screen-space' },
       { text: 'Outline', link: '/guide/abstractions/outline' },
       { text: 'Image', link: '/guide/abstractions/image' },
-      { text: 'Billboard', link: '/guide/abstractions/billboard' }, */
+      { text: 'Billboard', link: '/guide/abstractions/billboard' },
     ],
   },
   {
@@ -39,6 +41,7 @@ export default [
       { text: 'KeyboardControls', link: '/guide/controls/keyboard-controls' },
       { text: 'ScrollControls', link: '/guide/controls/scroll-controls' },
       { text: 'MapControls', link: '/guide/controls/map-controls' },
+      { text: 'Helper', link: '/guide/controls/helper' },
     ],
   },
   {
@@ -66,10 +69,14 @@ export default [
         text: 'HolographicMaterial',
         link: '/guide/materials/holographic-material',
       },
-      /* {
+      {
+        text: 'PointMaterial',
+        link: '/guide/materials/point-material',
+      },
+      {
         text: 'MeshDiscardMaterial',
         link: '/guide/materials/mesh-discard-material',
-      }, */
+      },
     ],
   },
   {
@@ -79,14 +86,17 @@ export default [
       { text: 'CatmullRomCurve3', link: '/guide/shapes/catmullromcurve3' },
       { text: 'Circle', link: '/guide/shapes/circle' },
       { text: 'Cone', link: '/guide/shapes/cone' },
+      { text: 'CubicBezierLine', link: '/guide/shapes/cubic-bezier-line' },
       { text: 'Cylinder', link: '/guide/shapes/cylinder' },
       { text: 'Dodecahedron', link: '/guide/shapes/dodecahedron' },
       { text: 'Icosahedron', link: '/guide/shapes/icosahedron' },
       { text: 'Line2', link: '/guide/shapes/line2' },
       { text: 'Octahedron', link: '/guide/shapes/octahedron' },
       { text: 'Plane', link: '/guide/shapes/plane' },
+      { text: 'QuadraticBezierLine', link: '/guide/shapes/quadratic-bezier-line' },
       { text: 'Ring', link: '/guide/shapes/ring' },
       { text: 'RoundedBox', link: '/guide/shapes/rounded-box' },
+      { text: 'ScreenQuad', link: '/guide/shapes/screen-quad' },
       { text: 'Sphere', link: '/guide/shapes/sphere' },
       { text: 'Superformula', link: '/guide/shapes/superformula' },
       { text: 'Tetrahedron', link: '/guide/shapes/tetrahedron' },
@@ -104,14 +114,20 @@ export default [
       { text: 'Sky', link: '/guide/staging/sky' },
       { text: 'Stars', link: '/guide/staging/stars' },
       { text: 'Smoke', link: '/guide/staging/smoke' },
+      { text: 'AccumulativeShadows', link: '/guide/staging/accumulative-shadows' },
       { text: 'ContactShadows', link: '/guide/staging/contact-shadows' },
       { text: 'Precipitation', link: '/guide/staging/precipitation' },
       { text: 'Sparkles', link: '/guide/staging/sparkles' },
       { text: 'Ocean', link: '/guide/staging/ocean' },
       { text: 'Fit', link: '/guide/staging/fit' },
-      /* { text: 'Align', link: '/guide/staging/align' },
+      { text: 'Align', link: '/guide/staging/align' },
       { text: 'SoftShadows', link: '/guide/staging/soft-shadows' },
-      { text: 'Grid', link: '/guide/staging/grid' }, */
+      { text: 'Grid', link: '/guide/staging/grid' },
+      { text: 'CircleShadow', link: '/guide/staging/circle-shadow' },
+      { text: 'Bounds', link: '/guide/staging/bounds' },
+      { text: 'RandomizedLights', link: '/guide/staging/randomized-lights' },
+      { text: 'Bounds', link: '/guide/staging/bounds' },
+      { text: 'Stage', link: '/guide/staging/stage' },
     ],
   },
   {
@@ -122,6 +138,8 @@ export default [
       { text: 'StatsGl', link: '/guide/misc/stats-gl' },
       { text: 'useGLTFExporter', link: '/guide/misc/use-gltf-exporter' },
       { text: 'BakeShadows', link: '/guide/misc/bake-shadows' },
+      { text: 'useIntersect', link: '/guide/misc/use-intersect' },
+      { text: 'LOD', link: '/guide/misc/lod' },
     ],
   },
   {
diff --git a/docs/guide/abstractions/marching-cubes.md b/docs/guide/abstractions/marching-cubes.md
new file mode 100644
index 000000000..8a827e7e0
--- /dev/null
+++ b/docs/guide/abstractions/marching-cubes.md
@@ -0,0 +1,41 @@
+# MarchingCubes
+
+<DocsDemo>
+  <MarchingCubesDemo />
+</DocsDemo>
+
+`<MarchingCubes />` is a wrapper around [THREE's Marching Cubes](https://threejs.org/examples/#webgl_marchingcubes).
+
+It includes 3 components:
+
+* `<MarchingCubes />` – container element for `<MarchingCube />`s and `<MarchingPlane />`s
+* `<MarchingCube />` - an individual metaball
+* `<MarchingPlane />` – optional bounding plane that interacts with the metaballs
+
+## Usage
+
+<<< @/.vitepress/theme/components/MarchingCubesDemo.vue
+
+## Props
+
+| Prop | Description | Default |
+| :----| :---------- | ------- |
+| `resolution` | Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory. | `28` |
+| `maxPolyCount` | Maximum number of polygons to generate.  | `10000` |
+| `enableUvs` | Whether UVs are enabled. | `false` |
+| `enableColors` | Whether vertex colors are enabled. | `false` |
+
+## `<MarchingCube />` Props
+
+| Prop | Description | Default |
+| :----| :---------- | ------- |
+| `strength` | How strongly this cube affects the marching cube field. | `0.5` |
+| `subtract` | How quickly strength moves to `0` over distance. | `12` |
+
+## `<MarchingPlane />` Props
+
+| Prop | Description | Default |
+| :----| :---------- | ------- |
+| `planeType` | Which axis the plane appears on. `'x' \| 'y' \| 'z'` | `'x'` |
+| `strength` | How strongly this plane affects the marching cube field. | `0.5` |
+| `subtract` | How quickly strength moves to `0` over distance. | `12` |
diff --git a/docs/guide/abstractions/text-troika.md b/docs/guide/abstractions/text-troika.md
new file mode 100644
index 000000000..cac537b26
--- /dev/null
+++ b/docs/guide/abstractions/text-troika.md
@@ -0,0 +1,33 @@
+# TextTroika
+
+<DocsDemo>
+  <TextTroikaDemo />
+</DocsDemo>
+
+`<TextTroika />` renders high-quality 2D text. It wraps the [troika-three-text](https://github.com/protectwise/troika/tree/1af247e61d2f9f884728a7c77914bc8255c4e7cb/packages/troika-three-text) library.
+
+## Usage
+
+<<< @/.vitepress/theme/components/TextTroikaDemo.vue
+
+## Props
+
+All props are optional.
+
+| Prop               | Description                                                            | Default |
+| :----------------- | :--------------------------------------------------------------------- | ------- |
+| **font**           | The URL of a custom font file to be used. Supported font formats are: .ttf, .otf, .woff (.woff2 is not supported) | Roboto from Google Fonts CDN   |
+| **text**           | The string of text to be rendered. Newlines and repeating whitespace characters are honored. | `''` |
+| **characters**     | Character glyphs to pre-generate to avoid <acronym title="flash of unstyled content">FOUC</acronym>. | |
+| **color**          | This is a shortcut for setting the `color` of the text's material. You can use this if you don't want to specify a whole custom material and just want to change its color.  | |
+| **fontSize**       | The em-height at which to render the font, in local world units. | `0.1` |
+| **fontWeight**     | A numeric font weight, `"normal"`, or `"bold"`. Currently only used to select the preferred weight for the fallback Unicode fonts. | `'normal'` |
+| **fontStyle**      | Either `"italic"` or `"normal"`. Currently only used to select the preferred style for the fallback Unicode fonts. | `'normal'` |
+| **maxWidth** | The maximum width of the text block, above which text may start wrapping according to the whiteSpace and overflowWrap properties. | `Infinity` (does not wrap) |
+| **lineHeight** | Sets the height of each line of text. Can either be `'normal'` which chooses a reasonable height based on the chosen font's ascender/descender metrics, or a number that is interpreted as a multiple of the fontSize. | `'normal`' |
+| **letterSpacing** | Sets a uniform adjustment to spacing between letters after kerning is applied, in local world units. Positive numbers increase spacing and negative numbers decrease it. | `0` |
+| **textAlign** | The horizontal alignment of each line of text within the overall text bounding box. Can be one of `'left' \| 'right' \| 'center' \| 'justify'`. | `'normal'` |
+| **anchorX** | Defines the horizontal position in the text block that should line up with the local origin. Can be specified as a numeric `x` position in local units, a string percentage of the total text block width e.g. `'25%'`, or one of the following keyword strings: `'left' \| 'center' \| 'right'`. | `0` |
+| **anchorY** | Defines the vertical position in the text block that should line up with the local origin. Can be specified as a numeric `y` position in local units (note: down is negative y), a string percentage of the total text block height e.g. '25%', or one of the following keyword strings: `'top' \| 'top-baseline' \| 'top-cap' \| 'top-ex' \| 'middle' \| 'bottom-baseline' \| 'bottom'`. | `0` |
+
+See all available properties on the [troika-three-text README](https://github.com/protectwise/troika/tree/1af247e61d2f9f884728a7c77914bc8255c4e7cb/packages/troika-three-text).
diff --git a/docs/guide/controls/helper.md b/docs/guide/controls/helper.md
new file mode 100644
index 000000000..e641df8f6
--- /dev/null
+++ b/docs/guide/controls/helper.md
@@ -0,0 +1,18 @@
+# Helper
+
+`<Helper />` handles instantiation, updates, and removal/disposal of THREE Helpers.
+
+<DocsDemo>
+  <HelperDemo />
+</DocsDemo>
+
+## Usage
+
+<<< @/.vitepress/theme/components/HelperDemo.vue
+
+## Props
+
+| Prop                | Description                                                                                   | Default     |
+| :------------------ | :-------------------------------------------------------------------------------------------- | ----------- |
+| **type**         | Helper constructor - required |       |
+| **args**         | Helper constructor args | `[]` |
diff --git a/docs/guide/materials/point-material.md b/docs/guide/materials/point-material.md
new file mode 100644
index 000000000..e01307c1d
--- /dev/null
+++ b/docs/guide/materials/point-material.md
@@ -0,0 +1,19 @@
+# PointMaterial
+
+<DocsDemo>
+  <PointMaterialDemo />
+</DocsDemo>
+
+`<PointMaterial />` extends `THREE.PointsMaterial`. It renders the points as dots, rather than the default squares.
+
+::: info
+N.B., stacking order and transparency of objects using `THREE.PointsMaterial` and by extension `<PointMaterial />` can be somewhat unintuitive, especially when combined with other on-screen objects. [Please see discussions at threejs.org for more infomation.](https://discourse.threejs.org/search?q=points%20transparency)
+:::
+
+## Usage
+
+<<< @/.vitepress/theme/components/PointMaterialDemo.vue
+
+## Props
+
+All [`THREE.PointsMaterial` properties](https://threejs.org/docs/#api/en/materials/PointsMaterial) are inherited by `PointMaterial`.
diff --git a/docs/guide/misc/lod.md b/docs/guide/misc/lod.md
new file mode 100644
index 000000000..e753a8346
--- /dev/null
+++ b/docs/guide/misc/lod.md
@@ -0,0 +1,19 @@
+# LOD
+
+Level of Detail - show meshes with more or less geometry based on distance from the camera.
+
+`<LOD />` is a wrapper for THREE's [LOD](https://threejs.org/docs/?q=LOD#api/en/objects/LOD) class.
+
+<DocsDemo>
+  <LODDemo />
+</DocsDemo>
+
+## Usage
+<<< @/.vitepress/theme/components/LODDemo.vue
+
+## Props
+
+| Prop               | Description                                                            | Default |
+| :----------------- | :--------------------------------------------------------------------- | ------- |
+| **levels**           |  `number[]` - The distances at which to display each level of detail. There should be one `levels` value for each `LOD` child. |         |
+| **hysteresis**           | Threshold used to avoid flickering at LOD boundaries, as a fraction of distance. | `0.0` |
diff --git a/docs/guide/misc/use-intersect.md b/docs/guide/misc/use-intersect.md
new file mode 100644
index 000000000..787d1be10
--- /dev/null
+++ b/docs/guide/misc/use-intersect.md
@@ -0,0 +1,37 @@
+# useIntersect
+
+`useIntersect` is a function that returns `intersect`, a `Ref<boolean>` that's updated when the observed object enters or leaves the screen. This relies on [THREE.Object3D.onBeforeRender](https://threejs.org/docs/#api/en/core/Object3D.onBeforeRender) so it only works on objects that are effectively rendered, like meshes, lines, sprites. It won't work on other types like group, object3d, bone, etc.
+
+## Usage
+
+::: warning
+`useIntersect` requires a `TresCanvas` context, so it is only available in `TresCanvas` descendant components' `<script setup>`.
+:::
+
+```vue
+<script setup lang="ts">
+import { Torus, useIntersect } from '@tresjs/cientos'
+
+const { ref, intersect, off } = useIntersect()
+</script>
+
+<template>
+  <Torus ref="ref">
+    <TresMeshNormalMaterial />
+  </Torus>
+</template>
+```
+
+## Arguments
+
+| Name         | Description |  Type       |
+| :----------- | ----------- | ----------- |
+| **onChange** | Optional callback function triggered when the observed object enters or leaves the screen. | `(isIntersected: boolean) => void` |
+
+## Return
+
+| Name         | Description |  Type       |
+| :----------- | ----------- | ----------- |
+| **ref** | Vue `ShallowRef` to pass to the object to be observed. | `ShallowRef<Object3D>` |
+| **intersects** | Updates when the observed object's intersect status changes. | `ShallowRef<boolean>` |
+| **off** | Calling this function stops `useIntersect` until `ref` changes. | `() => void` |
diff --git a/docs/guide/shapes/cubic-bezier-line.md b/docs/guide/shapes/cubic-bezier-line.md
new file mode 100644
index 000000000..d07fed0d6
--- /dev/null
+++ b/docs/guide/shapes/cubic-bezier-line.md
@@ -0,0 +1,22 @@
+# CubicBezierLine
+
+<DocsDemo>
+  <CubicBezierLineDemo />
+</DocsDemo>
+
+`<CubicBezierLine />` renders a `<Line2 />` between start and end points, with additional 2 control points.
+
+## Usage
+<<< @/.vitepress/theme/components/CubicBezierLineDemo.vue
+
+## Props
+
+`<CubicBezierLine />` inherits all props but `points` from `<Line2 />`.
+
+| Prop         | Type      | Description                                                                   | Default        |
+| ------------ | --------- | ----------------------------------------------------------------------------- | -------------- |
+| `start` | `Vector3 \| [number, number, number]` | Starting point |            |
+| `end` | `Vector3 \| [number, number, number]` | Ending point |            |
+| `midA` | `Vector3 \| [number, number, number]` | First control point |            |
+| `midB` | `Vector3 \| [number, number, number]` | Second control point |            |
+| `segments`     | `number`  | Number of segments in the resulting curve (higher = smoother) | 20             |
diff --git a/docs/guide/shapes/quadratic-bezier-line.md b/docs/guide/shapes/quadratic-bezier-line.md
new file mode 100644
index 000000000..53fc46ff1
--- /dev/null
+++ b/docs/guide/shapes/quadratic-bezier-line.md
@@ -0,0 +1,21 @@
+# QuadraticBezierLine
+
+<DocsDemo>
+  <QuadraticBezierLineDemo />
+</DocsDemo>
+
+`<QuadraticBezierLine />` renders a `<Line2 />` between start and end points, with an optional control point.
+
+## Usage
+<<< @/.vitepress/theme/components/QuadraticBezierLineDemo.vue
+
+## Props
+
+`<QuadraticBezierLine />` inherits all props but `points` from `<Line2 />`.
+
+| Prop         | Type      | Description                                                                   | Default        | Required |
+| ------------ | --------- | ----------------------------------------------------------------------------- | -------------- | ---- |
+| `start` | `Vector3 \| [number, number, number]` | Starting point |        | yes |
+| `end` | `Vector3 \| [number, number, number]` | Ending point |            | yes |
+| `mid` | `Vector3 \| [number, number, number]` | Control point |           | no |
+| `segments`     | `number`  | Number of segments in the resulting curve (higher = smoother) | 20 | no |
diff --git a/docs/guide/shapes/screen-quad.md b/docs/guide/shapes/screen-quad.md
new file mode 100644
index 000000000..7c0caafd4
--- /dev/null
+++ b/docs/guide/shapes/screen-quad.md
@@ -0,0 +1,12 @@
+# ScreenQuad
+
+A triangle that fills the screen when using a THREE.OrthographicCamera. Useful for full-screen fragment shader work.
+
+## Usage
+
+<<< @/.vitepress/theme/components/ScreenQuadDemo.vue
+
+## References
+
+* [Why a triangle?](https://www.cginternals.com/en/blog/2018-01-10-screen-aligned-quads-and-triangles.html)
+* [Simple postprocessing in THREE.js](https://luruke.medium.com/simple-postprocessing-in-three-js-91936ecadfb7)
diff --git a/docs/guide/staging/accumulative-shadows.md b/docs/guide/staging/accumulative-shadows.md
new file mode 100644
index 000000000..f481f42c7
--- /dev/null
+++ b/docs/guide/staging/accumulative-shadows.md
@@ -0,0 +1,34 @@
+# AccumulativeShadows
+
+<DocsDemo>
+  <AccumulativeShadowsDemo />
+</DocsDemo>
+
+`<AccumulativeShadows />` is a `THREE.DirectionalLight`-based shadow component. It displays shadows on a single shadow catcher plane, included in the component. It is based on [Drei component of the same name](http://drei.docs.pmnd.rs/staging/accumulative-shadows).
+
+## Usage
+
+<<< @/.vitepress/theme/components/AccumulativeShadowsDemo.vue
+
+## Props
+
+| Prop | Description | Default |
+| - | - | - |
+| `once` | Whether shadow creation only happens once (resets after props change) | `false` |
+| `accumulate` | Whether shadows accumulate progressively over several frames | `true` |
+| `frames` | Number of frames to render. More yields cleaner results but takes more time. If `accumulate && once`, 1 frame will be consumed every update for `frames` updates. Otherwise, `frames` frames are consumed for every update. | `40` |
+| `blend` | If `accumulate`, controls the refresh ratio | `100` |
+| `limit` | If less than `Infinity`, limits the amount of frames rendered. Use this to increase performance once a movable scene has settled | `Infinity` |
+| `scale` | Scale of the plane | `10` |
+| `opacity` | Opacity of the plane | `1` |
+| `alphaTest` | Discards alpha pixels | `0.65` |
+| `color` | Shadow color | `'black'` |
+| `colorBlend` | If less than `Infinity`, limits the amount of frames rendered. Use this to increase performance once a movable scene has settled | `Infinity` |
+| `resolution` | Buffer resolution | `1024` |
+| `toneMapped` | Texture tonemapping | `true` |
+
+## Slot
+
+You can bring your own lights to `<AccumulatedShadows />`, but it's designed to be used with `<RandomizedLights />`.
+
+By default, there's a `<RandomizedLights />` instance provided in `<AccumulatedShadows />`'s `<slot />`. You can replace it with your own `<RandomizedLights />` or an alternative by passing it as a child component.
diff --git a/docs/guide/staging/align.md b/docs/guide/staging/align.md
index 04e5bb2cf..3fd276933 100644
--- a/docs/guide/staging/align.md
+++ b/docs/guide/staging/align.md
@@ -30,13 +30,13 @@ All props are optional.
 | `onAlign`    | Callback that fires when updating, after measurement. |
 | `cacheKey`   | If set, component will only update when `cacheKey`'s value changes. If unset, component will update every frame. |
 
-## `OnAlignCallbackProps`
+## `AlignCallbackOptions`
 
 ```ts
-export interface OnAlignCallbackProps {
+export interface AlignCallbackOptions {
   /** The next parent above <Align /> */
   parent: Object3D
-  /** The outmost container group of the <Align /> component */
+  /** The outmost container group of the <Align/> component */
   container: Object3D
   width: number
   height: number
diff --git a/docs/guide/staging/bounds.md b/docs/guide/staging/bounds.md
new file mode 100644
index 000000000..ecaeb559b
--- /dev/null
+++ b/docs/guide/staging/bounds.md
@@ -0,0 +1,68 @@
+# Bounds
+
+<DocsDemo>
+    <BoundsDemo />
+</DocsDemo>
+
+Calculates a boundary box and centers the camera accordingly. Its `lookAt` method accepts a target to look at imperatively e.g., after a click.
+
+::: info
+If you are using other camera controls, be sure to make them the 'default'.
+```vue
+<OrbitControls make-default />
+```
+:::
+
+## Usage
+
+<<< @/.vitepress/theme/components/BoundsDemo.vue
+
+## Props
+
+| Name | Description | Default |
+| :--- | :--- | ---- |
+| `duration` | Duration of the `lookAt` animation in seconds | `1.0` |
+| `offset` | Additional distance from the target when using `lookAt` with a `Box3` or `Object3D` | `0.2` |
+| `useResize` | Whether to re`lookAt` the last target when the screen is resized | `false` |
+| `useMounted` | Whether to `lookAt` the `Bounds` object when the component is mounts | `false` |
+| `clip` | Whether to adjust the camera's `near` and `far` settings when using `lookAt` | `false` |
+| `easing` | Animation's easing function. `t` and the returned value should be in the interval `[0, 1]` | Cubic ease out |
+
+## `lookAt`
+
+`<Bounds />` `lookAt` points the camera at its first argument: an `Object3D`, `Box3` or `Vector3`.
+
+```
+  /**
+   * Calculates a boundary box around an `Object3D` and centers the camera accordingly.
+   */
+  lookAt(object: Object3D): void
+  /**
+   * Calculates a boundary box around an `Object3D` and centers the camera accordingly and animates the camera's `up` vector.
+   */
+  lookAt(object: Object3D, up: VectorFlexibleParams): void
+  /**
+   * Centers the camera's viewport on a `Box3`.
+   */
+  lookAt(box3: Box3): void
+  /**
+   * Centers the camera's viewport on a `Box3` and animates the camera's `up` vector.
+   */
+  lookAt(box3: Box3, up: VectorFlexibleParams): void
+  /**
+   * Look at a `Vector3`.
+   */
+  lookAt(target: VectorFlexibleParams): void
+  /**
+   * Look at a `Vector3`, if provided. Move the camera to `position`.
+   */
+  lookAt(target: VectorFlexibleParams | undefined | null, position: VectorFlexibleParams): void
+  /**
+   * Look at a `Vector3`, if provided. Move the camera to `position` and animate the camera's `up` vector.
+   */
+  lookAt(target: VectorFlexibleParams | undefined | null, position: VectorFlexibleParams, up: VectorFlexibleParams): void
+  /**
+   * Rerun `lookAt` using the prior arguments. If `lookAt` has never been called, uses the `Bounds` object.
+   */
+  lookAt(): void
+```
diff --git a/docs/guide/staging/circle-shadow.md b/docs/guide/staging/circle-shadow.md
new file mode 100644
index 000000000..4e693c2bf
--- /dev/null
+++ b/docs/guide/staging/circle-shadow.md
@@ -0,0 +1,23 @@
+# CircleShadow
+
+<DocsDemo>
+    <CircleShadowDemo />
+</DocsDemo>
+
+`<CircleShadow />` is a cheap, texture-based radial gradient on a `THREE.PlaneGeometry`.
+
+## Usage
+
+<<< @/.vitepress/theme/components/CircleShadowDemo.vue
+
+## Props
+
+All props are optional.
+
+| Name | Description | Default |
+| :--- | :--- | ------- |
+| `color` | Color of the shadow as a `Color \| number \| string` | `'black'` |
+| `opacity` | Opacity of the shadow | `0.5` |
+| `offset` | Placement of the first radial gradient color stop. `0.0` is the center of the circle. `1.0` is edge. | `0` |
+| `fog` | Whether the material is affected by fog | `false` |
+| `depthWrite` | Whether rendering the material has any effect on the depth buffer | `false` |
diff --git a/docs/guide/staging/randomized-lights.md b/docs/guide/staging/randomized-lights.md
new file mode 100644
index 000000000..7cf5fe430
--- /dev/null
+++ b/docs/guide/staging/randomized-lights.md
@@ -0,0 +1,35 @@
+# RandomizedLights
+
+`<RandomizedLights />` internally creates multiple lights and jiggles them. You would normally add it as a child of `<AccumulativeShadows />`.
+
+It is based on this [Drei component](http://drei.docs.pmnd.rs/staging/randomized-light).
+
+## Usage
+
+```vue
+  <RandomizedLights
+    :ambient="0.25"
+    :bias="0.001"
+    :count="8"
+    :intensity="Math.PI"
+    :map-size="1024"
+    :position="[5, 5, -10]"
+    :radius="2"
+  />
+```
+
+## Props
+
+| Prop | Description | Default |
+| - | - | - |
+| `count` | Number of lights | `8`|
+| `radius` | Radius of the jiggle, higher values make softer light | `1` |
+| `intensity` | Light intensity | `Math.PI` |
+| `ambient` | "Ambient occlusion" to directional light ratio, lower values mean less AO | `0.5` |
+| `castShadow` | If the lights cast shadows | `true` |
+| `bias` | Default shadow bias | `0` |
+| `mapSize` | Size of the lights' shadow map | `512` |
+| `size` | Size of the lights' shadow camera frustum | `10` |
+| `near` | Lights' shadow camera near value | `0.5` |
+| `far` | Lights' shadow camera far value | `500` |
+| `position` | Position | `[5, 5, -10]` |
diff --git a/docs/guide/staging/stage.md b/docs/guide/staging/stage.md
new file mode 100644
index 000000000..9f02a69cc
--- /dev/null
+++ b/docs/guide/staging/stage.md
@@ -0,0 +1,77 @@
+# Stage
+
+<DocsDemo>
+  <StageDemo />
+</DocsDemo>
+
+This component creates a "stage" for your models. It sets up:
+
+* model lighting
+* ground shadows
+* zoom to fit
+* environment
+
+::: info
+If you are using other camera controls, be sure to make them the 'default'.
+```vue
+<OrbitControls make-default />
+```
+:::
+
+::: info
+If you are using `shadows="accumulative"`, enable shadows on your canvas.
+```vue
+<TresCanvas shadows />
+```
+
+And on your objects.
+
+```vue
+<TresMesh cast-shadow />
+  ...
+</TresMesh>
+```
+:::
+
+## Usage
+
+<<< @/.vitepress/theme/components/StageDemo.vue
+
+## Props
+
+```ts
+interface StageProps {
+  /** Lighting setup, default: "rembrandt" */
+  lighting?:
+    | null | undefined | false
+    | 'rembrandt'
+    | 'portrait'
+    | 'upfront'
+    | 'soft'
+    | { main: [x: number, y: number, z: number], fill: [x: number, y: number, z: number] }
+  /** Controls the ground shadows, default: "contact" */
+  shadows?: boolean | 'contact' | 'accumulative' | StageShadows
+  /** Optionally wraps and thereby centers the models using <Bounds>, can also be a camera offset, default: true */
+  adjustCamera?: boolean | number
+  /** The default environment, default: "city" */
+  environment?: string | Partial<EnvironmentOptions> | null
+  /** Lighting intensity, `0` removes lights, default: 0.5 */
+  intensity?: number
+  /** To adjust alignment, default: undefined */
+  align?: Partial<AlignProps>
+}
+
+type StageShadows = Partial<AccumulativeShadowsProps> &
+  Partial<RandomizedLightsProps> &
+  Partial<ContactShadowsProps> & {
+    type: 'contact' | 'accumulative'
+    /** Shadow plane offset, default: 0 */
+    offset?: number
+    /** Shadow bias, default: -0.0001 */
+    bias?: number
+    /** Shadow normal bias, default: 0 */
+    normalBias?: number
+    /** Shadow map size, default: 1024 */
+    size?: number
+  }
+```
diff --git a/package.json b/package.json
index 0d335cd6e..b74cb7f69 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,8 @@
     "stats-gl": "^2.0.1",
     "stats.js": "^0.17.0",
     "three-custom-shader-material": "^5.4.0",
-    "three-stdlib": "^2.34.0"
+    "three-stdlib": "^2.34.0",
+    "troika-three-text": "^0.52.0"
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^9.0.3",
diff --git a/playground/vue/src/pages/abstractions/MarchingCubesDemo.vue b/playground/vue/src/pages/abstractions/MarchingCubesDemo.vue
new file mode 100644
index 000000000..763963019
--- /dev/null
+++ b/playground/vue/src/pages/abstractions/MarchingCubesDemo.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { MarchingCube, MarchingCubes, MarchingPlane, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { NoToneMapping } from 'three'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const r0 = shallowRef()
+const r1 = shallowRef()
+const r2 = shallowRef()
+const r3 = shallowRef()
+const r4 = shallowRef()
+const r5 = shallowRef()
+const r6 = shallowRef()
+const r7 = shallowRef()
+const r8 = shallowRef()
+const r9 = shallowRef()
+
+let time = 0
+setInterval(() => {
+  time += 1 / 30
+  let i = 0
+  for (const r of [r0, r1, r2, r3, r4, r5, r6, r7, r8, r9]) {
+    if (!r.value) { return }
+    const p = r.value.instance.position
+    p.x = Math.sin(i + 1.26 * time * (1.03 + 0.5 * Math.cos(0.21 * i))) * 0.27
+    p.y = Math.cos(i + 1.12 * time * Math.cos(1.22 + 0.1424 * i)) * 0.77
+    p.z = Math.cos(i + 1.32 * time * 0.1 * Math.sin((0.92 + 0.53 * i))) * 0.27
+    i++
+  }
+}, 1000 / 30)
+
+const c = useControls({
+  hasWallX: true,
+  hasWallY: true,
+  hasWallZ: true,
+  x: { value: 0, min: -1, max: 1, step: 0.1 },
+  y: { value: 0, min: -1, max: 1, step: 0.1 },
+  z: { value: 0, min: -1, max: 1, step: 0.1 },
+  strength: { value: 0.5, min: -5, max: 5 },
+  subtract: { value: 12, min: 0, max: 100 },
+  enableColors: true,
+})
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas clear-color="#82DBC5" :tone-mapping="NoToneMapping">
+    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
+    <OrbitControls />
+    <TresGridHelper :args="[10, 10]" />
+    <MarchingCubes :enable-colors="true" :resolution="40" :max-poly-count="40000">
+      <MarchingPlane v-if="c.hasWallX.value.value" plane-type="x" />
+      <MarchingPlane v-if="c.hasWallY.value.value" plane-type="y" />
+      <MarchingPlane v-if="c.hasWallZ.value.value" plane-type="z" />
+
+      <MarchingCube
+        :position="[c.x.value.value, c.y.value.value, c.z.value.value]"
+        :strength="c.strength.value.value"
+        :subtract="c.subtract.value.value"
+      />
+      <MarchingCube ref="r0" color="red" />
+      <MarchingCube ref="r1" color="red" />
+      <MarchingCube ref="r2" color="red" />
+      <MarchingCube ref="r3" color="blue" />
+      <MarchingCube ref="r4" color="blue" />
+      <MarchingCube ref="r5" color="blue" />
+      <MarchingCube ref="r6" color="green" />
+      <MarchingCube ref="r7" color="green" />
+      <MarchingCube ref="r8" color="green" />
+      <MarchingCube ref="r9" color="green" />
+
+      <TresMeshBasicMaterial v-if="c.enableColors.value.value" :vertex-colors="true" />
+      <TresMeshPhongMaterial v-else specular="#111111" :shininess="30" color="#049ef4" :reflectivity="1" />
+    </MarchingCubes>
+    <TresAxesHelper />
+
+    <TresDirectionalLight color="#ffffff" :intensity="3" :position="[0, 200, 0]" />
+    <TresDirectionalLight color="#ffffff" :intensity="3" :position="[100, 200, 100]" />
+
+    <OrbitControls :enable-pan="false" :zoom-speed="0.5" />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/abstractions/TextTroikaDemo.vue b/playground/vue/src/pages/abstractions/TextTroikaDemo.vue
new file mode 100644
index 000000000..0f18a19ef
--- /dev/null
+++ b/playground/vue/src/pages/abstractions/TextTroikaDemo.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { OrbitControls, TextTroika } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import type { ColorRepresentation } from 'three'
+import { BasicShadowMap, Color, NoToneMapping, SRGBColorSpace } from 'three'
+import { shallowRef } from 'vue'
+
+const gl = {
+  clearColor: 'green',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const fontURL = 'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff'
+const text = shallowRef(`Hello
+world!`)
+
+const lipsum = `Lorem ipsum dolor sit amet, consectetur
+adipiscing elit. Donec eu fringilla metus. Nunc tincidunt
+consequat lacinia. Quisque imperdiet suscipit mauris 
+eu consequat. Aliquam rhoncus massa vel mollis ultricies. 
+
+Nulla volutpat, nisl quis vehicula ultricies, eros mauris
+pulvinar neque, at facilisis purus enim eget mauris. Nam 
+ac felis libero. Donec ut nulla fringilla, imperdiet orci 
+at, accumsan tellus. Aenean tristique non sapien non 
+luctus. Ut tempus iaculis mauris ut iaculis. Phasellus 
+sodales nibh ut tincidunt vestibulum. Pellentesque ut 
+convallis felis, non condimentum ex. Integer vel 
+tempus mauris.
+
+Vivamus vel bibendum turpis. Maecenas a finibus massa, 
+nec lacinia magna. Praesent quis purus elit. Curabitur 
+placerat ex eget dui porttitor accumsan. Donec in 
+placerat nunc. Nulla suscipit feugiat mi, ac feugiat urna 
+ultricies eu. Vivamus vestibulum dolor non elit vehicula 
+finibus. Mauris ut elit justo. Duis viverra ac sapien 
+at finibus.
+`
+const color = shallowRef<ColorRepresentation>('red')
+const outlineWidth = shallowRef(0)
+const outlineColor = shallowRef<ColorRepresentation>('blue')
+const anchorX = shallowRef<'center' | 'left'>('center')
+const anchorY = shallowRef<'top' | 'middle'>('top')
+const fontStyle = shallowRef<'italic' | 'normal'>('normal')
+const lineHeight = shallowRef(1)
+
+let intervalId: ReturnType<typeof setInterval>
+
+let elapsed = 0
+onMounted(() => {
+  intervalId = setInterval(() => {
+    elapsed += 1000 / 30
+    text.value = Math.sin(elapsed * 0.001) > 0 ? text.value = lipsum : '¡hola!'
+    color.value = Math.cos(elapsed * 0.0011) > 0 ? 'white' : new Color('gray')
+    outlineColor.value = Math.cos(elapsed * 0.0017) > 0 ? 'blue' : new Color('orange')
+    outlineWidth.value = Math.abs(Math.sin(elapsed * 0.01))
+    anchorX.value = Math.sin(elapsed * 0.0013) > 0 ? 'center' : 'left'
+    anchorY.value = Math.cos(elapsed * 0.0013) > 0 ? 'top' : 'middle'
+    fontStyle.value = Math.cos(elapsed * 0.12) > 0 ? 'italic' : 'normal'
+    lineHeight.value = (Math.cos(elapsed * 0.01) + 1) * 1
+  }, 1000 / 30)
+})
+
+onUnmounted(() => {
+  clearInterval(intervalId)
+})
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
+    <OrbitControls />
+    <Suspense>
+      <TextTroika :font="fontURL" :font-style="fontStyle" :color="color" :anchor-x="anchorX" :anchor-y="anchorY" :text="text" :line-height="lineHeight" :outline-width="outlineWidth" :outline-color="outlineColor" />
+    </Suspense>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/controls/HelperDemo.vue b/playground/vue/src/pages/controls/HelperDemo.vue
new file mode 100644
index 000000000..a57ceea15
--- /dev/null
+++ b/playground/vue/src/pages/controls/HelperDemo.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { BoxHelper, DirectionalLightHelper } from 'three'
+import { VertexNormalsHelper } from 'three-stdlib'
+import { Helper, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+
+const hasHelpers = ref(true)
+const click = () => {
+  hasHelpers.value = !hasHelpers.value
+}
+
+const px = shallowRef(0)
+const py = shallowRef(0)
+let elapsed = 0
+setInterval(() => {
+  elapsed += 1000 / 30
+  px.value = Math.cos(elapsed * 0.001) * 10
+  py.value = Math.sin(elapsed * 0.001) * 10
+}, 1000 / 30)
+</script>
+
+<template>
+  <TresCanvas @pointerdown="click">
+    <TresPerspectiveCamera :position="[10, 10, 10]" />
+    <OrbitControls />
+
+    <TresMesh :position="[px, 2, 0]">
+      <TresSphereGeometry />
+      <TresMeshBasicMaterial />
+      <Helper v-if="hasHelpers" :type="BoxHelper" :args="['royalblue']" />
+      <Helper v-if="hasHelpers" :type="VertexNormalsHelper" :args="[1, 0xFF0000]" />
+    </TresMesh>
+
+    <TresDirectionalLight :position="[0, py, 2]">
+      <Helper v-if="hasHelpers" :type="DirectionalLightHelper" />
+    </TresDirectionalLight>
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/materials/PointMaterialDemo.vue b/playground/vue/src/pages/materials/PointMaterialDemo.vue
new file mode 100644
index 000000000..b96a93830
--- /dev/null
+++ b/playground/vue/src/pages/materials/PointMaterialDemo.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { MathUtils, NoToneMapping } from 'three'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, PointMaterial } from '@tresjs/cientos'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const positions = new Float32Array(Array.from({ length: 1000 }, () => [
+  MathUtils.randFloatSpread(8),
+  MathUtils.randFloatSpread(8),
+  MathUtils.randFloatSpread(8),
+]).flat())
+
+const c = useControls({
+  color: false,
+  depthTest: false,
+  enabled: true,
+  size: { value: 10, min: 0.1, max: 20, step: 0.1 },
+  sizeAttenuation: false,
+  toneMapped: false,
+  transparent: true,
+})
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas :tone-mapping="NoToneMapping" clear-color="#222" :raycaster="{ params: { Points: { threshold: 0.2 } } }">
+    <TresPerspectiveCamera :position="[10, 10, 10]" />
+    <OrbitControls />
+    <TresPoints :limit="positions.length">
+      <PointMaterial
+        v-if="c.enabled.value.value"
+        :color="c.color.value.value ? '#F00' : '#FFF'"
+        :size="c.size.value.value"
+        :size-attenuation="c.sizeAttenuation.value.value"
+        :transparent="c.transparent.value.value"
+        :depth-test="c.depthTest.value.value"
+        :tone-mapped="c.toneMapped.value.value"
+      />
+      <TresBufferGeometry>
+        <TresBufferAttribute :args="[positions, 3]" attach="attributes-position" />
+      </TresBufferGeometry>
+    </TresPoints>
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/misc/LODDemo.vue b/playground/vue/src/pages/misc/LODDemo.vue
new file mode 100644
index 000000000..aa44f45d6
--- /dev/null
+++ b/playground/vue/src/pages/misc/LODDemo.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { LOD } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BoxGeometry, IcosahedronGeometry, MeshBasicMaterial, Vector3 } from 'three'
+
+const COUNT = 1000
+const positions = Array.from({ length: COUNT }).fill(0).map(() => {
+  return new Vector3(
+    10000 * (Math.random() * 2 - 1),
+    7500 * (Math.random() * 2 - 1),
+    10000 * (Math.random() * 2 - 1),
+  )
+})
+
+const geometries = [
+  new IcosahedronGeometry(100, 16),
+  new IcosahedronGeometry(100, 8),
+  new IcosahedronGeometry(100, 4),
+  new IcosahedronGeometry(100, 2),
+  new BoxGeometry(100, 100, 100),
+]
+
+const materials = [
+  new MeshBasicMaterial({ color: 'red', wireframe: true }),
+  new MeshBasicMaterial({ color: 'orange', wireframe: true }),
+  new MeshBasicMaterial({ color: 'yellow', wireframe: true }),
+  new MeshBasicMaterial({ color: 'green', wireframe: true }),
+  new MeshBasicMaterial({ color: 'blue', wireframe: true }),
+]
+
+const x = ref(0)
+let intervalId: ReturnType<typeof setInterval>
+let elapsed = 0
+
+const levels = ref([1000, 2000, 3000, 4000, 5000])
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    elapsed += 0.01
+    x.value = Math.cos(elapsed) * 5000
+  })
+})
+
+function resetLevels() {
+  const i = Math.random() * 10000
+  levels.value = [i, i * 2, i * 3, i * 4, i * 5]
+
+  // NOTE: Make `levels` too short sometimes.
+  if (Math.random() > 0.5) {
+    while (levels.value.length && Math.random() > 0.5) {
+      levels.value.pop()
+    }
+  }
+  else {
+    // NOTE: Reverse levels sometimes.
+    levels.value.reverse()
+  }
+}
+
+onUnmounted(() => {
+  clearInterval(intervalId)
+})
+</script>
+
+<template>
+  <TresCanvas clear-color="gray" @pointerdown="resetLevels">
+    <TresPerspectiveCamera :near="1" :far="25000" :position="[0, 0, 0]" />
+    <TresGroup :position-z="x">
+      <LOD v-for="position, i of positions" :key="i" :levels="levels" :position="position">
+        <TresMesh :geometry="geometries[0]" :material="materials[0]" />
+        <TresMesh :geometry="geometries[1]" :material="materials[1]" />
+        <TresMesh :geometry="geometries[2]" :material="materials[2]" />
+        <TresMesh :geometry="geometries[3]" :material="materials[3]" />
+        <TresMesh :geometry="geometries[4]" :material="materials[4]" />
+      </LOD>
+    </TresGroup>
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/misc/useIntersect/TheExperience.vue b/playground/vue/src/pages/misc/useIntersect/TheExperience.vue
new file mode 100644
index 000000000..8cc1f5825
--- /dev/null
+++ b/playground/vue/src/pages/misc/useIntersect/TheExperience.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { Torus, useIntersect } from '@tresjs/cientos'
+
+const emit = defineEmits(['intersect'])
+
+const { ref, intersect, off } = useIntersect()
+
+watch(intersect, () => emit('intersect', intersect.value))
+defineExpose({ off })
+</script>
+
+<template>
+  <Torus ref="ref">
+    <TresMeshNormalMaterial />
+  </Torus>
+</template>
diff --git a/playground/vue/src/pages/misc/useIntersect/index.vue b/playground/vue/src/pages/misc/useIntersect/index.vue
new file mode 100644
index 000000000..8622152d9
--- /dev/null
+++ b/playground/vue/src/pages/misc/useIntersect/index.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import TheExperience from './TheExperience.vue'
+
+const r = shallowRef({ off: () => {} })
+const txt = shallowRef('')
+const ry = shallowRef(0)
+
+let elapsed = 0
+let intervalId: ReturnType<typeof setInterval>
+
+function update() {
+  elapsed += 1000 / 30
+  ry.value = elapsed * 0.001
+}
+onMounted(() => { intervalId = setInterval(update, 1000 / 30) })
+onUnmounted(() => clearInterval(intervalId))
+</script>
+
+<template>
+  <div class="overlay-info">
+    <h1><code>useIntersect</code></h1>
+    <h2>Setup</h2>
+    <p>The camera rotates, sending a torus around the screen.</p>
+    <p>The torus' ref has been sent to <code>useIntersect</code>.</p>
+    <h2>Intersect status</h2>
+    <p>{{ txt }}</p>
+    <h2><code>off</code></h2>
+    <p>Hitting this button should stop <code>useIntersect</code> updates.</p>
+    <button @pointerdown="r.off()">Off</button>
+  </div>
+  <TresCanvas clear-color="#333">
+    <TresPerspectiveCamera :rotation-y="ry" />
+    <TheExperience ref="r" @intersect="(b) => txt = b" />
+  </TresCanvas>
+</template>
+
+<style scoped>
+.overlay-info {
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin: 10px;
+  padding: 16px;
+  max-width: 400px;
+  z-index: 1000;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
+  font-size: small;
+  background-color: white;
+  border-radius: 6px;
+  overflow: auto;
+}
+</style>
diff --git a/playground/vue/src/pages/shapes/CubicBezierLineDemo.vue b/playground/vue/src/pages/shapes/CubicBezierLineDemo.vue
new file mode 100644
index 000000000..13f251a05
--- /dev/null
+++ b/playground/vue/src/pages/shapes/CubicBezierLineDemo.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { CubicBezierLine, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+import { Vector3 } from 'three'
+
+const c = useControls({
+  startX: { value: 0, min: -10, max: 10 },
+  startY: { value: 0, min: -10, max: 10 },
+  startZ: { value: 0, min: -10, max: 10 },
+  endX: { value: 3, min: -10, max: 10 },
+  endY: { value: 3, min: -10, max: 10 },
+  endZ: { value: 3, min: -10, max: 10 },
+  moveMidA: true,
+  moveMidB: true,
+  lineWidth: { value: 1, min: 0.01, max: 10 },
+  enabled: true,
+})
+
+const midA = reactive([1, 1, 1] as [number, number, number])
+const midB = new Vector3(2, 2, 2)
+const colors = ref([
+  [1.0, 0.0, 0.0],
+  [0.9, 0.1, 0.0],
+  [0.8, 0.2, 0.0],
+  [0.7, 0.3, 0.0],
+  [0.6, 0.4, 0.0],
+  [0.5, 0.5, 0.0],
+  [0.4, 0.6, 0.0],
+  [0.3, 0.7, 0.0],
+  [0.2, 0.8, 0.0],
+  [0.1, 0.9, 0.0],
+  [0.0, 1.0, 0.0],
+  [0.0, 0.9, 0.1],
+  [0.0, 0.8, 0.2],
+  [0.0, 0.7, 0.3],
+  [0.0, 0.6, 0.4],
+  [0.0, 0.5, 0.5],
+  [0.0, 0.4, 0.6],
+  [0.0, 0.3, 0.7],
+  [0.0, 0.2, 0.8],
+  [0.0, 0.1, 0.9],
+  [0.0, 0.0, 1.0],
+  [0.1, 0.0, 0.9],
+  [0.2, 0.0, 0.8],
+  [0.3, 0.0, 0.7],
+  [0.4, 0.0, 0.6],
+  [0.5, 0.0, 0.5],
+  [0.6, 0.0, 0.4],
+  [0.7, 0.0, 0.3],
+  [0.8, 0.0, 0.2],
+  [0.9, 0.0, 0.1],
+])
+
+const dashed = ref(true)
+const dashScale = ref(50)
+
+useRenderLoop().onLoop(({ elapsed }) => {
+  const lastColor = colors.value.pop()!
+  colors.value.unshift(lastColor)
+
+  dashed.value = Math.sin(elapsed * 0.5) < 0
+  dashScale.value = 5 + 5 * Math.sin(elapsed)
+
+  if (c.moveMidA.value.value) {
+    midA[1] = Math.sin(elapsed) * 4
+  }
+  if (c.moveMidB.value.value) {
+    midB.x = Math.cos(elapsed) * 4
+  }
+})
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas clear-color="#777">
+    <CubicBezierLine
+      v-if="c.enabled.value.value"
+      :start="[c.startX.value.value, c.startY.value.value, c.startZ.value.value]"
+      :end="[c.endX.value.value, c.endY.value.value, c.endZ.value.value]"
+      :midA="midA"
+      :midB="midB"
+      :vertex-colors="colors"
+      :world-units="true"
+      :line-width="c.lineWidth.value.value"
+      :dashed="dashed"
+      :dash-scale="dashScale"
+    />
+    <TresGridHelper />
+    <OrbitControls />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/shapes/QuadraticBezierLineDemo.vue b/playground/vue/src/pages/shapes/QuadraticBezierLineDemo.vue
new file mode 100644
index 000000000..3be597628
--- /dev/null
+++ b/playground/vue/src/pages/shapes/QuadraticBezierLineDemo.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { OrbitControls, QuadraticBezierLine } from '@tresjs/cientos'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+import { Vector3 } from 'three'
+
+const c = useControls({
+  startX: { value: 0, min: -10, max: 10 },
+  startY: { value: 0, min: -10, max: 10 },
+  startZ: { value: 0, min: -10, max: 10 },
+  endX: { value: 3, min: -10, max: 10 },
+  endY: { value: 3, min: -10, max: 10 },
+  endZ: { value: -3, min: -10, max: 10 },
+  moveMid: true,
+  lineWidth: { value: 1, min: 0.01, max: 10 },
+  enabled: true,
+})
+
+const mid = new Vector3(1, 1, 1)
+const colors = ref([
+  [1.0, 0.0, 0.0],
+  [0.9, 0.1, 0.0],
+  [0.8, 0.2, 0.0],
+  [0.7, 0.3, 0.0],
+  [0.6, 0.4, 0.0],
+  [0.5, 0.5, 0.0],
+  [0.4, 0.6, 0.0],
+  [0.3, 0.7, 0.0],
+  [0.2, 0.8, 0.0],
+  [0.1, 0.9, 0.0],
+  [0.0, 1.0, 0.0],
+  [0.0, 0.9, 0.1],
+  [0.0, 0.8, 0.2],
+  [0.0, 0.7, 0.3],
+  [0.0, 0.6, 0.4],
+  [0.0, 0.5, 0.5],
+  [0.0, 0.4, 0.6],
+  [0.0, 0.3, 0.7],
+  [0.0, 0.2, 0.8],
+  [0.0, 0.1, 0.9],
+  [0.0, 0.0, 1.0],
+  [0.1, 0.0, 0.9],
+  [0.2, 0.0, 0.8],
+  [0.3, 0.0, 0.7],
+  [0.4, 0.0, 0.6],
+  [0.5, 0.0, 0.5],
+  [0.6, 0.0, 0.4],
+  [0.7, 0.0, 0.3],
+  [0.8, 0.0, 0.2],
+  [0.9, 0.0, 0.1],
+])
+
+const dashed = ref(true)
+const dashScale = ref(50)
+
+useRenderLoop().onLoop(({ elapsed }) => {
+  const lastColor = colors.value.pop()!
+  colors.value.unshift(lastColor)
+
+  dashed.value = Math.sin(elapsed * 0.5) < 0
+  dashScale.value = 5 + 5 * Math.sin(elapsed)
+
+  if (c.moveMid.value.value) {
+    mid.y = Math.sin(elapsed) * 4
+  }
+})
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas clear-color="#777">
+    <TresPerspectiveCamera :position="[10, 10, 10]" />
+    <OrbitControls />
+    <QuadraticBezierLine
+      v-if="c.enabled.value.value"
+      :start="[c.startX.value.value, c.startY.value.value, c.startZ.value.value]"
+      :end="[c.endX.value.value, c.endY.value.value, c.endZ.value.value]"
+      :vertex-colors="colors"
+      :world-units="true"
+      :line-width="c.lineWidth.value.value"
+      :dashed="dashed"
+      :dash-scale="dashScale"
+    />
+    <TresGridHelper />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/shapes/ScreenQuadDemo.vue b/playground/vue/src/pages/shapes/ScreenQuadDemo.vue
new file mode 100644
index 000000000..18aabbf2a
--- /dev/null
+++ b/playground/vue/src/pages/shapes/ScreenQuadDemo.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { ScreenQuad } from '@tresjs/cientos'
+import { RawShaderMaterial, RGBFormat, Vector2, WebGLRenderTarget } from 'three'
+import OverlayInfo from '../../components/OverlayInfo.vue'
+
+const vertexShader = `precision highp float;
+attribute vec2 position;
+void main() {
+  // Look ma! no projection matrix multiplication,
+  // because we pass the values directly in clip space coordinates.
+  gl_Position = vec4(position, 1.0, 1.0);
+}`
+
+const fragmentShader = `precision highp float;
+uniform sampler2D uScene;
+uniform vec2 uResolution;
+void main() {
+  vec2 uv = gl_FragCoord.xy / uResolution.xy;
+  // Do your cool postprocessing here
+  gl_FragColor = vec4(step(0.5, uv.x), step(0.5, uv.y), 0.0, 1.0);
+}`
+
+const resolution = new Vector2(100, 100)
+
+const target = new WebGLRenderTarget(resolution.x, resolution.y, {
+  format: RGBFormat,
+  stencilBuffer: false,
+  depthBuffer: true,
+})
+
+const mat = new RawShaderMaterial({
+  fragmentShader,
+  vertexShader,
+  uniforms: {
+    uScene: { value: target.texture },
+    uResolution: { value: resolution },
+  },
+})
+
+let r: WebGLRenderer
+function onReady({ renderer }) {
+  r = renderer.value
+  renderer.value.getDrawingBufferSize(resolution)
+  target.setSize(resolution.x, resolution.y)
+  mat.uniforms.uResolution.value = resolution
+}
+
+const imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAABN0lEQVR4Xu3buw2EMAAFQbsNQvpvijYu4JcTzkkOlgJW9vBSz+0c11j4O+bCh/s42gzU/rBArecINFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtVIM+vaXfKf12fOM/595nVYFC5EAh5psKNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtFIPeNY3T4VOOUisAAAAASUVORK5CYII='
+
+let intervalId: ReturnType<typeof setInterval>
+onMounted(() => {
+  intervalId = setInterval(() => {
+    if (r) {
+      // NOTE: Update material resolution to make it
+      // follow screen size changes.
+      r.getDrawingBufferSize(mat.uniforms.uResolution.value)
+    }
+  }, 1000 / 30)
+})
+
+onUnmounted(() => {
+  clearInterval(intervalId)
+  mat.dispose()
+  target.dispose()
+})
+</script>
+
+<template>
+  <OverlayInfo>
+    <h1>ScreenQuad</h1>
+    <p>This component is intended for creating (slightly faster) custom, full-screen post-processing.</p>
+    <h2>Setup</h2>
+    <p>In this scene, there is a <code>ScreenQuad</code>. The <code>ScreenQuad</code> has a custom material. The material's vertex shader places it "in front of the camera".</p>
+    <h2>Preview</h2>
+    <img :src="imgData" />
+  </OverlayInfo>
+  <TresCanvas
+    window-size
+    clear-color="#111"
+    @ready="onReady"
+  >
+    <ScreenQuad>
+      <primitive :object="mat" />
+    </ScreenQuad>
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/staging/AccumulativeShadowsDemo.vue b/playground/vue/src/pages/staging/AccumulativeShadowsDemo.vue
new file mode 100644
index 000000000..c2a5ee48b
--- /dev/null
+++ b/playground/vue/src/pages/staging/AccumulativeShadowsDemo.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { AccumulativeShadows, Box, Environment, Icosahedron, OrbitControls, Sphere } from '@tresjs/cientos'
+import { NoToneMapping } from 'three'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const c = useControls({
+  frames: { value: 100, min: 2, max: 200, step: 1 },
+  once: true,
+  accumulate: true,
+  limit: { value: 1000, min: 0, max: 10000, step: 10 },
+  isLimitInfinite: false,
+  blend: { value: 200, min: 2, max: 1000, step: 1 },
+  alphaTest: { value: 0.75, min: 0, max: 1, step: 0.01 },
+  colorBlend: { value: 2, min: 0, max: 5, step: 0.1 },
+  opacity: { value: 2, min: 0, max: 2, step: 0.1 },
+  resolution: { value: 2048, min: 16, max: 2048, step: 16 },
+  scale: { value: 12, min: 1, max: 24, step: 1 },
+  toneMapped: true,
+  isOrange: true,
+  enabled: true,
+})
+
+const x = shallowRef(0)
+
+let intervalId: ReturnType<typeof setInterval>
+let elapsed = 0
+onMounted(() => {
+  intervalId = setInterval(() => {
+    elapsed += 1000 / 30
+    x.value = Math.sin(elapsed * 0.001)
+  }, 1000 / 30)
+})
+
+onUnmounted(() => {
+  clearInterval(intervalId)
+})
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas :shadows="true" clear-color="orange" :tone-mapping="NoToneMapping">
+    <TresPerspectiveCamera :args="[50]" :position="[0, 0.6, 2]" :look-at="[0, 0.5, 0]" name="mainCam" />
+
+    <OrbitControls />
+    <TresDirectionalLight :position="[5, 10, -10]" :intensity="3.14" />
+    <Box
+      :args="[0.4, 0.4, 0.4]"
+      :cast-shadow="true"
+      :position="[-0.5, 0.2, -0.3]"
+    >
+      <TresMeshStandardMaterial color="orange" />
+    </Box>
+    <Icosahedron
+      :args="[0.3]"
+      :cast-shadow="true"
+      :position="[x, 0.3, 0.4]"
+    >
+      <TresMeshNormalMaterial />
+    </Icosahedron>
+
+    <Sphere
+      :scale="0.2"
+      :position="[0.5, 0.4, -0.3]"
+      :cast-shadow="true"
+    >
+      <TresMeshStandardMaterial color="lightblue" />
+    </Sphere>
+
+    <AccumulativeShadows
+      v-if="c.enabled.value.value"
+      :accumulate="c.accumulate.value.value"
+      :alpha-test="c.alphaTest.value.value"
+      :blend="c.blend.value.value"
+      :color="c.isOrange.value.value ? 'orange' : 'blue'"
+      :color-blend="c.colorBlend.value.value"
+      :frames="c.frames.value.value"
+      :limit="c.limit.value.value"
+      :once="c.once.value.value"
+      :opacity="c.opacity.value.value"
+      :resolution="c.resolution.value.value"
+      :tone-mapped="c.toneMapped.value.value"
+      :scale="c.scale.value.value"
+    />
+    <Suspense>
+      <Environment preset="city" />
+    </Suspense>
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/staging/BoundsDemo.vue b/playground/vue/src/pages/staging/BoundsDemo.vue
new file mode 100644
index 000000000..5a1bf3bcd
--- /dev/null
+++ b/playground/vue/src/pages/staging/BoundsDemo.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Bounds, Grid, OrbitControls } from '@tresjs/cientos'
+import { Vector3 } from 'three'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+import { computed, shallowRef } from 'vue'
+
+const c = useControls({
+  duration: { value: 0.5, min: 0, max: 10, step: 0.25 },
+  offset: { value: 1, min: -2, max: 2, step: 0.25 },
+  clip: false,
+  useMounted: true,
+  useOrthographic: false,
+  useResize: false,
+  isLinear: false,
+  enabled: true,
+  lookAtX: { value: 0, min: -20, max: 20, step: 0.10 },
+  lookAtY: { value: 0, min: -20, max: 20, step: 0.10 },
+  lookAtZ: { value: 0, min: -20, max: 20, step: 0.10 },
+  moveToX: { value: -5, min: -20, max: 20, step: 0.10 },
+  moveToY: { value: -5, min: -20, max: 20, step: 0.10 },
+  moveToZ: { value: 5, min: -20, max: 20, step: 0.10 },
+  upX: { value: 0, min: -1, max: 1, step: 0.10 },
+  upY: { value: -1, min: -1, max: 1, step: 0.10 },
+  upZ: { value: 0, min: -1, max: 1, step: 0.10 },
+})
+
+const { sin, cos, PI } = Math
+const positions = Array.from(
+  { length: 8 },
+  (_, i) => new Vector3(cos(i * PI / 4) * 4, sin(i * PI / 4) * 4, 0),
+)
+
+const easingFn = computed(() => c.isLinear.value.value ? (n: number) => n : undefined)
+
+const boundsRef = shallowRef()
+
+const startArg = shallowRef('')
+const cancelArg = shallowRef('')
+const endArg = shallowRef('')
+
+const startCount = shallowRef(0)
+const cancelCount = shallowRef(0)
+const endCount = shallowRef(0)
+
+const onStartFn = (v: any) => { startArg.value = v.object?.uuid; startCount.value++ }
+const onCancelFn = (v: any) => { cancelArg.value = v.object?.uuid; cancelCount.value++ }
+const onEndFn = (v: any) => { endArg.value = v.object?.uuid; endCount.value++ }
+</script>
+
+<template>
+  <TresLeches />
+  <OverlayInfo>
+    <h1>Bounds</h1>
+    <h2>Setup</h2>
+    <p>In this scene, multiple objects are children of <code>&lt;Bounds/&gt;</code>. A <code>pointerup</code> on a child should move/rotate the camera to fit the child into the view.</p>
+    <h2>lookAt(lookAt?, position?, up?)</h2>
+    <p><code>&lt;Bounds&gt;</code> has a <code>fit</code> method that can be called imperatively.</p>
+    <button
+      @pointerup="() => boundsRef.instance.lookAt(
+        new Vector3(c.lookAtX.value.value, c.lookAtY.value.value, c.lookAtZ.value.value),
+      )"
+    >
+      lookAt(new Vector(lookAtArgs))
+    </button><br />
+    <button
+      @pointerup="() => boundsRef.instance.lookAt(
+        [c.lookAtX.value.value, c.lookAtY.value.value, c.lookAtZ.value.value],
+      )"
+    >
+      lookAt([lookAtArgs])
+    </button><br />
+    <button
+      @pointerup="() => boundsRef.instance.lookAt(
+        [c.lookAtX.value.value, c.lookAtY.value.value, c.lookAtZ.value.value],
+        [c.moveToX.value.value, c.moveToY.value.value, c.moveToZ.value.value],
+      )"
+    >
+      lookAt([lookAtArgs], [moveToArgs])
+    </button><br />
+    <button
+      @pointerup="() => boundsRef.instance.lookAt(
+        undefined,
+        [c.moveToX.value.value, c.moveToY.value.value, c.moveToZ.value.value],
+      )"
+    >
+      lookAt(undefined, [moveToArgs])
+    </button><br />
+    <button
+      @pointerup="() => boundsRef.instance.lookAt(
+        undefined,
+        [c.moveToX.value.value, c.moveToY.value.value, c.moveToZ.value.value],
+        [c.upX.value.value, c.upY.value.value, c.upZ.value.value],
+      )"
+    >
+      lookAt(undefined, [moveToArgs], [upArgs])
+    </button><br />
+    <button @pointerup="() => boundsRef.instance.lookAt()">lookAt()</button><br />
+    <h2>Callback results</h2>
+    <p>onStart ({{ startCount }})</p>
+    {{ startArg }}
+    <hr />
+    <p>onCancel ({{ cancelCount }})</p>
+    {{ cancelArg }}
+    <hr />
+    <p>onEnd ({{ endCount }})</p>
+    {{ endArg }}
+    <h2>Testing Notes</h2>
+    <p>OrbitControls zoom using an Orthographic camera can result in parts of the scene appearing "cut off", independent of <code>&lt;Bounds/&gt;</code></p>
+    <p>Switching between Orthographic and Perspective Cameras leads to odd behavior, independent of <code>&lt;Bounds/&gt;</code>. To test, change <code>isOrthographicCamera</code>'s value, save and reload the page.</p>
+    <p>The <code>clip</code> option sets the camera's clipping to a large multiple of the internal <code>distance</code>. To test, change the component's coefficient to a smaller number.</p>
+  </OverlayInfo>
+  <TresCanvas render-mode="on-demand">
+    <TresOrthographicCamera v-if="c.useOrthographic.value.value" :position="[-5, 5, 5]" :zoom="1" :args="[-400, 400, 400, -400, 0, 10000]" />
+    <TresPerspectiveCamera v-else :position="[5, 5, 5]" />
+    <OrbitControls make-default />
+    <TresGroup>
+      <Bounds
+        v-if="c.enabled.value.value"
+        ref="boundsRef"
+        :clip="c.clip.value.value"
+        :duration="c.duration.value.value"
+        :offset="c.offset.value.value"
+        :use-resize="c.useResize.value.value"
+        :use-mounted="c.useMounted.value.value"
+        :easing="easingFn"
+        @start="onStartFn"
+        @cancel="onCancelFn"
+        @end="onEndFn"
+      >
+        <TresMesh
+          v-for="p, i of positions"
+          :key="i"
+          :position="p"
+          @pointer-up="(e) => boundsRef.instance.lookAt(e.object)"
+        >
+          <TresBoxGeometry />
+          <TresMeshNormalMaterial />
+        </TresMesh>
+      </Bounds>
+    </TresGroup>
+    <Grid :scale="20" :cell-size=".1" :section-size="0.3" section-color="#AAF" :infinite-grid="true" />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/staging/CircleShadowDemo.vue b/playground/vue/src/pages/staging/CircleShadowDemo.vue
new file mode 100644
index 000000000..865bad284
--- /dev/null
+++ b/playground/vue/src/pages/staging/CircleShadowDemo.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { CircleShadow, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const c = useControls({
+  colorRed: true,
+  opacity: { value: 0.5, min: 0.0, max: 1.0 },
+  offset: { value: 0.5, min: 0.0, max: 1.0 },
+  fog: false,
+  depthWrite: false,
+  enabled: true,
+})
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+    <TresGroup>
+      <TresMesh :position-y="1">
+        <TresBoxGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+      <CircleShadow
+        v-if="c.enabled.value.value"
+        :scale="1.5"
+        :color="c.colorRed.value.value ? 'red' : 'black'"
+        :offset="c.offset.value.value"
+        :opacity="c.opacity.value.value"
+        :fog="c.fog.value.value"
+        :depth-write="c.depthWrite.value.value"
+      />
+    </TresGroup>
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/staging/StageDemo.vue b/playground/vue/src/pages/staging/StageDemo.vue
new file mode 100644
index 000000000..5ce5b7793
--- /dev/null
+++ b/playground/vue/src/pages/staging/StageDemo.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { Grid, OrbitControls, Stage } from '@tresjs/cientos'
+import type { LoaderProto } from '@tresjs/core'
+import { TresCanvas, useLoader } from '@tresjs/core'
+import type { Object3D } from 'three'
+import { Mesh, MeshStandardMaterial, NoToneMapping, SRGBColorSpace } from 'three'
+import type { GLTF } from 'three-stdlib'
+import { GLTFLoader } from 'three-stdlib'
+
+const controlsOptions = {
+  lighting: ['rembrandt', 'portrait', 'upfront', 'soft', null, undefined, true, false, { main: [1, 1, 1], fill: [0, -1, 0] }],
+  intensity: [0.5, 0, 1, 2, 1000],
+  shadows: [
+    'contact',
+    { type: 'contact', offset: 0.2 },
+    'accumulative',
+    { type: 'accumulative', alphaTest: 1 },
+    { type: 'accumulative', alphaTest: 0.5, ambient: 0 },
+    { type: 'accumulative', alphaTest: 0.5, ambient: 1 },
+    null,
+    undefined,
+    true,
+    false,
+  ],
+  adjustCamera: [true, false, 0, 0.5, 1, 2, 5],
+  environment: ['city', { preset: 'city', blur: 1 }, 'umbrellas', { preset: 'night' }, null, undefined],
+  align: [
+    { top: true },
+    undefined,
+    { top: true, disableX: true },
+    { bottom: true, disableZ: true },
+  ],
+  enabled: [true, false],
+  test_torusKnotEnabled: [false, true],
+  test_giantTorusKnotEnabled: [false, true],
+} as const
+
+const controls = Object.entries(controlsOptions).reduce((acc, [k, v]) => { acc[k] = { options: v, selected: shallowRef(v[0]) }; return acc }, {})
+
+const gl = {
+  clearColor: '#82DBC5',
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+  shadows: true,
+}
+
+const scene = await useLoader(GLTFLoader as LoaderProto<GLTF>, 'https://raw.githubusercontent.com/Tresjs/assets/215208b4a54736965d525ab9c47d82dbfe4b2a02/models/gltf/suzanne/suzanne.glb') as unknown as { nodes: { Suzanne: Object3D } }
+
+const nodes = scene.nodes
+
+nodes.Suzanne.traverse((obj) => {
+  if (obj instanceof Mesh) {
+    obj.material = new MeshStandardMaterial({ color: '#fbb03b', metalness: 1, roughness: 0 })
+  }
+})
+
+const onChange = (e: Event) => {
+  const id = e.target!.id
+  const i = e.target!.selectedIndex
+  controls[id].selected.value = controls[id].options[i]
+}
+</script>
+
+<template>
+  <OverlayInfo>
+    <h1>Stage</h1>
+    <h2>Props</h2>
+    <template
+      v-for="[title, { options }] of Object.entries(controls)"
+      :key="title"
+    >
+      <h3>{{ title }}</h3>
+      <select :id="title" :name="title" @change="onChange">
+        <option
+          v-for="option, i of options"
+          :key="i"
+          :value="option"
+        >
+          <template v-if="option === null">null</template>
+          <template v-else-if="option === undefined">undefined</template>
+          <template v-else>{{ option }}</template>
+        </option>
+      </select>
+      <br />
+    </template>
+  </OverlayInfo>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 5, 15]" />
+    <OrbitControls make-default />
+    <Stage
+      v-if="controls.enabled.selected.value"
+      :adjust-camera="controls.adjustCamera.selected.value"
+      :align="controls.align.selected.value"
+      :lighting="controls.lighting.selected.value"
+      :shadows="controls.shadows.selected.value"
+      :environment="controls.environment.selected.value"
+      :intensity="controls.intensity.selected.value"
+    >
+      <TresGroup>
+        <Suspense>
+          <primitive
+            :object="nodes.Suzanne"
+            :rotation="[5.6548, Math.PI, 0]"
+            :position="[0, 0.90, 1]"
+            cast-shadow
+          />
+        </Suspense>
+
+        <TresMesh cast-shadow :position="[1.5, 0.5, -1.5]">
+          <TresBoxGeometry />
+          <TresMeshStandardMaterial color="#82dbc5" />
+        </TresMesh>
+
+        <TresMesh cast-shadow :position="[-1.5, 1, -1.5]">
+          <TresSphereGeometry />
+          <TresMeshStandardMaterial color="#4f4f4f" />
+        </TresMesh>
+
+        <TresMesh
+          v-if="controls.test_torusKnotEnabled.selected.value"
+          :position="[3, 2, 1]"
+          cast-shadow
+        >
+          <TresTorusKnotGeometry />
+          <TresMeshNormalMaterial />
+        </TresMesh>
+
+        <TresMesh
+          v-if="controls.test_giantTorusKnotEnabled.selected.value"
+          :scale="10"
+          :position="[0, 0, -20]"
+        >
+          <TresTorusKnotGeometry />
+          <TresMeshNormalMaterial />
+        </TresMesh>
+      </TresGroup>
+    </Stage>
+    <Grid :position-y="0.01" :scale="10" :section-size="0.1" section-color="#4f4f6f" :cell-size="0.025" infinite-grid :fade-distance="8" :fade-from="0" />
+    <TresAmbientLight :intensity="0.5" />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/router/routes/abstractions.ts b/playground/vue/src/router/routes/abstractions.ts
index 5095cc0c2..f36a9ad7c 100644
--- a/playground/vue/src/router/routes/abstractions.ts
+++ b/playground/vue/src/router/routes/abstractions.ts
@@ -9,6 +9,11 @@ export const abstractionsRoutes = [
     name: 'Text3D',
     component: () => import('../../pages/abstractions/Text3DDemo.vue'),
   },
+  {
+    path: '/abstractions/text-troika',
+    name: 'TextTroika',
+    component: () => import('../../pages/abstractions/TextTroikaDemo.vue'),
+  },
   {
     path: '/abstractions/mouse-parallax',
     name: 'MouseParallax',
@@ -64,6 +69,11 @@ export const abstractionsRoutes = [
     name: 'AnimatedSprite',
     component: () => import('../../pages/abstractions/AnimatedSpriteDemo.vue'),
   },
+  {
+    path: '/abstractions/marching-cubes',
+    name: 'MarchingCubes',
+    component: () => import('../../pages/abstractions/MarchingCubesDemo.vue'),
+  },
   {
     path: '/abstractions/mask',
     name: 'Mask',
diff --git a/playground/vue/src/router/routes/controls.ts b/playground/vue/src/router/routes/controls.ts
index 931aa55f6..baec8bd07 100644
--- a/playground/vue/src/router/routes/controls.ts
+++ b/playground/vue/src/router/routes/controls.ts
@@ -34,4 +34,9 @@ export const controlsRoutes = [
     name: 'ScrollControls',
     component: () => import('../../pages/controls/ScrollControlsDemo.vue'),
   },
+  {
+    path: '/controls/helper',
+    name: 'Helper',
+    component: () => import('../../pages/controls/HelperDemo.vue'),
+  },
 ]
diff --git a/playground/vue/src/router/routes/materials.ts b/playground/vue/src/router/routes/materials.ts
index 4f808cf8c..4e241135b 100644
--- a/playground/vue/src/router/routes/materials.ts
+++ b/playground/vue/src/router/routes/materials.ts
@@ -24,6 +24,11 @@ export const materialsRoutes = [
     name: 'HolographicMaterial',
     component: () => import('../../pages/materials/HolographicMaterialDemo.vue'),
   },
+  {
+    path: '/materials/point-material',
+    name: 'PointMaterial',
+    component: () => import('../../pages/materials/PointMaterialDemo.vue'),
+  },
   {
     path: '/materials/discard-material',
     name: 'MeshDiscardMaterial',
diff --git a/playground/vue/src/router/routes/misc.ts b/playground/vue/src/router/routes/misc.ts
index ee134671a..38ce3366b 100644
--- a/playground/vue/src/router/routes/misc.ts
+++ b/playground/vue/src/router/routes/misc.ts
@@ -1,4 +1,9 @@
 export const miscRoutes = [
+  {
+    path: '/misc/lod',
+    name: 'LOD',
+    component: () => import('../../pages/misc/LODDemo.vue'),
+  },
   {
     path: '/misc/html',
     name: 'HTML',
@@ -29,4 +34,9 @@ export const miscRoutes = [
     name: 'GLTFExporter',
     component: () => import('../../pages/misc/GLTFExporterDemo.vue'),
   },
+  {
+    path: '/misc/useIntersect',
+    name: 'useIntersect',
+    component: () => import('../../pages/misc/useIntersect/index.vue'),
+  },
 ]
diff --git a/playground/vue/src/router/routes/shapes.ts b/playground/vue/src/router/routes/shapes.ts
index acd6bdc97..579020814 100644
--- a/playground/vue/src/router/routes/shapes.ts
+++ b/playground/vue/src/router/routes/shapes.ts
@@ -4,6 +4,16 @@ export const shapesRoutes = [
     name: 'CatmullRomCurve3',
     component: () => import('../../pages/shapes/CatmullRomCurve3Demo.vue'),
   },
+  {
+    path: '/shapes/quadratic-bezier-line',
+    name: 'QuadraticBezierLine',
+    component: () => import('../../pages/shapes/QuadraticBezierLineDemo.vue'),
+  },
+  {
+    path: '/shapes/cubic-bezier-line',
+    name: 'CubicBezierLine',
+    component: () => import('../../pages/shapes/CubicBezierLineDemo.vue'),
+  },
   {
     path: '/shapes/cylinder',
     name: 'Cylinder',
@@ -24,6 +34,11 @@ export const shapesRoutes = [
     name: 'RoundedBox',
     component: () => import('../../pages/shapes/RoundedBoxDemo.vue'),
   },
+  {
+    path: '/shapes/screenQuad',
+    name: 'ScreenQuad',
+    component: () => import('../../pages/shapes/ScreenQuadDemo.vue'),
+  },
   {
     path: '/shapes/on-demand-shapes',
     name: 'on-demand Shapes',
diff --git a/playground/vue/src/router/routes/staging.ts b/playground/vue/src/router/routes/staging.ts
index de21d5975..1bd750e70 100644
--- a/playground/vue/src/router/routes/staging.ts
+++ b/playground/vue/src/router/routes/staging.ts
@@ -22,7 +22,7 @@ export const stagingRoutes = [
   {
     path: '/staging/backdrop',
     name: 'Backdrop',
-    component: () => import('../../pages/staging/BackdropDemo.vue'),
+    component: () => import('../../pages/staging/CircleShadowDemo.vue'),
   },
   {
     path: '/staging/contact-shadows',
@@ -44,6 +44,11 @@ export const stagingRoutes = [
     name: 'Ocean',
     component: () => import('../../pages/staging/OceanDemo.vue'),
   },
+  {
+    path: '/staging/bounds',
+    name: 'Bounds',
+    component: () => import('../../pages/staging/BoundsDemo.vue'),
+  },
   {
     path: '/staging/fit',
     name: 'Fit',
@@ -64,4 +69,19 @@ export const stagingRoutes = [
     name: 'Grid',
     component: () => import('../../pages/staging/GridDemo.vue'),
   },
+  {
+    path: '/staging/circle-shadow',
+    name: 'CircleShadow',
+    component: () => import('../../pages/staging/CircleShadowDemo.vue'),
+  },
+  {
+    path: '/staging/accumulative-shadows',
+    name: 'Accumulative Shadows',
+    component: () => import('../../pages/staging/AccumulativeShadowsDemo.vue'),
+  },
+  {
+    path: '/staging/stage',
+    name: 'Stage',
+    component: () => import('../../pages/staging/StageDemo.vue'),
+  },
 ]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8d20a8ebd..0a497e877 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       three-stdlib:
         specifier: ^2.34.0
         version: 2.34.0(three@0.171.0)
+      troika-three-text:
+        specifier: ^0.52.0
+        version: 0.52.3(three@0.171.0)
       vue:
         specifier: '>=3.3'
         version: 3.5.13(typescript@5.7.2)
@@ -863,12 +866,12 @@ packages:
     resolution: {integrity: sha512-tw2HxzQkrbeuvyj1tG2Yqq+0H9wGoI2IMk4EOsQeX+vmd75FtJAzf+gTA69WF+baUKRYQ3x2kbLE08js5OsTVg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/markdown@6.1.1':
-    resolution: {integrity: sha512-Z+1js5AeqidwhNBbnIPM6Fn4eY9D5i1NleamS0UBW6BG0J4lpvhIVOKVIi22kmH5gvxDmHUp5MHkkkjda0TehA==}
+  '@eslint/markdown@6.2.1':
+    resolution: {integrity: sha512-cKVd110hG4ICHmWhIwZJfKmmJBvbiDWyrHODJknAtudKgZtlROGoLX9UEOA0o746zC0hCY4UV4vR+aOGW9S6JQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/object-schema@2.1.4':
-    resolution: {integrity: sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==}
+  '@eslint/object-schema@2.1.5':
+    resolution: {integrity: sha512-o0bhxnL89h5Bae5T318nFoFzGy+YE5i/gGkoPAgkmTVdRKTiv3p8JHevPiPaMwoloKfEiiaHlawCqaZMqRm+XQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/plugin-kit@0.2.3':
@@ -915,8 +918,8 @@ packages:
     resolution: {integrity: sha512-tKd+jsmhq21AP1LhexC0pPwsCxEhGgAkg28byjJAd+xhmIs8LUX8JbUc3vBf3PhLxWiB5EvyBE5X7JSPAqMAqg==}
     engines: {node: '>=18'}
 
-  '@jridgewell/gen-mapping@0.3.5':
-    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+  '@jridgewell/gen-mapping@0.3.8':
+    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
 
   '@jridgewell/resolve-uri@3.1.2':
@@ -1360,9 +1363,6 @@ packages:
   '@types/web-bluetooth@0.0.20':
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
-  '@types/webxr@0.5.20':
-    resolution: {integrity: sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==}
-
   '@types/webxr@0.5.7':
     resolution: {integrity: sha512-Rcgs5c2eNFnHp53YOjgtKfl/zWX1Y+uFGUwlSXrWcZWu3yhANRezmph4MninmqybUYT6g9ZE0aQ9QIdPkLR3Kg==}
 
@@ -1545,15 +1545,9 @@ packages:
   '@volar/typescript@2.4.10':
     resolution: {integrity: sha512-F8ZtBMhSXyYKuBfGpYwqA5rsONnOwAVvjyE7KPYJ7wgZqo2roASqNWUnianOomJX5u1cxeRooHV59N0PhvEOgw==}
 
-  '@vue/compiler-core@3.5.12':
-    resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==}
-
   '@vue/compiler-core@3.5.13':
     resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
 
-  '@vue/compiler-dom@3.5.12':
-    resolution: {integrity: sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==}
-
   '@vue/compiler-dom@3.5.13':
     resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
 
@@ -1608,9 +1602,6 @@ packages:
     peerDependencies:
       vue: 3.5.13
 
-  '@vue/shared@3.5.12':
-    resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==}
-
   '@vue/shared@3.5.13':
     resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
@@ -1693,11 +1684,6 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn@8.12.1:
-    resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
   acorn@8.14.0:
     resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
     engines: {node: '>=0.4.0'}
@@ -1710,6 +1696,10 @@ packages:
     resolution: {integrity: sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==}
     engines: {node: '>= 14'}
 
+  agent-base@7.1.3:
+    resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==}
+    engines: {node: '>= 14'}
+
   ajv-draft-04@1.0.0:
     resolution: {integrity: sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==}
     peerDependencies:
@@ -1805,6 +1795,9 @@ packages:
   before-after-hook@2.2.3:
     resolution: {integrity: sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==}
 
+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+
   binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
@@ -1832,8 +1825,8 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  browserslist@4.23.3:
-    resolution: {integrity: sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==}
+  browserslist@4.24.3:
+    resolution: {integrity: sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -1851,8 +1844,8 @@ packages:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
 
-  bundle-require@5.0.0:
-    resolution: {integrity: sha512-GuziW3fSSmopcx4KRymQEJVbZUfqlCqcq7dvs6TYwKRZiegK/2buMxQTPs6MGlNv50wms1699qYO54R8XfRX4w==}
+  bundle-require@5.1.0:
+    resolution: {integrity: sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     peerDependencies:
       esbuild: '>=0.18'
@@ -1874,8 +1867,8 @@ packages:
     peerDependencies:
       three: '>=0.126.1'
 
-  caniuse-lite@1.0.30001658:
-    resolution: {integrity: sha512-N2YVqWbJELVdrnsW5p+apoQyYt51aBMSsBZki1XZEfeBCexcM/sf4xiAHcXQBkuOwJBXtWF7aW1sYX6tKebPHw==}
+  caniuse-lite@1.0.30001690:
+    resolution: {integrity: sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -1977,9 +1970,6 @@ packages:
     resolution: {integrity: sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==}
     engines: {'0': node >= 6.0}
 
-  confbox@0.1.7:
-    resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==}
-
   confbox@0.1.8:
     resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
 
@@ -1990,8 +1980,8 @@ packages:
     resolution: {integrity: sha512-yk7/5PN5im4qwz0WFZW3PXnzHgPu9mX29Y8uZ3aefe2lBPC1FYttWZRcaW9fKkT0pBCJyuQ2HfbmPVaODi9jcQ==}
     engines: {node: '>=18'}
 
-  consola@3.2.3:
-    resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
+  consola@3.3.3:
+    resolution: {integrity: sha512-Qil5KwghMzlqd51UXM0b6fyaGHtOC22scxrwrz4A2882LyUMwQjnvaedN1HAeXzphspQ6CpHkzMAWxBTUruDLg==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
   conventional-changelog-angular@8.0.0:
@@ -2065,8 +2055,8 @@ packages:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
 
-  core-js-compat@3.38.1:
-    resolution: {integrity: sha512-JRH6gfXxGmrzF3tZ57lFx97YARxCXPaMzPo6jELZhv88pBH5VXpQ+y0znKGlFnzuaihqhLbefxSJxWJMPtfDzw==}
+  core-js-compat@3.39.0:
+    resolution: {integrity: sha512-VgEUx3VwlExr5no0tXlBt+silBvhTryPwCXRI2Id1PN8WTKu7MreethvddqOubrYxkFdv/RnYrqlv1sFNAUelw==}
 
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
@@ -2095,8 +2085,8 @@ packages:
     resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
 
-  css-tree@3.0.1:
-    resolution: {integrity: sha512-8Fxxv+tGhORlshCdCwnNJytvlvq46sOLSYEx2ZIGurahWvMucSRnyjPA3AmrMq4VPRYbHVpWj5VkiVasrM2H4Q==}
+  css-tree@3.1.0:
+    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
 
   css-what@6.1.0:
@@ -2211,8 +2201,8 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
-  domutils@3.1.0:
-    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
+  domutils@3.2.1:
+    resolution: {integrity: sha512-xWXmuRnN9OMP6ptPd2+H0cCbcYBULa5YDTbMm/2lvkWvNA3O4wcW+GvzooqBuNM8yy6pl3VIAeJTUUWUbfI5Fw==}
 
   dot-prop@5.3.0:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
@@ -2228,8 +2218,8 @@ packages:
   duplexer@0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
-  electron-to-chromium@1.5.17:
-    resolution: {integrity: sha512-Q6Q+04tjC2KJ8qsSOSgovvhWcv5t+SmpH6/YfAWmhpE5/r+zw6KQy1/yWVFFNyEBvy68twTTXr2d5eLfCq7QIw==}
+  electron-to-chromium@1.5.76:
+    resolution: {integrity: sha512-CjVQyG7n7Sr+eBXE86HIulnL5N8xZY1sgmOPGuq/F0Rr0FJq63lg0kEtOIDfZBk44FnDLf6FUJ+dsJcuiUDdDQ==}
 
   emoji-regex-xs@1.0.0:
     resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
@@ -2240,8 +2230,8 @@ packages:
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
-  enhanced-resolve@5.17.1:
-    resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
+  enhanced-resolve@5.18.0:
+    resolution: {integrity: sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==}
     engines: {node: '>=10.13.0'}
 
   entities@4.5.0:
@@ -2255,8 +2245,8 @@ packages:
   error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
 
-  es-module-lexer@1.5.4:
-    resolution: {integrity: sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==}
+  es-module-lexer@1.6.0:
+    resolution: {integrity: sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==}
 
   esbuild@0.21.5:
     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
@@ -2273,10 +2263,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  escalade@3.1.1:
-    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
-    engines: {node: '>=6'}
-
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -2538,8 +2524,8 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
-  fastq@1.17.1:
-    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
+  fastq@1.18.0:
+    resolution: {integrity: sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==}
 
   fdir@6.4.2:
     resolution: {integrity: sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==}
@@ -2616,9 +2602,6 @@ packages:
     resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
     engines: {node: '>=16'}
 
-  get-tsconfig@4.8.0:
-    resolution: {integrity: sha512-Pgba6TExTZ0FJAn1qkJAjIeKoDJ3CsI2ChuLohJnZl/tTU8MVrq3b+2t5UOPfRa4RMsorClBjJALkJUMjG1PAw==}
-
   get-tsconfig@4.8.1:
     resolution: {integrity: sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==}
 
@@ -2670,10 +2653,6 @@ packages:
     resolution: {integrity: sha512-1+gLErljJFhbOVyaetcwJiJ4+eLe45S2E7P5UiZ9xGfeq3ATQf5DOv9G7MH3gGbKQLkzmNh2DxfZwLdw+j6oTQ==}
     engines: {node: '>=18'}
 
-  globals@15.9.0:
-    resolution: {integrity: sha512-SmSKyLLKFbSr6rptvP8izbyxJL4ILwqO9Jg23UA0sDlGlu58V59D1//I3vlc0KJphVdUR7vMjHIplYnzBxorQA==}
-    engines: {node: '>=18'}
-
   globby@14.0.2:
     resolution: {integrity: sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==}
     engines: {node: '>=18'}
@@ -2712,16 +2691,12 @@ packages:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
-  hasown@2.0.0:
-    resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==}
-    engines: {node: '>= 0.4'}
-
   hasown@2.0.2:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
-  hast-util-to-html@9.0.3:
-    resolution: {integrity: sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==}
+  hast-util-to-html@9.0.4:
+    resolution: {integrity: sha512-wxQzXtdbhiwGAUKrnQJXlOPmHnEehzphwkK7aluUPQ+lEc1xefC8pblMgpp2w5ldBTEfveRIrADcrhGIWrlTDA==}
 
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
@@ -2736,10 +2711,6 @@ packages:
   hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
 
-  hosted-git-info@7.0.1:
-    resolution: {integrity: sha512-+K84LB1DYwMHoHSgaOY/Jfhw3ucPmSET5v98Ke/HdNSw4a0UktWzyW1mjhjpuxxTqOOsfWT/7iVshHmVZ4IpOA==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   hosted-git-info@7.0.2:
     resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -2751,8 +2722,8 @@ packages:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
 
-  https-proxy-agent@7.0.5:
-    resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==}
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
 
   human-signals@2.1.0:
@@ -2838,13 +2809,14 @@ packages:
     resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
     engines: {node: '>=6'}
 
-  is-core-module@2.13.1:
-    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
-
   is-core-module@2.15.1:
     resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==}
     engines: {node: '>= 0.4'}
 
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
   is-docker@2.2.1:
     resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
     engines: {node: '>=8'}
@@ -2986,8 +2958,8 @@ packages:
     resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
     hasBin: true
 
-  jsesc@3.0.2:
-    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
     hasBin: true
 
@@ -3019,8 +2991,8 @@ packages:
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
-  ky@1.7.2:
-    resolution: {integrity: sha512-OzIvbHKKDpi60TnF9t7UUVAF1B4mcqc02z5PIvrm08Wyb+yOcz63GRvEuVxNT18a9E1SrNouhB4W2NNLeD7Ykg==}
+  ky@1.7.4:
+    resolution: {integrity: sha512-zYEr/gh7uLW2l4su11bmQ2M9xLgQLjyvx58UyNM/6nuqyWFHPX5ktMjvpev3F8QWdjSsHUpnWew4PBCswBNuMQ==}
     engines: {node: '>=18'}
 
   latest-version@9.0.0:
@@ -3041,10 +3013,6 @@ packages:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  local-pkg@0.5.0:
-    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
-    engines: {node: '>=14'}
-
   local-pkg@0.5.1:
     resolution: {integrity: sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==}
     engines: {node: '>=14'}
@@ -3093,9 +3061,6 @@ packages:
     resolution: {integrity: sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==}
     engines: {node: 14 || >=16.14}
 
-  lru-cache@10.4.3:
-    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
-
   lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -3124,11 +3089,8 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
-  mdast-util-find-and-replace@3.0.1:
-    resolution: {integrity: sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==}
-
-  mdast-util-from-markdown@2.0.1:
-    resolution: {integrity: sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==}
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
   mdast-util-from-markdown@2.0.2:
     resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
@@ -3169,8 +3131,8 @@ packages:
   mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
-  mdn-data@2.12.1:
-    resolution: {integrity: sha512-rsfnCbOHjqrhWxwt5/wtSLzpoKTzW7OXdT5lLOIH1OTYhWu9rRJveGq0sKvDZODABH7RX+uoR+DYcpFnq4Tf6Q==}
+  mdn-data@2.12.2:
+    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
@@ -3189,9 +3151,6 @@ packages:
   meshoptimizer@0.18.1:
     resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
 
-  micromark-core-commonmark@2.0.1:
-    resolution: {integrity: sha512-CUQyKr1e///ZODyD1U3xit6zXwy1a8q2a1S1HKtIlmgvurrEpaw/Y9y6KSIbF8P59cn/NjzHyO+Q2fAyYLQrAA==}
-
   micromark-core-commonmark@2.0.2:
     resolution: {integrity: sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==}
 
@@ -3216,123 +3175,63 @@ packages:
   micromark-extension-gfm@3.0.0:
     resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
 
-  micromark-factory-destination@2.0.0:
-    resolution: {integrity: sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==}
-
   micromark-factory-destination@2.0.1:
     resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
 
-  micromark-factory-label@2.0.0:
-    resolution: {integrity: sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==}
-
   micromark-factory-label@2.0.1:
     resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
 
-  micromark-factory-space@2.0.0:
-    resolution: {integrity: sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==}
-
   micromark-factory-space@2.0.1:
     resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
 
-  micromark-factory-title@2.0.0:
-    resolution: {integrity: sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==}
-
   micromark-factory-title@2.0.1:
     resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
 
-  micromark-factory-whitespace@2.0.0:
-    resolution: {integrity: sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==}
-
   micromark-factory-whitespace@2.0.1:
     resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
 
-  micromark-util-character@2.1.0:
-    resolution: {integrity: sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==}
-
   micromark-util-character@2.1.1:
     resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
 
-  micromark-util-chunked@2.0.0:
-    resolution: {integrity: sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==}
-
   micromark-util-chunked@2.0.1:
     resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
 
-  micromark-util-classify-character@2.0.0:
-    resolution: {integrity: sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==}
-
   micromark-util-classify-character@2.0.1:
     resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
 
-  micromark-util-combine-extensions@2.0.0:
-    resolution: {integrity: sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==}
-
   micromark-util-combine-extensions@2.0.1:
     resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
 
-  micromark-util-decode-numeric-character-reference@2.0.1:
-    resolution: {integrity: sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==}
-
   micromark-util-decode-numeric-character-reference@2.0.2:
     resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
 
-  micromark-util-decode-string@2.0.0:
-    resolution: {integrity: sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==}
-
   micromark-util-decode-string@2.0.1:
     resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
 
-  micromark-util-encode@2.0.0:
-    resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==}
-
   micromark-util-encode@2.0.1:
     resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
 
-  micromark-util-html-tag-name@2.0.0:
-    resolution: {integrity: sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==}
-
   micromark-util-html-tag-name@2.0.1:
     resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
 
-  micromark-util-normalize-identifier@2.0.0:
-    resolution: {integrity: sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==}
-
   micromark-util-normalize-identifier@2.0.1:
     resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
 
-  micromark-util-resolve-all@2.0.0:
-    resolution: {integrity: sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==}
-
   micromark-util-resolve-all@2.0.1:
     resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
 
-  micromark-util-sanitize-uri@2.0.0:
-    resolution: {integrity: sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==}
-
   micromark-util-sanitize-uri@2.0.1:
     resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
 
-  micromark-util-subtokenize@2.0.1:
-    resolution: {integrity: sha512-jZNtiFl/1aY73yS3UGQkutD0UbhTt68qnRpw2Pifmz5wV9h8gOVsN70v+Lq/f1rKaU/W8pxRe8y8Q9FX1AOe1Q==}
-
   micromark-util-subtokenize@2.0.2:
     resolution: {integrity: sha512-xKxhkB62vwHUuuxHe9Xqty3UaAsizV2YKq5OV344u3hFBbf8zIYrhYOWhAQb94MtMPkjTOzzjJ/hid9/dR5vFA==}
 
-  micromark-util-symbol@2.0.0:
-    resolution: {integrity: sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==}
-
   micromark-util-symbol@2.0.1:
     resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
 
-  micromark-util-types@2.0.0:
-    resolution: {integrity: sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==}
-
   micromark-util-types@2.0.1:
     resolution: {integrity: sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ==}
 
-  micromark@4.0.0:
-    resolution: {integrity: sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==}
-
   micromark@4.0.1:
     resolution: {integrity: sha512-eBPdkcoCNvYcxQOAKAlceo5SNdzZWfF+FcSupREAzdAh9rRmE239CEQAiTwIgblwnoM8zzj35sZ5ZwvSEOF6Kw==}
 
@@ -3370,10 +3269,6 @@ packages:
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
-  minimatch@9.0.3:
-    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
   minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -3387,9 +3282,6 @@ packages:
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
-  mlly@1.7.1:
-    resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}
-
   mlly@1.7.3:
     resolution: {integrity: sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==}
 
@@ -3435,16 +3327,12 @@ packages:
   node-fetch-native@1.6.4:
     resolution: {integrity: sha512-IhOigYzAKHd244OC0JIMIUrjzctirCmPkaIfhDeGcEETWof5zKYUW7e7MYvChGWh/4CJeXEgsRyGzuF334rOOQ==}
 
-  node-releases@2.0.18:
-    resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
+  node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
   normalize-package-data@2.5.0:
     resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
 
-  normalize-package-data@6.0.0:
-    resolution: {integrity: sha512-UL7ELRVxYBHBgYEtZCXjxuD5vPxnmvMGq0jp/dGPKKrN7tfsBh2IY7TlJ15WWwdjRWD3RJbnsygUurTK3xkPkg==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   normalize-package-data@6.0.2:
     resolution: {integrity: sha512-V6gygoYb/5EmNI+MEGrWkC+e6+Rr7mTmfHrxDbLzxQogBkgzo76rkok0Am6thgSF7Mv2nLOajAJj5vDJZEFn7g==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -3537,8 +3425,8 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
-  pac-proxy-agent@7.0.2:
-    resolution: {integrity: sha512-BFi3vZnO9X5Qt6NRz7ZOaPja3ic0PhlsmCRYLOpN11+mWBCR6XJDqW5RF3j8jm4WGGQZtBA+bTfxYzeKW73eHg==}
+  pac-proxy-agent@7.1.0:
+    resolution: {integrity: sha512-Z5FnLVVZSnX7WjBg0mhDtydeRZ1xMcATZThjySQUHqr+0ksP8kqaw23fNKkaaN/Z8gwLUs/W7xdl0I75eP2Xyw==}
     engines: {node: '>= 14'}
 
   pac-resolver@7.0.1:
@@ -3560,8 +3448,8 @@ packages:
     resolution: {integrity: sha512-RmVuCHWsfu0QPNW+mraxh/xjQVw/lhUCUru8Zni3Ctq3AoMhpDTq0OVdKS6iesd6Kqb7viCV3isAL43dciOSog==}
     engines: {node: '>=14'}
 
-  parse-imports@2.1.1:
-    resolution: {integrity: sha512-TDT4HqzUiTMO1wJRwg/t/hYk8Wdp3iF/ToMIlAoVQfL1Xs/sTxq1dKWSMjMbQmIarfWKymOyly40+zmPHXMqCA==}
+  parse-imports@2.2.1:
+    resolution: {integrity: sha512-OL/zLggRp8mFhKL0rNORUTR4yBYujK/uU+xZL+/0Rgm2QE4nLO9v8PzEweSJEbMGKmDRjJE4R3IMJlL2di4JeQ==}
     engines: {node: '>= 18'}
 
   parse-json@5.2.0:
@@ -3624,11 +3512,8 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
-  pkg-types@1.2.0:
-    resolution: {integrity: sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==}
-
-  pkg-types@1.2.1:
-    resolution: {integrity: sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==}
+  pkg-types@1.3.0:
+    resolution: {integrity: sha512-kS7yWjVFCkIw9hqdJBoMxDdzEngmkr5FXeWZZfQ6GoYacjVnsW6l2CcYW/0ThD0vF4LPJgVYnrg4d0uuhwYQbg==}
 
   pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
@@ -3656,8 +3541,8 @@ packages:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
     engines: {node: '>=6.0.0'}
 
-  prettier@3.3.3:
-    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
+  prettier@3.4.2:
+    resolution: {integrity: sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -3784,8 +3669,9 @@ packages:
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
-  resolve@1.22.8:
-    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
     hasBin: true
 
   restore-cursor@3.1.0:
@@ -3916,18 +3802,14 @@ packages:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
 
-  socks-proxy-agent@8.0.4:
-    resolution: {integrity: sha512-GNAq/eg8Udq2x0eNiFkr9gRg5bA7PXEWagQdeRX4cPSG+X/8V38v637gim9bjFptMk1QWsCTr0ttrJEiXbNnRw==}
+  socks-proxy-agent@8.0.5:
+    resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==}
     engines: {node: '>= 14'}
 
   socks@2.8.3:
     resolution: {integrity: sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==}
     engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
 
-  source-map-js@1.2.0:
-    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
-    engines: {node: '>=0.10.0'}
-
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -4039,8 +3921,8 @@ packages:
   stubborn-fs@1.2.5:
     resolution: {integrity: sha512-H2N9c26eXjzL/S/K+i/RHHcFanE74dptvvjM8iwzwbVcWY/zjBbgRqF3K0DY4+OD+uTTASTBvDoxPDaPN02D7g==}
 
-  superjson@2.2.1:
-    resolution: {integrity: sha512-8iGv75BYOa0xRJHK5vRLEjE2H/i4lulTjzpUXic3Eg8akftYjkmQDa8JARQ42rlczXyFR3IeRoeFCc7RxHsYZA==}
+  superjson@2.2.2:
+    resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==}
     engines: {node: '>=16'}
 
   supports-color@7.2.0:
@@ -4064,10 +3946,6 @@ packages:
     resolution: {integrity: sha512-Vhf+bUa//YSTYKseDiiEuQmhGCoIF3CVBhunm3r/DQnYiGT4JssmnKQc44BIyOZRK2pKjXXAgbhfmbeoC9CJpA==}
     engines: {node: '>=12.20'}
 
-  synckit@0.9.1:
-    resolution: {integrity: sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-
   synckit@0.9.2:
     resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -4128,6 +4006,19 @@ packages:
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
+  troika-three-text@0.52.3:
+    resolution: {integrity: sha512-jLhiwgV8kEkwWjvK12f2fHVpbOC75p7SgPQ0cgcz+IMtN5Bdyg4EuFdwuTOVu9ga8UeYdKBpzd1AxviyixtYTQ==}
+    peerDependencies:
+      three: '>=0.125.0'
+
+  troika-three-utils@0.52.0:
+    resolution: {integrity: sha512-00oxqIIehtEKInOTQekgyknBuRUj1POfOUE2q1OmL+Xlpp4gIu+S0oA0schTyXsDS4d9DkR04iqCdD40rF5R6w==}
+    peerDependencies:
+      three: '>=0.125.0'
+
+  troika-worker-utils@0.52.0:
+    resolution: {integrity: sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==}
+
   ts-api-utils@1.4.0:
     resolution: {integrity: sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==}
     engines: {node: '>=16'}
@@ -4140,9 +4031,6 @@ packages:
     peerDependencies:
       typescript: '>=4.2.0'
 
-  tslib@2.7.0:
-    resolution: {integrity: sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==}
-
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -4279,8 +4167,8 @@ packages:
     resolution: {integrity: sha512-5liCNPuJW8dqh3+DM6uNM2EI3MLLpCKp/KY+9pB5M2S2SR2qvvDHhKgBOaTWEbZTAws3CXfB0rKTIolWKL05VQ==}
     engines: {node: '>=14.0.0'}
 
-  update-browserslist-db@1.1.0:
-    resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==}
+  update-browserslist-db@1.1.1:
+    resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -4473,6 +4361,9 @@ packages:
   wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
 
+  webgl-sdf-generator@1.1.1:
+    resolution: {integrity: sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==}
+
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
@@ -4536,10 +4427,6 @@ packages:
     resolution: {integrity: sha512-4wZWvE398hCP7O8n3nXKu/vdq1HcH01ixYlCREaJL5NUMwQ0g3MaGFUBNSlmBtKmhbtVG/Cm6lyYmSVTEVil8A==}
     engines: {node: ^14.17.0 || >=16.0.0}
 
-  yaml@2.3.2:
-    resolution: {integrity: sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==}
-    engines: {node: '>= 14'}
-
   yaml@2.6.1:
     resolution: {integrity: sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==}
     engines: {node: '>= 14'}
@@ -4698,7 +4585,7 @@ snapshots:
 
   '@ampproject/remapping@2.3.0':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
   '@antfu/eslint-config@3.6.2(@typescript-eslint/utils@8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2))(@vue/compiler-sfc@3.5.13)(eslint-plugin-format@0.1.2(eslint@9.16.0(jiti@2.4.1)))(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)':
@@ -4706,7 +4593,7 @@ snapshots:
       '@antfu/install-pkg': 0.4.1
       '@clack/prompts': 0.7.0
       '@eslint-community/eslint-plugin-eslint-comments': 4.4.0(eslint@9.16.0(jiti@2.4.1))
-      '@eslint/markdown': 6.1.1
+      '@eslint/markdown': 6.2.1
       '@stylistic/eslint-plugin': 2.8.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)
       '@typescript-eslint/eslint-plugin': 8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2))(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)
       '@typescript-eslint/parser': 8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)
@@ -4730,9 +4617,9 @@ snapshots:
       eslint-plugin-vue: 9.32.0(eslint@9.16.0(jiti@2.4.1))
       eslint-plugin-yml: 1.14.0(eslint@9.16.0(jiti@2.4.1))
       eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.5.13)(eslint@9.16.0(jiti@2.4.1))
-      globals: 15.9.0
+      globals: 15.12.0
       jsonc-eslint-parser: 2.4.0
-      local-pkg: 0.5.0
+      local-pkg: 0.5.1
       parse-gitignore: 2.0.0
       picocolors: 1.1.0
       toml-eslint-parser: 0.10.0
@@ -5049,7 +4936,7 @@ snapshots:
     dependencies:
       escape-string-regexp: 4.0.0
       eslint: 9.16.0(jiti@2.4.1)
-      ignore: 5.2.4
+      ignore: 5.3.2
 
   '@eslint-community/eslint-utils@4.4.0(eslint@9.16.0(jiti@2.4.1))':
     dependencies:
@@ -5069,8 +4956,8 @@ snapshots:
 
   '@eslint/config-array@0.19.0':
     dependencies:
-      '@eslint/object-schema': 2.1.4
-      debug: 4.3.7
+      '@eslint/object-schema': 2.1.5
+      debug: 4.3.4
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -5083,7 +4970,7 @@ snapshots:
       debug: 4.3.7
       espree: 10.3.0
       globals: 14.0.0
-      ignore: 5.3.2
+      ignore: 5.2.4
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       minimatch: 3.1.2
@@ -5093,16 +4980,16 @@ snapshots:
 
   '@eslint/js@9.16.0': {}
 
-  '@eslint/markdown@6.1.1':
+  '@eslint/markdown@6.2.1':
     dependencies:
       '@eslint/plugin-kit': 0.2.3
-      mdast-util-from-markdown: 2.0.1
+      mdast-util-from-markdown: 2.0.2
       mdast-util-gfm: 3.0.0
       micromark-extension-gfm: 3.0.0
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/object-schema@2.1.4': {}
+  '@eslint/object-schema@2.1.5': {}
 
   '@eslint/plugin-kit@0.2.3':
     dependencies:
@@ -5145,7 +5032,7 @@ snapshots:
 
   '@inquirer/figures@1.0.8': {}
 
-  '@jridgewell/gen-mapping@0.3.5':
+  '@jridgewell/gen-mapping@0.3.8':
     dependencies:
       '@jridgewell/set-array': 1.2.1
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -5181,7 +5068,7 @@ snapshots:
       '@rushstack/ts-command-line': 4.23.1(@types/node@22.10.1)
       lodash: 4.17.21
       minimatch: 3.0.8
-      resolve: 1.22.8
+      resolve: 1.22.10
       semver: 7.5.4
       source-map: 0.6.1
       typescript: 5.4.2
@@ -5193,7 +5080,7 @@ snapshots:
       '@microsoft/tsdoc': 0.15.1
       ajv: 8.12.0
       jju: 1.4.0
-      resolve: 1.22.8
+      resolve: 1.22.10
 
   '@microsoft/tsdoc@0.15.1': {}
 
@@ -5207,7 +5094,7 @@ snapshots:
   '@nodelib/fs.walk@1.2.8':
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.17.1
+      fastq: 1.18.0
 
   '@octokit/auth-token@4.0.0': {}
 
@@ -5424,14 +5311,14 @@ snapshots:
       fs-extra: 7.0.1
       import-lazy: 4.0.0
       jju: 1.4.0
-      resolve: 1.22.8
+      resolve: 1.22.10
       semver: 7.5.4
     optionalDependencies:
       '@types/node': 22.10.1
 
   '@rushstack/rig-package@0.5.3':
     dependencies:
-      resolve: 1.22.8
+      resolve: 1.22.10
       strip-json-comments: 3.1.1
 
   '@rushstack/terminal@0.14.3(@types/node@22.10.1)':
@@ -5457,7 +5344,7 @@ snapshots:
       '@shikijs/types': 1.24.0
       '@shikijs/vscode-textmate': 9.3.0
       '@types/hast': 3.0.4
-      hast-util-to-html: 9.0.3
+      hast-util-to-html: 9.0.4
 
   '@shikijs/engine-javascript@1.24.0':
     dependencies:
@@ -5595,7 +5482,7 @@ snapshots:
     dependencies:
       '@tweenjs/tween.js': 23.1.3
       '@types/stats.js': 0.17.3
-      '@types/webxr': 0.5.20
+      '@types/webxr': 0.5.7
       '@webgpu/types': 0.1.51
       fflate: 0.8.2
       meshoptimizer: 0.18.1
@@ -5604,8 +5491,6 @@ snapshots:
 
   '@types/web-bluetooth@0.0.20': {}
 
-  '@types/webxr@0.5.20': {}
-
   '@types/webxr@0.5.7': {}
 
   '@typescript-eslint/eslint-plugin@8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2))(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)':
@@ -5714,7 +5599,7 @@ snapshots:
       cac: 6.7.14
       chokidar: 3.6.0
       colorette: 2.0.20
-      consola: 3.2.3
+      consola: 3.3.3
       magic-string: 0.30.14
       pathe: 1.1.2
       perfect-debounce: 1.0.0
@@ -5753,7 +5638,7 @@ snapshots:
       '@unocss/config': 0.65.1
       '@unocss/core': 0.65.1
       '@unocss/rule-utils': 0.65.1
-      css-tree: 3.0.1
+      css-tree: 3.1.0
       postcss: 8.4.49
       tinyglobby: 0.2.10
     transitivePeerDependencies:
@@ -5823,7 +5708,7 @@ snapshots:
     dependencies:
       '@unocss/core': 0.65.1
       '@unocss/rule-utils': 0.65.1
-      css-tree: 3.0.1
+      css-tree: 3.1.0
 
   '@unocss/transformer-variant-group@0.65.1':
     dependencies:
@@ -5874,14 +5759,6 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
-  '@vue/compiler-core@3.5.12':
-    dependencies:
-      '@babel/parser': 7.26.2
-      '@vue/shared': 3.5.12
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.2.1
-
   '@vue/compiler-core@3.5.13':
     dependencies:
       '@babel/parser': 7.26.2
@@ -5890,11 +5767,6 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.5.12':
-    dependencies:
-      '@vue/compiler-core': 3.5.12
-      '@vue/shared': 3.5.12
-
   '@vue/compiler-dom@3.5.13':
     dependencies:
       '@vue/compiler-core': 3.5.13
@@ -5936,7 +5808,7 @@ snapshots:
       mitt: 3.0.1
       perfect-debounce: 1.0.0
       speakingurl: 14.0.1
-      superjson: 2.2.1
+      superjson: 2.2.2
 
   '@vue/devtools-shared@7.6.7':
     dependencies:
@@ -5958,11 +5830,11 @@ snapshots:
   '@vue/language-core@2.1.6(typescript@5.7.2)':
     dependencies:
       '@volar/language-core': 2.4.10
-      '@vue/compiler-dom': 3.5.12
+      '@vue/compiler-dom': 3.5.13
       '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.5.12
+      '@vue/shared': 3.5.13
       computeds: 0.0.1
-      minimatch: 9.0.3
+      minimatch: 9.0.5
       muggle-string: 0.4.1
       path-browserify: 1.0.1
     optionalDependencies:
@@ -5990,8 +5862,6 @@ snapshots:
       '@vue/shared': 3.5.13
       vue: 3.5.13(typescript@5.7.2)
 
-  '@vue/shared@3.5.12': {}
-
   '@vue/shared@3.5.13': {}
 
   '@vueuse/components@10.11.1(vue@3.5.13(typescript@5.7.2))':
@@ -6075,8 +5945,6 @@ snapshots:
     dependencies:
       acorn: 8.14.0
 
-  acorn@8.12.1: {}
-
   acorn@8.14.0: {}
 
   add-stream@1.0.0: {}
@@ -6087,6 +5955,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  agent-base@7.1.3: {}
+
   ajv-draft-04@1.0.0(ajv@8.13.0):
     optionalDependencies:
       ajv: 8.13.0
@@ -6188,6 +6058,10 @@ snapshots:
 
   before-after-hook@2.2.3: {}
 
+  bidi-js@1.0.3:
+    dependencies:
+      require-from-string: 2.0.2
+
   binary-extensions@2.3.0: {}
 
   birpc@0.2.19: {}
@@ -6224,12 +6098,12 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  browserslist@4.23.3:
+  browserslist@4.24.3:
     dependencies:
-      caniuse-lite: 1.0.30001658
-      electron-to-chromium: 1.5.17
-      node-releases: 2.0.18
-      update-browserslist-db: 1.1.0(browserslist@4.23.3)
+      caniuse-lite: 1.0.30001690
+      electron-to-chromium: 1.5.76
+      node-releases: 2.0.19
+      update-browserslist-db: 1.1.1(browserslist@4.24.3)
 
   buffer-from@1.1.2: {}
 
@@ -6244,7 +6118,7 @@ snapshots:
     dependencies:
       run-applescript: 7.0.0
 
-  bundle-require@5.0.0(esbuild@0.23.1):
+  bundle-require@5.1.0(esbuild@0.23.1):
     dependencies:
       esbuild: 0.23.1
       load-tsconfig: 0.2.5
@@ -6259,7 +6133,7 @@ snapshots:
     dependencies:
       three: 0.171.0
 
-  caniuse-lite@1.0.30001658: {}
+  caniuse-lite@1.0.30001690: {}
 
   ccount@2.0.1: {}
 
@@ -6350,8 +6224,6 @@ snapshots:
       readable-stream: 3.6.2
       typedarray: 0.0.6
 
-  confbox@0.1.7: {}
-
   confbox@0.1.8: {}
 
   config-chain@1.1.13:
@@ -6366,7 +6238,7 @@ snapshots:
       graceful-fs: 4.2.11
       xdg-basedir: 5.1.0
 
-  consola@3.2.3: {}
+  consola@3.3.3: {}
 
   conventional-changelog-angular@8.0.0:
     dependencies:
@@ -6388,8 +6260,8 @@ snapshots:
       conventional-commits-parser: 6.0.0
       git-raw-commits: 5.0.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0)
       git-semver-tags: 8.0.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0)
-      hosted-git-info: 7.0.1
-      normalize-package-data: 6.0.0
+      hosted-git-info: 7.0.2
+      normalize-package-data: 6.0.2
       read-package-up: 11.0.0
       read-pkg: 9.0.1
     transitivePeerDependencies:
@@ -6451,9 +6323,9 @@ snapshots:
     dependencies:
       is-what: 4.1.16
 
-  core-js-compat@3.38.1:
+  core-js-compat@3.39.0:
     dependencies:
-      browserslist: 4.23.3
+      browserslist: 4.24.3
 
   core-util-is@1.0.3: {}
 
@@ -6477,7 +6349,7 @@ snapshots:
       boolbase: 1.0.0
       css-what: 6.1.0
       domhandler: 5.0.3
-      domutils: 3.1.0
+      domutils: 3.2.1
       nth-check: 2.1.1
 
   css-tree@2.2.1:
@@ -6488,11 +6360,11 @@ snapshots:
   css-tree@2.3.1:
     dependencies:
       mdn-data: 2.0.30
-      source-map-js: 1.2.0
+      source-map-js: 1.2.1
 
-  css-tree@3.0.1:
+  css-tree@3.1.0:
     dependencies:
-      mdn-data: 2.12.1
+      mdn-data: 2.12.2
       source-map-js: 1.2.1
 
   css-what@6.1.0: {}
@@ -6578,7 +6450,7 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
-  domutils@3.1.0:
+  domutils@3.2.1:
     dependencies:
       dom-serializer: 2.0.0
       domelementtype: 2.3.0
@@ -6596,7 +6468,7 @@ snapshots:
 
   duplexer@0.1.2: {}
 
-  electron-to-chromium@1.5.17: {}
+  electron-to-chromium@1.5.76: {}
 
   emoji-regex-xs@1.0.0: {}
 
@@ -6604,7 +6476,7 @@ snapshots:
 
   emoji-regex@8.0.0: {}
 
-  enhanced-resolve@5.17.1:
+  enhanced-resolve@5.18.0:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.2.1
@@ -6617,7 +6489,7 @@ snapshots:
     dependencies:
       is-arrayish: 0.2.1
 
-  es-module-lexer@1.5.4: {}
+  es-module-lexer@1.6.0: {}
 
   esbuild@0.21.5:
     optionalDependencies:
@@ -6699,8 +6571,6 @@ snapshots:
       '@esbuild/win32-ia32': 0.24.0
       '@esbuild/win32-x64': 0.24.0
 
-  escalade@3.1.1: {}
-
   escalade@3.2.0: {}
 
   escape-goat@4.0.0: {}
@@ -6743,7 +6613,7 @@ snapshots:
     dependencies:
       debug: 3.2.7
       is-core-module: 2.15.1
-      resolve: 1.22.8
+      resolve: 1.22.10
     transitivePeerDependencies:
       - supports-color
 
@@ -6778,8 +6648,8 @@ snapshots:
       eslint: 9.16.0(jiti@2.4.1)
       eslint-formatting-reporter: 0.0.0(eslint@9.16.0(jiti@2.4.1))
       eslint-parser-plain: 0.1.0
-      prettier: 3.3.3
-      synckit: 0.9.1
+      prettier: 3.4.2
+      synckit: 0.9.2
 
   eslint-plugin-import-x@4.2.1(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2):
     dependencies:
@@ -6788,12 +6658,12 @@ snapshots:
       doctrine: 3.0.0
       eslint: 9.16.0(jiti@2.4.1)
       eslint-import-resolver-node: 0.3.9
-      get-tsconfig: 4.8.0
+      get-tsconfig: 4.8.1
       is-glob: 4.0.3
       minimatch: 9.0.5
       semver: 7.6.3
       stable-hash: 0.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -6808,7 +6678,7 @@ snapshots:
       eslint: 9.16.0(jiti@2.4.1)
       espree: 10.3.0
       esquery: 1.6.0
-      parse-imports: 2.1.1
+      parse-imports: 2.2.1
       semver: 7.6.3
       spdx-expression-parse: 4.0.0
       synckit: 0.9.2
@@ -6829,10 +6699,10 @@ snapshots:
   eslint-plugin-n@17.10.2(eslint@9.16.0(jiti@2.4.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@9.16.0(jiti@2.4.1))
-      enhanced-resolve: 5.17.1
+      enhanced-resolve: 5.18.0
       eslint: 9.16.0(jiti@2.4.1)
       eslint-plugin-es-x: 7.8.0(eslint@9.16.0(jiti@2.4.1))
-      get-tsconfig: 4.8.0
+      get-tsconfig: 4.8.1
       globals: 15.12.0
       ignore: 5.3.2
       minimatch: 9.0.5
@@ -6880,13 +6750,13 @@ snapshots:
       '@eslint-community/eslint-utils': 4.4.1(eslint@9.16.0(jiti@2.4.1))
       ci-info: 4.1.0
       clean-regexp: 1.0.0
-      core-js-compat: 3.38.1
+      core-js-compat: 3.39.0
       eslint: 9.16.0(jiti@2.4.1)
       esquery: 1.6.0
       globals: 15.12.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.1
-      jsesc: 3.0.2
+      jsesc: 3.1.0
       pluralize: 8.0.0
       read-pkg-up: 7.0.1
       regexp-tree: 0.1.27
@@ -7017,7 +6887,7 @@ snapshots:
 
   estree-walker@3.0.3:
     dependencies:
-      '@types/estree': 1.0.6
+      '@types/estree': 1.0.4
 
   esutils@2.0.3: {}
 
@@ -7067,7 +6937,7 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
-  fastq@1.17.1:
+  fastq@1.18.0:
     dependencies:
       reusify: 1.0.4
 
@@ -7131,10 +7001,6 @@ snapshots:
 
   get-stream@8.0.1: {}
 
-  get-tsconfig@4.8.0:
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-
   get-tsconfig@4.8.1:
     dependencies:
       resolve-pkg-maps: 1.0.0
@@ -7201,8 +7067,6 @@ snapshots:
 
   globals@15.12.0: {}
 
-  globals@15.9.0: {}
-
   globby@14.0.2:
     dependencies:
       '@sindresorhus/merge-streams': 2.3.0
@@ -7243,15 +7107,11 @@ snapshots:
 
   has-flag@4.0.0: {}
 
-  hasown@2.0.0:
-    dependencies:
-      function-bind: 1.1.2
-
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
 
-  hast-util-to-html@9.0.3:
+  hast-util-to-html@9.0.4:
     dependencies:
       '@types/hast': 3.0.4
       '@types/unist': 3.0.3
@@ -7275,13 +7135,9 @@ snapshots:
 
   hosted-git-info@2.8.9: {}
 
-  hosted-git-info@7.0.1:
-    dependencies:
-      lru-cache: 10.0.1
-
   hosted-git-info@7.0.2:
     dependencies:
-      lru-cache: 10.4.3
+      lru-cache: 10.0.1
 
   html-void-elements@3.0.0: {}
 
@@ -7292,9 +7148,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  https-proxy-agent@7.0.5:
+  https-proxy-agent@7.0.6:
     dependencies:
-      agent-base: 7.1.1
+      agent-base: 7.1.3
       debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
@@ -7322,7 +7178,7 @@ snapshots:
 
   importx@0.4.4:
     dependencies:
-      bundle-require: 5.0.0(esbuild@0.23.1)
+      bundle-require: 5.1.0(esbuild@0.23.1)
       debug: 4.3.7
       esbuild: 0.23.1
       jiti: 2.0.0-beta.3
@@ -7381,11 +7237,11 @@ snapshots:
     dependencies:
       builtin-modules: 3.3.0
 
-  is-core-module@2.13.1:
+  is-core-module@2.15.1:
     dependencies:
-      hasown: 2.0.0
+      hasown: 2.0.2
 
-  is-core-module@2.15.1:
+  is-core-module@2.16.1:
     dependencies:
       hasown: 2.0.2
 
@@ -7483,7 +7339,7 @@ snapshots:
 
   jsesc@0.5.0: {}
 
-  jsesc@3.0.2: {}
+  jsesc@3.1.0: {}
 
   json-buffer@3.0.1: {}
 
@@ -7497,7 +7353,7 @@ snapshots:
 
   jsonc-eslint-parser@2.4.0:
     dependencies:
-      acorn: 8.12.1
+      acorn: 8.14.0
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
       semver: 7.6.3
@@ -7512,7 +7368,7 @@ snapshots:
 
   kolorist@1.8.0: {}
 
-  ky@1.7.2: {}
+  ky@1.7.4: {}
 
   latest-version@9.0.0:
     dependencies:
@@ -7531,15 +7387,10 @@ snapshots:
 
   load-tsconfig@0.2.5: {}
 
-  local-pkg@0.5.0:
-    dependencies:
-      mlly: 1.7.1
-      pkg-types: 1.2.0
-
   local-pkg@0.5.1:
     dependencies:
       mlly: 1.7.3
-      pkg-types: 1.2.1
+      pkg-types: 1.3.0
 
   locate-path@5.0.0:
     dependencies:
@@ -7577,8 +7428,6 @@ snapshots:
 
   lru-cache@10.0.1: {}
 
-  lru-cache@10.4.3: {}
-
   lru-cache@6.0.0:
     dependencies:
       yallist: 4.0.0
@@ -7608,30 +7457,13 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
-  mdast-util-find-and-replace@3.0.1:
+  mdast-util-find-and-replace@3.0.2:
     dependencies:
       '@types/mdast': 4.0.4
       escape-string-regexp: 5.0.0
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
 
-  mdast-util-from-markdown@2.0.1:
-    dependencies:
-      '@types/mdast': 4.0.4
-      '@types/unist': 3.0.3
-      decode-named-character-reference: 1.0.2
-      devlop: 1.1.0
-      mdast-util-to-string: 4.0.0
-      micromark: 4.0.0
-      micromark-util-decode-numeric-character-reference: 2.0.1
-      micromark-util-decode-string: 2.0.0
-      micromark-util-normalize-identifier: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
-      unist-util-stringify-position: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   mdast-util-from-markdown@2.0.2:
     dependencies:
       '@types/mdast': 4.0.4
@@ -7654,7 +7486,7 @@ snapshots:
       '@types/mdast': 4.0.4
       ccount: 2.0.1
       devlop: 1.1.0
-      mdast-util-find-and-replace: 3.0.1
+      mdast-util-find-and-replace: 3.0.2
       micromark-util-character: 2.1.1
 
   mdast-util-gfm-footnote@2.0.0:
@@ -7743,7 +7575,7 @@ snapshots:
 
   mdn-data@2.0.30: {}
 
-  mdn-data@2.12.1: {}
+  mdn-data@2.12.2: {}
 
   mdurl@2.0.0: {}
 
@@ -7755,25 +7587,6 @@ snapshots:
 
   meshoptimizer@0.18.1: {}
 
-  micromark-core-commonmark@2.0.1:
-    dependencies:
-      decode-named-character-reference: 1.0.2
-      devlop: 1.1.0
-      micromark-factory-destination: 2.0.0
-      micromark-factory-label: 2.0.0
-      micromark-factory-space: 2.0.1
-      micromark-factory-title: 2.0.0
-      micromark-factory-whitespace: 2.0.0
-      micromark-util-character: 2.1.1
-      micromark-util-chunked: 2.0.0
-      micromark-util-classify-character: 2.0.0
-      micromark-util-html-tag-name: 2.0.0
-      micromark-util-normalize-identifier: 2.0.1
-      micromark-util-resolve-all: 2.0.1
-      micromark-util-subtokenize: 2.0.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.0
-
   micromark-core-commonmark@2.0.2:
     dependencies:
       decode-named-character-reference: 1.0.2
@@ -7851,25 +7664,12 @@ snapshots:
       micromark-util-combine-extensions: 2.0.1
       micromark-util-types: 2.0.1
 
-  micromark-factory-destination@2.0.0:
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.0
-
   micromark-factory-destination@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.1
 
-  micromark-factory-label@2.0.0:
-    dependencies:
-      devlop: 1.1.0
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.0
-
   micromark-factory-label@2.0.1:
     dependencies:
       devlop: 1.1.0
@@ -7877,23 +7677,11 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.1
 
-  micromark-factory-space@2.0.0:
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-types: 2.0.0
-
   micromark-factory-space@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
       micromark-util-types: 2.0.1
 
-  micromark-factory-title@2.0.0:
-    dependencies:
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.0
-
   micromark-factory-title@2.0.1:
     dependencies:
       micromark-factory-space: 2.0.1
@@ -7901,13 +7689,6 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.1
 
-  micromark-factory-whitespace@2.0.0:
-    dependencies:
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.0
-
   micromark-factory-whitespace@2.0.1:
     dependencies:
       micromark-factory-space: 2.0.1
@@ -7915,61 +7696,30 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.1
 
-  micromark-util-character@2.1.0:
-    dependencies:
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.0
-
   micromark-util-character@2.1.1:
     dependencies:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.1
 
-  micromark-util-chunked@2.0.0:
-    dependencies:
-      micromark-util-symbol: 2.0.1
-
   micromark-util-chunked@2.0.1:
     dependencies:
       micromark-util-symbol: 2.0.1
 
-  micromark-util-classify-character@2.0.0:
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.0
-
   micromark-util-classify-character@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.1
 
-  micromark-util-combine-extensions@2.0.0:
-    dependencies:
-      micromark-util-chunked: 2.0.0
-      micromark-util-types: 2.0.0
-
   micromark-util-combine-extensions@2.0.1:
     dependencies:
       micromark-util-chunked: 2.0.1
       micromark-util-types: 2.0.1
 
-  micromark-util-decode-numeric-character-reference@2.0.1:
-    dependencies:
-      micromark-util-symbol: 2.0.1
-
   micromark-util-decode-numeric-character-reference@2.0.2:
     dependencies:
       micromark-util-symbol: 2.0.1
 
-  micromark-util-decode-string@2.0.0:
-    dependencies:
-      decode-named-character-reference: 1.0.2
-      micromark-util-character: 2.1.0
-      micromark-util-decode-numeric-character-reference: 2.0.2
-      micromark-util-symbol: 2.0.1
-
   micromark-util-decode-string@2.0.1:
     dependencies:
       decode-named-character-reference: 1.0.2
@@ -7977,49 +7727,24 @@ snapshots:
       micromark-util-decode-numeric-character-reference: 2.0.2
       micromark-util-symbol: 2.0.1
 
-  micromark-util-encode@2.0.0: {}
-
   micromark-util-encode@2.0.1: {}
 
-  micromark-util-html-tag-name@2.0.0: {}
-
   micromark-util-html-tag-name@2.0.1: {}
 
-  micromark-util-normalize-identifier@2.0.0:
-    dependencies:
-      micromark-util-symbol: 2.0.1
-
   micromark-util-normalize-identifier@2.0.1:
     dependencies:
       micromark-util-symbol: 2.0.1
 
-  micromark-util-resolve-all@2.0.0:
-    dependencies:
-      micromark-util-types: 2.0.0
-
   micromark-util-resolve-all@2.0.1:
     dependencies:
       micromark-util-types: 2.0.1
 
-  micromark-util-sanitize-uri@2.0.0:
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-encode: 2.0.1
-      micromark-util-symbol: 2.0.1
-
   micromark-util-sanitize-uri@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
       micromark-util-encode: 2.0.1
       micromark-util-symbol: 2.0.1
 
-  micromark-util-subtokenize@2.0.1:
-    dependencies:
-      devlop: 1.1.0
-      micromark-util-chunked: 2.0.0
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.0
-
   micromark-util-subtokenize@2.0.2:
     dependencies:
       devlop: 1.1.0
@@ -8027,36 +7752,10 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.1
 
-  micromark-util-symbol@2.0.0: {}
-
   micromark-util-symbol@2.0.1: {}
 
-  micromark-util-types@2.0.0: {}
-
   micromark-util-types@2.0.1: {}
 
-  micromark@4.0.0:
-    dependencies:
-      '@types/debug': 4.1.12
-      debug: 4.3.7
-      decode-named-character-reference: 1.0.2
-      devlop: 1.1.0
-      micromark-core-commonmark: 2.0.1
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-chunked: 2.0.0
-      micromark-util-combine-extensions: 2.0.0
-      micromark-util-decode-numeric-character-reference: 2.0.2
-      micromark-util-encode: 2.0.0
-      micromark-util-normalize-identifier: 2.0.1
-      micromark-util-resolve-all: 2.0.0
-      micromark-util-sanitize-uri: 2.0.0
-      micromark-util-subtokenize: 2.0.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   micromark@4.0.1:
     dependencies:
       '@types/debug': 4.1.12
@@ -8106,10 +7805,6 @@ snapshots:
     dependencies:
       brace-expansion: 1.1.11
 
-  minimatch@9.0.3:
-    dependencies:
-      brace-expansion: 2.0.1
-
   minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.1
@@ -8120,18 +7815,11 @@ snapshots:
 
   mitt@3.0.1: {}
 
-  mlly@1.7.1:
-    dependencies:
-      acorn: 8.12.1
-      pathe: 1.1.2
-      pkg-types: 1.2.1
-      ufo: 1.5.4
-
   mlly@1.7.3:
     dependencies:
       acorn: 8.14.0
       pathe: 1.1.2
-      pkg-types: 1.2.1
+      pkg-types: 1.3.0
       ufo: 1.5.4
 
   mrmime@2.0.0: {}
@@ -8160,22 +7848,15 @@ snapshots:
 
   node-fetch-native@1.6.4: {}
 
-  node-releases@2.0.18: {}
+  node-releases@2.0.19: {}
 
   normalize-package-data@2.5.0:
     dependencies:
       hosted-git-info: 2.8.9
-      resolve: 1.22.8
+      resolve: 1.22.10
       semver: 5.7.2
       validate-npm-package-license: 3.0.4
 
-  normalize-package-data@6.0.0:
-    dependencies:
-      hosted-git-info: 7.0.1
-      is-core-module: 2.13.1
-      semver: 7.6.3
-      validate-npm-package-license: 3.0.4
-
   normalize-package-data@6.0.2:
     dependencies:
       hosted-git-info: 7.0.2
@@ -8297,16 +7978,16 @@ snapshots:
 
   p-try@2.2.0: {}
 
-  pac-proxy-agent@7.0.2:
+  pac-proxy-agent@7.1.0:
     dependencies:
       '@tootallnate/quickjs-emscripten': 0.23.0
-      agent-base: 7.1.1
+      agent-base: 7.1.3
       debug: 4.3.7
       get-uri: 6.0.4
       http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.5
+      https-proxy-agent: 7.0.6
       pac-resolver: 7.0.1
-      socks-proxy-agent: 8.0.4
+      socks-proxy-agent: 8.0.5
     transitivePeerDependencies:
       - supports-color
 
@@ -8317,7 +7998,7 @@ snapshots:
 
   package-json@10.0.1:
     dependencies:
-      ky: 1.7.2
+      ky: 1.7.4
       registry-auth-token: 5.0.3
       registry-url: 6.0.1
       semver: 7.6.3
@@ -8330,9 +8011,9 @@ snapshots:
 
   parse-gitignore@2.0.0: {}
 
-  parse-imports@2.1.1:
+  parse-imports@2.2.1:
     dependencies:
-      es-module-lexer: 1.5.4
+      es-module-lexer: 1.6.0
       slashes: 3.0.12
 
   parse-json@5.2.0:
@@ -8382,13 +8063,7 @@ snapshots:
 
   picomatch@4.0.2: {}
 
-  pkg-types@1.2.0:
-    dependencies:
-      confbox: 0.1.7
-      mlly: 1.7.3
-      pathe: 1.1.2
-
-  pkg-types@1.2.1:
+  pkg-types@1.3.0:
     dependencies:
       confbox: 0.1.8
       mlly: 1.7.3
@@ -8417,7 +8092,7 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier@3.3.3: {}
+  prettier@3.4.2: {}
 
   property-information@6.5.0: {}
 
@@ -8430,11 +8105,11 @@ snapshots:
       agent-base: 7.1.1
       debug: 4.3.7
       http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.5
+      https-proxy-agent: 7.0.6
       lru-cache: 7.18.3
-      pac-proxy-agent: 7.0.2
+      pac-proxy-agent: 7.1.0
       proxy-from-env: 1.1.0
-      socks-proxy-agent: 8.0.4
+      socks-proxy-agent: 8.0.5
     transitivePeerDependencies:
       - supports-color
 
@@ -8505,7 +8180,7 @@ snapshots:
 
   rechoir@0.6.2:
     dependencies:
-      resolve: 1.22.8
+      resolve: 1.22.10
 
   refa@0.12.1:
     dependencies:
@@ -8578,9 +8253,9 @@ snapshots:
 
   resolve-pkg-maps@1.0.0: {}
 
-  resolve@1.22.8:
+  resolve@1.22.10:
     dependencies:
-      is-core-module: 2.15.1
+      is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
@@ -8732,9 +8407,9 @@ snapshots:
 
   smart-buffer@4.2.0: {}
 
-  socks-proxy-agent@8.0.4:
+  socks-proxy-agent@8.0.5:
     dependencies:
-      agent-base: 7.1.1
+      agent-base: 7.1.3
       debug: 4.3.7
       socks: 2.8.3
     transitivePeerDependencies:
@@ -8745,8 +8420,6 @@ snapshots:
       ip-address: 9.0.5
       smart-buffer: 4.2.0
 
-  source-map-js@1.2.0: {}
-
   source-map-js@1.2.1: {}
 
   source-map@0.6.1: {}
@@ -8842,7 +8515,7 @@ snapshots:
 
   stubborn-fs@1.2.5: {}
 
-  superjson@2.2.1:
+  superjson@2.2.2:
     dependencies:
       copy-anything: 3.0.5
 
@@ -8864,17 +8537,12 @@ snapshots:
       css-tree: 2.3.1
       css-what: 6.1.0
       csso: 5.0.5
-      picocolors: 1.1.0
+      picocolors: 1.1.1
 
   synckit@0.6.2:
     dependencies:
       tslib: 2.8.1
 
-  synckit@0.9.1:
-    dependencies:
-      '@pkgr/core': 0.1.1
-      tslib: 2.7.0
-
   synckit@0.9.2:
     dependencies:
       '@pkgr/core': 0.1.1
@@ -8932,6 +8600,20 @@ snapshots:
 
   trim-lines@3.0.1: {}
 
+  troika-three-text@0.52.3(three@0.171.0):
+    dependencies:
+      bidi-js: 1.0.3
+      three: 0.171.0
+      troika-three-utils: 0.52.0(three@0.171.0)
+      troika-worker-utils: 0.52.0
+      webgl-sdf-generator: 1.1.1
+
+  troika-three-utils@0.52.0(three@0.171.0):
+    dependencies:
+      three: 0.171.0
+
+  troika-worker-utils@0.52.0: {}
+
   ts-api-utils@1.4.0(typescript@5.7.2):
     dependencies:
       typescript: 5.7.2
@@ -8940,8 +8622,6 @@ snapshots:
     dependencies:
       typescript: 5.7.2
 
-  tslib@2.7.0: {}
-
   tslib@2.8.1: {}
 
   tsx@4.19.2:
@@ -9003,7 +8683,7 @@ snapshots:
       mlly: 1.7.3
       pathe: 1.1.2
       picomatch: 4.0.2
-      pkg-types: 1.2.1
+      pkg-types: 1.3.0
       scule: 1.3.0
       strip-literal: 2.1.1
       tinyglobby: 0.2.10
@@ -9104,9 +8784,9 @@ snapshots:
       acorn: 8.14.0
       webpack-virtual-modules: 0.6.2
 
-  update-browserslist-db@1.1.0(browserslist@4.23.3):
+  update-browserslist-db@1.1.1(browserslist@4.24.3):
     dependencies:
-      browserslist: 4.23.3
+      browserslist: 4.24.3
       escalade: 3.2.0
       picocolors: 1.1.1
 
@@ -9161,7 +8841,7 @@ snapshots:
       compare-versions: 6.1.1
       debug: 4.3.7
       kolorist: 1.8.0
-      local-pkg: 0.5.0
+      local-pkg: 0.5.1
       magic-string: 0.30.12
       typescript: 5.7.2
     optionalDependencies:
@@ -9308,6 +8988,8 @@ snapshots:
     dependencies:
       defaults: 1.0.4
 
+  webgl-sdf-generator@1.1.1: {}
+
   webpack-virtual-modules@0.6.2: {}
 
   when-exit@2.1.3: {}
@@ -9362,19 +9044,16 @@ snapshots:
     dependencies:
       eslint-visitor-keys: 3.4.3
       lodash: 4.17.21
-      yaml: 2.3.2
+      yaml: 2.6.1
 
-  yaml@2.3.2: {}
-
-  yaml@2.6.1:
-    optional: true
+  yaml@2.6.1: {}
 
   yargs-parser@21.1.1: {}
 
   yargs@17.7.2:
     dependencies:
       cliui: 8.0.1
-      escalade: 3.1.1
+      escalade: 3.2.0
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3
diff --git a/src/core/abstractions/MarchingCubes/MarchingCube.vue b/src/core/abstractions/MarchingCubes/MarchingCube.vue
new file mode 100644
index 000000000..751d2aea5
--- /dev/null
+++ b/src/core/abstractions/MarchingCubes/MarchingCube.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useLoop } from '@tresjs/core'
+import { computed, inject, shallowRef } from 'vue'
+import { Color, type ColorRepresentation, Vector3 } from 'three'
+import type { MarchingCubesApi } from './MarchingCubes.vue'
+import { MARCHING_CUBES_PROVIDE_KEY } from './const'
+
+interface MarchingCubeProps {
+  strength?: number
+  subtract?: number
+  color?: ColorRepresentation
+}
+
+const props = withDefaults(defineProps<MarchingCubeProps>(), {
+  strength: 0.5,
+  subtract: 12,
+})
+
+const { parent } = inject(MARCHING_CUBES_PROVIDE_KEY) as MarchingCubesApi
+const cubeRef = shallowRef()
+const vec = new Vector3()
+const color = computed(() => new Color(props.color))
+
+useLoop().onBeforeRender(() => {
+  if (!parent.value || !cubeRef.value) { return }
+  cubeRef.value.getWorldPosition(vec)
+  parent.value.addBall(0.5 + vec.x * 0.5, 0.5 + vec.y * 0.5, 0.5 + vec.z * 0.5, props.strength, props.subtract, color.value)
+})
+
+defineExpose({ instance: cubeRef })
+</script>
+
+<template>
+  <TresGroup ref="cubeRef" />
+</template>
diff --git a/src/core/abstractions/MarchingCubes/MarchingCubes.vue b/src/core/abstractions/MarchingCubes/MarchingCubes.vue
new file mode 100644
index 000000000..e42ea4ab2
--- /dev/null
+++ b/src/core/abstractions/MarchingCubes/MarchingCubes.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { MeshBasicMaterial } from 'three'
+import { MarchingCubes as MarchingCubesImpl } from 'three-stdlib'
+import { computed, onUnmounted, provide } from 'vue'
+import { useLoop } from '@tresjs/core'
+import { MARCHING_CUBES_PROVIDE_KEY } from './const'
+
+export interface MarchingCubesProps {
+  resolution?: number
+  maxPolyCount?: number
+  enableUvs?: boolean
+  enableColors?: boolean
+}
+
+const props = withDefaults(defineProps<MarchingCubesProps>(), {
+  resolution: 28,
+  maxPolyCount: 10000,
+  enableUvs: false,
+  enableColors: false,
+})
+
+const defaultMaterial = new MeshBasicMaterial()
+const marchingCubes = computed(() => new MarchingCubesImpl(props.resolution, defaultMaterial, props.enableUvs, props.enableColors, props.maxPolyCount))
+const api = { parent: marchingCubes }
+
+export type MarchingCubesApi = typeof api
+
+provide(MARCHING_CUBES_PROVIDE_KEY, api)
+
+marchingCubes.value.reset()
+
+useLoop().onBeforeRender(() => {
+  marchingCubes.value.update()
+  marchingCubes.value.reset()
+})
+
+onUnmounted(() => { defaultMaterial.dispose() })
+
+defineExpose({ instance: marchingCubes })
+</script>
+
+<template>
+  <primitive :object="marchingCubes">
+    <slot></slot>
+  </primitive>
+</template>
diff --git a/src/core/abstractions/MarchingCubes/MarchingPlane.vue b/src/core/abstractions/MarchingCubes/MarchingPlane.vue
new file mode 100644
index 000000000..aa257db6f
--- /dev/null
+++ b/src/core/abstractions/MarchingCubes/MarchingPlane.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue'
+import { MARCHING_CUBES_PROVIDE_KEY } from './const'
+import type { MarchingCubesApi } from './MarchingCubes.vue'
+import { useLoop } from '@tresjs/core'
+
+interface MarchingPlaneProps {
+  planeType?: 'x' | 'y' | 'z'
+  strength?: number
+  subtract?: number
+}
+
+const props = withDefaults(defineProps<MarchingPlaneProps>(), {
+  planeType: 'x',
+  strength: 0.5,
+  subtract: 12,
+})
+
+const { parent } = inject(MARCHING_CUBES_PROVIDE_KEY) as MarchingCubesApi
+const wallRef = ref()
+const planeType = computed(
+  () => (props.planeType === 'x' ? 'addPlaneX' : props.planeType === 'y' ? 'addPlaneY' : 'addPlaneZ'),
+)
+
+useLoop().onBeforeRender(() => {
+  if (!parent.value || !wallRef.value) { return }
+  parent.value[planeType.value](props.strength, props.subtract)
+})
+</script>
+
+<template>
+  <TresGroup ref="wallRef" />
+</template>
diff --git a/src/core/abstractions/MarchingCubes/const.ts b/src/core/abstractions/MarchingCubes/const.ts
new file mode 100644
index 000000000..848e6ec7c
--- /dev/null
+++ b/src/core/abstractions/MarchingCubes/const.ts
@@ -0,0 +1,3 @@
+const MARCHING_CUBES_PROVIDE_KEY = Symbol('marchingCubes')
+
+export { MARCHING_CUBES_PROVIDE_KEY }
diff --git a/src/core/abstractions/TextTroika.vue b/src/core/abstractions/TextTroika.vue
new file mode 100644
index 000000000..2f059895b
--- /dev/null
+++ b/src/core/abstractions/TextTroika.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useTres } from '@tresjs/core'
+import type { ColorRepresentation } from 'three'
+// @ts-expect-error troika-three-text has no available types
+import { preloadFont, Text as TextMeshImpl } from 'troika-three-text'
+import { onUnmounted, shallowRef } from 'vue'
+
+interface Props {
+  /* The text to display, default: '' */
+  text?: string
+  characters?: string
+  color?: ColorRepresentation
+  /** Font size, default: 0 */
+  fontSize?: number
+  fontWeight?: number | string
+  fontStyle?: 'italic' | 'normal'
+  maxWidth?: number
+  lineHeight?: number
+  letterSpacing?: number
+  textAlign?: 'left' | 'right' | 'center' | 'justify'
+  font?: string
+  anchorX?: number | 'left' | 'center' | 'right'
+  anchorY?: number | 'top' | 'top-baseline' | 'middle' | 'bottom-baseline' | 'bottom'
+  clipRect?: [number, number, number, number]
+  depthOffset?: number
+  direction?: 'auto' | 'ltr' | 'rtl'
+  overflowWrap?: 'normal' | 'break-word'
+  whiteSpace?: 'normal' | 'overflowWrap' | 'nowrap'
+  outlineWidth?: number | string
+  outlineOffsetX?: number | string
+  outlineOffsetY?: number | string
+  outlineBlur?: number | string
+  outlineColor?: ColorRepresentation
+  outlineOpacity?: number
+  strokeWidth?: number | string
+  strokeColor?: ColorRepresentation
+  strokeOpacity?: number
+  fillOpacity?: number
+  sdfGlyphSize?: number
+  debugSDF?: boolean
+  onSync?: (troika: any) => void
+}
+
+const props = defineProps<Props>()
+
+const invalidate = useTres().invalidate
+const troikaMesh = new TextMeshImpl()
+
+troikaMesh.sync(() => {
+  invalidate()
+  if (props.onSync) { props.onSync(troikaMesh) }
+})
+
+const textRef = shallowRef()
+defineExpose({ instance: textRef })
+
+onUnmounted(() => { troikaMesh.dispose() })
+
+await (() => new Promise((resolve) => { preloadFont({ font: props.font, characters: props.characters, sdfGlyphSize: props.sdfGlyphSize }, resolve) }))
+</script>
+
+<template>
+  <primitive
+    ref="textRef"
+    :object="troikaMesh"
+    v-bind="props"
+  >
+    <slot></slot>
+  </primitive>
+</template>
diff --git a/src/core/abstractions/index.ts b/src/core/abstractions/index.ts
index 2223eb976..e9fe93b00 100644
--- a/src/core/abstractions/index.ts
+++ b/src/core/abstractions/index.ts
@@ -6,12 +6,16 @@ import GradientTexture from './GradientTexture.vue'
 import Image from './Image/component.vue'
 import Lensflare from './Lensflare/component.vue'
 import Levioso from './Levioso.vue'
+import MarchingCube from './MarchingCubes/MarchingCube.vue'
+import MarchingCubes from './MarchingCubes/MarchingCubes.vue'
+import MarchingPlane from './MarchingCubes/MarchingPlane.vue'
 import Mask from './Mask/component.vue'
 import MouseParallax from './MouseParallax.vue'
 import Outline from './Outline/component.vue'
 import PositionalAudio from './PositionalAudio.vue'
 import Reflector from './Reflector.vue'
 import ScreenSpace from './ScreenSpace.vue'
+import TextTroika from './TextTroika.vue'
 import Text3D from './Text3D.vue'
 import { useAnimations } from './useAnimations'
 import { useMask } from './Mask/useMask'
@@ -34,6 +38,9 @@ export {
   Image,
   Lensflare,
   Levioso,
+  MarchingCube,
+  MarchingCubes,
+  MarchingPlane,
   Mask,
   MouseParallax,
   Outline,
@@ -43,6 +50,7 @@ export {
   ScreenSizer,
   ScreenSpace,
   Text3D,
+  TextTroika,
   useAnimations,
   useMask,
 }
diff --git a/src/core/controls/Helper/component.vue b/src/core/controls/Helper/component.vue
new file mode 100644
index 000000000..8e6a00d4f
--- /dev/null
+++ b/src/core/controls/Helper/component.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { Object3D } from 'three'
+import { shallowRef, watchEffect } from 'vue'
+import { useHelper } from './useHelper'
+
+type HelperConstructor = new (...args: any[]) => any
+
+export interface HelperProps {
+  type: HelperConstructor
+  args?: any[]
+}
+
+const props = defineProps<HelperProps>()
+
+const objRef = shallowRef<Object3D>()
+const parentRef = shallowRef<Object3D>()
+
+watchEffect(() => {
+  if (objRef.value && objRef.value.parent) {
+    parentRef.value = objRef.value.parent
+  }
+})
+
+useHelper(parentRef, props.type, ...(props.args) ?? [])
+</script>
+
+<template>
+  <TresObject3D ref="objRef" />
+</template>
diff --git a/src/core/controls/Helper/useHelper.ts b/src/core/controls/Helper/useHelper.ts
new file mode 100644
index 000000000..5814a22e0
--- /dev/null
+++ b/src/core/controls/Helper/useHelper.ts
@@ -0,0 +1,46 @@
+import type { Object3D } from 'three'
+import type { MaybeRefOrGetter } from 'vue'
+import { onBeforeUnmount, shallowRef, toValue, watchEffect } from 'vue'
+import { useLoop, useTres } from '@tresjs/core'
+
+// NOTE: Source
+// https://github.com/pmndrs/drei/blob/master/src/core/Helper.tsx
+
+type HelperType = Object3D & { update: () => void, dispose: () => void }
+type HelperConstructor = new (...args: any[]) => any
+
+export function useHelper<T extends HelperConstructor>(
+  object3D: MaybeRefOrGetter<Object3D | null | undefined | false>,
+  helperConstructor: T,
+  ...args: any[]
+) {
+  const helper = shallowRef<HelperType>()
+  const { scene } = useTres()
+
+  let currentHelper: HelperType = undefined!
+
+  watchEffect(() => {
+    if (object3D && toValue(object3D) && helperConstructor) {
+      // eslint-disable-next-line new-cap
+      helper.value = currentHelper = new helperConstructor(toValue(object3D), ...args)
+    }
+
+    if (currentHelper) {
+      // NOTE: Prevent the helpers from blocking rays
+      currentHelper.traverse(child => (child.raycast = () => null))
+      scene.value.add(currentHelper)
+    }
+  })
+
+  onBeforeUnmount(() => {
+    helper.value = undefined
+    scene.value.remove(currentHelper)
+    currentHelper.dispose?.()
+  })
+
+  useLoop().onBeforeRender(() => {
+    helper.value?.update?.()
+  })
+
+  return helper
+}
diff --git a/src/core/controls/index.ts b/src/core/controls/index.ts
index d803b2af3..07887bf4d 100644
--- a/src/core/controls/index.ts
+++ b/src/core/controls/index.ts
@@ -1,4 +1,5 @@
 import CameraControls, { BaseCameraControls } from './CameraControls.vue'
+import Helper from './Helper/component.vue'
 import KeyboardControls from './KeyboardControls.vue'
 import MapControls from './MapControls.vue'
 import OrbitControls from './OrbitControls.vue'
@@ -9,6 +10,7 @@ import TransformControls from './TransformControls.vue'
 export {
   BaseCameraControls,
   CameraControls,
+  Helper,
   KeyboardControls,
   MapControls,
   OrbitControls,
diff --git a/src/core/materials/index.ts b/src/core/materials/index.ts
index 1b246627f..ab9f7b90d 100644
--- a/src/core/materials/index.ts
+++ b/src/core/materials/index.ts
@@ -4,5 +4,14 @@ import MeshDiscardMaterial from './meshDiscardMaterial/index.vue'
 import MeshGlassMaterial from './meshGlassMaterial/index.vue'
 import MeshReflectionMaterial from './meshReflectionMaterial/index.vue'
 import MeshWobbleMaterial from './meshWobbleMaterial/index.vue'
+import PointMaterial from './pointMaterial/component.vue'
 
-export { CustomShaderMaterial, HolographicMaterial, MeshDiscardMaterial, MeshGlassMaterial, MeshReflectionMaterial, MeshWobbleMaterial }
+export {
+  CustomShaderMaterial,
+  HolographicMaterial,
+  MeshDiscardMaterial,
+  MeshGlassMaterial,
+  MeshReflectionMaterial,
+  MeshWobbleMaterial,
+  PointMaterial,
+}
diff --git a/src/core/materials/pointMaterial/component.vue b/src/core/materials/pointMaterial/component.vue
new file mode 100644
index 000000000..0f3624d36
--- /dev/null
+++ b/src/core/materials/pointMaterial/component.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { onUnmounted, shallowRef, watch } from 'vue'
+import { extend } from '@tresjs/core'
+import { PointMaterial as PointMaterialImpl } from './material'
+
+const props = defineProps<{
+  sizeAttenuation?: boolean
+}>()
+
+extend({ PointMaterial: PointMaterialImpl })
+
+const materialRef = shallowRef(new PointMaterialImpl({ sizeAttenuation: props.sizeAttenuation }))
+
+watch(() => props.sizeAttenuation, () => {
+  // NOTE: sizeAttenuation does not appear to work
+  // reactively without recreating the material.
+  if (materialRef.value) {
+    materialRef.value.dispose()
+  }
+  materialRef.value = new PointMaterialImpl({ sizeAttenuation: props.sizeAttenuation })
+})
+
+onUnmounted(() => {
+  if (materialRef.value && materialRef.value.dispose) {
+    materialRef.value.dispose()
+  }
+})
+
+defineExpose({ instance: materialRef })
+</script>
+
+<template>
+  <primitive :object="materialRef" />
+</template>
diff --git a/src/core/materials/pointMaterial/material.ts b/src/core/materials/pointMaterial/material.ts
new file mode 100644
index 000000000..b9b50ddce
--- /dev/null
+++ b/src/core/materials/pointMaterial/material.ts
@@ -0,0 +1,32 @@
+import { PointsMaterial as PointsMaterialImpl, type PointsMaterialParameters } from 'three'
+
+// NOTE: Source
+// https://github.com/pmndrs/drei/blob/master/src/core/PointMaterial.tsx
+
+const opaque_fragment = 'opaque_fragment'
+
+export class PointMaterial extends PointsMaterialImpl {
+  constructor(props: PointsMaterialParameters) {
+    super(props)
+    this.onBeforeCompile = (shader, renderer) => {
+      const { isWebGL2 } = renderer.capabilities
+      shader.fragmentShader = shader.fragmentShader.replace(
+        `#include <${opaque_fragment}>`,
+        `
+        ${
+          !isWebGL2
+            ? `#extension GL_OES_standard_derivatives : enable\n#include <${opaque_fragment}>`
+            : `#include <${opaque_fragment}>`
+        }
+      vec2 cxy = 2.0 * gl_PointCoord - 1.0;
+      float r = dot(cxy, cxy);
+      float delta = fwidth(r);     
+      float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
+      gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );
+      #include <tonemapping_fragment>
+      #include <colorspace_fragment>
+      `,
+      )
+    }
+  }
+}
diff --git a/src/core/misc/LOD.vue b/src/core/misc/LOD.vue
new file mode 100644
index 000000000..90bbd6932
--- /dev/null
+++ b/src/core/misc/LOD.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { Object3D } from 'three'
+import { LOD } from 'three'
+import { isReactive, onMounted, shallowRef, watch } from 'vue'
+
+interface LODProps {
+  /**
+   * The distances at which to display each level of detail.
+   * There should be one `levels` value for each `LOD` child.
+   */
+  levels: number[]
+  /**
+  * Threshold used to avoid flickering at LOD boundaries, as a fraction of distance
+  * @default 0.0
+  */
+  hysteresis?: number
+}
+
+const props = withDefaults(
+  defineProps<LODProps>(),
+  {
+    hysteresis: 0.0,
+  },
+)
+
+const lodRef = shallowRef(new LOD())
+
+function onChange() {
+  // NOTE: Check validity of `levels`.
+  // It should exist. It should be an array. Every value should be a number.
+  const distances = (props.levels && props.levels.length && props.levels.every(n => typeof n === 'number')) ? [...props.levels] : [1000]
+
+  // NOTE: Add `levels` values if there fewer `levels` values than `children`.
+  while (distances.length < lodRef.value.children.length) {
+    distances.push(Math.abs(distances[distances.length - 1]) * 2)
+  }
+
+  // NOTE: Levels can be in any order, but the THREE implementation doesn't work
+  // work properly unless the levels are pushed in ascending order of `distance`.
+  // So, construct ascending order of `distance`.
+  const levels = [] as { distance: number, hysteresis: number, object: Object3D }[]
+  for (let i = 0; i < lodRef.value.children.length; i++) {
+    const hysteresis = props.hysteresis
+    const distance = distances[i]
+    const object = lodRef.value.children[i]
+    levels.push({ hysteresis, distance, object })
+  }
+  levels.sort((a, b) => a.distance - b.distance)
+
+  // NOTE: Clear the current LOD levels.
+  lodRef.value.levels.length = 0
+
+  // NOTE: Push levels in ascending order of `distance`.
+  levels.forEach(level => lodRef.value.levels.push(level))
+}
+
+if (isReactive(props.levels)) {
+  watch(() => props.levels, onChange)
+}
+
+if (isReactive(props.hysteresis)) {
+  watch(() => props.hysteresis, onChange)
+}
+
+onMounted(onChange)
+
+defineExpose({
+  instance: lodRef,
+})
+</script>
+
+<template>
+  <TresLOD ref="lodRef">
+    <slot></slot>
+  </TresLOD>
+</template>
diff --git a/src/core/misc/index.ts b/src/core/misc/index.ts
index 1da1623ce..f83c28b57 100644
--- a/src/core/misc/index.ts
+++ b/src/core/misc/index.ts
@@ -1,7 +1,17 @@
 import { BakeShadows } from './BakeShadows'
+import LOD from './LOD.vue'
 import Html from './html/HTML.vue'
 import { Stats } from './Stats'
 import { StatsGl } from './StatsGl'
 import { useGLTFExporter } from './useGLTFExporter'
+import { useIntersect } from './useIntersect'
 
-export { BakeShadows, Html, Stats, StatsGl, useGLTFExporter }
+export {
+  BakeShadows,
+  Html,
+  LOD,
+  Stats,
+  StatsGl,
+  useGLTFExporter,
+  useIntersect,
+}
diff --git a/src/core/misc/useIntersect.ts b/src/core/misc/useIntersect.ts
new file mode 100644
index 000000000..e40ab6cc5
--- /dev/null
+++ b/src/core/misc/useIntersect.ts
@@ -0,0 +1,70 @@
+import { useLoop } from '@tresjs/core'
+import type { Object3D } from 'three'
+import type { Ref } from 'vue'
+import { shallowRef, unref, watch } from 'vue'
+
+// NOTE: Inspiration
+// https://github.com/pmndrs/drei/blob/master/src/core/useIntersect.tsx
+
+type UseIntersectCallback = (isIntersected: boolean) => void
+
+// NOTE: As of this writing, Cientos components
+// use `defineExpose` in this form:
+// defineExpose({ instance: THE_COMPONENT })
+//
+// This means they have to be accessed like
+// `obj.instance`, and not merely `obj`
+interface CientosExposed { instance: Object3D }
+type ObjOrCientosExposed = Object3D | CientosExposed
+function normalizeCientosInstance(obj: ObjOrCientosExposed) {
+  if ('onBeforeRender' in obj && 'onAfterRender' in obj) { return obj }
+  return obj.instance
+}
+
+export function useIntersect<T extends Object3D>(onChange: Ref<UseIntersectCallback> | UseIntersectCallback = () => {}) {
+  const ref = shallowRef<T>()
+  const intersect = shallowRef(false)
+  let _isIntersected = false
+  let _oldIsIntersected = false
+
+  const loop = useLoop()
+
+  function setup(objOrCientosExposed: ObjOrCientosExposed) {
+    const obj = normalizeCientosInstance(objOrCientosExposed)
+
+    let oldOnRender = obj.onBeforeRender
+
+    const { off: off0 } = loop.onBeforeRender(() => {
+      _isIntersected = false
+
+      // NOTE: If the object is inside the frustum, THREE will call onBeforeRender.
+      oldOnRender = obj.onBeforeRender
+      obj.onBeforeRender = () => (_isIntersected = true)
+    })
+
+    const { off: off1 } = loop.onAfterRender(() => {
+      if (_isIntersected !== _oldIsIntersected) {
+        intersect.value = _isIntersected
+        unref(onChange)?.(_isIntersected)
+        _oldIsIntersected = _isIntersected
+      }
+    })
+
+    return () => {
+      off0()
+      off1()
+      obj.onBeforeRender = oldOnRender
+    }
+  }
+
+  let teardown = () => { }
+
+  watch(ref, () => {
+    teardown()
+    if (ref.value) {
+      teardown = setup(ref.value)
+    }
+  })
+
+  return { ref, intersect, off: () => teardown() }
+}
diff --git a/src/core/shapes/CubicBezierLine.vue b/src/core/shapes/CubicBezierLine.vue
new file mode 100644
index 000000000..f03f261b4
--- /dev/null
+++ b/src/core/shapes/CubicBezierLine.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { CubicBezierCurve3, Vector3 } from 'three'
+import Line2 from './Line2.vue'
+import { computed, shallowRef } from 'vue'
+
+interface CubicBezierLineProps {
+  start: Vector3 | [number, number, number]
+  end: Vector3 | [number, number, number]
+  midA: Vector3 | [number, number, number]
+  midB: Vector3 | [number, number, number]
+  segments?: number
+}
+
+const props = withDefaults(defineProps<CubicBezierLineProps>(), {
+  segments: 20,
+})
+
+const points = computed(() => {
+  const startV = props.start instanceof Vector3 ? props.start : new Vector3(...props.start)
+  const endV = props.end instanceof Vector3 ? props.end : new Vector3(...props.end)
+  const midAV = props.midA instanceof Vector3 ? props.midA : new Vector3(...props.midA)
+  const midBV = props.midB instanceof Vector3 ? props.midB : new Vector3(...props.midB)
+  return new CubicBezierCurve3(startV, midAV, midBV, endV).getPoints(props.segments)
+})
+
+const lineRef = shallowRef()
+
+defineExpose({ instance: lineRef })
+</script>
+
+<template>
+  <Line2 ref="lineRef" :points="points" />
+</template>
diff --git a/src/core/shapes/QuadraticBezierLine.vue b/src/core/shapes/QuadraticBezierLine.vue
new file mode 100644
index 000000000..4bc81e495
--- /dev/null
+++ b/src/core/shapes/QuadraticBezierLine.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { QuadraticBezierCurve3, Vector3 } from 'three'
+import Line2 from './Line2.vue'
+import { computed, shallowRef } from 'vue'
+
+interface QuadraticBezierLineProps {
+  start: Vector3 | [number, number, number]
+  end: Vector3 | [number, number, number]
+  mid?: Vector3 | [number, number, number]
+  segments?: number
+}
+
+const props = withDefaults(defineProps<QuadraticBezierLineProps>(), {
+  segments: 20,
+})
+
+const points = computed(() => {
+  const startV = props.start instanceof Vector3 ? props.start : new Vector3(...props.start)
+  const endV = props.end instanceof Vector3 ? props.end : new Vector3(...props.end)
+  const mid = props.mid instanceof Vector3 ? props.mid : (Array.isArray(props.mid) ? new Vector3(...props.mid) : new Vector3(endV.x, startV.y, endV.z))
+  return new QuadraticBezierCurve3(startV, mid, endV).getPoints(props.segments)
+})
+
+const lineRef = shallowRef()
+
+defineExpose({ instance: lineRef })
+</script>
+
+<template>
+  <Line2 ref="lineRef" :points="points" />
+</template>
diff --git a/src/core/shapes/ScreenQuad.vue b/src/core/shapes/ScreenQuad.vue
new file mode 100644
index 000000000..f47a43ceb
--- /dev/null
+++ b/src/core/shapes/ScreenQuad.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+// NOTE:
+// Based on https://github.com/pmndrs/drei/blob/master/src/core/ScreenQuad.tsx
+// reference https://medium.com/@luruke/simple-postprocessing-in-three-js-91936ecadfb7
+// and @gsimone ;)
+import * as THREE from 'three'
+import { shallowRef } from 'vue'
+
+const geometry = new THREE.BufferGeometry()
+const vertices = new Float32Array([-1, -1, 3, -1, -1, 3])
+geometry.boundingSphere = new THREE.Sphere()
+geometry.boundingSphere.set(new THREE.Vector3(), Infinity)
+geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 2))
+
+const meshRef = shallowRef()
+defineExpose({ instance: meshRef })
+</script>
+
+<template>
+  <TresMesh ref="meshRef" :geometry="geometry" :frustum-culled="false">
+    <slot></slot>
+  </TresMesh>
+</template>
diff --git a/src/core/shapes/index.ts b/src/core/shapes/index.ts
index 29635ef34..7ce436748 100644
--- a/src/core/shapes/index.ts
+++ b/src/core/shapes/index.ts
@@ -2,6 +2,8 @@ import Box from './Box.vue'
 import CatmullRomCurve3 from './CatmullRomCurve3.vue'
 import Circle from './Circle.vue'
 import Cone from './Cone.vue'
+import QuadraticBezierLine from './QuadraticBezierLine.vue'
+import CubicBezierLine from './CubicBezierLine.vue'
 import Cylinder from './Cylinder.vue'
 import Dodecahedron from './Dodecahedron.vue'
 import Icosahedron from './Icosahedron.vue'
@@ -10,6 +12,7 @@ import Octahedron from './Octahedron.vue'
 import Plane from './Plane.vue'
 import Ring from './Ring.vue'
 import RoundedBox from './RoundedBox.vue'
+import ScreenQuad from './ScreenQuad.vue'
 import Sphere from './Sphere.vue'
 import Superformula from './Superformula.vue'
 import Tetrahedron from './Tetrahedron.vue'
@@ -22,14 +25,17 @@ export {
   CatmullRomCurve3,
   Circle,
   Cone,
+  CubicBezierLine,
   Cylinder,
   Dodecahedron,
   Icosahedron,
   Line2,
   Octahedron,
   Plane,
+  QuadraticBezierLine,
   Ring,
   RoundedBox,
+  ScreenQuad,
   Sphere,
   Superformula,
   Tetrahedron,
diff --git a/src/core/staging/AccumulativeShadows/ProgressiveLightMap.ts b/src/core/staging/AccumulativeShadows/ProgressiveLightMap.ts
new file mode 100644
index 000000000..6f380bb6a
--- /dev/null
+++ b/src/core/staging/AccumulativeShadows/ProgressiveLightMap.ts
@@ -0,0 +1,141 @@
+import type { Camera, Group, Light, Material, Mesh, Scene, ShaderMaterial, Texture, WebGLRenderer } from 'three'
+import { Color, HalfFloatType, MeshLambertMaterial, NearestFilter, WebGLRenderTarget } from 'three'
+import { MeshDiscardMaterial as DiscardMaterial } from '../../materials/meshDiscardMaterial/material'
+
+function isLight(object: any): object is Light {
+  return object.isLight
+}
+
+function isGeometry(object: any): object is Mesh {
+  return !!object.geometry
+}
+
+// NOTE: Based on "Progressive Light Map Accumulator", by [zalo](https://github.com/zalo/)
+export class ProgressiveLightMap {
+  renderer: WebGLRenderer
+  res: number
+  scene: Scene
+  object: Mesh | null
+  lightsGroup: Group | null = null
+  buffer1Active: boolean
+  progressiveLightMap1: WebGLRenderTarget
+  progressiveLightMap2: WebGLRenderTarget
+  discardMat: ShaderMaterial
+  targetMat: MeshLambertMaterial
+  previousShadowMap: { value: Texture }
+  averagingWindow: { value: number }
+  clearColor: Color
+  clearAlpha: number
+  lights: { object: Light, intensity: number }[]
+  meshes: { object: Mesh, material: Material | Material[] }[]
+
+  constructor(renderer: WebGLRenderer, scene: Scene, res = 1024) {
+    this.renderer = renderer
+    this.res = res
+    this.scene = scene
+    this.buffer1Active = false
+    this.lights = []
+    this.meshes = []
+    this.object = null
+    this.clearColor = new Color()
+    this.clearAlpha = 0
+
+    // NOTE: Create the Progressive LightMap Texture
+    const textureParams = {
+      type: HalfFloatType,
+      magFilter: NearestFilter,
+      minFilter: NearestFilter,
+    }
+    this.progressiveLightMap1 = new WebGLRenderTarget(this.res, this.res, textureParams)
+    this.progressiveLightMap2 = new WebGLRenderTarget(this.res, this.res, textureParams)
+
+    // NOTE: Inject some spicy new logic into a standard phong material
+    this.discardMat = new DiscardMaterial()
+    this.targetMat = new MeshLambertMaterial({ fog: false })
+    this.previousShadowMap = { value: this.progressiveLightMap1.texture }
+    this.averagingWindow = { value: 100 }
+    this.targetMat.onBeforeCompile = (shader) => {
+      // NOTE: Vertex Shader: Set Vertex Positions to the Unwrapped UV Positions
+      shader.vertexShader
+        = `varying vec2 vUv;
+        ${shader.vertexShader.slice(0, -1)}
+        vUv = uv; 
+        gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }`
+
+      // NOTE: Fragment Shader: Set Pixels to average in the Previous frame's Shadows
+      const bodyStart = shader.fragmentShader.indexOf('void main() {')
+      shader.fragmentShader
+        = `
+        varying vec2 vUv;
+        ${shader.fragmentShader.slice(0, bodyStart)}
+        uniform sampler2D previousShadowMap;
+        uniform float averagingWindow;
+        ${shader.fragmentShader.slice(bodyStart - 1, -1)}
+        vec3 texelOld = texture2D(previousShadowMap, vUv).rgb;
+        gl_FragColor.rgb = mix(texelOld, gl_FragColor.rgb, 1.0 / averagingWindow);
+      }`
+
+      // NOTE: Set the Previous Frame's Texture Buffer and Averaging Window
+      shader.uniforms.previousShadowMap = this.previousShadowMap
+      shader.uniforms.averagingWindow = this.averagingWindow
+    }
+  }
+
+  clear() {
+    this.renderer.getClearColor(this.clearColor)
+    this.clearAlpha = this.renderer.getClearAlpha()
+    this.renderer.setClearColor('black', 1)
+    this.renderer.setRenderTarget(this.progressiveLightMap1)
+    this.renderer.clear()
+    this.renderer.setRenderTarget(this.progressiveLightMap2)
+    this.renderer.clear()
+    this.renderer.setRenderTarget(null)
+    this.renderer.setClearColor(this.clearColor, this.clearAlpha)
+
+    this.lights = []
+    this.meshes = []
+    this.scene.traverse((object) => {
+      if (object === this.lightsGroup) { return false }
+      if (isGeometry(object)) {
+        this.meshes.push({ object, material: object.material })
+      }
+      else if (isLight(object)) {
+        this.lights.push({ object, intensity: object.intensity })
+      }
+    })
+  }
+
+  prepare() {
+    this.lights.forEach(light => (light.object.intensity = 0))
+    this.meshes.forEach(mesh => (mesh.object.material = this.discardMat))
+  }
+
+  finish() {
+    this.lights.forEach(light => (light.object.intensity = light.intensity))
+    this.meshes.forEach(mesh => (mesh.object.material = mesh.material))
+  }
+
+  configure(object: Mesh, lightsGroup: Group) {
+    this.object = object
+    this.lightsGroup = lightsGroup
+  }
+
+  update(camera: Camera, blendWindow = 100) {
+    if (!this.object) { return }
+    // NOTE: Set each object's material to the UV Unwrapped Surface Mapping Version
+    this.averagingWindow.value = blendWindow
+    this.object.material = this.targetMat
+    // NOTE: Ping-pong two surface buffers for reading/writing
+    const activeMap = this.buffer1Active ? this.progressiveLightMap1 : this.progressiveLightMap2
+    const inactiveMap = this.buffer1Active ? this.progressiveLightMap2 : this.progressiveLightMap1
+    // NOTE: Render the object's surface maps
+    const oldBg = this.scene.background
+    this.scene.background = null
+    this.renderer.setRenderTarget(activeMap)
+    this.previousShadowMap.value = inactiveMap.texture
+    this.buffer1Active = !this.buffer1Active
+    this.renderer.render(this.scene, camera)
+    this.renderer.setRenderTarget(null)
+    this.scene.background = oldBg
+  }
+}
diff --git a/src/core/staging/AccumulativeShadows/SoftShadowMaterial.ts b/src/core/staging/AccumulativeShadows/SoftShadowMaterial.ts
new file mode 100644
index 000000000..de769adb5
--- /dev/null
+++ b/src/core/staging/AccumulativeShadows/SoftShadowMaterial.ts
@@ -0,0 +1,37 @@
+import { shaderMaterial } from '../../../utils/shaderMaterial'
+import type { ColorRepresentation, Texture } from 'three'
+import { Color } from 'three'
+
+export interface SoftShadowMaterialProps {
+  map: Texture
+  color?: ColorRepresentation
+  alphaTest?: number
+  blend?: number
+}
+
+export const SoftShadowMaterial = /* @__PURE__ */ shaderMaterial(
+  {
+    color: new Color(),
+    blend: 2.0,
+    alphaTest: 0.75,
+    opacity: 0,
+    map: null,
+  },
+  `varying vec2 vUv;
+   void main() {
+     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);
+     vUv = uv;
+   }`,
+  `varying vec2 vUv;
+   uniform sampler2D map;
+   uniform vec3 color;
+   uniform float opacity;
+   uniform float alphaTest;
+   uniform float blend;
+   void main() {
+     vec4 sampledDiffuseColor = texture2D(map, vUv);
+     gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);
+     #include <tonemapping_fragment>
+     #include <colorspace_fragment>
+   }`,
+)
diff --git a/src/core/staging/AccumulativeShadows/component.vue b/src/core/staging/AccumulativeShadows/component.vue
new file mode 100644
index 000000000..66691aba4
--- /dev/null
+++ b/src/core/staging/AccumulativeShadows/component.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { computed, shallowRef, watch, watchEffect } from 'vue'
+import type { ColorRepresentation, Mesh, PlaneGeometry, ShaderMaterial, Texture } from 'three'
+import { Group } from 'three'
+import { extend, useLoop, useTres } from '@tresjs/core'
+import RandomizedLights from '../RandomizedLights/component.vue'
+import { ProgressiveLightMap } from './ProgressiveLightMap'
+import { SoftShadowMaterial } from './SoftShadowMaterial'
+
+export interface AccumulativeShadowsProps {
+  /** Whether shadow creation only happens once (resets after props change), false */
+  once?: boolean
+  /** Whether shadows accumulate progressively over several frames, true */
+  accumulate?: boolean
+  /**
+   * Number of frames to render. More yields cleaner results but takes more time.
+   * If `accumulate && once`, 1 frame will be consumed every update for `frames` updates.
+   * Otherwise, `frames` frames are consumed for every update.
+   * 40
+   */
+  frames?: number
+  /** If `accumulate`, controls the refresh ratio, 100 */
+  blend?: number
+  /** If less than `Infinity`, limits the amount of frames rendered. Use this to increase performance once a movable scene has settled, Infinity */
+  limit?: number
+  /** Scale of the plane, 10 */
+  scale?: number
+  /** Opacity of the plane, 1 */
+  opacity?: number
+  /** Discards alpha pixels, 0.65 */
+  alphaTest?: number
+  /** Shadow color, black */
+  color?: ColorRepresentation
+  /** Colorblend, amount of `color` in shadow, 0 is black, 2 */
+  colorBlend?: number
+  /** Buffer resolution, 1024 */
+  resolution?: number
+  /** Texture tonemapping, true */
+  toneMapped?: boolean
+}
+
+interface SoftShadowMaterialProps {
+  map: Texture
+  color?: ColorRepresentation
+  alphaTest?: number
+  blend?: number
+}
+
+const props = withDefaults(defineProps<AccumulativeShadowsProps>(), {
+  once: true,
+  accumulate: true,
+  frames: 40,
+  limit: Infinity,
+  blend: 20,
+  scale: 10,
+  opacity: 1,
+  alphaTest: 0.65,
+  color: 'black',
+  colorBlend: 2,
+  resolution: 1024,
+  toneMapped: true,
+})
+
+extend({ SoftShadowMaterial })
+
+const { renderer: gl, scene, camera, invalidate } = useTres()
+const gOuter = shallowRef<Group>()
+const gPlane = shallowRef<Mesh<PlaneGeometry, SoftShadowMaterialProps & ShaderMaterial>>(null!)
+const gLights = shallowRef<Group>(new Group())
+const progressiveLightMap = computed(() => new ProgressiveLightMap(gl.value, scene.value, props.resolution))
+const shadowMapTexture = shallowRef<Texture>()
+
+let frameCount = 0
+let frameLimitRemaining = props.limit
+
+function reset() {
+  // NOTE: Clear buffers, reset opacities, set frame count to 0
+  progressiveLightMap.value.clear()
+  if (gPlane.value) {
+    const material = gPlane.value.material
+    material.opacity = 0
+    material.alphaTest = 0
+  }
+  frameCount = 0
+  frameLimitRemaining = props.limit
+}
+
+function update(frames = 1) {
+  if (gPlane.value) {
+    const material = gPlane.value.material
+    if (props.accumulate) {
+      // NOTE: Adapt the opacity-blend ratio to the number of frames
+      material.opacity = Math.min(props.opacity, material.opacity + props.opacity / Math.max(2, props.blend))
+      material.alphaTest = Math.min(props.alphaTest, material.alphaTest + props.alphaTest / Math.max(2, props.blend))
+    }
+    else {
+      material.opacity = props.opacity
+      material.alphaTest = props.alphaTest
+    }
+  }
+
+  // NOTE: Switch accumulative lights on
+  gLights.value.visible = true
+  // NOTE: Collect scene lights and meshes
+  progressiveLightMap.value.prepare()
+
+  // NOTE: Update the lightmap and the accumulative lights
+  for (let i = 0; i < frames; i++) {
+    gLights.value?.children.forEach((light) => {
+      if ('update' in light && typeof light.update === 'function') {
+        light.update()
+      }
+    })
+    if (camera.value) {
+      const blend = Math.max(2, props.accumulate ? props.blend : props.frames)
+      progressiveLightMap.value.update(camera.value, blend)
+    }
+  }
+
+  // NOTE: Switch accumulative lights off
+  gLights.value.visible = false
+
+  // NOTE: Restore lights and meshes
+  progressiveLightMap.value.finish()
+
+  shadowMapTexture.value = progressiveLightMap.value.progressiveLightMap2.texture
+}
+
+watchEffect(() => {
+  if (gPlane.value) { progressiveLightMap.value.configure(gPlane.value, gLights.value) }
+})
+
+watch(() => [props.frames, props.once, props.accumulate, props.scale, props.limit], reset)
+watchEffect(reset)
+
+useLoop().onBeforeRender(() => {
+  if (!props.once) { frameCount = 0 }
+
+  frameLimitRemaining--
+  if (frameLimitRemaining < 0) { return }
+
+  if (props.accumulate && props.once) {
+    if (frameCount < props.frames || frameCount < props.blend) {
+      invalidate()
+      update()
+      frameCount++
+    }
+  }
+  else {
+    invalidate()
+    if (frameCount < props.frames) {
+      update(props.frames - frameCount)
+      frameCount = props.frames
+    }
+  }
+})
+
+watchEffect(() => gLights.value.traverse = () => null)
+
+defineExpose({ instance: gOuter, update: () => { reset(); update() } })
+</script>
+
+<template>
+  <TresGroup ref="gOuter">
+    <TresGroup ref="gLights">
+      <slot>
+        <RandomizedLights
+          :ambient="0.25"
+          :bias="0.001"
+          :count="8"
+          :intensity="Math.PI"
+          :map-size="1024"
+          :position="[5, 5, -10]"
+          :radius="2"
+        />
+      </slot>
+    </TresGroup>
+
+    <TresMesh ref="gPlane" :receive-shadow="true" :scale="scale" :rotation="[-Math.PI / 2, 0, 0]">
+      <TresPlaneGeometry />
+      <TresSoftShadowMaterial
+        :alpha-test="alphaTest"
+        :blend="colorBlend"
+        :color="color"
+        :depth-write="false"
+        :map="shadowMapTexture"
+        :opacity="opacity"
+        :tone-mapped="toneMapped"
+        :transparent="true"
+      />
+    </TresMesh>
+  </TresGroup>
+</template>
diff --git a/src/core/staging/Align.vue b/src/core/staging/Align.vue
index 69e87fe36..c2a31448d 100644
--- a/src/core/staging/Align.vue
+++ b/src/core/staging/Align.vue
@@ -8,7 +8,7 @@ import { shallowRef, toValue, watchEffect } from 'vue'
 // NOTE: Sources
 // https://github.com/pmndrs/drei/blob/master/src/core/Center.tsx
 
-export interface OnAlignCallbackProps {
+export interface AlignCallbackOptions {
   /** The next parent above <Align /> */
   parent: Object3D
   /** The outmost container group of the <Align/> component */
@@ -41,8 +41,6 @@ export interface AlignProps {
   disableZ?: boolean
   /** See https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject */
   precise?: boolean
-  /** Callback, fires when updating, after measurement */
-  onAlign?: (props: OnAlignCallbackProps) => void
   /** Optional cacheKey to keep the component from recalculating on every render */
   cacheKey?: MaybeRefOrGetter<any>
 }
@@ -52,6 +50,11 @@ const props = withDefaults(defineProps<AlignProps>(), {
   cacheKey: undefined,
 })
 
+const emit = defineEmits<{
+  (e: 'update', props: AlignCallbackOptions): void
+  (e: 'change', props: AlignCallbackOptions): void
+}>()
+
 const ref = shallowRef<Group>()
 const outer = shallowRef<Group>()
 const inner = shallowRef<Group>()
@@ -60,6 +63,8 @@ const box3 = new Box3()
 const center = new Vector3()
 const sphere = new Sphere()
 
+const previous = { width: 0, height: 0, depth: 0, position: new Vector3() }
+
 function update() {
   if (!outer.value || !inner.value || !ref.value) { return }
   outer.value.matrixWorld.identity()
@@ -79,9 +84,11 @@ function update() {
     props.disable || props.disableZ ? 0 : -center.z + zAlign,
   )
 
-  // Only fire onCentered if the bounding box has changed
-  if (typeof props.onAlign !== 'undefined') {
-    props.onAlign({
+  if (previous.width !== width
+    || previous.height !== height
+    || previous.depth !== depth
+    || !outer.value.position.equals(previous.position)) {
+    emit('change', {
       parent: ref.value.parent!,
       container: ref.value,
       width,
@@ -94,6 +101,10 @@ function update() {
       horizontalAlignment: xAlign,
       depthAlignment: zAlign,
     })
+    previous.width = width
+    previous.height = height
+    previous.depth = depth
+    previous.position.copy(outer.value.position)
   }
 }
 
diff --git a/src/core/staging/Bounds/Bounds.ts b/src/core/staging/Bounds/Bounds.ts
new file mode 100644
index 000000000..104152422
--- /dev/null
+++ b/src/core/staging/Bounds/Bounds.ts
@@ -0,0 +1,432 @@
+import type { VectorFlexibleParams } from '@tresjs/core'
+import { normalizeVectorFlexibleParam } from '@tresjs/core'
+import type { Camera, OrthographicCamera, PerspectiveCamera } from 'three'
+import { Box3, MathUtils, Matrix4, Object3D, Quaternion, Vector3 } from 'three'
+
+interface SizeReturn {
+  box: Box3
+  size: Vector3
+  center: Vector3
+  distance: number
+}
+
+export interface BoundsControlsProto {
+  update: () => void
+  target: Vector3
+  maxDistance: number
+  addEventListener: (event: string, callback: (event: any) => void) => void
+  removeEventListener: (event: string, callback: (event: any) => void) => void
+}
+
+interface StartT {
+  position: Vector3
+  quaternion: Quaternion
+  zoom: number
+}
+
+interface GoalT {
+  position: Vector3 | undefined
+  quaternion: Quaternion | undefined
+  zoom: number | undefined
+  up: Vector3 | undefined
+  lookAt: Vector3 | undefined
+  box: Box3 | undefined
+  object: Box3 | Object3D | undefined
+}
+
+export interface OnLookAtCallbackArg {
+  position: Vector3
+  quaternion: Quaternion
+  zoom: number | undefined
+  up: Vector3 | undefined
+  lookAt: Vector3
+  box: Box3
+  object: Box3 | Object3D | undefined
+}
+
+type CachedFitArgs =
+  [ Vector3 | null, Vector3, Vector3 ]
+  | [ Vector3 | null, Vector3]
+  | [ Vector3 | null]
+  | [ Object3D ]
+  | [ Object3D, Vector3 ]
+  | [ Box3 ]
+  | [ Box3, Vector3 ]
+
+enum AnimationState {
+  NONE = 0,
+  ACTIVE = 2,
+}
+
+const isOrthographicCamera = (def: Camera): def is OrthographicCamera =>
+  def && (def as OrthographicCamera).isOrthographicCamera
+const isPerspectiveCamera = (def: Camera): def is PerspectiveCamera =>
+  def && (def as PerspectiveCamera).isPerspectiveCamera
+const isBox3 = (def: any): def is Box3 => def && (def as Box3).isBox3
+
+const easingFnDefault = (t: number) => { return 1 - Math.exp(-5 * t) + 0.007 * t }
+
+export class Bounds extends Object3D {
+  camera: Camera
+  offset = 0.2
+  duration = 1
+  clip = true
+
+  private _start: StartT = {
+    position: new Vector3(),
+    quaternion: new Quaternion(),
+    zoom: 1,
+  }
+
+  private _goal: GoalT = {
+    position: undefined,
+    quaternion: undefined,
+    zoom: undefined,
+    up: undefined,
+    lookAt: undefined,
+    box: undefined,
+    object: undefined,
+  }
+
+  private _animationState = AnimationState.NONE
+  private _t = 0.0
+  private _controls: BoundsControlsProto | null = null
+  private _controlsRemoveEventListener = () => {}
+
+  // NOTE: Overloaded functions and TS `Parameters` does not work.
+  // moz-extension://b37b5993-6262-452a-b49a-4f9e44f44989/confirm-page.html?url=https%3A%2F%2Fgithub.com%2Fmicrosoft%2FTypeScript%2Fissues%2F29732&cookieStoreId=firefox-container-21&currentCookieStoreId=firefox-container-8
+  private _cachedFitArgs: CachedFitArgs = [this]
+
+  constructor(camera: Camera) {
+    super()
+    this.camera = camera
+  }
+
+  dispose() {
+    this.controls = null
+  }
+
+  onStart(_: OnLookAtCallbackArg) {}
+  onCancel(_: OnLookAtCallbackArg) {}
+  onEnd(_: OnLookAtCallbackArg) {}
+  easing = easingFnDefault
+
+  get controls() {
+    return this._controls
+  }
+
+  set controls(controls: BoundsControlsProto | null) {
+    this._controlsRemoveEventListener()
+    this._controlsRemoveEventListener = () => {}
+
+    if (controls) {
+      this._controls = controls
+      // NOTE: Try to prevent drag hijacking
+      // Attach an event to listen to `controls` "start".
+      // It is triggered when active controls are interacted with and
+      // should cancel animations here.
+      // https://threejs.org/docs/#examples/en/controls/OrbitControls
+      const callback = () => {
+        if (controls && this._goal.lookAt && this._animationState !== AnimationState.NONE) {
+          const front = new Vector3().setFromMatrixColumn(this.camera.matrix, 2)
+          const d0 = this._start.position.distanceTo(controls.target)
+          const d1 = (this._goal.position || this._start.position).distanceTo(this._goal.lookAt)
+          const d = (1 - this._t) * d0 + this._t * d1
+
+          controls.target.copy(this.camera.position).addScaledVector(front, -d)
+          controls.update()
+          this._stop()
+        }
+
+        this._animationState = AnimationState.NONE
+      }
+
+      controls.addEventListener('start', callback)
+
+      this._controlsRemoveEventListener = () => controls.removeEventListener('start', callback)
+    }
+  }
+
+  private _stop() {
+    if (this._goal.position) {
+      this.onCancel(this._goal as OnLookAtCallbackArg)
+    }
+    _resetGoal(this._goal)
+  }
+
+  /**
+   * Calculates a boundary box around an `Object3D` and centers the camera accordingly.
+   */
+  lookAt(object: Object3D): void
+  /**
+   * Calculates a boundary box around an `Object3D` and centers the camera accordingly and animates the camera's `up` vector.
+   */
+  lookAt(object: Object3D, up: VectorFlexibleParams): void
+  /**
+   * Centers the camera's viewport on a `Box3`.
+   */
+  lookAt(box3: Box3): void
+  /**
+   * Centers the camera's viewport on a `Box3` and animates the camera's `up` vector.
+   */
+  lookAt(box3: Box3, up: VectorFlexibleParams): void
+  /**
+   * Look at a `Vector3`.
+   */
+  lookAt(target: VectorFlexibleParams): void
+  /**
+   * Look at a `Vector3`, if provided. Move the camera to `position`.
+   */
+  lookAt(target: VectorFlexibleParams | undefined | null, position: VectorFlexibleParams): void
+  /**
+   * Look at a `Vector3`, if provided. Move the camera to `position` and animate the camera's `up` vector.
+   */
+  lookAt(target: VectorFlexibleParams | undefined | null, position: VectorFlexibleParams, up: VectorFlexibleParams): void
+  /**
+   * Rerun `lookAt` using the prior arguments. If `lookAt` has never been called, uses the `Bounds` object.
+   */
+  lookAt(): void
+  lookAt(
+    arg0?: Object3D | Box3 | VectorFlexibleParams | undefined | null,
+    arg1?: VectorFlexibleParams,
+    arg2?: VectorFlexibleParams,
+  ) {
+    // NOTE: Normalize args
+    const size = arguments.length
+
+    let args: CachedFitArgs = this._cachedFitArgs
+    const v1 = arg1 ? new Vector3().fromArray(normalizeVectorFlexibleParam(arg1)) : new Vector3()
+    const v2 = arg2 ? new Vector3().fromArray(normalizeVectorFlexibleParam(arg2)) : new Vector3()
+
+    if (size === 0) {
+      // NOTE: We didn't get any args, use prior args.
+      args = this._cachedFitArgs
+    }
+    else if (!arg0 && arg0 !== 0) {
+      // NOTE: `fit(lookAt=undefined | null)`
+      if (size === 1) { args = [null] }
+      // NOTE: `fit(lookAt=undefined | null, lookAt: VectorFlexibleParams)`
+      else if (size === 2) { args = [null, v1] }
+      // NOTE: `fit(lookAt=undefined | null, lookAt: VectorFlexibleParams, up: VectorFlexibleParams)`
+      else if (size === 3) { args = [null, v1, v2] }
+    }
+    else if (typeof arg0 === 'number' || (arg0 as Vector3).isVector3 || Array.isArray(arg0)) {
+      const v0 = new Vector3().fromArray(normalizeVectorFlexibleParam(arg0 as VectorFlexibleParams))
+      // NOTE: `fit(position: VectorFlexibleParams)`
+      if (size === 1) { args = [v0] }
+      // NOTE: `fit(position: VectorFlexibleParams, lookAt: VectorFlexibleParams)`
+      else if (size === 2) { args = [v0, v1] }
+      // NOTE: `fit(position: VectorFlexibleParams, lookAt: VectorFlexibleParams, up: VectorFlexibleParams)`
+      else if (size === 3) { args = [v0, v1, v2] }
+    }
+    else if ((arg0 as Box3).isBox3) {
+      // NOTE: `fit(box3: Box3)`
+      if (size === 1) { args = [arg0 as Box3] }
+      // NOTE: `fit(box3: Box3, up)`
+      else { args = [arg0 as Box3, arg1 as Vector3] }
+    }
+    else if ((arg0 as Object3D).isObject3D) {
+      // NOTE: `fit(object: Object3D)`
+      if (size === 1) { args = [arg0 as Object3D] }
+      // NOTE: `fit(object: Object3D, up)`
+      else { args = [arg0 as Object3D, arg1 as Vector3] }
+    }
+
+    // NOTE: End normalization.
+
+    this._cachedFitArgs = args
+
+    this._stop()
+    _resetGoal(this._goal)
+
+    if (args.length > 0 && (args[0] === null || args[0] === undefined || (args[0] as Vector3).isVector3)) {
+      // NOTE: The user sent specific numeric values, not an object.
+      const [lookAt, position, up] = args
+      this._start.position.copy(this.camera.position)
+      this._start.quaternion.copy(this.camera.quaternion)
+      isOrthographicCamera(this.camera) && (this._start.zoom = (this.camera as OrthographicCamera).zoom)
+
+      if (position) {
+        this._goal.position = Array.isArray(position) ? new Vector3(...position) : (position as Vector3).clone()
+      }
+      else {
+        this._goal.position = this.camera.position
+      }
+
+      if (lookAt) {
+        this._goal.lookAt = Array.isArray(lookAt) ? new Vector3(...lookAt) : (lookAt as Vector3).clone()
+      }
+      else {
+        this._goal.lookAt = new Vector3(0, 0, 1).applyQuaternion(this.camera.quaternion)
+      }
+
+      if (up) {
+        this._goal.up = Array.isArray(up) ? new Vector3(...up) : up.clone()
+      }
+
+      const mCamRot = new Matrix4().lookAt(
+        this._goal.position || this.camera.position,
+        this._goal.lookAt,
+        this._goal.up ?? this.camera.up,
+      )
+      this._goal.quaternion = new Quaternion().setFromRotationMatrix(mCamRot)
+    }
+    else {
+      const box3OrObject = args[0] as Box3 | Object3D
+      const { center, distance, box } = _getSize(box3OrObject, this.camera, this.offset)
+
+      this._start.position.copy(this.camera.position)
+      this._start.quaternion.copy(this.camera.quaternion)
+      isOrthographicCamera(this.camera) && (this._start.zoom = (this.camera as OrthographicCamera).zoom)
+
+      const direction = this.camera.position.clone().sub(center).normalize()
+      this._goal.object = box3OrObject
+      this._goal.box = box
+      this._goal.position = center.clone().addScaledVector(direction, distance)
+      this._goal.lookAt = center.clone()
+      const mCamRot = new Matrix4().lookAt(this._goal.position, this._goal.lookAt, this.camera.up)
+      this._goal.quaternion = new Quaternion().setFromRotationMatrix(mCamRot)
+
+      if (isOrthographicCamera(this.camera)) {
+        let maxHeight = 0
+        let maxWidth = 0
+        const vertices = [
+          new Vector3(box.min.x, box.min.y, box.min.z),
+          new Vector3(box.min.x, box.max.y, box.min.z),
+          new Vector3(box.min.x, box.min.y, box.max.z),
+          new Vector3(box.min.x, box.max.y, box.max.z),
+          new Vector3(box.max.x, box.max.y, box.max.z),
+          new Vector3(box.max.x, box.max.y, box.min.z),
+          new Vector3(box.max.x, box.min.y, box.max.z),
+          new Vector3(box.max.x, box.min.y, box.min.z),
+        ]
+
+        // NOTE: Transform the center and each corner to camera space
+        const goal = this._goal
+        const pos = goal.position || this.camera.position
+        const target = goal.lookAt || this._controls?.target
+        const up = goal.up || this.camera.up
+        const mCamWInv = target
+          ? new Matrix4().lookAt(pos, target, up).setPosition(pos).invert()
+          : this.camera.matrixWorldInverse
+        for (const v of vertices) {
+          v.applyMatrix4(mCamWInv)
+          maxHeight = Math.max(maxHeight, Math.abs(v.y))
+          maxWidth = Math.max(maxWidth, Math.abs(v.x))
+        }
+        maxHeight *= 2
+        maxWidth *= 2
+        const zoomForHeight = (this.camera.top - this.camera.bottom) / maxHeight
+        const zoomForWidth = (this.camera.right - this.camera.left) / maxWidth
+
+        goal.zoom = Math.min(zoomForHeight, zoomForWidth) / (1 + this.offset)
+        // NOTE: Fix possible division by 0.
+        if (Number.isNaN(goal.zoom)) { goal.zoom = 0 }
+      }
+
+      if (this.clip) {
+        if (isPerspectiveCamera(this.camera)) {
+          this.camera.near = Math.abs(distance) / 100
+          this.camera.far = Math.abs(distance) * 100
+          this.camera.updateProjectionMatrix()
+        }
+
+        if (this._controls) {
+          this._controls.maxDistance = Math.abs(distance) * 100
+          this._controls.update()
+        }
+      }
+    }
+
+    this._t = 0
+    this._animationState = AnimationState.ACTIVE
+
+    this.onStart && this.onStart(this._goal as OnLookAtCallbackArg)
+  }
+
+  animate(delta: number) {
+    if (this._animationState === AnimationState.NONE) {
+      return false
+    }
+
+    if (this._animationState === AnimationState.ACTIVE) {
+      this._t += delta / this.duration
+      this._t = MathUtils.clamp(this._t, 0, 1)
+
+      if (this._t >= 1) {
+        this._goal.position && this.camera.position.copy(this._goal.position)
+        this._goal.quaternion && this.camera.quaternion.copy(this._goal.quaternion)
+        this._goal.up && this.camera.up.copy(this._goal.up)
+        this._goal.zoom && isOrthographicCamera(this.camera) && (this.camera.zoom = this._goal.zoom)
+
+        this.camera.updateMatrixWorld()
+        if (isPerspectiveCamera(this.camera)) {
+          this.camera.updateProjectionMatrix()
+        }
+
+        if (this._controls && this._goal.lookAt) {
+          this._controls.target.copy(this._goal.lookAt)
+          this._controls.update()
+        }
+
+        this._animationState = AnimationState.NONE
+        this.onEnd && this.onEnd(this._goal as OnLookAtCallbackArg)
+        _resetGoal(this._goal)
+      }
+      else {
+        const k = this.easing && this.easing(this._t)
+
+        this._goal.position && this.camera.position.lerpVectors(this._start.position, this._goal.position, k)
+        this._goal.quaternion && this.camera.quaternion.slerpQuaternions(this._start.quaternion, this._goal.quaternion, k)
+        this._goal.up && this.camera.up.set(0, 1, 0).applyQuaternion(this.camera.quaternion)
+        this._goal.zoom
+        && isOrthographicCamera(this.camera)
+        && (this.camera.zoom = (1 - k) * this._start.zoom + k * this._goal.zoom)
+
+        this.camera.updateMatrixWorld()
+        if (isPerspectiveCamera(this.camera)) {
+          this.camera.updateProjectionMatrix()
+        }
+      }
+    }
+
+    return true
+  }
+}
+
+function _getSize(box3OrObject: Box3 | Object3D, camera: Camera, offset = 0): SizeReturn {
+  const box = new Box3()
+  if (isBox3(box3OrObject)) {
+    box.copy(box3OrObject)
+  }
+  else {
+    box3OrObject.updateWorldMatrix(true, true)
+    box.setFromObject(box3OrObject)
+  }
+
+  if (box.isEmpty()) {
+    const max = camera.position.length() || 10
+    box.setFromCenterAndSize(new Vector3(), new Vector3(max, max, max))
+  }
+
+  const boxSize = box.getSize(new Vector3())
+  const center = box.getCenter(new Vector3())
+  const maxSize = Math.max(boxSize.x, boxSize.y, boxSize.z)
+  const fitHeightDistance = isOrthographicCamera(camera)
+    ? maxSize * 4
+    : maxSize / (2 * Math.atan((Math.PI * (camera as PerspectiveCamera).fov) / 360))
+  const fitWidthDistance = isOrthographicCamera(camera) ? maxSize * 4 : fitHeightDistance / (camera as PerspectiveCamera).aspect
+  const distance = (1 + offset) * Math.max(fitHeightDistance, fitWidthDistance)
+
+  return { box, size: boxSize, center, distance }
+}
+
+function _resetGoal(goal: GoalT) {
+  goal.position = undefined
+  goal.quaternion = undefined
+  goal.zoom = undefined
+  goal.up = undefined
+  goal.lookAt = undefined
+  goal.box = undefined
+  goal.object = undefined
+}
diff --git a/src/core/staging/Bounds/component.vue b/src/core/staging/Bounds/component.vue
new file mode 100644
index 000000000..900ce10fe
--- /dev/null
+++ b/src/core/staging/Bounds/component.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, watch, watchEffect } from 'vue'
+import type { BoundsControlsProto, OnLookAtCallbackArg } from './Bounds'
+import { Bounds } from './Bounds'
+import { useLoop, useTres } from '@tresjs/core'
+import { PerspectiveCamera } from 'three'
+import { useDebounceFn } from '@vueuse/core'
+
+export interface BoundsProps {
+  /**
+   * Duration of the `lookAt` animation in seconds, 1.0
+   */
+  duration?: number
+  /**
+   * Additional distance from the target when using `lookAt` with a `Box3` or `Object3D`, 0.2
+   */
+  offset?: number
+  /**
+   * Whether to re`lookAt` the last target when the screen is resized, false
+   */
+  useResize?: boolean
+  /**
+   * Whether to `lookAt` the `Bounds` object when the component is mounts, false
+   */
+  useMounted?: boolean
+  /**
+   * Whether to adjust the camera's `near` and `far` settings when using `lookAt`, false
+   */
+  clip?: boolean
+  /**
+   * Animation's easing function. `t` and the returned value should be in the interval `[0, 1]`, cubicEaseOut
+   */
+  easing?: (t: number) => number
+}
+
+const props = withDefaults(defineProps<BoundsProps>(), {
+  duration: 1.0,
+  offset: 0.2,
+  useResize: false,
+  useMounted: false,
+  clip: false,
+})
+
+const emit = defineEmits<{
+  (e: 'start', sizeProps: OnLookAtCallbackArg): void
+  (e: 'cancel', sizeProps: OnLookAtCallbackArg): void
+  (e: 'end', sizeProps: OnLookAtCallbackArg): void
+}>()
+
+const { invalidate, camera, controls, sizes: size } = useTres()
+const defaultEasing = (t: number) => 1 - (1 - t) ** 3
+
+const bounds = new Bounds(camera.value ?? new PerspectiveCamera())
+bounds.easing = props.easing ?? defaultEasing
+bounds.onStart = (arg: OnLookAtCallbackArg) => emit('start', arg)
+bounds.onCancel = (arg: OnLookAtCallbackArg) => emit('cancel', arg)
+bounds.onEnd = (arg: OnLookAtCallbackArg) => emit('end', arg)
+
+const refresh = () => {
+  bounds.offset = props.offset
+  bounds.duration = props.duration
+  bounds.clip = props.clip
+  bounds.lookAt()
+  invalidate()
+}
+
+useLoop().onBeforeRender(({ delta }) => {
+  if (bounds.animate(delta)) {
+    invalidate()
+  }
+})
+
+watchEffect(() => {
+  if (controls.value) { bounds.controls = controls.value as unknown as BoundsControlsProto }
+})
+
+const shallowCam = computed(() => camera.value?.uuid)
+watch(shallowCam, () => {
+  if (camera.value) { bounds.camera = camera.value }
+}, { immediate: true, deep: false })
+
+const refreshDebounce = useDebounceFn(refresh, 250, { maxWait: 2000 })
+
+watch(() => [size.width.value, size.height.value], () => {
+  if (props.useResize) { refreshDebounce() }
+})
+
+// NOTE: Tres core doesn't currently allow for most
+// callback props to declaratively redefine methods.
+// (Most method props will be called instead.)
+// So we need to watch and update here.
+watch(() => [props.easing], () => {
+  bounds.easing = props.easing ?? defaultEasing
+}, { immediate: true })
+
+onMounted(() => { if (props.useMounted) { refreshDebounce() } })
+onUnmounted(() => bounds.dispose())
+defineExpose({ instance: bounds })
+</script>
+
+<template>
+  <primitive
+    :object="bounds"
+    :duration="duration"
+    :offset="offset"
+  >
+    <slot></slot>
+  </primitive>
+</template>
diff --git a/src/core/staging/CircleShadow.vue b/src/core/staging/CircleShadow.vue
new file mode 100644
index 000000000..e0cc30bf3
--- /dev/null
+++ b/src/core/staging/CircleShadow.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { Color, DoubleSide, Texture } from 'three'
+
+import { onUnmounted, shallowRef, watchEffect } from 'vue'
+
+interface ShadowProps {
+  color?: Color | number | string
+  offset?: number
+  opacity?: number
+  fog?: boolean
+  depthWrite?: boolean
+}
+
+const props = withDefaults(defineProps<ShadowProps>(), {
+  color: 'black',
+  offset: 0.0,
+  opacity: 0.5,
+  fog: false,
+  depthWrite: false,
+})
+
+const SIZE = 128
+const canvas = document.createElement('canvas')
+canvas.width = SIZE
+canvas.height = SIZE
+const context = canvas.getContext('2d') as CanvasRenderingContext2D
+
+const texture = new Texture(canvas)
+
+function createCanvas() {
+  const gradient = context.createRadialGradient(
+    canvas.width / 2,
+    canvas.height / 2,
+    0,
+    canvas.width / 2,
+    canvas.height / 2,
+    canvas.width / 2,
+  )
+
+  gradient.addColorStop(props.offset, new Color(props.color).getStyle())
+  gradient.addColorStop(1, 'rgba(0,0,0,0)')
+  context.clearRect(0, 0, SIZE, SIZE)
+  context.fillStyle = gradient
+  context.fillRect(0, 0, canvas.width, canvas.height)
+
+  texture.needsUpdate = true
+}
+
+watchEffect(createCanvas)
+
+const shadowRef = shallowRef()
+
+defineExpose({ instance: shadowRef })
+
+onUnmounted(() => texture.dispose())
+</script>
+
+<template>
+  <TresMesh ref="shadowRef" :rotation-x="-Math.PI * 0.5">
+    <TresPlaneGeometry />
+    <TresMeshBasicMaterial transparent :opacity="props.opacity" :fog="props.fog" :depth-write="depthWrite" :side="DoubleSide" :map="texture" />
+  </TresMesh>
+</template>
diff --git a/src/core/staging/RandomizedLights/RandomizedLights.ts b/src/core/staging/RandomizedLights/RandomizedLights.ts
new file mode 100644
index 000000000..a1cf42f6c
--- /dev/null
+++ b/src/core/staging/RandomizedLights/RandomizedLights.ts
@@ -0,0 +1,131 @@
+import { DirectionalLight, Group, MathUtils, Vector3 } from 'three'
+
+export default class RandomizedLights extends Group {
+  /** Light position */
+  position: Vector3 = new Vector3(0, 0, 0)
+  /** Radius of the jiggle, higher values make softer light */
+  radius = 1
+  /** Light intensity */
+  intensity = Math.PI
+  /** Ambient occlusion, lower values mean less AO, hight more, you can mix AO and directional light */
+  ambient = 0.5
+  /** If the lights cast shadows */
+  castShadow = true
+  /** Default shadow bias */
+  bias = 0
+
+  constructor(config: Partial<RandomizedLights> = {}) {
+    super()
+    Object.assign(this, config)
+    if (this.count === 0) { this.count = 8 }
+    if (!config.mapSize) {
+      this.mapSize = 512
+    }
+    if (!config.size) {
+      this.size = 10
+    }
+    if (!config.near) {
+      this.near = 0.5
+    }
+    if (!config.far) {
+      this.far = 500
+    }
+  }
+
+  get length() {
+    return this.position.length()
+  }
+
+  set count(n: number) {
+    this.clear()
+    for (let i = 0; i < n; i++) {
+      this.add(new DirectionalLight('white', this.intensity))
+    }
+  }
+
+  get count() {
+    return this.children.filter(c => 'isDirectionalLight' in c).length
+  }
+
+  get mapSize() {
+    return this.lights[0].shadow.mapSize.width
+  }
+
+  set mapSize(n: number) {
+    for (const light of this.lights) {
+      // NOTE: Changing the map size requires 2 modifications.
+      // https://discourse.threejs.org/t/change-resolution-of-shadows-dinamically/50744/6
+      light.shadow.mapSize.set(n, n)
+      light.shadow.map?.setSize(n, n)
+    }
+  }
+
+  get size() {
+    return this.lights[0].shadow.camera.right
+  }
+
+  set size(n: number) {
+    for (const light of this.lights) {
+      light.shadow.camera.left = -n
+      light.shadow.camera.right = n
+      light.shadow.camera.top = n
+      light.shadow.camera.bottom = -n
+    }
+  }
+
+  get near() {
+    return this.lights[0].shadow.camera.near
+  }
+
+  set near(n: number) {
+    for (const light of this.lights) {
+      light.shadow.camera.near = this.near
+    }
+  }
+
+  get far() {
+    return this.lights[0].shadow.camera.far
+  }
+
+  set far(n: number) {
+    for (const light of this.lights) {
+      light.shadow.camera.far = this.far
+    }
+  }
+
+  get lights(): DirectionalLight[] {
+    return this.children.filter(c => 'isDirectionalLight' in c) as DirectionalLight[]
+  }
+
+  update() {
+    const lights = this.lights
+    const lightIntensity = this.intensity / lights.length
+    let ambientCount = Math.floor(this.ambient * lights.length)
+
+    for (const light of lights) {
+      light.castShadow = this.castShadow
+      light.shadow.bias = this.bias
+
+      light.intensity = lightIntensity
+
+      if (ambientCount-- > 0) {
+        const lambda = Math.acos(2 * Math.random() - 1) - Math.PI / 2.0
+        const phi = 2 * Math.PI * Math.random()
+        light.position.set(
+          Math.cos(lambda) * Math.cos(phi) * this.length,
+          Math.abs(Math.cos(lambda) * Math.sin(phi) * this.length),
+          Math.sin(lambda) * this.length,
+        )
+      }
+      else {
+        if (Math.random() > this.ambient) {
+          light.position.set(
+            this.position.x + MathUtils.randFloatSpread(this.radius),
+            this.position.y + MathUtils.randFloatSpread(this.radius),
+            this.position.z + MathUtils.randFloatSpread(this.radius),
+          )
+        }
+      }
+    }
+  }
+}
diff --git a/src/core/staging/RandomizedLights/component.vue b/src/core/staging/RandomizedLights/component.vue
new file mode 100644
index 000000000..bd2936e78
--- /dev/null
+++ b/src/core/staging/RandomizedLights/component.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, shallowRef } from 'vue'
+import type { VectorFlexibleParams } from '@tresjs/core'
+import { extend, normalizeVectorFlexibleParam } from '@tresjs/core'
+import RandomizedLights from './RandomizedLights'
+
+export interface RandomizedLightsProps {
+  /** Number of lights, 8 */
+  count?: number
+  /** Radius of the jiggle, higher values make softer light, 1 */
+  radius?: number
+  /** Light intensity, Math.PI */
+  intensity?: number
+  /** "Ambient occlusion" to directional light ratio, lower values mean less AO, 0.5 */
+  ambient?: number
+  /** If the lights cast shadows, true */
+  castShadow?: boolean
+  /** Default shadow bias, 0 */
+  bias?: number
+  /** Size of the lights' shadow map, 512 */
+  mapSize?: number
+  /** Size of the lights' shadow camera frustum, 10 */
+  size?: number
+  /** Lights' shadow camera near value, 0.5 */
+  near?: number
+  /** Lights' shadow camera far value, 500 */
+  far?: number
+  /** Position, [5, 5, -10] */
+  position?: VectorFlexibleParams
+}
+
+const props = withDefaults(defineProps<RandomizedLightsProps>(), {
+  count: 8,
+  radius: 1,
+  intensity: Math.PI,
+  ambient: 0.5,
+  castShadow: true,
+  bias: 0,
+  mapSize: 512,
+  size: 10,
+  near: 0.5,
+  far: 500,
+  position: () => [5, 5, -10],
+})
+
+extend({ RandomizedLights })
+
+const lightsRef = shallowRef()
+
+const pos = computed(() => normalizeVectorFlexibleParam(props.position))
+
+defineExpose({ instance: lightsRef })
+</script>
+
+<template>
+  <TresRandomizedLights
+    ref="lightsRef"
+    :count="count"
+    :radius="radius"
+    :intensity="intensity"
+    :ambient="ambient"
+    :cast-shadow="castShadow"
+    :bias="bias"
+    :map-size="mapSize"
+    :size="size"
+    :near="near"
+    :far="far"
+    :position="pos"
+  />
+</template>
diff --git a/src/core/staging/Stage.vue b/src/core/staging/Stage.vue
new file mode 100644
index 000000000..37e9e6e9a
--- /dev/null
+++ b/src/core/staging/Stage.vue
@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import type { ComputedRef } from 'vue'
+import { computed, ref, shallowRef, watch } from 'vue'
+import type { Group } from 'three'
+import { AccumulativeShadows, Align, Bounds, ContactShadows, Environment, RandomizedLights } from '.'
+import type { AccumulativeShadowsProps } from './AccumulativeShadows/component.vue'
+import type { ContactShadowsProps } from './ContactShadows.vue'
+import type { RandomizedLightsProps } from './RandomizedLights/component.vue'
+import type { AlignCallbackOptions, AlignProps } from './Align.vue'
+import type { EnvironmentOptions, EnvironmentPresetsType } from './useEnvironment/const'
+import { useDebounceFn } from '@vueuse/core'
+
+interface StageProps {
+  /** Lighting setup, default: "rembrandt" */
+  lighting?:
+    | null | undefined | false
+    | 'rembrandt'
+    | 'portrait'
+    | 'upfront'
+    | 'soft'
+    | { main: [x: number, y: number, z: number], fill: [x: number, y: number, z: number] }
+  /** Controls the ground shadows, default: "contact" */
+  shadows?: boolean | 'contact' | 'accumulative' | StageShadows
+  /** Optionally wraps and thereby centers the models using <Bounds>, can also be a camera offset, default: true */
+  adjustCamera?: boolean | number
+  /** The default environment, default: { preset: "city" } */
+  environment?: EnvironmentPresetsType | Partial<EnvironmentOptions> | null
+  /** Lighting intensity, `0` removes lights, default: 0.5 */
+  intensity?: number
+  /** To adjust alignment, default: undefined */
+  align?: Partial<AlignProps>
+}
+
+type StageShadows = Partial<AccumulativeShadowsProps> &
+  Partial<RandomizedLightsProps> &
+  Partial<ContactShadowsProps> & {
+    type: 'contact' | 'accumulative'
+    /** Shadow plane offset, default: 0 */
+    offset?: number
+    /** Shadow bias, default: -0.0001 */
+    bias?: number
+    /** Shadow normal bias, default: 0 */
+    normalBias?: number
+    /** Shadow map size, default: 1024 */
+    size?: number
+  }
+
+const props = withDefaults(defineProps<StageProps>(), {
+  adjustCamera: true,
+  intensity: 0.5,
+  shadows: 'contact',
+  environment: () => ({ preset: 'city' }),
+  lighting: 'rembrandt',
+})
+
+interface LightingPreset {
+  main: [number, number, number]
+  fill: [number, number, number]
+}
+
+interface LightingPresets {
+  rembrandt: LightingPreset
+  portrait: LightingPreset
+  upfront: LightingPreset
+  soft: LightingPreset
+}
+
+const lightingPresets: LightingPresets = {
+  rembrandt: {
+    main: [1, 2, 1],
+    fill: [-2, -0.5, -2],
+  },
+  portrait: {
+    main: [-1, 2, 0.5],
+    fill: [-1, 0.5, -1.5],
+  },
+  upfront: {
+    main: [0, 2, 1],
+    fill: [-1, 0.5, -1.5],
+  },
+  soft: {
+    main: [-2, 4, 4],
+    fill: [-1, 0.5, -1.5],
+  },
+}
+
+const radius = ref(2)
+const height = ref(0)
+const stageRef = shallowRef<typeof Group>()
+const boundsRef = shallowRef<typeof Bounds>()
+const alignRef = shallowRef<typeof Align>()
+const accumulativeShadowsRef = shallowRef<typeof AccumulativeShadows>()
+
+const debouncedLookAt = useDebounceFn(() => {
+  if (boundsRef.value?.instance) {
+    boundsRef.value.instance.lookAt(boundsRef.value.instance)
+  }
+}, 500, { maxWait: 2000 })
+
+watch(() => [props.adjustCamera, radius.value], () => {
+  alignRef.value?.update()
+  if (props.adjustCamera !== false && boundsRef.value) {
+    boundsRef.value.instance.offset = typeof props.adjustCamera === 'boolean' ? 0.3 : props.adjustCamera
+    debouncedLookAt()
+  }
+})
+
+watch(() => [props.shadows], () => {
+  // NOTE: `AccumulativeShadows` can be in a mode where
+  // it renders only once, then never again without
+  // explicitly calling `update`.
+  // To help users tweaking settings, we'll call `update`
+  // when the `props.shadows` object changes.
+  accumulativeShadowsRef.value?.update()
+})
+
+const lightingPresetComputed: ComputedRef<LightingPreset> = computed(() => {
+  let preset = lightingPresets.rembrandt
+  if (typeof props.lighting === 'string') {
+    preset = lightingPresets[props.lighting]
+  }
+  else if (props.lighting) {
+    preset = props.lighting
+  }
+  return preset
+})
+
+const lightingMainComputed: ComputedRef<[number, number, number]> = computed(() => {
+  return lightingPresetComputed.value.main.map(v => v * radius.value) as [number, number, number]
+})
+
+const lightingFillComputed: ComputedRef<[number, number, number]> = computed(() => {
+  return lightingPresetComputed.value.fill.map(v => v * radius.value) as [number, number, number]
+})
+
+const contactShadowsComputed: ComputedRef<StageShadows | null> = computed(() => {
+  if (props.shadows === true || props.shadows === 'contact') {
+    return { type: 'contact' }
+  }
+  else if (typeof props.shadows === 'object' && props.shadows.type === 'contact') {
+    return props.shadows
+  }
+  else {
+    return null
+  }
+})
+
+const accumulativeShadowsComputed: ComputedRef<StageShadows | null> = computed(() => {
+  if (props.shadows === 'accumulative') {
+    return { type: 'accumulative' }
+  }
+  else if (typeof props.shadows === 'object' && (props.shadows as StageShadows).type === 'accumulative') {
+    return props.shadows
+  }
+  else {
+    return null
+  }
+})
+
+const environmentComputed: ComputedRef<EnvironmentOptions | null> = computed(() => {
+  if (props.environment === null) {
+    return null
+  }
+  else if (!props.environment) {
+    return { preset: 'city' }
+  }
+  else if (typeof props.environment === 'string') {
+    return { preset: props.environment }
+  }
+  else {
+    return props.environment
+  }
+})
+
+const onAlignChange = (alignProps: AlignCallbackOptions) => {
+  radius.value = alignProps.boundingSphere.radius
+  if (props.adjustCamera !== false) {
+    debouncedLookAt()
+  }
+}
+
+defineExpose({ instance: stageRef, update: () => {} })
+</script>
+
+<template>
+  <TresGroup ref="stageRef">
+    <TresGroup v-if="props.lighting">
+      <TresAmbientLight :intensity="intensity / 3" />
+      <TresSpotLight
+        :penumbra="1"
+        :position="lightingMainComputed"
+        :intensity="intensity * 2"
+        :castShadow="!!shadows"
+        :shadow-bias="(shadows as StageShadows)?.bias ?? 0"
+        :shadow-normalBias="(shadows as StageShadows)?.normalBias ?? 0"
+        :shadow-mapSize="(shadows as StageShadows)?.size ?? 1024"
+      />
+      <TresPointLight
+        :position="lightingFillComputed"
+        :intensity="intensity"
+      />
+    </TresGroup>
+    <Bounds
+      ref="boundsRef"
+      :clip="!!adjustCamera"
+      :offset="typeof props.adjustCamera === 'boolean' ? 0.3 : props.adjustCamera"
+      use-mounted
+      use-resize
+      v-bind="props"
+    >
+      <Align ref="alignRef" v-bind="align" @change="onAlignChange">
+        <slot></slot>
+      </Align>
+    </Bounds>
+    <TresGroup :position="[0, -height / 2 - ((shadows as StageShadows)?.offset ?? 0) / 2, 0]">
+      <ContactShadows
+        v-if="contactShadowsComputed"
+        :scale="radius * 4"
+        :far="radius"
+        :blur="2"
+        v-bind="contactShadowsComputed"
+      />
+      <AccumulativeShadows
+        v-if="accumulativeShadowsComputed"
+        ref="accumulativeShadowsRef"
+        :frames="100"
+        :alpha-test="0.5"
+        :tone-mapped="true"
+        :scale="radius * 4"
+        v-bind="accumulativeShadowsComputed"
+      >
+        <RandomizedLights
+          :position="lightingMainComputed"
+          :count="accumulativeShadowsComputed.count ?? 8"
+          :radius="accumulativeShadowsComputed.radius ?? radius"
+          :intensity="accumulativeShadowsComputed.intensity ?? 1.5"
+          :ambient="accumulativeShadowsComputed.ambient ?? 0.5"
+          :size="radius * 4"
+          :bias="accumulativeShadowsComputed.bias ?? 0"
+          :map-size="accumulativeShadowsComputed.size ?? 1024"
+          v-bind="accumulativeShadowsComputed"
+        />
+      </AccumulativeShadows>
+      <Suspense>
+        <Environment v-if="environmentComputed" v-bind="environmentComputed" />
+      </Suspense>
+    </TresGroup>
+  </TresGroup>
+</template>
diff --git a/src/core/staging/index.ts b/src/core/staging/index.ts
index fc6ea028c..02248a415 100644
--- a/src/core/staging/index.ts
+++ b/src/core/staging/index.ts
@@ -1,21 +1,29 @@
+import AccumulativeShadows from './AccumulativeShadows/component.vue'
 import Align from './Align.vue'
 import Backdrop from './Backdrop.vue'
+import Bounds from './Bounds/component.vue'
 import ContactShadows from './ContactShadows.vue'
 import Fit from './Fit.vue'
 import Grid from './Grid.vue'
 import Ocean from './Ocean.vue'
 import Precipitation from './Precipitation.vue'
+import CircleShadow from './CircleShadow.vue'
+import RandomizedLights from './RandomizedLights/component.vue'
 import Sky from './Sky.vue'
 import Smoke from './Smoke.vue'
 import SoftShadows from './SoftShadows.vue'
 import Sparkles from './Sparkles/component.vue'
+import Stage from './Stage.vue'
 import Stars from './Stars.vue'
 import Environment from './useEnvironment/component.vue'
 import Lightformer from './useEnvironment/lightformer/index.vue'
 
 export {
+  AccumulativeShadows,
   Align,
   Backdrop,
+  Bounds,
+  CircleShadow,
   ContactShadows,
   Environment,
   Fit,
@@ -23,9 +31,11 @@ export {
   Lightformer,
   Ocean,
   Precipitation,
+  RandomizedLights,
   Sky,
   Smoke,
   SoftShadows,
   Sparkles,
+  Stage,
   Stars,
 }