From bf6bb05b799019500b60a8169a521195d3e8302f Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Thu, 30 Jan 2025 18:55:54 +0100
Subject: [PATCH 01/10] migrate to new tresleches, change devDependencies
 package.json file

---
 .../theme/components/pmdrs/BarrelBlurDemo.vue |   2 +-
 .../pmdrs/ChromaticAberrationDemo.vue         |   6 +-
 .../components/pmdrs/ColorAverageDemo.vue     |   4 +-
 .../theme/components/pmdrs/DotScreenDemo.vue  |   2 +-
 .../components/pmdrs/HueSaturationDemo.vue    |   2 +-
 .../theme/components/pmdrs/KuwaharaDemo.vue   |   6 +-
 .../components/pmdrs/LensDistortionDemo.vue   |   8 +-
 .../theme/components/pmdrs/LinocutDemo.vue    |  10 +-
 .../theme/components/pmdrs/ScanlineDemo.vue   |   2 +-
 .../theme/components/pmdrs/SepiaDemo.vue      |   2 +-
 .../theme/components/pmdrs/ShockWaveDemo.vue  |   6 +-
 .../theme/components/pmdrs/TiltShiftDemo.vue  |  10 +-
 .../components/pmdrs/ToneMappingDemo.vue      |   4 +-
 docs/package.json                             |   1 -
 package.json                                  |   1 +
 playground/package.json                       |   1 -
 .../src/pages/postprocessing/barrel-blur.vue  |   2 +-
 playground/src/pages/postprocessing/bloom.vue |  14 +-
 .../postprocessing/chromatic-aberration.vue   |   6 +-
 .../pages/postprocessing/color-average.vue    |   2 +-
 .../pages/postprocessing/depth-of-field.vue   |   2 +-
 .../src/pages/postprocessing/dot-screen.vue   |   2 +-
 .../src/pages/postprocessing/glitch.vue       |  18 +-
 .../pages/postprocessing/hue-saturation.vue   |   2 +-
 .../src/pages/postprocessing/kuwahara.vue     |   2 +-
 .../pages/postprocessing/lens-distortion.vue  |   8 +-
 .../src/pages/postprocessing/linocut.vue      |  10 +-
 playground/src/pages/postprocessing/noise.vue |   7 +-
 .../src/pages/postprocessing/outline.vue      |  10 +-
 .../src/pages/postprocessing/scanline.vue     |   2 +-
 playground/src/pages/postprocessing/sepia.vue |   2 +-
 .../src/pages/postprocessing/shock-wave.vue   |   4 +-
 .../src/pages/postprocessing/tilt-shift.vue   |  18 +-
 .../src/pages/postprocessing/tone-mapping.vue |   3 +-
 .../src/pages/postprocessing/vignette.vue     |   4 +-
 pnpm-lock.yaml                                | 645 +++++++++++++++++-
 36 files changed, 727 insertions(+), 103 deletions(-)

diff --git a/docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue b/docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue
index ed54ad00..a4f4dad4 100644
--- a/docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue
@@ -56,7 +56,7 @@ const { amount, offsetX, offsetY, blendFunction } = useControls({
 
     <Suspense>
       <EffectComposerPmndrs>
-        <BarrelBlurPmndrs :amount="amount.value" :offset="[offsetX.value, offsetY.value]" :blendFunction="Number(blendFunction.value)" />
+        <BarrelBlurPmndrs :amount="amount" :offset="[offsetX, offsetY]" :blendFunction="Number(blendFunction)" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/docs/.vitepress/theme/components/pmdrs/ChromaticAberrationDemo.vue b/docs/.vitepress/theme/components/pmdrs/ChromaticAberrationDemo.vue
index 8a28e9aa..207408c6 100644
--- a/docs/.vitepress/theme/components/pmdrs/ChromaticAberrationDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/ChromaticAberrationDemo.vue
@@ -8,6 +8,8 @@ import { ChromaticAberrationPmndrs, EffectComposerPmndrs } from '@tresjs/post-pr
 
 import '@tresjs/leches/styles'
 
+// TODO: Adapt watchEffect to useControls for visibility of modulationOffset
+
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
@@ -24,7 +26,7 @@ const { offsetX, offsetY, radialModulation, modulationOffset } = useControls({
 })
 
 watchEffect(() => {
-  modulationOffset.value.visible = radialModulation.value.value
+  // modulationOffset.value.visible = radialModulation.value.value
 })
 </script>
 
@@ -69,7 +71,7 @@ watchEffect(() => {
 
     <Suspense>
       <EffectComposerPmndrs>
-        <ChromaticAberrationPmndrs ref="chromaticAberrationRef" :offset="new Vector2(offsetX.value, offsetY.value)" :radial-modulation="radialModulation.value" :modulation-offset="modulationOffset.value" />
+        <ChromaticAberrationPmndrs ref="chromaticAberrationRef" :offset="new Vector2(offsetX, offsetY)" :radial-modulation="radialModulation" :modulation-offset="modulationOffset" />
       </EffectComposerPmndrs>
     </Suspense>
 
diff --git a/docs/.vitepress/theme/components/pmdrs/ColorAverageDemo.vue b/docs/.vitepress/theme/components/pmdrs/ColorAverageDemo.vue
index 634dbddd..11b78415 100644
--- a/docs/.vitepress/theme/components/pmdrs/ColorAverageDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/ColorAverageDemo.vue
@@ -39,7 +39,7 @@ const { blendFunction, opacity } = useControls({
 
 function onUpdateTimeline(e) {
   const progress = 1 - e.progress()
-  opacity.value.value = progress
+  opacity.value = progress
 }
 
 watch(meshRef, () => {
@@ -85,7 +85,7 @@ onUnmounted(() => {
 
     <Suspense>
       <EffectComposerPmndrs>
-        <ColorAveragePmndrs :blendFunction="Number(blendFunction.value)" :opacity="opacity.value" />
+        <ColorAveragePmndrs :blendFunction="Number(blendFunction)" :opacity="opacity" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue b/docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue
index 5be563d4..e3a05ee4 100644
--- a/docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue
@@ -55,7 +55,7 @@ const { scene } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets
 
     <Suspense>
       <EffectComposerPmndrs>
-        <DotScreenPmndrs :blendFunction="Number(blendFunction.value)" :angle="angle.value" :scale="scale.value" />
+        <DotScreenPmndrs :blendFunction="Number(blendFunction)" :angle="angle" :scale="scale" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/docs/.vitepress/theme/components/pmdrs/HueSaturationDemo.vue b/docs/.vitepress/theme/components/pmdrs/HueSaturationDemo.vue
index ed365cc7..59df7c59 100644
--- a/docs/.vitepress/theme/components/pmdrs/HueSaturationDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/HueSaturationDemo.vue
@@ -50,7 +50,7 @@ const { saturation, hue, blendFunction } = useControls({
 
     <Suspense>
       <EffectComposerPmndrs>
-        <HueSaturationPmndrs :blendFunction="Number(blendFunction.value)" :hue="hue.value" :saturation="saturation.value" />
+        <HueSaturationPmndrs :blendFunction="Number(blendFunction)" :hue="hue" :saturation="saturation" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/docs/.vitepress/theme/components/pmdrs/KuwaharaDemo.vue b/docs/.vitepress/theme/components/pmdrs/KuwaharaDemo.vue
index 13660275..55f4887d 100644
--- a/docs/.vitepress/theme/components/pmdrs/KuwaharaDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/KuwaharaDemo.vue
@@ -28,8 +28,8 @@ const { enabled, radius, sectorCount } = useControls({
   sectorCount: { value: 4, min: 1, max: 8, step: 1 },
 })
 
-watch(enabled.value, () => {
-  effectProps.blendFunction = enabled.value.value ? BlendFunction.NORMAL : BlendFunction.SKIP
+watch(enabled, () => {
+  effectProps.blendFunction = enabled.value ? BlendFunction.NORMAL : BlendFunction.SKIP
 })
 </script>
 
@@ -72,7 +72,7 @@ watch(enabled.value, () => {
 
     <Suspense>
       <EffectComposerPmndrs>
-        <KuwaharaPmndrs :blendFunction="effectProps.blendFunction" :radius="radius.value" :sectorCount="sectorCount.value" />
+        <KuwaharaPmndrs :blendFunction="effectProps.blendFunction" :radius="radius" :sectorCount="sectorCount" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/docs/.vitepress/theme/components/pmdrs/LensDistortionDemo.vue b/docs/.vitepress/theme/components/pmdrs/LensDistortionDemo.vue
index c8210fbc..7f1d65d8 100644
--- a/docs/.vitepress/theme/components/pmdrs/LensDistortionDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/LensDistortionDemo.vue
@@ -57,10 +57,10 @@ pbrTexture.map.colorSpace = SRGBColorSpace
     <Suspense>
       <EffectComposerPmndrs>
         <LensDistortionPmndrs
-          :distortion="distortion.value"
-          :principalPoint="principalPoint.value"
-          :focalLength="focalLength.value"
-          :skew="skew.value"
+          :distortion="distortion"
+          :principalPoint="principalPoint"
+          :focalLength="focalLength"
+          :skew="skew"
         />
       </EffectComposerPmndrs>
     </Suspense>
diff --git a/docs/.vitepress/theme/components/pmdrs/LinocutDemo.vue b/docs/.vitepress/theme/components/pmdrs/LinocutDemo.vue
index c38c9ff0..ff899f20 100644
--- a/docs/.vitepress/theme/components/pmdrs/LinocutDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/LinocutDemo.vue
@@ -61,11 +61,11 @@ const { blendFunction, scale, noiseScale, centerX, centerY, rotation } = useCont
     <Suspense>
       <EffectComposerPmndrs>
         <LinocutPmndrs
-          :scale="scale.value"
-          :noiseScale="noiseScale.value"
-          :center="[centerX.value, centerY.value]"
-          :rotation="rotation.value"
-          :blendFunction="Number(blendFunction.value)"
+          :scale="scale"
+          :noiseScale="noiseScale"
+          :center="[centerX, centerY]"
+          :rotation="rotation"
+          :blendFunction="Number(blendFunction)"
         />
       </EffectComposerPmndrs>
     </Suspense>
diff --git a/docs/.vitepress/theme/components/pmdrs/ScanlineDemo.vue b/docs/.vitepress/theme/components/pmdrs/ScanlineDemo.vue
index 25f45c0b..b7ebd23f 100644
--- a/docs/.vitepress/theme/components/pmdrs/ScanlineDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/ScanlineDemo.vue
@@ -62,7 +62,7 @@ const { blendFunction, opacity, density, scrollSpeed } = useControls({
 
     <Suspense>
       <EffectComposerPmndrs>
-        <ScanlinePmndrs :density="density.value" :opacity="opacity.value" :scrollSpeed="scrollSpeed.value" :blendFunction="Number(blendFunction.value)" />
+        <ScanlinePmndrs :density="density" :opacity="opacity" :scrollSpeed="scrollSpeed" :blendFunction="Number(blendFunction)" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/docs/.vitepress/theme/components/pmdrs/SepiaDemo.vue b/docs/.vitepress/theme/components/pmdrs/SepiaDemo.vue
index 76b93bad..3720d33b 100644
--- a/docs/.vitepress/theme/components/pmdrs/SepiaDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/SepiaDemo.vue
@@ -54,7 +54,7 @@ const { intensity, blendFunction } = useControls({
 
     <Suspense>
       <EffectComposerPmndrs>
-        <SepiaPmndrs :intensity="intensity.value" :blendFunction="Number(blendFunction.value)" />
+        <SepiaPmndrs :intensity="intensity" :blendFunction="Number(blendFunction)" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue b/docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue
index f6e06858..01178bfe 100644
--- a/docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue
@@ -141,8 +141,8 @@ function getActiveDuration() {
   // Note that the speed affects how quickly the shock wave radius increases over time, but not the total duration of the emit explode.
 
   // Retrieve the values dynamically
-  const radiusMax = maxRadius.value.value
-  const wave = waveSize.value.value
+  const radiusMax = maxRadius.value
+  const wave = waveSize.value
 
   // Duration formula: 2 * maxRadius + 3 * waveSize
   const duration = 2 * radiusMax + 3 * wave
@@ -196,7 +196,7 @@ onUnmounted(() => {
     <Suspense>
       <EffectComposerPmndrs>
         <DepthPickingPassPmndrs ref="depthPickingPassRef" />
-        <ShockWavePmndrs ref="shockWaveEffectRef" :position="mousePosition" :amplitude="amplitude.value" :waveSize="waveSize.value" :speed="speed.value" :maxRadius="maxRadius.value" />
+        <ShockWavePmndrs ref="shockWaveEffectRef" :position="mousePosition" :amplitude="amplitude" :waveSize="waveSize" :speed="speed" :maxRadius="maxRadius" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/docs/.vitepress/theme/components/pmdrs/TiltShiftDemo.vue b/docs/.vitepress/theme/components/pmdrs/TiltShiftDemo.vue
index 79627c19..2b7b6041 100644
--- a/docs/.vitepress/theme/components/pmdrs/TiltShiftDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/TiltShiftDemo.vue
@@ -65,11 +65,11 @@ const { blendFunction, offset, rotation, focusArea, feather } = useControls({
     <Suspense>
       <EffectComposerPmndrs>
         <TiltShiftPmndrs
-          :blendFunction="Number(blendFunction.value)"
-          :offset="offset.value"
-          :rotation="rotation.value"
-          :focusArea="focusArea.value"
-          :feather="feather.value"
+          :blendFunction="Number(blendFunction)"
+          :offset="offset"
+          :rotation="rotation"
+          :focusArea="focusArea"
+          :feather="feather"
         />
       </EffectComposerPmndrs>
     </Suspense>
diff --git a/docs/.vitepress/theme/components/pmdrs/ToneMappingDemo.vue b/docs/.vitepress/theme/components/pmdrs/ToneMappingDemo.vue
index 6f7f1cb8..9c3782aa 100644
--- a/docs/.vitepress/theme/components/pmdrs/ToneMappingDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/ToneMappingDemo.vue
@@ -45,7 +45,7 @@ onUnmounted(() => {
 
   <TresCanvas
     v-bind="gl"
-    :toneMappingExposure="toneMappingExposure.value"
+    :toneMappingExposure="toneMappingExposure"
   >
     <TresPerspectiveCamera
       :position="[6.5, 6.5, 6.5]"
@@ -66,7 +66,7 @@ onUnmounted(() => {
 
     <Suspense>
       <EffectComposerPmndrs>
-        <ToneMappingPmndrs :mode="Number(mode.value)" />
+        <ToneMappingPmndrs :mode="Number(mode)" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/docs/package.json b/docs/package.json
index 4725848e..da956453 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,7 +15,6 @@
     "gsap": "^3.12.7"
   },
   "devDependencies": {
-    "@tresjs/leches": "^0.14.1",
     "unocss": "^65.4.3",
     "unplugin-vue-components": "^28.0.0",
     "vite-svg-loader": "^5.1.0",
diff --git a/package.json b/package.json
index 77bd6ed5..f2ccf6e9 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "postprocessing": "^6.36.6"
   },
   "devDependencies": {
+    "@tresjs/leches": "https://pkg.pr.new/@tresjs/leches@9ad0cd3",
     "@release-it/conventional-changelog": "^10.0.0",
     "@tresjs/core": "^4.3.2",
     "@tresjs/eslint-config": "^1.4.0",
diff --git a/playground/package.json b/playground/package.json
index 273abb5a..4296a453 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -15,7 +15,6 @@
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@tresjs/leches": "^0.14.1",
     "@types/three": "^0.172.0",
     "unplugin-auto-import": "^19.0.0",
     "unplugin-vue-components": "^28.0.0",
diff --git a/playground/src/pages/postprocessing/barrel-blur.vue b/playground/src/pages/postprocessing/barrel-blur.vue
index f1c383bb..815897b0 100644
--- a/playground/src/pages/postprocessing/barrel-blur.vue
+++ b/playground/src/pages/postprocessing/barrel-blur.vue
@@ -84,7 +84,7 @@ const { blendFunction, amount, offsetX, offsetY } = useControls({
 
     <Suspense>
       <EffectComposerPmndrs>
-        <BarrelBlurPmndrs :amount="amount.value" :offset="[offsetX.value, offsetY.value]" :blendFunction="Number(blendFunction.value)" />
+        <BarrelBlurPmndrs :amount="amount" :offset="[offsetX, offsetY]" :blendFunction="Number(blendFunction)" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/playground/src/pages/postprocessing/bloom.vue b/playground/src/pages/postprocessing/bloom.vue
index a85dfcae..73625cfe 100644
--- a/playground/src/pages/postprocessing/bloom.vue
+++ b/playground/src/pages/postprocessing/bloom.vue
@@ -127,13 +127,13 @@ onMounted(() => {
     <Suspense>
       <EffectComposerPmndrs :depth-buffer="true">
         <BloomPmndrs
-          :luminance-threshold="threshold.value"
-          :luminance-smoothing="smoothing.value"
-          :intensity="intensity.value"
-          :blend-function="blendFunction.value"
-          :kernel-size="kernelSize.value"
-          :resolution="resolution.value"
-          :mipmap-blur="mipmapBlur.value"
+          :luminance-threshold="threshold"
+          :luminance-smoothing="smoothing"
+          :intensity="intensity"
+          :blend-function="blendFunction"
+          :kernel-size="kernelSize"
+          :resolution="resolution"
+          :mipmap-blur="mipmapBlur"
         />
       </EffectComposerPmndrs>
     </Suspense>
diff --git a/playground/src/pages/postprocessing/chromatic-aberration.vue b/playground/src/pages/postprocessing/chromatic-aberration.vue
index bbc25bcb..8378b9a0 100644
--- a/playground/src/pages/postprocessing/chromatic-aberration.vue
+++ b/playground/src/pages/postprocessing/chromatic-aberration.vue
@@ -9,6 +9,8 @@ import { ChromaticAberrationPmndrs, EffectComposerPmndrs } from '@tresjs/post-pr
 
 import '@tresjs/leches/styles'
 
+// TODO: Adapt watchEffect to useControls for visibility of modulationOffset
+
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
@@ -31,7 +33,7 @@ const { offsetX, offsetY, radialModulation, modulationOffset, blendFunction } =
 })
 
 watchEffect(() => {
-  modulationOffset.value.visible = radialModulation.value.value
+  // modulationOffset.value.visible = radialModulation.value.value
 })
 </script>
 
@@ -59,7 +61,7 @@ watchEffect(() => {
 
     <Suspense>
       <EffectComposerPmndrs>
-        <ChromaticAberrationPmndrs :offset="new Vector2(offsetX.value, offsetY.value)" :radial-modulation="radialModulation.value" :modulation-offset="modulationOffset.value" :blendFunction="Number(blendFunction.value)" />
+        <ChromaticAberrationPmndrs :offset="new Vector2(offsetX, offsetY)" :radial-modulation="radialModulation" :modulation-offset="modulationOffset" :blendFunction="Number(blendFunction)" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/playground/src/pages/postprocessing/color-average.vue b/playground/src/pages/postprocessing/color-average.vue
index 6206f056..f56b3523 100644
--- a/playground/src/pages/postprocessing/color-average.vue
+++ b/playground/src/pages/postprocessing/color-average.vue
@@ -59,7 +59,7 @@ const { blendFunction, opacity } = useControls({
 
     <Suspense>
       <EffectComposerPmndrs>
-        <ColorAveragePmndrs :blendFunction="Number(blendFunction.value)" :opacity="opacity.value" />
+        <ColorAveragePmndrs :blendFunction="Number(blendFunction)" :opacity="opacity" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/playground/src/pages/postprocessing/depth-of-field.vue b/playground/src/pages/postprocessing/depth-of-field.vue
index 8e3f100d..e580a246 100644
--- a/playground/src/pages/postprocessing/depth-of-field.vue
+++ b/playground/src/pages/postprocessing/depth-of-field.vue
@@ -49,7 +49,7 @@ const effectParams = computed(() =>
   Object
     .entries(controls)
     .reduce(
-      (acc, [key, value]) => ({ ...acc, [key]: value.value.value })
+      (acc, [key, value]) => ({ ...acc, [key]: value.value })
       , {},
     ),
 )
diff --git a/playground/src/pages/postprocessing/dot-screen.vue b/playground/src/pages/postprocessing/dot-screen.vue
index 7fd1876e..1adb41c9 100644
--- a/playground/src/pages/postprocessing/dot-screen.vue
+++ b/playground/src/pages/postprocessing/dot-screen.vue
@@ -49,7 +49,7 @@ const { angle, scale, blendFunction } = useControls({
 
     <Suspense>
       <EffectComposerPmndrs>
-        <DotScreenPmndrs :blendFunction="Number(blendFunction.value)" :angle="angle.value" :scale="scale.value" />
+        <DotScreenPmndrs :blendFunction="Number(blendFunction)" :angle="angle" :scale="scale" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/playground/src/pages/postprocessing/glitch.vue b/playground/src/pages/postprocessing/glitch.vue
index 1b331f29..cf1640bb 100644
--- a/playground/src/pages/postprocessing/glitch.vue
+++ b/playground/src/pages/postprocessing/glitch.vue
@@ -81,15 +81,15 @@ pane.addInput(glitchParams, 'dtSize', { min: 1, max: 64, step: 1 }) */
     <Suspense>
       <EffectComposerPmndrs>
         <GlitchPmndrs
-          :delay="delay.value"
-          :duration="duration.value"
-          :strength="strength.value"
-          :mode="mode.value"
-          :active="active.value"
-          :ratio="ratio.value"
-          :columns="columns.value"
-          :chromatic-aberration-offset="chromaticAberrationOffset.value"
-          :chromatic-aberration-enabled="chromaticAberrationEnabled.value"
+          :delay="delay"
+          :duration="duration"
+          :strength="strength"
+          :mode="mode"
+          :active="active"
+          :ratio="ratio"
+          :columns="columns"
+          :chromatic-aberration-offset="chromaticAberrationOffset"
+          :chromatic-aberration-enabled="chromaticAberrationEnabled"
         />
       </EffectComposerPmndrs>
     </Suspense>
diff --git a/playground/src/pages/postprocessing/hue-saturation.vue b/playground/src/pages/postprocessing/hue-saturation.vue
index b9c5e09f..c3c5c6f5 100644
--- a/playground/src/pages/postprocessing/hue-saturation.vue
+++ b/playground/src/pages/postprocessing/hue-saturation.vue
@@ -49,7 +49,7 @@ const { saturation, hue, blendFunction } = useControls({
 
     <Suspense>
       <EffectComposerPmndrs>
-        <HueSaturationPmndrs :blendFunction="Number(blendFunction.value)" :hue="hue.value" :saturation="saturation.value" />
+        <HueSaturationPmndrs :blendFunction="Number(blendFunction)" :hue="hue" :saturation="saturation" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/playground/src/pages/postprocessing/kuwahara.vue b/playground/src/pages/postprocessing/kuwahara.vue
index 8207d0b8..51f7f7ff 100644
--- a/playground/src/pages/postprocessing/kuwahara.vue
+++ b/playground/src/pages/postprocessing/kuwahara.vue
@@ -51,7 +51,7 @@ const { radius, blendFunction, sectorCount } = useControls({
 
     <Suspense>
       <EffectComposerPmndrs>
-        <KuwaharaPmndrs :blendFunction="Number(blendFunction.value)" :radius="radius.value" :sectorCount="sectorCount.value" />
+        <KuwaharaPmndrs :blendFunction="Number(blendFunction)" :radius="radius" :sectorCount="sectorCount" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/playground/src/pages/postprocessing/lens-distortion.vue b/playground/src/pages/postprocessing/lens-distortion.vue
index b87d33fd..824ecb00 100644
--- a/playground/src/pages/postprocessing/lens-distortion.vue
+++ b/playground/src/pages/postprocessing/lens-distortion.vue
@@ -43,10 +43,10 @@ const { distortion, principalPoint, focalLength, skew } = useControls({
     <Suspense>
       <EffectComposerPmndrs>
         <LensDistortionPmndrs
-          :distortion="distortion.value"
-          :principalPoint="principalPoint.value"
-          :focalLength="focalLength.value"
-          :skew="skew.value"
+          :distortion="distortion"
+          :principalPoint="principalPoint"
+          :focalLength="focalLength"
+          :skew="skew"
         />
       </EffectComposerPmndrs>
     </Suspense>
diff --git a/playground/src/pages/postprocessing/linocut.vue b/playground/src/pages/postprocessing/linocut.vue
index 0a6c1b9d..4249af54 100644
--- a/playground/src/pages/postprocessing/linocut.vue
+++ b/playground/src/pages/postprocessing/linocut.vue
@@ -63,11 +63,11 @@ const { blendFunction, scale, noiseScale, centerX, centerY, rotation } = useCont
     <Suspense>
       <EffectComposerPmndrs>
         <LinocutPmndrs
-          :scale="scale.value"
-          :noiseScale="noiseScale.value"
-          :center="[centerX.value, centerY.value]"
-          :rotation="rotation.value"
-          :blendFunction="Number(blendFunction.value)"
+          :scale="scale"
+          :noiseScale="noiseScale"
+          :center="[centerX, centerY]"
+          :rotation="rotation"
+          :blendFunction="Number(blendFunction)"
         />
       </EffectComposerPmndrs>
     </Suspense>
diff --git a/playground/src/pages/postprocessing/noise.vue b/playground/src/pages/postprocessing/noise.vue
index fd27d96e..516fe5b4 100644
--- a/playground/src/pages/postprocessing/noise.vue
+++ b/playground/src/pages/postprocessing/noise.vue
@@ -15,11 +15,11 @@ const gl = {
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
 }
-const { value: premultiply } = useControls({
+const { premultiply } = useControls({
   premultiply: true,
 })
 
-const { value: blendFunction } = useControls({
+const { blendFunction } = useControls({
   blendFunction: {
     options: Object.keys(BlendFunction).map(key => ({
       text: key,
@@ -28,6 +28,7 @@ const { value: blendFunction } = useControls({
     value: BlendFunction.SCREEN,
   },
 })
+
 </script>
 
 <template>
@@ -41,7 +42,7 @@ const { value: blendFunction } = useControls({
       <EffectComposerPmndrs :depth-buffer="true">
         <NoisePmndrs
           :premultiply="premultiply"
-          :blend-function="blendFunction"
+          :blend-function="Number(blendFunction)"
         />
       </EffectComposerPmndrs>
     </Suspense>
diff --git a/playground/src/pages/postprocessing/outline.vue b/playground/src/pages/postprocessing/outline.vue
index 191c4610..e3211e44 100644
--- a/playground/src/pages/postprocessing/outline.vue
+++ b/playground/src/pages/postprocessing/outline.vue
@@ -80,11 +80,11 @@ const { edgeStrength, pulseSpeed, visibleEdgeColor, blur, kernelSize } = useCont
       <EffectComposerPmndrs>
         <OutlinePmndrs
           :outlined-objects="outlinedObjects"
-          :blur="blur.value"
-          :edge-strength="edgeStrength.value"
-          :pulse-speed="pulseSpeed.value"
-          :visible-edge-color="visibleEdgeColor.value"
-          :kernel-size="kernelSize.value"
+          :blur="blur"
+          :edge-strength="edgeStrength"
+          :pulse-speed="pulseSpeed"
+          :visible-edge-color="visibleEdgeColor"
+          :kernel-size="kernelSize"
         />
       </EffectComposerPmndrs>
     </Suspense>
diff --git a/playground/src/pages/postprocessing/scanline.vue b/playground/src/pages/postprocessing/scanline.vue
index 52e65f12..cf269fe5 100644
--- a/playground/src/pages/postprocessing/scanline.vue
+++ b/playground/src/pages/postprocessing/scanline.vue
@@ -55,7 +55,7 @@ const { blendFunction, opacity, density, scrollSpeed } = useControls({
 
     <Suspense>
       <EffectComposerPmndrs>
-        <ScanlinePmndrs :density="density.value" :opacity="opacity.value" :scrollSpeed="scrollSpeed.value" :blendFunction="Number(blendFunction.value)" />
+        <ScanlinePmndrs :density="density" :opacity="opacity" :scrollSpeed="scrollSpeed" :blendFunction="Number(blendFunction)" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/playground/src/pages/postprocessing/sepia.vue b/playground/src/pages/postprocessing/sepia.vue
index 1e59a8ad..a4705702 100644
--- a/playground/src/pages/postprocessing/sepia.vue
+++ b/playground/src/pages/postprocessing/sepia.vue
@@ -54,7 +54,7 @@ const { intensity, blendFunction } = useControls({
 
     <Suspense>
       <EffectComposerPmndrs>
-        <SepiaPmndrs :intensity="intensity.value" :blendFunction="Number(blendFunction.value)" />
+        <SepiaPmndrs :intensity="intensity" :blendFunction="Number(blendFunction)" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/playground/src/pages/postprocessing/shock-wave.vue b/playground/src/pages/postprocessing/shock-wave.vue
index 02e0b498..35305d21 100644
--- a/playground/src/pages/postprocessing/shock-wave.vue
+++ b/playground/src/pages/postprocessing/shock-wave.vue
@@ -7,6 +7,8 @@ import { DepthPickingPassPmndrs, EffectComposerPmndrs, ShockWavePmndrs } from '@
 import { useMouse, useWindowSize } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
+// TODO: The requested module ————— does not provide an export named 'DepthPickingPassPmndrs'
+
 import '@tresjs/leches/styles'
 
 const gl = {
@@ -99,7 +101,7 @@ function triggerShockWave() {
     <Suspense>
       <EffectComposerPmndrs ref="effectComposerRef">
         <DepthPickingPassPmndrs ref="depthPickingPassRef" />
-        <ShockWavePmndrs ref="shockWaveEffect" :position="mousePosition" :amplitude="amplitude.value" :waveSize="waveSize.value" :speed="speed.value" :maxRadius="maxRadius.value" />
+        <ShockWavePmndrs ref="shockWaveEffect" :position="mousePosition" :amplitude="amplitude" :waveSize="waveSize" :speed="speed" :maxRadius="maxRadius" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/playground/src/pages/postprocessing/tilt-shift.vue b/playground/src/pages/postprocessing/tilt-shift.vue
index d6d3e49e..c104c68f 100644
--- a/playground/src/pages/postprocessing/tilt-shift.vue
+++ b/playground/src/pages/postprocessing/tilt-shift.vue
@@ -74,15 +74,15 @@ const { blendFunction, offset, rotation, focusArea, feather, kernelSize, resolut
     <Suspense>
       <EffectComposerPmndrs>
         <TiltShiftPmndrs
-          :blendFunction="Number(blendFunction.value)"
-          :offset="offset.value"
-          :rotation="rotation.value"
-          :focusArea="focusArea.value"
-          :feather="feather.value"
-          :kernelSize="Number(kernelSize.value)"
-          :resolutionScale="resolutionScale.value"
-          :resolutionX="resolutionX.value"
-          :resolutionY="resolutionY.value"
+          :blendFunction="Number(blendFunction)"
+          :offset="offset"
+          :rotation="rotation"
+          :focusArea="focusArea"
+          :feather="feather"
+          :kernelSize="Number(kernelSize)"
+          :resolutionScale="resolutionScale"
+          :resolutionX="resolutionX"
+          :resolutionY="resolutionY"
         />
       </EffectComposerPmndrs>
     </Suspense>
diff --git a/playground/src/pages/postprocessing/tone-mapping.vue b/playground/src/pages/postprocessing/tone-mapping.vue
index 4481f33a..f444c04f 100644
--- a/playground/src/pages/postprocessing/tone-mapping.vue
+++ b/playground/src/pages/postprocessing/tone-mapping.vue
@@ -40,6 +40,7 @@ const { blendFunction, resolution, mode } = useControls({
     value: BlendFunction.OVERLAY,
   },
 })
+
 </script>
 
 <template>
@@ -70,7 +71,7 @@ const { blendFunction, resolution, mode } = useControls({
 
     <Suspense>
       <EffectComposerPmndrs>
-        <ToneMappingPmndrs :mode="Number(mode.value)" :resolution="Number(resolution.value)" :blendFunction="Number(blendFunction.value)" />
+        <ToneMappingPmndrs :mode="Number(mode)" :resolution="Number(resolution)" :blendFunction="Number(blendFunction)" />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
diff --git a/playground/src/pages/postprocessing/vignette.vue b/playground/src/pages/postprocessing/vignette.vue
index 4f814b0d..dd2eb617 100644
--- a/playground/src/pages/postprocessing/vignette.vue
+++ b/playground/src/pages/postprocessing/vignette.vue
@@ -47,8 +47,8 @@ const { darkness, offset } = useControls({
         :bokeh-scale="2"
       />
       <VignettePmndrs
-        :darkness="darkness.value"
-        :offset="offset.value"
+        :darkness="darkness"
+        :offset="offset"
       />
     </EffectComposerPmndrs>
     <TresAmbientLight :intensity="1" />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 84ff45b5..5f9549b8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,6 +24,9 @@ importers:
       '@tresjs/eslint-config':
         specifier: ^1.4.0
         version: 1.4.0(@typescript-eslint/utils@8.22.0(eslint@9.19.0(jiti@2.4.2))(typescript@5.7.3))(@vue/compiler-sfc@3.5.13)(eslint@9.19.0(jiti@2.4.2))(typescript@5.7.3)
+      '@tresjs/leches':
+        specifier: https://pkg.pr.new/@tresjs/leches@9ad0cd3
+        version: https://pkg.pr.new/@tresjs/leches@9ad0cd3(rollup@4.32.1)(typescript@5.7.3)(unocss@65.4.3(postcss@8.5.1)(rollup@4.32.1)(vite@6.0.11(@types/node@22.12.0)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
       '@types/three':
         specifier: ^0.172.0
         version: 0.172.0
@@ -100,15 +103,12 @@ importers:
         specifier: ^3.12.7
         version: 3.12.7
     devDependencies:
-      '@tresjs/leches':
-        specifier: ^0.14.1
-        version: 0.14.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
       unocss:
         specifier: ^65.4.3
         version: 65.4.3(postcss@8.5.1)(rollup@4.32.1)(vite@6.0.11(@types/node@22.12.0)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       unplugin-vue-components:
         specifier: ^28.0.0
-        version: 28.0.0(@babel/parser@7.26.7)(rollup@4.32.1)(vue@3.5.13(typescript@5.7.3))
+        version: 28.0.0(@babel/parser@7.26.7)(@nuxt/kit@3.15.4(rollup@4.32.1))(rollup@4.32.1)(vue@3.5.13(typescript@5.7.3))
       vite-svg-loader:
         specifier: ^5.1.0
         version: 5.1.0(vue@3.5.13(typescript@5.7.3))
@@ -131,18 +131,15 @@ importers:
         specifier: ^4.5.0
         version: 4.5.0(vue@3.5.13(typescript@5.7.3))
     devDependencies:
-      '@tresjs/leches':
-        specifier: ^0.14.1
-        version: 0.14.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
       '@types/three':
         specifier: ^0.172.0
         version: 0.172.0
       unplugin-auto-import:
         specifier: ^19.0.0
-        version: 19.0.0(@vueuse/core@12.5.0(typescript@5.7.3))(rollup@4.32.1)
+        version: 19.0.0(@nuxt/kit@3.15.4(rollup@4.32.1))(@vueuse/core@12.5.0(typescript@5.7.3))(rollup@4.32.1)
       unplugin-vue-components:
         specifier: ^28.0.0
-        version: 28.0.0(@babel/parser@7.26.7)(rollup@4.32.1)(vue@3.5.13(typescript@5.7.3))
+        version: 28.0.0(@babel/parser@7.26.7)(@nuxt/kit@3.15.4(rollup@4.32.1))(rollup@4.32.1)(vue@3.5.13(typescript@5.7.3))
       vite-plugin-qrcode:
         specifier: ^0.2.4
         version: 0.2.4(vite@6.0.11(@types/node@22.12.0)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.7.0))
@@ -287,6 +284,32 @@ packages:
     resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/compat-data@7.26.5':
+    resolution: {integrity: sha512-XvcZi1KWf88RVbF9wn8MN6tYFloU5qX8KjuF3E1PVBmJ9eypXfs4GRiJwLuTZL0iSnJUKn1BFPa5BPZZJyFzPg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.26.7':
+    resolution: {integrity: sha512-SRijHmF0PSPgLIBYlWnG0hyeJLwXE2CgpsXaMOrtt2yp9/86ALw6oUlj9KYuZ0JN07T4eBMVIW4li/9S1j2BGA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.26.5':
+    resolution: {integrity: sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.26.5':
+    resolution: {integrity: sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.25.9':
+    resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.26.0':
+    resolution: {integrity: sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
   '@babel/helper-string-parser@7.25.9':
     resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
     engines: {node: '>=6.9.0'}
@@ -295,11 +318,31 @@ packages:
     resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-option@7.25.9':
+    resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.26.7':
+    resolution: {integrity: sha512-8NHiL98vsi0mbPQmYAGWwfcFaOy4j2HY49fXJCfuDcdE7fMIsH9a7GdaeXpIBsbT7307WU8KCMp5pUVDNL4f9A==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/parser@7.26.7':
     resolution: {integrity: sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/standalone@7.26.7':
+    resolution: {integrity: sha512-Fvdo9Dd20GDUAREzYMIR2EFMKAJ+ccxstgQdb39XV/yvygHL4UPcqgTkiChPyltAe/b+zgq+vUPXeukEZ6aUeA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.25.9':
+    resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.26.7':
+    resolution: {integrity: sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.26.7':
     resolution: {integrity: sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==}
     engines: {node: '>=6.9.0'}
@@ -1004,6 +1047,10 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@nuxt/kit@3.15.4':
+    resolution: {integrity: sha512-dr7I7eZOoRLl4uxdxeL2dQsH0OrbEiVPIyBHnBpA4co24CBnoJoF+JINuP9l3PAM3IhUzc5JIVq3/YY3lEc3Hw==}
+    engines: {node: '>=18.12.0'}
+
   '@octokit/auth-token@5.1.2':
     resolution: {integrity: sha512-JcQDsBdg49Yky2w2ld20IHAlwr8d/d8N6NiOXbtuoPCqzbsiJgF633mVUw3x4mo0H5ypataQIX7SFu3yy44Mpw==}
     engines: {node: '>= 18'}
@@ -1269,8 +1316,9 @@ packages:
     peerDependencies:
       eslint: 9.x
 
-  '@tresjs/leches@0.14.1':
-    resolution: {integrity: sha512-mM5Z0FWseNw8v0pS4XueINE6VFicm1aTp/4b86wlAOAp7ximVAfVnRcUZfl5EbfuEm3R8f5Flefma5JVcQz0ew==}
+  '@tresjs/leches@https://pkg.pr.new/@tresjs/leches@9ad0cd3':
+    resolution: {tarball: https://pkg.pr.new/@tresjs/leches@9ad0cd3}
+    version: 0.14.1
     peerDependencies:
       vue: '>=3.3.4'
 
@@ -1414,9 +1462,15 @@ packages:
     resolution: {integrity: sha512-Z3tnQ10UjM09Y1yVqfCYfZEh2pXFQlUQ1g188mMWxjXWEIXeei3f9dIApRBgC+xcPE6prqdu3fDC5emU+sqyxw==}
     engines: {node: '>=14'}
 
+  '@unocss/core@0.56.5':
+    resolution: {integrity: sha512-fx5VhOjSHn0HdV2D34pEwFMAHJcJQRTCp1xEE4GzxY1irXzaa+m2aYf5PZjmDxehiOC16IH7TO9FOWANXk1E0w==}
+
   '@unocss/core@65.4.3':
     resolution: {integrity: sha512-luFgdcchSlNrYSaDvU2176T2PPQZdxqfREVbxEXNXlFEgyEFrx5hOSUXoJtJSZjRhAcE6zkWyLDf/JkQJ5Eeyw==}
 
+  '@unocss/extractor-arbitrary-variants@0.56.5':
+    resolution: {integrity: sha512-p2pyzz/ONvc5CGcaB9OZvWE8qkRSgyuhaQqFQLdBFeUhveHC0CGP0iSnXwBgAFHWM7DJo4/JpWeZ+mBt0ogVLA==}
+
   '@unocss/extractor-arbitrary-variants@65.4.3':
     resolution: {integrity: sha512-RhSOOzOxkNjJl9zeglaBe0U+o39jleCCNPWJ87DDJA3ckbyylIIf21ZwY1Xu76rmdar5DT9ob7ucuPfEpJLN9A==}
 
@@ -1435,6 +1489,9 @@ packages:
   '@unocss/preset-icons@65.4.3':
     resolution: {integrity: sha512-g1WNamvYOIdD8YAOvZ5h4g3peel3rLTtKvB0wX4pVL5exsYsoyc0tmiGm57k+ZmnIucqSzxoUZ/vjHDLAViahw==}
 
+  '@unocss/preset-mini@0.56.5':
+    resolution: {integrity: sha512-/KhlThhs1ilauM7MwRSpahLbIPZ5VGeGvaUsU8+ZlNT3sis4yoVYkPtR14tL2IT6jhOU05N/uu3aBj+1bP8GjQ==}
+
   '@unocss/preset-mini@65.4.3':
     resolution: {integrity: sha512-JajAF18DKJRXgd9usrAYTcHUtZy606mD396ZswDgw/mUSu529tuiT6LOD43aJMYHgPEw7wKYjiGFHkeBTHijuQ==}
 
@@ -1456,6 +1513,10 @@ packages:
   '@unocss/reset@65.4.3':
     resolution: {integrity: sha512-f9QnMtY1yPS1HEIkeKmSwUYcp4QS6zdo9ZcIFE9PDSLOcns3v+M1lTQg8mLChxJHVl73Cf6PofWVh5tmnxV53Q==}
 
+  '@unocss/rule-utils@0.56.5':
+    resolution: {integrity: sha512-CXIGHCIC9B8WUl9KbbFMSZHcsIgfmI/+X0bjBv6xrgBVC1EQ2Acq4PYnJIbaRGBRAhl9wYjNL7Zq2UWOdowHAw==}
+    engines: {node: '>=14'}
+
   '@unocss/rule-utils@65.4.3':
     resolution: {integrity: sha512-bzRRdb9mb82IvgOt3KiRyUh/njRfJC3hoV84lMyUPryT8YTEP/hl6kt2KQ2l1K3WDz7ZPQXVi2eqUbqc+AUpwg==}
     engines: {node: '>=14'}
@@ -1561,6 +1622,9 @@ packages:
   '@vueuse/components@12.5.0':
     resolution: {integrity: sha512-aLgEW8bidRZ4qkVOIl958NAev+XKYTtbfsIj5ObjiDwvBDqxmGVCwMQvWHUQN37tb8JSkRF22gTUbXNt0iSwLQ==}
 
+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
   '@vueuse/core@12.5.0':
     resolution: {integrity: sha512-GVyH1iYqNANwcahAx8JBm6awaNgvR/SwZ1fjr10b8l1HIgDp82ngNbfzJUgOgWEoxjL+URAggnlilAEXwCOZtg==}
 
@@ -1605,9 +1669,20 @@ packages:
       universal-cookie:
         optional: true
 
+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
   '@vueuse/metadata@12.5.0':
     resolution: {integrity: sha512-Ui7Lo2a7AxrMAXRF+fAp9QsXuwTeeZ8fIB9wsLHqzq9MQk+2gMYE2IGJW48VMJ8ecvCB3z3GsGLKLbSasQ5Qlg==}
 
+  '@vueuse/motion@2.2.6':
+    resolution: {integrity: sha512-gKFktPtrdypSv44SaW1oBJKLBiP6kE5NcoQ6RsAU3InemESdiAutgQncfPe/rhLSLCtL4jTAhMmFfxoR6gm5LQ==}
+    peerDependencies:
+      vue: '>=3.0.0'
+
+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
   '@vueuse/shared@12.5.0':
     resolution: {integrity: sha512-vMpcL1lStUU6O+kdj6YdHDixh0odjPAUM15uJ9f7MY781jcYkIwFA4iv2EfoIPO6vBmvutI1HxxAwmf0cx5ISQ==}
 
@@ -1769,6 +1844,14 @@ packages:
     peerDependencies:
       esbuild: '>=0.18'
 
+  c12@2.0.1:
+    resolution: {integrity: sha512-Z4JgsKXHG37C6PYUtIxCfLJZvo6FyhHJoClwwb9ftUkLpPSkuYqn6Tr+vnaN8hymm0kIbcg6Ey3kv/Q71k5w/A==}
+    peerDependencies:
+      magicast: ^0.3.5
+    peerDependenciesMeta:
+      magicast:
+        optional: true
+
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -1816,10 +1899,21 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
+  chownr@2.0.0:
+    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
+    engines: {node: '>=10'}
+
   ci-info@4.1.0:
     resolution: {integrity: sha512-HutrvTNsF48wnxkzERIXOe5/mlcfFcbfCmwcg6CJnizbSue78AbDt+1cgl26zwn61WFxhcPykPfZrbqjGmBb4A==}
     engines: {node: '>=8'}
 
+  citty@0.1.6:
+    resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
+
   clean-regexp@1.0.0:
     resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
     engines: {node: '>=4'}
@@ -1959,6 +2053,9 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
   copy-anything@3.0.5:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
@@ -2105,6 +2202,10 @@ packages:
     resolution: {integrity: sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==}
     engines: {node: '>=18'}
 
+  dotenv@16.4.7:
+    resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
+    engines: {node: '>=12'}
+
   draco3d@1.5.7:
     resolution: {integrity: sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==}
 
@@ -2484,10 +2585,17 @@ packages:
   focus-trap@7.6.4:
     resolution: {integrity: sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==}
 
+  framesync@6.1.2:
+    resolution: {integrity: sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==}
+
   fs-extra@7.0.1:
     resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
     engines: {node: '>=6 <7 || >=8'}
 
+  fs-minipass@2.1.0:
+    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
+    engines: {node: '>= 8'}
+
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -2499,6 +2607,10 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
   get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -2522,6 +2634,10 @@ packages:
     resolution: {integrity: sha512-E1b1lFFLvLgak2whF2xDBcOy6NLVGZBqqjJjsIhvopKfWWEi64pLVTWWehV8KlLerZkfNTA95sTe2OdJKm1OzQ==}
     engines: {node: '>= 14'}
 
+  giget@1.2.4:
+    resolution: {integrity: sha512-Wv+daGyispVoA31TrWAVR+aAdP7roubTPEM/8JzRnqXhLbdJH0T9eQyXVFF8fjk3WKTsctII6QcyxILYgNp2DA==}
+    hasBin: true
+
   git-raw-commits@5.0.0:
     resolution: {integrity: sha512-I2ZXrXeOc0KrCvC7swqtIFXFN+rbjnC7b2T943tvemIOVNl+XP8YnA9UVwqFhzzLClnSA60KR/qEjLpXzs73Qg==}
     engines: {node: '>=18'}
@@ -2554,6 +2670,10 @@ packages:
     resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
     engines: {node: '>=18'}
 
+  globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+
   globals@13.24.0:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
@@ -2618,6 +2738,9 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  hey-listen@1.0.8:
+    resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
+
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
@@ -2655,6 +2778,10 @@ packages:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
 
+  ignore@7.0.3:
+    resolution: {integrity: sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==}
+    engines: {node: '>= 4'}
+
   import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -2870,6 +2997,11 @@ packages:
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   jsonc-eslint-parser@2.4.0:
     resolution: {integrity: sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2880,6 +3012,13 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  klona@2.0.6:
+    resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
+    engines: {node: '>= 8'}
+
+  knitwork@1.2.0:
+    resolution: {integrity: sha512-xYSH7AvuQ6nXkq42x0v5S8/Iry+cfulBz/DJQzhIyESdLD7425jXsPy4vn5cCXU+HhRN2kVw51Vd1K6/By4BQg==}
+
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
@@ -2949,6 +3088,9 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
   lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -3150,12 +3292,29 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  minipass@3.3.6:
+    resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
+    engines: {node: '>=8'}
+
+  minipass@5.0.0:
+    resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
+    engines: {node: '>=8'}
+
   minisearch@7.1.1:
     resolution: {integrity: sha512-b3YZEYCEH4EdCAtYP7OlDyx7FdPwNzuNwLQ34SfJpM9dlbBZzeXndGavTrC+VCiRWomL21SWfMc6SCKO/U2ZNw==}
 
+  minizlib@2.1.2:
+    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
+    engines: {node: '>= 8'}
+
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
+  mkdirp@1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   mlly@1.7.4:
     resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
 
@@ -3223,6 +3382,11 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
+  nypm@0.5.2:
+    resolution: {integrity: sha512-AHzvnyUJYSrrphPhRWWZNcoZfArGNp3Vrc4pm/ZurO74tYNTgAPrEyBQEKy+qioqmWlPXwvMZCG2wOaHlPG0Pw==}
+    engines: {node: ^14.16.0 || >=16.10.0}
+    hasBin: true
+
   object-hash@3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
@@ -3230,6 +3394,9 @@ packages:
   ofetch@1.4.1:
     resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
 
+  ohash@1.1.4:
+    resolution: {integrity: sha512-FlDryZAahJmEF3VR3w1KogSEdWX3WhA5GPakFx4J81kEAiHyLMpdLLElS8n8dfNadMgAne/MywcvmogzscVt4g==}
+
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -3387,6 +3554,9 @@ packages:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
 
+  popmotion@11.0.5:
+    resolution: {integrity: sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==}
+
   postcss-selector-parser@6.1.2:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
@@ -3454,6 +3624,9 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  rc9@2.1.2:
+    resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
+
   rc@1.2.8:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
@@ -3485,6 +3658,10 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  readdirp@4.1.1:
+    resolution: {integrity: sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==}
+    engines: {node: '>= 14.18.0'}
+
   rechoir@0.6.2:
     resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==}
     engines: {node: '>= 0.10'}
@@ -3618,6 +3795,10 @@ packages:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
 
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
   semver@7.5.4:
     resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
     engines: {node: '>=10'}
@@ -3726,6 +3907,9 @@ packages:
   stats.js@0.17.0:
     resolution: {integrity: sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==}
 
+  std-env@3.8.0:
+    resolution: {integrity: sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==}
+
   stdin-discarder@0.2.2:
     resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
     engines: {node: '>=18'}
@@ -3782,9 +3966,15 @@ packages:
   strip-literal@2.1.1:
     resolution: {integrity: sha512-631UJ6O00eNGfMiWG78ck80dfBab8X6IVFB51jZK5Icd7XAs60Z5y7QdSd/wGIklnWvRbUNloVzhOKKmutxQ6Q==}
 
+  strip-literal@3.0.0:
+    resolution: {integrity: sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==}
+
   stubborn-fs@1.2.5:
     resolution: {integrity: sha512-H2N9c26eXjzL/S/K+i/RHHcFanE74dptvvjM8iwzwbVcWY/zjBbgRqF3K0DY4+OD+uTTASTBvDoxPDaPN02D7g==}
 
+  style-value-types@5.1.2:
+    resolution: {integrity: sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==}
+
   superjson@2.2.2:
     resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==}
     engines: {node: '>=16'}
@@ -3821,6 +4011,10 @@ packages:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
 
+  tar@6.2.1:
+    resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
+    engines: {node: '>=10'}
+
   three-custom-shader-material@5.4.0:
     resolution: {integrity: sha512-Yn1lFlKOk3Vul3npEGAmbbFUZ5S2+yjPgM2XqJEZEYRSUUH2vk+WVYrtTB6Bcq15wa7hLUXAKoctAvbRmBmbYA==}
     peerDependencies:
@@ -3876,6 +4070,9 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  tslib@2.4.0:
+    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -3936,6 +4133,9 @@ packages:
   unconfig@0.6.1:
     resolution: {integrity: sha512-cVU+/sPloZqOyJEAfNwnQSFCzFrZm85vcVkryH7lnlB/PiTycUkAjt5Ds79cfIshGOZ+M5v3PBDnKgpmlE5DtA==}
 
+  unctx@2.4.1:
+    resolution: {integrity: sha512-AbaYw0Nm4mK4qjhns67C+kgxR2YWiwlDBPzxrN8h8C6VtAdCgditAY5Dezu3IJy4XVqAnbrXt9oQJvsn3fyozg==}
+
   undici-types@6.20.0:
     resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
 
@@ -3954,6 +4154,10 @@ packages:
   unimport@3.14.6:
     resolution: {integrity: sha512-CYvbDaTT04Rh8bmD8jz3WPmHYZRG/NnvYVzwD6V1YAlvvKROlAeNDUBhkBGzNav2RKaeuXvlWYaa1V4Lfi/O0g==}
 
+  unimport@4.0.0:
+    resolution: {integrity: sha512-FH+yZ36YaVlh0ZjHesP20Q4uL+wL0EqTNxDZcUupsIn6WRYXZAbIYEMDLTaLBpkNVzFpqZXS+am51/HR3ANUNw==}
+    engines: {node: '>=18.12.0'}
+
   unist-util-is@6.0.0:
     resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
 
@@ -3976,6 +4180,11 @@ packages:
     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
     engines: {node: '>= 4.0.0'}
 
+  unocss-preset-scrollbar@0.3.1:
+    resolution: {integrity: sha512-LhvcQA1cfwq06sqAZY++1crrLsOf/IfOPdyCkMHVyywI9WCvMhxCJlCcrySlQI8/Y2VUjOpLBDWB0w3DXS5qRA==}
+    peerDependencies:
+      unocss: '>= 0.31.13 < 1'
+
   unocss@65.4.3:
     resolution: {integrity: sha512-mwSVi0ovPxaDv58yFB7Vm5v1x/q/pUc7aTh7SJbeYoRrpbUGdKiVf20YSQfMqmBNXV9CFDr4o6tabP/58as6RQ==}
     engines: {node: '>=14'}
@@ -4021,6 +4230,10 @@ packages:
     resolution: {integrity: sha512-Q3LU0e4zxKfRko1wMV2HmP8lB9KWislY7hxXpxd+lGx0PRInE4vhMBVEZwpdVYHvtqzhSrzuIfErsob6bQfCzw==}
     engines: {node: '>=18.12.0'}
 
+  untyped@1.5.2:
+    resolution: {integrity: sha512-eL/8PlhLcMmlMDtNPKhyyz9kEBDS3Uk4yMu/ewlkT2WFbtzScjHWPJLdQLmaGPUKjXzwe9MumOtOgc4Fro96Kg==}
+    hasBin: true
+
   update-browserslist-db@1.1.2:
     resolution: {integrity: sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==}
     hasBin: true
@@ -4159,6 +4372,17 @@ packages:
   vscode-uri@3.0.8:
     resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
 
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-eslint-parser@9.4.3:
     resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -4249,6 +4473,9 @@ packages:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
 
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
@@ -4462,14 +4689,106 @@ snapshots:
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
+  '@babel/compat-data@7.26.5':
+    optional: true
+
+  '@babel/core@7.26.7':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.5
+      '@babel/helper-compilation-targets': 7.26.5
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.7)
+      '@babel/helpers': 7.26.7
+      '@babel/parser': 7.26.7
+      '@babel/template': 7.25.9
+      '@babel/traverse': 7.26.7
+      '@babel/types': 7.26.7
+      convert-source-map: 2.0.0
+      debug: 4.4.0
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
+  '@babel/generator@7.26.5':
+    dependencies:
+      '@babel/parser': 7.26.7
+      '@babel/types': 7.26.7
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+      jsesc: 3.1.0
+    optional: true
+
+  '@babel/helper-compilation-targets@7.26.5':
+    dependencies:
+      '@babel/compat-data': 7.26.5
+      '@babel/helper-validator-option': 7.25.9
+      browserslist: 4.24.4
+      lru-cache: 5.1.1
+      semver: 6.3.1
+    optional: true
+
+  '@babel/helper-module-imports@7.25.9':
+    dependencies:
+      '@babel/traverse': 7.26.7
+      '@babel/types': 7.26.7
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
+  '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+      '@babel/traverse': 7.26.7
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   '@babel/helper-string-parser@7.25.9': {}
 
   '@babel/helper-validator-identifier@7.25.9': {}
 
+  '@babel/helper-validator-option@7.25.9':
+    optional: true
+
+  '@babel/helpers@7.26.7':
+    dependencies:
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.7
+    optional: true
+
   '@babel/parser@7.26.7':
     dependencies:
       '@babel/types': 7.26.7
 
+  '@babel/standalone@7.26.7':
+    optional: true
+
+  '@babel/template@7.25.9':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/parser': 7.26.7
+      '@babel/types': 7.26.7
+    optional: true
+
+  '@babel/traverse@7.26.7':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.5
+      '@babel/parser': 7.26.7
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.7
+      debug: 4.4.0
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   '@babel/types@7.26.7':
     dependencies:
       '@babel/helper-string-parser': 7.25.9
@@ -5013,6 +5332,34 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.18.0
 
+  '@nuxt/kit@3.15.4(rollup@4.32.1)':
+    dependencies:
+      c12: 2.0.1
+      consola: 3.4.0
+      defu: 6.1.4
+      destr: 2.0.3
+      globby: 14.0.2
+      ignore: 7.0.3
+      jiti: 2.4.2
+      klona: 2.0.6
+      knitwork: 1.2.0
+      mlly: 1.7.4
+      ohash: 1.1.4
+      pathe: 2.0.2
+      pkg-types: 1.3.1
+      scule: 1.3.0
+      semver: 7.6.3
+      std-env: 3.8.0
+      ufo: 1.5.4
+      unctx: 2.4.1
+      unimport: 4.0.0(rollup@4.32.1)
+      untyped: 1.5.2
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+    optional: true
+
   '@octokit/auth-token@5.1.2': {}
 
   '@octokit/core@6.1.3':
@@ -5315,13 +5662,20 @@ snapshots:
       - typescript
       - vitest
 
-  '@tresjs/leches@0.14.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))':
+  '@tresjs/leches@https://pkg.pr.new/@tresjs/leches@9ad0cd3(rollup@4.32.1)(typescript@5.7.3)(unocss@65.4.3(postcss@8.5.1)(rollup@4.32.1)(vite@6.0.11(@types/node@22.12.0)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@unocss/core': 65.4.3
       '@vueuse/components': 12.5.0(typescript@5.7.3)
+      '@vueuse/motion': 2.2.6(rollup@4.32.1)(vue@3.5.13(typescript@5.7.3))
+      unocss-preset-scrollbar: 0.3.1(unocss@65.4.3(postcss@8.5.1)(rollup@4.32.1)(vite@6.0.11(@types/node@22.12.0)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)))
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
+      - '@vue/composition-api'
+      - magicast
+      - rollup
+      - supports-color
       - typescript
+      - unocss
 
   '@trysound/sax@0.2.0': {}
 
@@ -5506,8 +5860,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@unocss/core@0.56.5': {}
+
   '@unocss/core@65.4.3': {}
 
+  '@unocss/extractor-arbitrary-variants@0.56.5':
+    dependencies:
+      '@unocss/core': 0.56.5
+
   '@unocss/extractor-arbitrary-variants@65.4.3':
     dependencies:
       '@unocss/core': 65.4.3
@@ -5546,6 +5906,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@unocss/preset-mini@0.56.5':
+    dependencies:
+      '@unocss/core': 0.56.5
+      '@unocss/extractor-arbitrary-variants': 0.56.5
+      '@unocss/rule-utils': 0.56.5
+
   '@unocss/preset-mini@65.4.3':
     dependencies:
       '@unocss/core': 65.4.3
@@ -5581,6 +5947,10 @@ snapshots:
 
   '@unocss/reset@65.4.3': {}
 
+  '@unocss/rule-utils@0.56.5':
+    dependencies:
+      '@unocss/core': 0.56.5
+
   '@unocss/rule-utils@65.4.3':
     dependencies:
       '@unocss/core': 65.4.3
@@ -5749,6 +6119,16 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  '@vueuse/core@10.11.1(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.5.13(typescript@5.7.3))
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/core@12.5.0(typescript@5.7.3)':
     dependencies:
       '@types/web-bluetooth': 0.0.20
@@ -5768,8 +6148,34 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  '@vueuse/metadata@10.11.1': {}
+
   '@vueuse/metadata@12.5.0': {}
 
+  '@vueuse/motion@2.2.6(rollup@4.32.1)(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.7.3))
+      '@vueuse/shared': 10.11.1(vue@3.5.13(typescript@5.7.3))
+      csstype: 3.1.3
+      framesync: 6.1.2
+      popmotion: 11.0.5
+      style-value-types: 5.1.2
+      vue: 3.5.13(typescript@5.7.3)
+    optionalDependencies:
+      '@nuxt/kit': 3.15.4(rollup@4.32.1)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - magicast
+      - rollup
+      - supports-color
+
+  '@vueuse/shared@10.11.1(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/shared@12.5.0(typescript@5.7.3)':
     dependencies:
       vue: 3.5.13(typescript@5.7.3)
@@ -5937,6 +6343,22 @@ snapshots:
       esbuild: 0.24.2
       load-tsconfig: 0.2.5
 
+  c12@2.0.1:
+    dependencies:
+      chokidar: 4.0.3
+      confbox: 0.1.8
+      defu: 6.1.4
+      dotenv: 16.4.7
+      giget: 1.2.4
+      jiti: 2.4.2
+      mlly: 1.7.4
+      ohash: 1.1.4
+      pathe: 1.1.2
+      perfect-debounce: 1.0.0
+      pkg-types: 1.3.1
+      rc9: 2.1.2
+    optional: true
+
   cac@6.7.14: {}
 
   callsites@3.1.0: {}
@@ -5978,8 +6400,21 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.1
+    optional: true
+
+  chownr@2.0.0:
+    optional: true
+
   ci-info@4.1.0: {}
 
+  citty@0.1.6:
+    dependencies:
+      consola: 3.4.0
+    optional: true
+
   clean-regexp@1.0.0:
     dependencies:
       escape-string-regexp: 1.0.5
@@ -6125,6 +6560,9 @@ snapshots:
       conventional-commits-parser: 6.0.0
       meow: 13.2.0
 
+  convert-source-map@2.0.0:
+    optional: true
+
   copy-anything@3.0.5:
     dependencies:
       is-what: 4.1.16
@@ -6260,6 +6698,9 @@ snapshots:
     dependencies:
       type-fest: 4.33.0
 
+  dotenv@16.4.7:
+    optional: true
+
   draco3d@1.5.7: {}
 
   duplexer@0.1.2: {}
@@ -6799,12 +7240,21 @@ snapshots:
     dependencies:
       tabbable: 6.2.0
 
+  framesync@6.1.2:
+    dependencies:
+      tslib: 2.4.0
+
   fs-extra@7.0.1:
     dependencies:
       graceful-fs: 4.2.11
       jsonfile: 4.0.0
       universalify: 0.1.2
 
+  fs-minipass@2.1.0:
+    dependencies:
+      minipass: 3.3.6
+    optional: true
+
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.3:
@@ -6812,6 +7262,9 @@ snapshots:
 
   function-bind@1.1.2: {}
 
+  gensync@1.0.0-beta.2:
+    optional: true
+
   get-caller-file@2.0.5: {}
 
   get-east-asian-width@1.3.0: {}
@@ -6835,6 +7288,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  giget@1.2.4:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.0
+      defu: 6.1.4
+      node-fetch-native: 1.6.6
+      nypm: 0.5.2
+      ohash: 1.1.4
+      pathe: 2.0.2
+      tar: 6.2.1
+    optional: true
+
   git-raw-commits@5.0.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0):
     dependencies:
       '@conventional-changelog/git-client': 1.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0)
@@ -6881,6 +7346,9 @@ snapshots:
     dependencies:
       ini: 4.1.1
 
+  globals@11.12.0:
+    optional: true
+
   globals@13.24.0:
     dependencies:
       type-fest: 0.20.2
@@ -6953,6 +7421,8 @@ snapshots:
 
   he@1.2.0: {}
 
+  hey-listen@1.0.8: {}
+
   hookable@5.5.3: {}
 
   hosted-git-info@2.8.9: {}
@@ -6987,6 +7457,9 @@ snapshots:
 
   ignore@5.3.2: {}
 
+  ignore@7.0.3:
+    optional: true
+
   import-fresh@3.3.0:
     dependencies:
       parent-module: 1.0.1
@@ -7153,6 +7626,9 @@ snapshots:
 
   json-stable-stringify-without-jsonify@1.0.1: {}
 
+  json5@2.2.3:
+    optional: true
+
   jsonc-eslint-parser@2.4.0:
     dependencies:
       acorn: 8.14.0
@@ -7168,6 +7644,12 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
+  klona@2.0.6:
+    optional: true
+
+  knitwork@1.2.0:
+    optional: true
+
   kolorist@1.8.0: {}
 
   ky@1.7.4: {}
@@ -7226,6 +7708,11 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+    optional: true
+
   lru-cache@6.0.0:
     dependencies:
       yallist: 4.0.0
@@ -7592,10 +8079,27 @@ snapshots:
 
   minimist@1.2.8: {}
 
+  minipass@3.3.6:
+    dependencies:
+      yallist: 4.0.0
+    optional: true
+
+  minipass@5.0.0:
+    optional: true
+
   minisearch@7.1.1: {}
 
+  minizlib@2.1.2:
+    dependencies:
+      minipass: 3.3.6
+      yallist: 4.0.0
+    optional: true
+
   mitt@3.0.1: {}
 
+  mkdirp@1.0.4:
+    optional: true
+
   mlly@1.7.4:
     dependencies:
       acorn: 8.14.0
@@ -7657,6 +8161,16 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
+  nypm@0.5.2:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.0
+      pathe: 2.0.2
+      pkg-types: 1.3.1
+      tinyexec: 0.3.2
+      ufo: 1.5.4
+    optional: true
+
   object-hash@3.0.0: {}
 
   ofetch@1.4.1:
@@ -7665,6 +8179,9 @@ snapshots:
       node-fetch-native: 1.6.6
       ufo: 1.5.4
 
+  ohash@1.1.4:
+    optional: true
+
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -7838,6 +8355,13 @@ snapshots:
 
   pluralize@8.0.0: {}
 
+  popmotion@11.0.5:
+    dependencies:
+      framesync: 6.1.2
+      hey-listen: 1.0.8
+      style-value-types: 5.1.2
+      tslib: 2.4.0
+
   postcss-selector-parser@6.1.2:
     dependencies:
       cssesc: 3.0.0
@@ -7900,6 +8424,12 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  rc9@2.1.2:
+    dependencies:
+      defu: 6.1.4
+      destr: 2.0.3
+    optional: true
+
   rc@1.2.8:
     dependencies:
       deep-extend: 0.6.0
@@ -7951,6 +8481,9 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  readdirp@4.1.1:
+    optional: true
+
   rechoir@0.6.2:
     dependencies:
       resolve: 1.22.10
@@ -8110,6 +8643,9 @@ snapshots:
 
   semver@5.7.2: {}
 
+  semver@6.3.1:
+    optional: true
+
   semver@7.5.4:
     dependencies:
       lru-cache: 6.0.0
@@ -8210,6 +8746,9 @@ snapshots:
 
   stats.js@0.17.0: {}
 
+  std-env@3.8.0:
+    optional: true
+
   stdin-discarder@0.2.2: {}
 
   string-argv@0.3.2: {}
@@ -8261,8 +8800,18 @@ snapshots:
     dependencies:
       js-tokens: 9.0.1
 
+  strip-literal@3.0.0:
+    dependencies:
+      js-tokens: 9.0.1
+    optional: true
+
   stubborn-fs@1.2.5: {}
 
+  style-value-types@5.1.2:
+    dependencies:
+      hey-listen: 1.0.8
+      tslib: 2.4.0
+
   superjson@2.2.2:
     dependencies:
       copy-anything: 3.0.5
@@ -8300,6 +8849,16 @@ snapshots:
 
   tapable@2.2.1: {}
 
+  tar@6.2.1:
+    dependencies:
+      chownr: 2.0.0
+      fs-minipass: 2.1.0
+      minipass: 5.0.0
+      minizlib: 2.1.2
+      mkdirp: 1.0.4
+      yallist: 4.0.0
+    optional: true
+
   three-custom-shader-material@5.4.0(three@0.172.0):
     dependencies:
       glsl-token-functions: 1.0.1
@@ -8352,6 +8911,8 @@ snapshots:
     dependencies:
       typescript: 5.7.3
 
+  tslib@2.4.0: {}
+
   tslib@2.8.1: {}
 
   tsx@4.19.2:
@@ -8396,6 +8957,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  unctx@2.4.1:
+    dependencies:
+      acorn: 8.14.0
+      estree-walker: 3.0.3
+      magic-string: 0.30.17
+      unplugin: 2.1.2
+    optional: true
+
   undici-types@6.20.0: {}
 
   undici@6.21.1: {}
@@ -8423,6 +8992,26 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
+  unimport@4.0.0(rollup@4.32.1):
+    dependencies:
+      '@rollup/pluginutils': 5.1.4(rollup@4.32.1)
+      acorn: 8.14.0
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      fast-glob: 3.3.3
+      local-pkg: 1.0.0
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      pathe: 2.0.2
+      picomatch: 4.0.2
+      pkg-types: 1.3.1
+      scule: 1.3.0
+      strip-literal: 3.0.0
+      unplugin: 2.1.2
+    transitivePeerDependencies:
+      - rollup
+    optional: true
+
   unist-util-is@6.0.0:
     dependencies:
       '@types/unist': 3.0.3
@@ -8450,6 +9039,11 @@ snapshots:
 
   universalify@0.1.2: {}
 
+  unocss-preset-scrollbar@0.3.1(unocss@65.4.3(postcss@8.5.1)(rollup@4.32.1)(vite@6.0.11(@types/node@22.12.0)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))):
+    dependencies:
+      '@unocss/preset-mini': 0.56.5
+      unocss: 65.4.3(postcss@8.5.1)(rollup@4.32.1)(vite@6.0.11(@types/node@22.12.0)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+
   unocss@65.4.3(postcss@8.5.1)(rollup@4.32.1)(vite@6.0.11(@types/node@22.12.0)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@unocss/astro': 65.4.3(rollup@4.32.1)(vite@6.0.11(@types/node@22.12.0)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
@@ -8477,7 +9071,7 @@ snapshots:
       - supports-color
       - vue
 
-  unplugin-auto-import@19.0.0(@vueuse/core@12.5.0(typescript@5.7.3))(rollup@4.32.1):
+  unplugin-auto-import@19.0.0(@nuxt/kit@3.15.4(rollup@4.32.1))(@vueuse/core@12.5.0(typescript@5.7.3))(rollup@4.32.1):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.4(rollup@4.32.1)
@@ -8487,11 +9081,12 @@ snapshots:
       unimport: 3.14.6(rollup@4.32.1)
       unplugin: 2.1.2
     optionalDependencies:
+      '@nuxt/kit': 3.15.4(rollup@4.32.1)
       '@vueuse/core': 12.5.0(typescript@5.7.3)
     transitivePeerDependencies:
       - rollup
 
-  unplugin-vue-components@28.0.0(@babel/parser@7.26.7)(rollup@4.32.1)(vue@3.5.13(typescript@5.7.3)):
+  unplugin-vue-components@28.0.0(@babel/parser@7.26.7)(@nuxt/kit@3.15.4(rollup@4.32.1))(rollup@4.32.1)(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.4(rollup@4.32.1)
@@ -8506,6 +9101,7 @@ snapshots:
       vue: 3.5.13(typescript@5.7.3)
     optionalDependencies:
       '@babel/parser': 7.26.7
+      '@nuxt/kit': 3.15.4(rollup@4.32.1)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -8520,6 +9116,20 @@ snapshots:
       acorn: 8.14.0
       webpack-virtual-modules: 0.6.2
 
+  untyped@1.5.2:
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/standalone': 7.26.7
+      '@babel/types': 7.26.7
+      citty: 0.1.6
+      defu: 6.1.4
+      jiti: 2.4.2
+      knitwork: 1.2.0
+      scule: 1.3.0
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   update-browserslist-db@1.1.2(browserslist@4.24.4):
     dependencies:
       browserslist: 4.24.4
@@ -8665,6 +9275,10 @@ snapshots:
 
   vscode-uri@3.0.8: {}
 
+  vue-demi@0.14.10(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      vue: 3.5.13(typescript@5.7.3)
+
   vue-eslint-parser@9.4.3(eslint@9.19.0(jiti@2.4.2)):
     dependencies:
       debug: 4.4.0
@@ -8753,6 +9367,9 @@ snapshots:
 
   y18n@5.0.8: {}
 
+  yallist@3.1.1:
+    optional: true
+
   yallist@4.0.0: {}
 
   yaml-eslint-parser@1.2.3:

From f73cc28e7b3abcdce05cbe345cc3636756cb43a9 Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Thu, 30 Jan 2025 18:57:27 +0100
Subject: [PATCH 02/10] add todo next commit

---
 docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue b/docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue
index 01178bfe..d0a07ca3 100644
--- a/docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue
@@ -8,6 +8,8 @@ import { DepthPickingPassPmndrs, EffectComposerPmndrs, ShockWavePmndrs } from '@
 import { useElementBounding, useMouse, useParentElement } from '@vueuse/core'
 import { gsap } from 'gsap'
 
+// TODO: The requested module ————— does not provide an export named 'DepthPickingPassPmndrs'
+
 import '@tresjs/leches/styles'
 
 const gl = {

From be535d46a3ad56c06813ce8359c88a291d6ffc76 Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Thu, 30 Jan 2025 19:01:16 +0100
Subject: [PATCH 03/10] lint

---
 package.json                                         |  2 +-
 playground/src/pages/postprocessing/noise.vue        |  1 -
 playground/src/pages/postprocessing/tone-mapping.vue |  1 -
 src/core/three/UnrealBloom.vue                       | 12 ++++++------
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index f2ccf6e9..3d9f44d5 100644
--- a/package.json
+++ b/package.json
@@ -60,10 +60,10 @@
     "postprocessing": "^6.36.6"
   },
   "devDependencies": {
-    "@tresjs/leches": "https://pkg.pr.new/@tresjs/leches@9ad0cd3",
     "@release-it/conventional-changelog": "^10.0.0",
     "@tresjs/core": "^4.3.2",
     "@tresjs/eslint-config": "^1.4.0",
+    "@tresjs/leches": "https://pkg.pr.new/@tresjs/leches@9ad0cd3",
     "@types/three": "^0.172.0",
     "@unocss/core": "^65.4.3",
     "@vitejs/plugin-vue": "^5.2.1",
diff --git a/playground/src/pages/postprocessing/noise.vue b/playground/src/pages/postprocessing/noise.vue
index 516fe5b4..98e81778 100644
--- a/playground/src/pages/postprocessing/noise.vue
+++ b/playground/src/pages/postprocessing/noise.vue
@@ -28,7 +28,6 @@ const { blendFunction } = useControls({
     value: BlendFunction.SCREEN,
   },
 })
-
 </script>
 
 <template>
diff --git a/playground/src/pages/postprocessing/tone-mapping.vue b/playground/src/pages/postprocessing/tone-mapping.vue
index f444c04f..230254d9 100644
--- a/playground/src/pages/postprocessing/tone-mapping.vue
+++ b/playground/src/pages/postprocessing/tone-mapping.vue
@@ -40,7 +40,6 @@ const { blendFunction, resolution, mode } = useControls({
     value: BlendFunction.OVERLAY,
   },
 })
-
 </script>
 
 <template>
diff --git a/src/core/three/UnrealBloom.vue b/src/core/three/UnrealBloom.vue
index 14eb38e7..e7556e59 100644
--- a/src/core/three/UnrealBloom.vue
+++ b/src/core/three/UnrealBloom.vue
@@ -32,21 +32,21 @@ defineExpose({ pass })
 
 watchEffect(() => {
   pass.value.radius = props.radius
-  ?? pass.value.getCompositeMaterial().uniforms.bloomRadius?.value
-  ?? 0.1
+    ?? pass.value.getCompositeMaterial().uniforms.bloomRadius?.value
+    ?? 0.1
 })
 
 watchEffect(() => {
   pass.value.strength
   = props.strength
-  ?? pass.value.getCompositeMaterial().uniforms.bloomStrength?.value
-  ?? 1
+    ?? pass.value.getCompositeMaterial().uniforms.bloomStrength?.value
+    ?? 1
 })
 
 watchEffect(() => {
   pass.value.threshold
   = props.threshold
-  ?? LuminosityHighPassShader.uniforms.luminosityThreshold?.value
-  ?? 1
+    ?? LuminosityHighPassShader.uniforms.luminosityThreshold?.value
+    ?? 1
 })
 </script>

From 6f53f2bdd68d674ebbfa5165f3e33d21c637a6cd Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Sun, 2 Feb 2025 04:21:01 +0100
Subject: [PATCH 04/10] init fish-eye

---
 docs/.vitepress/config.ts                     |  1 +
 .../src/pages/postprocessing/fish-eye.vue     | 98 +++++++++++++++++++
 playground/src/router.ts                      |  1 +
 src/core/pmndrs/FishEyePmndrs.vue             | 57 +++++++++++
 src/core/pmndrs/custom/fish-eye/index.ts      | 87 ++++++++++++++++
 src/core/pmndrs/index.ts                      |  3 +
 6 files changed, 247 insertions(+)
 create mode 100644 playground/src/pages/postprocessing/fish-eye.vue
 create mode 100644 src/core/pmndrs/FishEyePmndrs.vue
 create mode 100644 src/core/pmndrs/custom/fish-eye/index.ts

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 006daaa5..d1b4a744 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -49,6 +49,7 @@ export default defineConfig({
         text: 'Pmndrs',
         items: [
           { text: 'Barrel blur', link: '/guide/pmndrs/barrel-blur' },
+          { text: 'Fish Eye', link: '/guide/pmndrs/fish-eye' },
           { text: 'Bloom', link: '/guide/pmndrs/bloom' },
           { text: 'Chromatic Aberration', link: '/guide/pmndrs/chromatic-aberration' },
           { text: 'Linocut', link: '/guide/pmndrs/linocut' },
diff --git a/playground/src/pages/postprocessing/fish-eye.vue b/playground/src/pages/postprocessing/fish-eye.vue
new file mode 100644
index 00000000..38887719
--- /dev/null
+++ b/playground/src/pages/postprocessing/fish-eye.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ContactShadows, Environment, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { NoToneMapping } from 'three'
+import { BlendFunction } from 'postprocessing'
+import { EffectComposerPmndrs, FishEyePmndrs } from '@tresjs/post-processing'
+
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#ffffff',
+  toneMapping: NoToneMapping,
+  multisampling: 8,
+  envMapIntensity: 10,
+}
+
+const neonColors = [
+  '#FF00FF', // Magenta
+  '#00FFFF', // Cyan
+  '#00FF00', // Lime
+  '#FFFF00', // Yellow
+  '#FF0000', // Red
+  '#FF1493', // Deep Pink
+  '#7FFF00', // Chartreuse
+  '#FF4500', // Orange Red
+  '#8A2BE2', // Blue Violet
+  '#00FF7F', // Spring Green
+  '#FFD700', // Gold
+  '#FF69B4', // Hot Pink
+  '#ADFF2F', // Green Yellow
+  '#FF6347', // Tomato
+  '#40E0D0', // Turquoise
+  '#EE82EE', // Violet
+]
+
+const { blendFunction, lensSX, lensSY, lensFX, lensFY, scale } = useControls({
+  blendFunction: {
+    options: Object.keys(BlendFunction).map(key => ({
+      text: key,
+      value: BlendFunction[key as keyof typeof BlendFunction],
+    })),
+    value: BlendFunction.NORMAL,
+  },
+  lensSX: { value: 1.0, step: 0.01, min: 0, max: 2 },
+  lensSY: { value: 1.0, step: 0.01, min: 0, max: 2 },
+  lensFX: { value: 0.0, step: 0.01, min: -1, max: 1 },
+  lensFY: { value: 1.0, step: 0.01, min: -1, max: 1 },
+  scale: { value: 1.0, step: 0.01, min: 0.1, max: 2 },
+})
+</script>
+
+<template>
+  <TresLeches />
+
+  <TresCanvas
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera
+      :position="[0, 6.5, 6.5]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls auto-rotate />
+
+    <TresAmbientLight :intensity="1" />
+
+    <template v-for="(color, index) in neonColors" :key="index">
+      <TresMesh :position="[index % 4 * 2 - 3, 0, Math.floor(index / 4) * 2 - 3]">
+        <TresBoxGeometry :args="[2, 2, 2]" />
+        <TresMeshStandardMaterial :color="color" :roughness=".5" :metalness="1" />
+      </TresMesh>
+    </template>
+
+    <Suspense>
+      <Environment background :blur="0" preset="shangai" />
+    </Suspense>
+
+    <TresDirectionalLight color="white" />
+
+    <ContactShadows
+      :opacity=".65"
+      :position-y="-1"
+      :scale="35"
+      :blur="1"
+    />
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <FishEyePmndrs
+          :blendFunction="Number(blendFunction)"
+          :lensS="[lensSX, lensSY]"
+          :lensF="[lensFX, lensFY]"
+          :scale="scale"
+        />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
+</template>
diff --git a/playground/src/router.ts b/playground/src/router.ts
index d2d41f21..57898812 100644
--- a/playground/src/router.ts
+++ b/playground/src/router.ts
@@ -52,6 +52,7 @@ export const postProcessingRoutes = [
   makeRoute('Shock Wave', '🌊', false),
   makeRoute('Vignette', '🕶️', false),
   makeRoute('Barrel blur', '🌀', false),
+  makeRoute('FishEye', '👁️', false),
   makeRoute('On-demand', '🔄', false),
 ]
 
diff --git a/src/core/pmndrs/FishEyePmndrs.vue b/src/core/pmndrs/FishEyePmndrs.vue
new file mode 100644
index 00000000..2a5b0ca2
--- /dev/null
+++ b/src/core/pmndrs/FishEyePmndrs.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import type { BlendFunction } from 'postprocessing'
+import { Vector2 } from 'three'
+import { FishEyeEffect } from './custom/fish-eye/index'
+import { makePropWatchers } from '../../util/prop'
+import { useEffectPmndrs } from './composables/useEffectPmndrs'
+
+export interface FishEyePmndrsProps {
+  /**
+   * The blend function for the effect.
+   * Determines how this effect blends with other effects.
+   */
+  blendFunction?: BlendFunction
+
+  /**
+   * The lens scale.
+   * A Vector2 value or an array of two numbers.
+   */
+  lensS?: Vector2 | [number, number]
+
+  /**
+   * The lens factor.
+   * A Vector2 value or an array of two numbers.
+   */
+  lensF?: Vector2 | [number, number]
+
+  /**
+   * The scale of the effect.
+   * A number value.
+   */
+  scale?: number
+}
+
+const props = defineProps<FishEyePmndrsProps>()
+
+const { pass, effect } = useEffectPmndrs(
+  () => new FishEyeEffect({
+    ...props,
+    lensS: Array.isArray(props.lensS) ? new Vector2(...props.lensS) : props.lensS,
+    lensF: Array.isArray(props.lensF) ? new Vector2(...props.lensF) : props.lensF,
+  }),
+  props,
+)
+
+defineExpose({ pass, effect })
+
+makePropWatchers(
+  [
+    [() => props.blendFunction, 'blendMode.blendFunction'],
+    [() => props.lensS, 'lensS'],
+    [() => props.lensF, 'lensF'],
+    [() => props.scale, 'scale'],
+  ],
+  effect,
+  () => new FishEyeEffect(),
+)
+</script>
diff --git a/src/core/pmndrs/custom/fish-eye/index.ts b/src/core/pmndrs/custom/fish-eye/index.ts
new file mode 100644
index 00000000..3c56b2f5
--- /dev/null
+++ b/src/core/pmndrs/custom/fish-eye/index.ts
@@ -0,0 +1,87 @@
+import { Uniform, Vector2 } from 'three'
+import { BlendFunction, Effect } from 'postprocessing'
+
+/**
+ * FishEyeEffect - A custom effect for applying a barrel distortion
+ * with chromatic aberration blur.
+ */
+
+export class FishEyeEffect extends Effect {
+  /**
+   * Creates a new FishEyeEffect instance.
+   *
+   * @param {object} [options] - Configuration options for the effect.
+   * @param {BlendFunction} [options.blendFunction] - Blend mode.
+   * @param {Vector2} [options.lensS] - Lens scale.
+   * @param {Vector2} [options.lensF] - Lens factor.
+   * @param {number} [options.scale] - Scale.
+   *
+   */
+  constructor({ blendFunction = BlendFunction.NORMAL, lensS = new Vector2(1.0, 1.0), lensF = new Vector2(0.0, 1.0), scale = 1.0 } = {}) {
+    super('FishEyeEffect', `
+      uniform vec2 lensS;
+      uniform vec2 lensF;
+      uniform float scale;
+
+      void mainUv(inout vec2 uv) {
+          vec2 vMapping = uv * 2.0 - 1.0;
+          vMapping.x = vMapping.x + ((pow(vMapping.y, 2.0) / scale) * vMapping.x / scale) * -lensF.x;
+          vMapping.y = vMapping.y + ((pow(vMapping.x, 2.0) / scale) * vMapping.y / scale) * -lensF.y;
+          vMapping = vMapping * lensS;
+          vMapping = vMapping / scale * 0.5 + 0.5;
+
+          uv = vMapping;
+      }
+
+      void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+          outputColor = vec4(inputColor.rgb, inputColor.a); // Preserves original alpha
+      }
+      `, {
+      blendFunction,
+      uniforms: new Map<string, Uniform<number | Vector2>>([
+        ['lensS', new Uniform(lensS)], // Uniform controlling the lens scale
+        ['lensF', new Uniform(lensF)], // Uniform controlling the lens factor
+        ['scale', new Uniform(scale)], // Uniform controlling the scale
+      ]),
+    })
+  }
+
+  /**
+   * The lensS.
+   *
+   * @type {Vector2}
+   */
+  get lensS() {
+    return this.uniforms.get('lensS')?.value
+  }
+
+  set lensS(value) {
+    this.uniforms.get('lensS')!.value = value
+  }
+
+  /**
+   * The lensF.
+   *
+   * @type {Vector2}
+   */
+  get lensF() {
+    return this.uniforms.get('lensF')?.value
+  }
+
+  set lensF(value) {
+    this.uniforms.get('lensF')!.value = value
+  }
+
+  /**
+   * The scale.
+   *
+   * @type {number}
+   */
+  get scale() {
+    return this.uniforms.get('scale')?.value
+  }
+
+  set scale(value) {
+    this.uniforms.get('scale')!.value = value
+  }
+}
diff --git a/src/core/pmndrs/index.ts b/src/core/pmndrs/index.ts
index 7da2325f..572e2e88 100644
--- a/src/core/pmndrs/index.ts
+++ b/src/core/pmndrs/index.ts
@@ -23,6 +23,7 @@ import DotScreenPmndrs, { type DotScreenPmndrsProps } from './DotScreenPmndrs.vu
 import SepiaPmndrs, { type SepiaPmndrsProps } from './SepiaPmndrs.vue'
 import LinocutPmndrs, { type LinocutPmndrsProps } from './LinocutPmndrs.vue'
 import DepthPickingPassPmndrs, { type DepthPickingPassPmndrsProps } from './DepthPickingPassPmndrs.vue'
+import FishEyePmndrs, { type FishEyePmndrsProps } from './FishEyePmndrs.vue'
 
 export {
   BloomPmndrs,
@@ -48,6 +49,7 @@ export {
   SepiaPmndrs,
   LinocutPmndrs,
   DepthPickingPassPmndrs,
+  FishEyePmndrs,
   BloomPmndrsProps,
   DepthOfFieldPmndrsProps,
   EffectComposerPmndrsProps,
@@ -70,4 +72,5 @@ export {
   SepiaPmndrsProps,
   LinocutPmndrsProps,
   DepthPickingPassPmndrsProps,
+  FishEyePmndrsProps,
 }

From de7480eaa5fada417e2c7f9a07003116555ec91b Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Mon, 3 Feb 2025 22:04:50 +0100
Subject: [PATCH 05/10] v1 fish-eye

---
 .../theme/components/pmdrs/FishEyeDemo.vue    | 136 ++++++++++++++++++
 docs/guide/pmndrs/fish-eye.md                 |  68 +++++++++
 .../src/pages/postprocessing/fish-eye.vue     |  55 ++++---
 playground/src/router.ts                      |   2 +-
 src/core/pmndrs/custom/fish-eye/index.ts      |  21 ++-
 5 files changed, 241 insertions(+), 41 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/pmdrs/FishEyeDemo.vue
 create mode 100644 docs/guide/pmndrs/fish-eye.md

diff --git a/docs/.vitepress/theme/components/pmdrs/FishEyeDemo.vue b/docs/.vitepress/theme/components/pmdrs/FishEyeDemo.vue
new file mode 100644
index 00000000..908e1888
--- /dev/null
+++ b/docs/.vitepress/theme/components/pmdrs/FishEyeDemo.vue
@@ -0,0 +1,136 @@
+<!-- eslint-disable ts/no-use-before-define -->
+
+<script setup lang="ts">
+import { gsap } from 'gsap'
+import { Environment, OrbitControls, Precipitation, RoundedBox } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { EffectComposerPmndrs, FishEyePmndrs } from '@tresjs/post-processing'
+import { BackSide, NoToneMapping } from 'three'
+import { ref, watch } from 'vue'
+import { BlendFunction } from 'postprocessing'
+
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#ffffff',
+  toneMapping: NoToneMapping,
+  multisampling: 8,
+}
+
+const lensParams = [
+  { lensSX: 1.0, lensSY: 1.0, lensFX: 0.0, lensFY: 1.0 },
+  { lensSX: 0.5, lensSY: 1.0, lensFX: -0.25, lensFY: 0.75 },
+  { lensSX: 1.0, lensSY: 1.0, lensFX: -1.0, lensFY: 1.0 },
+  { lensSX: 0.8, lensSY: 0.8, lensFX: -0.5, lensFY: 0.5 },
+  { lensSX: 1, lensSY: 1, lensFX: 0, lensFY: 2 },
+  { lensSX: -0.7, lensSY: 0.7, lensFX: 0.5, lensFY: -0.5 },
+  { lensSX: -1.2, lensSY: 1.2, lensFX: 1.0, lensFY: -1.0 },
+  { lensSX: 1, lensSY: 1, lensFX: 0, lensFY: 0 },
+  { lensSX: 0.9, lensSY: 0.9, lensFX: 1.5, lensFY: -1.5 },
+  { lensSX: 1.3, lensSY: 1.3, lensFX: 1.5, lensFY: -1.0 },
+]
+
+const tweenParams = {
+  duration: 2,
+  ease: 'elastic.out(0.85,0.3)',
+}
+
+const localBlendFunction = ref(BlendFunction.NORMAL)
+
+const currentIndex = ref(0)
+
+const onSwitch = () => {
+  currentIndex.value = (currentIndex.value + 1) % lensParams.length
+
+  gsap.to(lensSX, { value: lensParams[currentIndex.value].lensSX, ...tweenParams })
+  gsap.to(lensSY, { value: lensParams[currentIndex.value].lensSY, ...tweenParams })
+  gsap.to(lensFX, { value: lensParams[currentIndex.value].lensFX, ...tweenParams })
+  gsap.to(lensFY, { value: lensParams[currentIndex.value].lensFY, ...tweenParams })
+}
+
+const { enabled, lensSX, lensSY, lensFX, lensFY, scale } = useControls({
+  acceptBtn: {
+    label: 'Switch Lens',
+    type: 'button',
+    onClick: onSwitch,
+    size: 'md',
+  },
+  lensSX: { value: lensParams[0].lensSX, step: 0.01, min: -2, max: 2 },
+  lensSY: { value: lensParams[0].lensFY, step: 0.01, min: -2, max: 2 },
+  lensFX: { value: lensParams[0].lensFX, step: 0.01, min: -2, max: 2 },
+  lensFY: { value: lensParams[0].lensFY, step: 0.01, min: -2, max: 2 },
+  scale: { value: 1.0, step: 0.01, min: 0.1, max: 2 },
+  enabled: true,
+})
+
+watch(enabled, () => {
+  localBlendFunction.value = enabled.value ? BlendFunction.NORMAL : BlendFunction.SKIP
+})
+</script>
+
+<template>
+  <TresLeches style="left: initial;right:10px; top:10px;" />
+
+  <TresCanvas
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+    />
+    <OrbitControls :target="[0, .5, 0]" auto-rotate :maxPolarAngle="Math.PI / 2" />
+
+    <Suspense>
+      <Environment preset="snow" />
+    </Suspense>
+
+    <TresAmbientLight :intensity=".5" />
+
+    <TresMesh :rotation-x="-Math.PI / 2">
+      <TresPlaneGeometry :args="[15, 15]" />
+      <TresMeshPhysicalMaterial
+        :metalness=".5"
+        :roughness=".85"
+      />
+    </TresMesh>
+
+    <TresMesh>
+      <TresSphereGeometry :args="[7.5, 32, 32]" />
+      <TresMeshPhysicalMaterial
+        :metalness=".5"
+        :roughness=".25"
+        :side="BackSide"
+      />
+    </TresMesh>
+
+    <RoundedBox
+      v-for="(positionX, index) in [-1.75, 1.75]"
+      :key="index"
+      :position="positionX"
+      :position-y="1.05"
+      :args="[2, 2, 2, 2, 0.25]"
+    >
+      <TresMeshPhysicalMaterial
+        :metalness="0.5"
+        :roughness=".3"
+      />
+    </RoundedBox>
+
+    <Precipitation
+      :randomness="3"
+      :speed="1"
+      :count="2500"
+    />
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <FishEyePmndrs
+          :blendFunction="localBlendFunction"
+          :lensS="[lensSX, lensSY]"
+          :lensF="[lensFX, lensFY]"
+          :scale="scale"
+        />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
+</template>
diff --git a/docs/guide/pmndrs/fish-eye.md b/docs/guide/pmndrs/fish-eye.md
new file mode 100644
index 00000000..47bf1f04
--- /dev/null
+++ b/docs/guide/pmndrs/fish-eye.md
@@ -0,0 +1,68 @@
+# Fish Eye
+
+<DocsDemo>
+  <FishEyeDemo />
+</DocsDemo>
+
+<details>
+  <summary>Demo code</summary>
+
+  <<< @/.vitepress/theme/components/pmdrs/FishEyeDemo.vue{0}
+</details>
+
+The `FishEye` is a custom effect simulates the wide-angle distortion of a fish-eye lens. Common in photography and videography, it creates a hemispherical view with a unique, immersive visual experience. The distortion bends the image outward from the center, creating a bubble-like appearance.
+
+## Usage
+
+The `<FishEyePmndrs>` component is straightforward to use and provides customizable options to fine-tune the fish-eye effect.
+
+```vue{3,12-17,29-33}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { EffectComposerPmndrs, FishEyePmndrs } from '@tresjs/post-processing'
+import { BlendFunction } from 'postprocessing'
+
+const gl = {
+  clearColor: '#4f4f4f',
+  toneMapping: NoToneMapping,
+  multisampling: 8,
+}
+
+const effectProps = {
+  blendFunction: BlendFunction.NORMAL,
+  lensS: [1.0, 1.0],
+  lensF: [0.0, 1.0],
+  scale: 1.0,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+
+    <TresMesh>
+      <TresSphereGeometry :args="[5, 32, 32]" />
+      <TresMeshPhysicalMaterial :metalness="0.5" :roughness="0.25" />
+    </TresMesh>
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <FishEyePmndrs v-bind="effectProps" />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop           | Description                                                                                                                                                                  | Default                  |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
+| **blendFunction** | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction) options. | `BlendFunction.NORMAL`   |
+| **lensS**      | The lens scale. <br> A `Vector2` value or an array of two numbers. (ex: `[0.5, .75]`)                                                                                                              | `Vector2(1.0, 1.0)`             |
+| **lensF**      | The lens factor. <br> A `Vector2` value or an array of two numbers. (ex: `[0.0, 0.5]`)                                                                                     | `Vector2(0.0, 1.0)`             |
+| **scale**      | The scale of the effect. A `number`.                                                                                                                                           | `1.0`                    |
+
+## Further Reading
+
+For an example of the fish-eye effect in WebGL, see the [Fish Eye Effect on Shadertoy](https://www.shadertoy.com/view/MXyBRy).
diff --git a/playground/src/pages/postprocessing/fish-eye.vue b/playground/src/pages/postprocessing/fish-eye.vue
index 38887719..cb3979d9 100644
--- a/playground/src/pages/postprocessing/fish-eye.vue
+++ b/playground/src/pages/postprocessing/fish-eye.vue
@@ -15,24 +15,7 @@ const gl = {
   envMapIntensity: 10,
 }
 
-const neonColors = [
-  '#FF00FF', // Magenta
-  '#00FFFF', // Cyan
-  '#00FF00', // Lime
-  '#FFFF00', // Yellow
-  '#FF0000', // Red
-  '#FF1493', // Deep Pink
-  '#7FFF00', // Chartreuse
-  '#FF4500', // Orange Red
-  '#8A2BE2', // Blue Violet
-  '#00FF7F', // Spring Green
-  '#FFD700', // Gold
-  '#FF69B4', // Hot Pink
-  '#ADFF2F', // Green Yellow
-  '#FF6347', // Tomato
-  '#40E0D0', // Turquoise
-  '#EE82EE', // Violet
-]
+// Note: The variables [lensSX, lensSY], [lensFX, lensFY] are not used as vectors in useControls because the 'step' key is not yet available.
 
 const { blendFunction, lensSX, lensSY, lensFX, lensFY, scale } = useControls({
   blendFunction: {
@@ -57,26 +40,40 @@ const { blendFunction, lensSX, lensSY, lensFX, lensFY, scale } = useControls({
     v-bind="gl"
   >
     <TresPerspectiveCamera
-      :position="[0, 6.5, 6.5]"
+      :position="[0, 6.5, 7.5]"
       :look-at="[0, 0, 0]"
     />
     <OrbitControls auto-rotate />
 
-    <TresAmbientLight :intensity="1" />
+    <TresMesh :position="[5, 0, 0]">
+      <TresBoxGeometry :args="[1.65, 1.65, 1.65]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
 
-    <template v-for="(color, index) in neonColors" :key="index">
-      <TresMesh :position="[index % 4 * 2 - 3, 0, Math.floor(index / 4) * 2 - 3]">
-        <TresBoxGeometry :args="[2, 2, 2]" />
-        <TresMeshStandardMaterial :color="color" :roughness=".5" :metalness="1" />
-      </TresMesh>
-    </template>
+    <TresMesh :position="[0, 0, 0]">
+      <TresBoxGeometry :args="[1.65, 1.65, 1.65]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+
+    <TresMesh :position="[-5, 0, 0]">
+      <TresBoxGeometry :args="[1.65, 1.65, 1.65]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+
+    <TresMesh :position="[0, 0, -5]">
+      <TresBoxGeometry :args="[1.65, 1.65, 1.65]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+
+    <TresMesh :position="[0, 0, 5]">
+      <TresBoxGeometry :args="[1.65, 1.65, 1.65]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
 
     <Suspense>
-      <Environment background :blur="0" preset="shangai" />
+      <Environment background preset="shangai" />
     </Suspense>
 
-    <TresDirectionalLight color="white" />
-
     <ContactShadows
       :opacity=".65"
       :position-y="-1"
diff --git a/playground/src/router.ts b/playground/src/router.ts
index 57898812..07f5ba02 100644
--- a/playground/src/router.ts
+++ b/playground/src/router.ts
@@ -52,7 +52,7 @@ export const postProcessingRoutes = [
   makeRoute('Shock Wave', '🌊', false),
   makeRoute('Vignette', '🕶️', false),
   makeRoute('Barrel blur', '🌀', false),
-  makeRoute('FishEye', '👁️', false),
+  makeRoute('Fish Eye', '👁️', false),
   makeRoute('On-demand', '🔄', false),
 ]
 
diff --git a/src/core/pmndrs/custom/fish-eye/index.ts b/src/core/pmndrs/custom/fish-eye/index.ts
index 3c56b2f5..233cf4ba 100644
--- a/src/core/pmndrs/custom/fish-eye/index.ts
+++ b/src/core/pmndrs/custom/fish-eye/index.ts
@@ -2,8 +2,7 @@ import { Uniform, Vector2 } from 'three'
 import { BlendFunction, Effect } from 'postprocessing'
 
 /**
- * FishEyeEffect - A custom effect for applying a barrel distortion
- * with chromatic aberration blur.
+ * FishEyeEffect - A custom effect for applying a fish-eye distortion
  */
 
 export class FishEyeEffect extends Effect {
@@ -24,13 +23,13 @@ export class FishEyeEffect extends Effect {
       uniform float scale;
 
       void mainUv(inout vec2 uv) {
-          vec2 vMapping = uv * 2.0 - 1.0;
-          vMapping.x = vMapping.x + ((pow(vMapping.y, 2.0) / scale) * vMapping.x / scale) * -lensF.x;
-          vMapping.y = vMapping.y + ((pow(vMapping.x, 2.0) / scale) * vMapping.y / scale) * -lensF.y;
-          vMapping = vMapping * lensS;
-          vMapping = vMapping / scale * 0.5 + 0.5;
+          vec2 newUv = uv * 2.0 - 1.0;
+          newUv.x = newUv.x + ((pow(newUv.y, 2.0) / scale) * newUv.x / scale) * -lensF.x;
+          newUv.y = newUv.y + ((pow(newUv.x, 2.0) / scale) * newUv.y / scale) * -lensF.y;
+          newUv = newUv * lensS;
+          newUv = newUv / scale * 0.5 + 0.5;
 
-          uv = vMapping;
+          uv = newUv;
       }
 
       void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
@@ -39,9 +38,9 @@ export class FishEyeEffect extends Effect {
       `, {
       blendFunction,
       uniforms: new Map<string, Uniform<number | Vector2>>([
-        ['lensS', new Uniform(lensS)], // Uniform controlling the lens scale
-        ['lensF', new Uniform(lensF)], // Uniform controlling the lens factor
-        ['scale', new Uniform(scale)], // Uniform controlling the scale
+        ['lensS', new Uniform(lensS)],
+        ['lensF', new Uniform(lensF)],
+        ['scale', new Uniform(scale)],
       ]),
     })
   }

From 87b6c48c32b71637b826ea36333ca73e5543ce90 Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Thu, 6 Feb 2025 17:36:52 +0100
Subject: [PATCH 06/10] modify doc

---
 docs/components.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/components.d.ts b/docs/components.d.ts
index 3ac503b8..86a95cf0 100644
--- a/docs/components.d.ts
+++ b/docs/components.d.ts
@@ -16,6 +16,7 @@ declare module 'vue' {
     DocsDemo: typeof import('./.vitepress/theme/components/DocsDemo.vue')['default']
     DotScreenDemo: typeof import('./.vitepress/theme/components/pmdrs/DotScreenDemo.vue')['default']
     Ducky: typeof import('./.vitepress/theme/components/Ducky.vue')['default']
+    FishEyeDemo: typeof import('./.vitepress/theme/components/pmdrs/FishEyeDemo.vue')['default']
     GlitchDemo: typeof import('./.vitepress/theme/components/pmdrs/GlitchDemo.vue')['default']
     GlitchThreeDemo: typeof import('./.vitepress/theme/components/three/GlitchThreeDemo.vue')['default']
     HalftoneThreeDemo: typeof import('./.vitepress/theme/components/three/HalftoneThreeDemo.vue')['default']

From 848f028f3f43033ae3cf0da6d29bd166267594e3 Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Thu, 6 Feb 2025 18:32:11 +0100
Subject: [PATCH 07/10] try floa false leches

---
 docs/.vitepress/theme/components/DocsDemo.vue             | 8 +++++++-
 docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/docs/.vitepress/theme/components/DocsDemo.vue b/docs/.vitepress/theme/components/DocsDemo.vue
index fea9897b..035be4f4 100644
--- a/docs/.vitepress/theme/components/DocsDemo.vue
+++ b/docs/.vitepress/theme/components/DocsDemo.vue
@@ -5,7 +5,7 @@
   <ClientOnly>
     <div
       class="relative"
-      style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"
+      style="height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"
     >
       <Suspense>
         <slot></slot>
@@ -13,3 +13,9 @@
     </div>
   </ClientOnly>
 </template>
+
+<style scoped>
+.relative canvas {
+  aspect-ratio: 16 / 9;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue b/docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue
index a4f4dad4..fb01ac62 100644
--- a/docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue
@@ -29,7 +29,7 @@ const { amount, offsetX, offsetY, blendFunction } = useControls({
 </script>
 
 <template>
-  <TresLeches style="left: initial;right:10px; top:10px;" />
+  <TresLeches :float="false" />
 
   <TresCanvas
     v-bind="gl"

From 3de1c0cff60fa53bf0379f4099a1be74cfd6ae3a Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Thu, 6 Feb 2025 18:42:34 +0100
Subject: [PATCH 08/10] refactor: improve BarrelBlurDemo component layout and
 styling

---
 docs/.vitepress/theme/components/DocsDemo.vue |  9 +--
 .../theme/components/DocsDemoGUI.vue          | 14 +++++
 .../theme/components/pmdrs/BarrelBlurDemo.vue | 57 ++++++++---------
 docs/components.d.ts                          |  2 +
 docs/guide/pmndrs/barrel-blur.md              |  4 +-
 pnpm-lock.yaml                                | 63 +------------------
 6 files changed, 49 insertions(+), 100 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/DocsDemoGUI.vue

diff --git a/docs/.vitepress/theme/components/DocsDemo.vue b/docs/.vitepress/theme/components/DocsDemo.vue
index 035be4f4..b3246d77 100644
--- a/docs/.vitepress/theme/components/DocsDemo.vue
+++ b/docs/.vitepress/theme/components/DocsDemo.vue
@@ -4,8 +4,7 @@
 <template>
   <ClientOnly>
     <div
-      class="relative"
-      style="height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"
+      class="relative aspect-16/9 my-8 rounded-lg overflow-hidden shadow-lg"
     >
       <Suspense>
         <slot></slot>
@@ -13,9 +12,3 @@
     </div>
   </ClientOnly>
 </template>
-
-<style scoped>
-.relative canvas {
-  aspect-ratio: 16 / 9;
-}
-</style>
diff --git a/docs/.vitepress/theme/components/DocsDemoGUI.vue b/docs/.vitepress/theme/components/DocsDemoGUI.vue
new file mode 100644
index 00000000..ae48dd0f
--- /dev/null
+++ b/docs/.vitepress/theme/components/DocsDemoGUI.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <ClientOnly>
+    <div
+      class="relative my-8 flex flex-col rounded-lg overflow-hidden shadow-lg"
+    >
+      <Suspense>
+        <slot></slot>
+      </Suspense>
+    </div>
+  </ClientOnly>
+</template>
diff --git a/docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue b/docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue
index fb01ac62..73454f57 100644
--- a/docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue
@@ -29,35 +29,36 @@ const { amount, offsetX, offsetY, blendFunction } = useControls({
 </script>
 
 <template>
-  <TresLeches :float="false" />
+  <div class="aspect-16/9">
+    <TresCanvas
+      v-bind="gl"
+    >
+      <TresPerspectiveCamera
+        :position="[5, 5, 5]"
+        :look-at="[0, 0, 0]"
+      />
+      <OrbitControls auto-rotate />
 
-  <TresCanvas
-    v-bind="gl"
-  >
-    <TresPerspectiveCamera
-      :position="[5, 5, 5]"
-      :look-at="[0, 0, 0]"
-    />
-    <OrbitControls auto-rotate />
+      <Suspense>
+        <Environment preset="shangai" />
+      </Suspense>
 
-    <Suspense>
-      <Environment preset="shangai" />
-    </Suspense>
+      <RoundedBox :args="[2, 2, 2, 2, 0.25]">
+        <TresMeshPhysicalMaterial
+          color="white"
+          :metalness=".9"
+          :roughness=".5"
+          :clearcoat="1.0"
+          :clearcoatRoughness="0.1"
+        />
+      </RoundedBox>
 
-    <RoundedBox :args="[2, 2, 2, 2, 0.25]">
-      <TresMeshPhysicalMaterial
-        color="white"
-        :metalness=".9"
-        :roughness=".5"
-        :clearcoat="1.0"
-        :clearcoatRoughness="0.1"
-      />
-    </RoundedBox>
-
-    <Suspense>
-      <EffectComposerPmndrs>
-        <BarrelBlurPmndrs :amount="amount" :offset="[offsetX, offsetY]" :blendFunction="Number(blendFunction)" />
-      </EffectComposerPmndrs>
-    </Suspense>
-  </TresCanvas>
+      <Suspense>
+        <EffectComposerPmndrs>
+          <BarrelBlurPmndrs :amount="amount" :offset="[offsetX, offsetY]" :blendFunction="Number(blendFunction)" />
+        </EffectComposerPmndrs>
+      </Suspense>
+    </TresCanvas>
+  </div>
+  <TresLeches :float="false" />
 </template>
diff --git a/docs/components.d.ts b/docs/components.d.ts
index 3ac503b8..4a761623 100644
--- a/docs/components.d.ts
+++ b/docs/components.d.ts
@@ -12,8 +12,10 @@ declare module 'vue' {
     BloomDemo: typeof import('./.vitepress/theme/components/pmdrs/BloomDemo.vue')['default']
     ChromaticAberrationDemo: typeof import('./.vitepress/theme/components/pmdrs/ChromaticAberrationDemo.vue')['default']
     ColorAverageDemo: typeof import('./.vitepress/theme/components/pmdrs/ColorAverageDemo.vue')['default']
+    copy: typeof import('./.vitepress/theme/components/DocsDemoGUI.vue')['default']
     DepthOfFieldDemo: typeof import('./.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue')['default']
     DocsDemo: typeof import('./.vitepress/theme/components/DocsDemo.vue')['default']
+    DocsDemoGUI: typeof import('./.vitepress/theme/components/DocsDemoGUI.vue')['default']
     DotScreenDemo: typeof import('./.vitepress/theme/components/pmdrs/DotScreenDemo.vue')['default']
     Ducky: typeof import('./.vitepress/theme/components/Ducky.vue')['default']
     GlitchDemo: typeof import('./.vitepress/theme/components/pmdrs/GlitchDemo.vue')['default']
diff --git a/docs/guide/pmndrs/barrel-blur.md b/docs/guide/pmndrs/barrel-blur.md
index e7c40b56..5d801727 100644
--- a/docs/guide/pmndrs/barrel-blur.md
+++ b/docs/guide/pmndrs/barrel-blur.md
@@ -1,8 +1,8 @@
 # Barrel Blur
 
-<DocsDemo>
+<DocsDemoGUI>
   <BarrelBlurDemo />
-</DocsDemo>
+</DocsDemoGUI>
 
 The `Barrel Blur` is a custom effect that applies a barrel distortion with chromatic aberration blur, providing a unique visual effect.
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1bf585f0..26e1b16b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -105,7 +105,7 @@ importers:
     devDependencies:
       unocss:
         specifier: ^65.4.3
-        version: 65.4.3(postcss@8.5.1)(rollup@4.32.1)(vite@5.4.14(@types/node@22.12.0))(vue@3.5.13(typescript@5.7.3))
+        version: 65.4.3(postcss@8.5.1)(rollup@4.32.1)(vite@6.0.11(@types/node@22.12.0)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       unplugin-vue-components:
         specifier: ^28.0.0
         version: 28.0.0(@babel/parser@7.26.7)(@nuxt/kit@3.15.4(rollup@4.32.1))(rollup@4.32.1)(vue@3.5.13(typescript@5.7.3))
@@ -5822,18 +5822,6 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
-  '@unocss/astro@65.4.3(rollup@4.32.1)(vite@5.4.14(@types/node@22.12.0))(vue@3.5.13(typescript@5.7.3))':
-    dependencies:
-      '@unocss/core': 65.4.3
-      '@unocss/reset': 65.4.3
-      '@unocss/vite': 65.4.3(rollup@4.32.1)(vite@5.4.14(@types/node@22.12.0))(vue@3.5.13(typescript@5.7.3))
-    optionalDependencies:
-      vite: 5.4.14(@types/node@22.12.0)
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-      - vue
-
   '@unocss/astro@65.4.3(rollup@4.32.1)(vite@6.0.11(@types/node@22.12.0)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@unocss/core': 65.4.3
@@ -5986,22 +5974,6 @@ snapshots:
     dependencies:
       '@unocss/core': 65.4.3
 
-  '@unocss/vite@65.4.3(rollup@4.32.1)(vite@5.4.14(@types/node@22.12.0))(vue@3.5.13(typescript@5.7.3))':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@rollup/pluginutils': 5.1.4(rollup@4.32.1)
-      '@unocss/config': 65.4.3
-      '@unocss/core': 65.4.3
-      '@unocss/inspector': 65.4.3(vue@3.5.13(typescript@5.7.3))
-      chokidar: 3.6.0
-      magic-string: 0.30.17
-      tinyglobby: 0.2.10
-      vite: 5.4.14(@types/node@22.12.0)
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-      - vue
-
   '@unocss/vite@65.4.3(rollup@4.32.1)(vite@6.0.11(@types/node@22.12.0)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -8877,7 +8849,6 @@ snapshots:
 
   tapable@2.2.1: {}
 
-<<<<<<< HEAD
   tar@6.2.1:
     dependencies:
       chownr: 2.0.0
@@ -8888,10 +8859,7 @@ snapshots:
       yallist: 4.0.0
     optional: true
 
-  three-custom-shader-material@5.4.0(three@0.172.0):
-=======
   three-custom-shader-material@5.4.0(three@0.173.0):
->>>>>>> main
     dependencies:
       glsl-token-functions: 1.0.1
       glsl-token-string: 1.0.1
@@ -9071,39 +9039,10 @@ snapshots:
 
   universalify@0.1.2: {}
 
-<<<<<<< HEAD
   unocss-preset-scrollbar@0.3.1(unocss@65.4.3(postcss@8.5.1)(rollup@4.32.1)(vite@6.0.11(@types/node@22.12.0)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))):
     dependencies:
       '@unocss/preset-mini': 0.56.5
       unocss: 65.4.3(postcss@8.5.1)(rollup@4.32.1)(vite@6.0.11(@types/node@22.12.0)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
-=======
-  unocss@65.4.3(postcss@8.5.1)(rollup@4.32.1)(vite@5.4.14(@types/node@22.12.0))(vue@3.5.13(typescript@5.7.3)):
-    dependencies:
-      '@unocss/astro': 65.4.3(rollup@4.32.1)(vite@5.4.14(@types/node@22.12.0))(vue@3.5.13(typescript@5.7.3))
-      '@unocss/cli': 65.4.3(rollup@4.32.1)
-      '@unocss/core': 65.4.3
-      '@unocss/postcss': 65.4.3(postcss@8.5.1)
-      '@unocss/preset-attributify': 65.4.3
-      '@unocss/preset-icons': 65.4.3
-      '@unocss/preset-mini': 65.4.3
-      '@unocss/preset-tagify': 65.4.3
-      '@unocss/preset-typography': 65.4.3
-      '@unocss/preset-uno': 65.4.3
-      '@unocss/preset-web-fonts': 65.4.3
-      '@unocss/preset-wind': 65.4.3
-      '@unocss/transformer-attributify-jsx': 65.4.3
-      '@unocss/transformer-compile-class': 65.4.3
-      '@unocss/transformer-directives': 65.4.3
-      '@unocss/transformer-variant-group': 65.4.3
-      '@unocss/vite': 65.4.3(rollup@4.32.1)(vite@5.4.14(@types/node@22.12.0))(vue@3.5.13(typescript@5.7.3))
-    optionalDependencies:
-      vite: 5.4.14(@types/node@22.12.0)
-    transitivePeerDependencies:
-      - postcss
-      - rollup
-      - supports-color
-      - vue
->>>>>>> main
 
   unocss@65.4.3(postcss@8.5.1)(rollup@4.32.1)(vite@6.0.11(@types/node@22.12.0)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)):
     dependencies:

From bbeb6694736b82a1ad4ab103a6d0a4e093dbaca4 Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Thu, 6 Feb 2025 19:30:12 +0100
Subject: [PATCH 09/10] leches floatg

---
 .../pmdrs/ChromaticAberrationDemo.vue         | 83 +++++++++---------
 .../components/pmdrs/ColorAverageDemo.vue     | 47 +++++-----
 .../theme/components/pmdrs/DotScreenDemo.vue  | 58 +++++++------
 .../components/pmdrs/HueSaturationDemo.vue    | 54 ++++++------
 .../theme/components/pmdrs/KuwaharaDemo.vue   | 85 ++++++++++---------
 .../components/pmdrs/LensDistortionDemo.vue   | 64 +++++++-------
 .../theme/components/pmdrs/LinocutDemo.vue    | 69 +++++++--------
 .../theme/components/pmdrs/ScanlineDemo.vue   | 63 +++++++-------
 .../theme/components/pmdrs/SepiaDemo.vue      | 64 +++++++-------
 .../theme/components/pmdrs/ShockWaveDemo.vue  | 85 ++++++++++---------
 .../theme/components/pmdrs/TiltShiftDemo.vue  | 67 ++++++++-------
 .../components/pmdrs/ToneMappingDemo.vue      | 51 +++++------
 docs/guide/pmndrs/chromatic-aberration.md     |  4 +-
 docs/guide/pmndrs/color-average.md            |  4 +-
 docs/guide/pmndrs/dot-screen.md               |  4 +-
 docs/guide/pmndrs/hue-saturation.md           |  4 +-
 docs/guide/pmndrs/kuwahara.md                 |  4 +-
 docs/guide/pmndrs/lens-distortion.md          |  4 +-
 docs/guide/pmndrs/linocut.md                  |  4 +-
 docs/guide/pmndrs/scanline.md                 |  4 +-
 docs/guide/pmndrs/sepia.md                    |  4 +-
 docs/guide/pmndrs/shock-wave.md               |  4 +-
 docs/guide/pmndrs/tilt-shift.md               |  4 +-
 docs/guide/pmndrs/tone-mapping.md             |  4 +-
 24 files changed, 427 insertions(+), 411 deletions(-)

diff --git a/docs/.vitepress/theme/components/pmdrs/ChromaticAberrationDemo.vue b/docs/.vitepress/theme/components/pmdrs/ChromaticAberrationDemo.vue
index 207408c6..5abf66ca 100644
--- a/docs/.vitepress/theme/components/pmdrs/ChromaticAberrationDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/ChromaticAberrationDemo.vue
@@ -31,52 +31,53 @@ watchEffect(() => {
 </script>
 
 <template>
-  <TresLeches style="left: initial;right:10px; top:10px;" />
-
-  <TresCanvas
-    v-bind="gl"
-  >
-    <TresPerspectiveCamera
-      :position="[5, 5, 5]"
-      :look-at="[0, 0, 0]"
-    />
-    <OrbitControls auto-rotate />
-
-    <template
-      v-for="i in 4"
-      :key="i"
+  <div class="aspect-16/9">
+    <TresCanvas
+      v-bind="gl"
     >
-      <TresMesh
-        :position="[((i - 1) - (4 - 1) / 2) * 1.5, 0, 0]"
+      <TresPerspectiveCamera
+        :position="[5, 5, 5]"
+        :look-at="[0, 0, 0]"
+      />
+      <OrbitControls auto-rotate />
+
+      <template
+        v-for="i in 4"
+        :key="i"
       >
-        <TresBoxGeometry
-          :width="4"
-          :height="4"
-          :depth="4"
-        />
-        <TresMeshStandardMaterial color="#1C1C1E" />
-      </TresMesh>
-    </template>
+        <TresMesh
+          :position="[((i - 1) - (4 - 1) / 2) * 1.5, 0, 0]"
+        >
+          <TresBoxGeometry
+            :width="4"
+            :height="4"
+            :depth="4"
+          />
+          <TresMeshStandardMaterial color="#1C1C1E" />
+        </TresMesh>
+      </template>
 
-    <TresAmbientLight color="#ffffff" />
+      <TresAmbientLight color="#ffffff" />
 
-    <TresDirectionalLight />
+      <TresDirectionalLight />
 
-    <ContactShadows
-      :opacity="1"
-      :position-y="-.5"
-      :scale="20"
-      :blur=".85"
-    />
+      <ContactShadows
+        :opacity="1"
+        :position-y="-.5"
+        :scale="20"
+        :blur=".85"
+      />
 
-    <Suspense>
-      <EffectComposerPmndrs>
-        <ChromaticAberrationPmndrs ref="chromaticAberrationRef" :offset="new Vector2(offsetX, offsetY)" :radial-modulation="radialModulation" :modulation-offset="modulationOffset" />
-      </EffectComposerPmndrs>
-    </Suspense>
+      <Suspense>
+        <EffectComposerPmndrs>
+          <ChromaticAberrationPmndrs ref="chromaticAberrationRef" :offset="new Vector2(offsetX, offsetY)" :radial-modulation="radialModulation" :modulation-offset="modulationOffset" />
+        </EffectComposerPmndrs>
+      </Suspense>
 
-    <Suspense>
-      <Environment :intensity="2" :blur="0" preset="snow" />
-    </Suspense>
-  </TresCanvas>
+      <Suspense>
+        <Environment :intensity="2" :blur="0" preset="snow" />
+      </Suspense>
+    </TresCanvas>
+  </div>
+  <TresLeches :float="false" />
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/ColorAverageDemo.vue b/docs/.vitepress/theme/components/pmdrs/ColorAverageDemo.vue
index 11b78415..b3a04919 100644
--- a/docs/.vitepress/theme/components/pmdrs/ColorAverageDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/ColorAverageDemo.vue
@@ -63,30 +63,31 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <TresLeches style="left: initial;right:10px; top:10px;" />
+  <div class="aspect-16/9">
+    <TresCanvas
+      v-bind="gl"
+    >
+      <TresPerspectiveCamera
+        :position="[5, 2, 15]"
+        :look-at="[0, 0, 0]"
+      />
+      <OrbitControls auto-rotate />
 
-  <TresCanvas
-    v-bind="gl"
-  >
-    <TresPerspectiveCamera
-      :position="[5, 2, 15]"
-      :look-at="[0, 0, 0]"
-    />
-    <OrbitControls auto-rotate />
+      <TresMesh ref="meshRef" :position="[0, 3.5, 0]">
+        <TresBoxGeometry :args="[2, 2, 2]" />
+        <TresMeshPhysicalMaterial color="#8B0000" :roughness=".25" />
+      </TresMesh>
 
-    <TresMesh ref="meshRef" :position="[0, 3.5, 0]">
-      <TresBoxGeometry :args="[2, 2, 2]" />
-      <TresMeshPhysicalMaterial color="#8B0000" :roughness=".25" />
-    </TresMesh>
+      <Suspense>
+        <Environment background preset="shangai" />
+      </Suspense>
 
-    <Suspense>
-      <Environment background preset="shangai" />
-    </Suspense>
-
-    <Suspense>
-      <EffectComposerPmndrs>
-        <ColorAveragePmndrs :blendFunction="Number(blendFunction)" :opacity="opacity" />
-      </EffectComposerPmndrs>
-    </Suspense>
-  </TresCanvas>
+      <Suspense>
+        <EffectComposerPmndrs>
+          <ColorAveragePmndrs :blendFunction="Number(blendFunction)" :opacity="opacity" />
+        </EffectComposerPmndrs>
+      </Suspense>
+    </TresCanvas>
+  </div>
+  <TresLeches :float="false" />
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue b/docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue
index e3a05ee4..e02f77ca 100644
--- a/docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue
@@ -31,32 +31,34 @@ const { scene } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets
 </script>
 
 <template>
-  <TresLeches style="left: initial;right:10px; top:10px;" />
-
-  <TresCanvas
-    v-bind="gl"
-  >
-    <TresPerspectiveCamera
-      :position="[0, 1, 7.5]"
-      :look-at="[0, 0, 0]"
-    />
-    <OrbitControls />
-
-    <primitive :scale="2" :rotation-x="Math.PI / -5" :rotation-y="Math.PI" :position-y=".25" :position-z="0.5" :object="scene" />
-
-    <ContactShadows
-      :opacity="1"
-      :position-y="-1.5"
-    />
-
-    <Suspense>
-      <Environment preset="modern" />
-    </Suspense>
-
-    <Suspense>
-      <EffectComposerPmndrs>
-        <DotScreenPmndrs :blendFunction="Number(blendFunction)" :angle="angle" :scale="scale" />
-      </EffectComposerPmndrs>
-    </Suspense>
-  </TresCanvas>
+  <div class="aspect-16/9">
+    <TresCanvas
+      v-bind="gl"
+    >
+      <TresPerspectiveCamera
+        :position="[0, 1, 7.5]"
+        :look-at="[0, 0, 0]"
+      />
+      <OrbitControls />
+
+      <primitive :scale="2" :rotation-x="Math.PI / -5" :rotation-y="Math.PI" :position-y=".25" :position-z="0.5" :object="scene" />
+
+      <ContactShadows
+        :opacity="1"
+        :position-y="-1.5"
+      />
+
+      <Suspense>
+        <Environment preset="modern" />
+      </Suspense>
+
+      <Suspense>
+        <EffectComposerPmndrs>
+          <DotScreenPmndrs :blendFunction="Number(blendFunction)" :angle="angle" :scale="scale" />
+        </EffectComposerPmndrs>
+      </Suspense>
+    </TresCanvas>
+  </div>
+
+  <TresLeches :float="false" />
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/HueSaturationDemo.vue b/docs/.vitepress/theme/components/pmdrs/HueSaturationDemo.vue
index 59df7c59..d64327ba 100644
--- a/docs/.vitepress/theme/components/pmdrs/HueSaturationDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/HueSaturationDemo.vue
@@ -28,30 +28,32 @@ const { saturation, hue, blendFunction } = useControls({
 </script>
 
 <template>
-  <TresLeches style="left: initial;right:10px; top:10px;" />
-
-  <TresCanvas
-    v-bind="gl"
-  >
-    <TresPerspectiveCamera
-      :position="[5, 5, 5]"
-      :look-at="[0, 0, 0]"
-    />
-    <OrbitControls auto-rotate />
-
-    <TresMesh :position="[0, 1, 0]">
-      <TresBoxGeometry :args="[2, 2, 2]" />
-      <TresMeshPhysicalMaterial color="white" />
-    </TresMesh>
-
-    <Suspense>
-      <Environment background :blur=".25" preset="modern" />
-    </Suspense>
-
-    <Suspense>
-      <EffectComposerPmndrs>
-        <HueSaturationPmndrs :blendFunction="Number(blendFunction)" :hue="hue" :saturation="saturation" />
-      </EffectComposerPmndrs>
-    </Suspense>
-  </TresCanvas>
+  <div class="aspect-16/9">
+    <TresCanvas
+      v-bind="gl"
+    >
+      <TresPerspectiveCamera
+        :position="[5, 5, 5]"
+        :look-at="[0, 0, 0]"
+      />
+      <OrbitControls auto-rotate />
+
+      <TresMesh :position="[0, 1, 0]">
+        <TresBoxGeometry :args="[2, 2, 2]" />
+        <TresMeshPhysicalMaterial color="white" />
+      </TresMesh>
+
+      <Suspense>
+        <Environment background :blur=".25" preset="modern" />
+      </Suspense>
+
+      <Suspense>
+        <EffectComposerPmndrs>
+          <HueSaturationPmndrs :blendFunction="Number(blendFunction)" :hue="hue" :saturation="saturation" />
+        </EffectComposerPmndrs>
+      </Suspense>
+    </TresCanvas>
+  </div>
+
+  <TresLeches :float="false" />
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/KuwaharaDemo.vue b/docs/.vitepress/theme/components/pmdrs/KuwaharaDemo.vue
index 55f4887d..08bcbe68 100644
--- a/docs/.vitepress/theme/components/pmdrs/KuwaharaDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/KuwaharaDemo.vue
@@ -34,46 +34,47 @@ watch(enabled, () => {
 </script>
 
 <template>
-  <TresLeches style="left: initial;right:10px; top:10px;" />
-
-  <TresCanvas
-    v-bind="gl"
-  >
-    <TresPerspectiveCamera
-      :position="[0, 6.5, 15]"
-    />
-
-    <OrbitControls />
-
-    <TresAmbientLight :intensity="1" />
-
-    <TresDirectionalLight />
-
-    <primitive :position-x="-3" :position-y="-3.5" :scale="5" :object="scenePlantJar" />
-    <primitive :position-x="4" :scale="20" :object="sceneWatermelon" />
-
-    <ContactShadows
-      :opacity=".25"
-      :position-y="-3.85"
-      :scale="20"
-      :blur=".65"
-    />
-
-    <ContactShadows
-      :opacity=".5"
-      :position-y="-3.85"
-      :scale="20"
-      :blur=".65"
-    />
-
-    <Suspense>
-      <Environment :blur="0.2" preset="snow" />
-    </Suspense>
-
-    <Suspense>
-      <EffectComposerPmndrs>
-        <KuwaharaPmndrs :blendFunction="effectProps.blendFunction" :radius="radius" :sectorCount="sectorCount" />
-      </EffectComposerPmndrs>
-    </Suspense>
-  </TresCanvas>
+  <div class="aspect-16/9">
+    <TresCanvas
+      v-bind="gl"
+    >
+      <TresPerspectiveCamera
+        :position="[0, 6.5, 15]"
+      />
+
+      <OrbitControls />
+
+      <TresAmbientLight :intensity="1" />
+
+      <TresDirectionalLight />
+
+      <primitive :position-x="-3" :position-y="-3.5" :scale="5" :object="scenePlantJar" />
+      <primitive :position-x="4" :scale="20" :object="sceneWatermelon" />
+
+      <ContactShadows
+        :opacity=".25"
+        :position-y="-3.85"
+        :scale="20"
+        :blur=".65"
+      />
+
+      <ContactShadows
+        :opacity=".5"
+        :position-y="-3.85"
+        :scale="20"
+        :blur=".65"
+      />
+
+      <Suspense>
+        <Environment :blur="0.2" preset="snow" />
+      </Suspense>
+
+      <Suspense>
+        <EffectComposerPmndrs>
+          <KuwaharaPmndrs :blendFunction="effectProps.blendFunction" :radius="radius" :sectorCount="sectorCount" />
+        </EffectComposerPmndrs>
+      </Suspense>
+    </TresCanvas>
+  </div>
+  <TresLeches :float="false" />
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/LensDistortionDemo.vue b/docs/.vitepress/theme/components/pmdrs/LensDistortionDemo.vue
index 7f1d65d8..912b2221 100644
--- a/docs/.vitepress/theme/components/pmdrs/LensDistortionDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/LensDistortionDemo.vue
@@ -28,41 +28,43 @@ pbrTexture.map.colorSpace = SRGBColorSpace
 </script>
 
 <template>
-  <TresLeches style="left: initial;right:10px; top:10px;" />
+  <div class="aspect-16/9">
+    <TresCanvas
+      v-bind="gl"
+    >
+      <TresPerspectiveCamera
+        :position="[-2, 1, 5]"
+      />
+      <OrbitControls auto-rotate />
 
-  <TresCanvas
-    v-bind="gl"
-  >
-    <TresPerspectiveCamera
-      :position="[-2, 1, 5]"
-    />
-    <OrbitControls auto-rotate />
+      <TresMesh :position="[0, 2, 0]">
+        <TresBoxGeometry :args="[8, 8, 8]" />
+        <TresMeshStandardMaterial :side="BackSide" :map="pbrTexture.map" :normal-map="pbrTexture.normalMap" />
+      </TresMesh>
 
-    <TresMesh :position="[0, 2, 0]">
-      <TresBoxGeometry :args="[8, 8, 8]" />
-      <TresMeshStandardMaterial :side="BackSide" :map="pbrTexture.map" :normal-map="pbrTexture.normalMap" />
-    </TresMesh>
+      <TresMesh :position="[0, 0, 0]">
+        <TresBoxGeometry :args="[1.65, 1.65, 1.65]" />
+        <TresMeshNormalMaterial />
+      </TresMesh>
 
-    <TresMesh :position="[0, 0, 0]">
-      <TresBoxGeometry :args="[1.65, 1.65, 1.65]" />
-      <TresMeshNormalMaterial />
-    </TresMesh>
+      <TresAmbientLight :intensity="2" />
 
-    <TresAmbientLight :intensity="2" />
+      <Suspense>
+        <Environment background :blur=".25" preset="snow" />
+      </Suspense>
 
-    <Suspense>
-      <Environment background :blur=".25" preset="snow" />
-    </Suspense>
+      <Suspense>
+        <EffectComposerPmndrs>
+          <LensDistortionPmndrs
+            :distortion="distortion"
+            :principalPoint="principalPoint"
+            :focalLength="focalLength"
+            :skew="skew"
+          />
+        </EffectComposerPmndrs>
+      </Suspense>
+    </TresCanvas>
+  </div>
 
-    <Suspense>
-      <EffectComposerPmndrs>
-        <LensDistortionPmndrs
-          :distortion="distortion"
-          :principalPoint="principalPoint"
-          :focalLength="focalLength"
-          :skew="skew"
-        />
-      </EffectComposerPmndrs>
-    </Suspense>
-  </TresCanvas>
+  <TresLeches :float="false" />
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/LinocutDemo.vue b/docs/.vitepress/theme/components/pmdrs/LinocutDemo.vue
index ff899f20..29faa2b1 100644
--- a/docs/.vitepress/theme/components/pmdrs/LinocutDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/LinocutDemo.vue
@@ -32,42 +32,43 @@ const { blendFunction, scale, noiseScale, centerX, centerY, rotation } = useCont
 </script>
 
 <template>
-  <TresLeches style="left: initial;right:10px; top:10px;" />
+  <div class="aspect-16/9">
+    <TresCanvas
+      v-bind="gl"
+    >
+      <TresPerspectiveCamera
+        :position="[0, 6.5, 6.5]"
+      />
+      <OrbitControls auto-rotate />
 
-  <TresCanvas
-    v-bind="gl"
-  >
-    <TresPerspectiveCamera
-      :position="[0, 6.5, 6.5]"
-    />
-    <OrbitControls auto-rotate />
+      <TresMesh>
+        <TresBoxGeometry :args="[2, 2, 2]" />
+        <TresMeshStandardMaterial color="yellow" />
+      </TresMesh>
 
-    <TresMesh>
-      <TresBoxGeometry :args="[2, 2, 2]" />
-      <TresMeshStandardMaterial color="yellow" />
-    </TresMesh>
+      <Suspense>
+        <Environment :blur=".25" preset="snow" />
+      </Suspense>
 
-    <Suspense>
-      <Environment :blur=".25" preset="snow" />
-    </Suspense>
+      <ContactShadows
+        :opacity=".65"
+        :position-y="-1"
+        :scale="35"
+        :blur="1"
+      />
 
-    <ContactShadows
-      :opacity=".65"
-      :position-y="-1"
-      :scale="35"
-      :blur="1"
-    />
-
-    <Suspense>
-      <EffectComposerPmndrs>
-        <LinocutPmndrs
-          :scale="scale"
-          :noiseScale="noiseScale"
-          :center="[centerX, centerY]"
-          :rotation="rotation"
-          :blendFunction="Number(blendFunction)"
-        />
-      </EffectComposerPmndrs>
-    </Suspense>
-  </TresCanvas>
+      <Suspense>
+        <EffectComposerPmndrs>
+          <LinocutPmndrs
+            :scale="scale"
+            :noiseScale="noiseScale"
+            :center="[centerX, centerY]"
+            :rotation="rotation"
+            :blendFunction="Number(blendFunction)"
+          />
+        </EffectComposerPmndrs>
+      </Suspense>
+    </TresCanvas>
+  </div>
+  <TresLeches :float="false" />
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/ScanlineDemo.vue b/docs/.vitepress/theme/components/pmdrs/ScanlineDemo.vue
index b7ebd23f..e8cc2eab 100644
--- a/docs/.vitepress/theme/components/pmdrs/ScanlineDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/ScanlineDemo.vue
@@ -29,41 +29,42 @@ const { blendFunction, opacity, density, scrollSpeed } = useControls({
 </script>
 
 <template>
-  <TresLeches style="left: initial;right:10px; top:10px;" />
+  <div class="aspect-16/9">
+    <TresCanvas
+      v-bind="gl"
+    >
+      <TresPerspectiveCamera
+        :position="[6.5, 3, 6.5]"
+        :look-at="[0, 0, 0]"
+      />
+      <OrbitControls auto-rotate :auto-rotate-speed=".5" />
 
-  <TresCanvas
-    v-bind="gl"
-  >
-    <TresPerspectiveCamera
-      :position="[6.5, 3, 6.5]"
-      :look-at="[0, 0, 0]"
-    />
-    <OrbitControls auto-rotate :auto-rotate-speed=".5" />
+      <Suspense>
+        <Environment :blur="1" preset="snow" />
+      </Suspense>
 
-    <Suspense>
-      <Environment :blur="1" preset="snow" />
-    </Suspense>
+      <TresAmbientLight />
 
-    <TresAmbientLight />
+      <TresGroup :rotation-y="MathUtils.degToRad(5)" :rotation-x="MathUtils.degToRad(100)">
+        <Sphere :args="[2, 32, 16]">
+          <TresMeshPhysicalMaterial color="#FC7BAC" :side="DoubleSide" :transmission=".5" />
+        </Sphere>
 
-    <TresGroup :rotation-y="MathUtils.degToRad(5)" :rotation-x="MathUtils.degToRad(100)">
-      <Sphere :args="[2, 32, 16]">
-        <TresMeshPhysicalMaterial color="#FC7BAC" :side="DoubleSide" :transmission=".5" />
-      </Sphere>
+        <Levioso :speed="2.5" :rotationFactor="1" :floatFactor=".5">
+          <Ring :args="[4.25, 2.5, 32]" :scale-y="-1" :position-z="-.25">
+            <TresMeshPhysicalMaterial color="#ffffff" :side="DoubleSide" :transmission=".25" />
+          </Ring>
+        </Levioso>
+      </TresGroup>
 
-      <Levioso :speed="2.5" :rotationFactor="1" :floatFactor=".5">
-        <Ring :args="[4.25, 2.5, 32]" :scale-y="-1" :position-z="-.25">
-          <TresMeshPhysicalMaterial color="#ffffff" :side="DoubleSide" :transmission=".25" />
-        </Ring>
-      </Levioso>
-    </TresGroup>
+      <Stars />
 
-    <Stars />
-
-    <Suspense>
-      <EffectComposerPmndrs>
-        <ScanlinePmndrs :density="density" :opacity="opacity" :scrollSpeed="scrollSpeed" :blendFunction="Number(blendFunction)" />
-      </EffectComposerPmndrs>
-    </Suspense>
-  </TresCanvas>
+      <Suspense>
+        <EffectComposerPmndrs>
+          <ScanlinePmndrs :density="density" :opacity="opacity" :scrollSpeed="scrollSpeed" :blendFunction="Number(blendFunction)" />
+        </EffectComposerPmndrs>
+      </Suspense>
+    </TresCanvas>
+  </div>
+  <TresLeches :float="false" />
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/SepiaDemo.vue b/docs/.vitepress/theme/components/pmdrs/SepiaDemo.vue
index 3720d33b..2d61a41c 100644
--- a/docs/.vitepress/theme/components/pmdrs/SepiaDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/SepiaDemo.vue
@@ -27,35 +27,37 @@ const { intensity, blendFunction } = useControls({
 </script>
 
 <template>
-  <TresLeches style="left: initial;right:10px; top:10px;" />
-
-  <TresCanvas
-    v-bind="gl"
-  >
-    <TresPerspectiveCamera
-      :position="[5, 5, 5]"
-      :look-at="[0, 0, 0]"
-    />
-    <OrbitControls auto-rotate />
-
-    <TresMesh :position="[0, .5, 0]">
-      <TresBoxGeometry :args="[2, 2, 2]" />
-      <TresMeshPhysicalMaterial color="black" :roughness=".25" />
-    </TresMesh>
-
-    <ContactShadows
-      :opacity="1"
-      :position-y="-.5"
-    />
-
-    <Suspense>
-      <Environment background :blur=".5" preset="snow" />
-    </Suspense>
-
-    <Suspense>
-      <EffectComposerPmndrs>
-        <SepiaPmndrs :intensity="intensity" :blendFunction="Number(blendFunction)" />
-      </EffectComposerPmndrs>
-    </Suspense>
-  </TresCanvas>
+  <div class="aspect-16/9">
+    <TresCanvas
+      v-bind="gl"
+    >
+      <TresPerspectiveCamera
+        :position="[5, 5, 5]"
+        :look-at="[0, 0, 0]"
+      />
+      <OrbitControls auto-rotate />
+
+      <TresMesh :position="[0, .5, 0]">
+        <TresBoxGeometry :args="[2, 2, 2]" />
+        <TresMeshPhysicalMaterial color="black" :roughness=".25" />
+      </TresMesh>
+
+      <ContactShadows
+        :opacity="1"
+        :position-y="-.5"
+      />
+
+      <Suspense>
+        <Environment background :blur=".5" preset="snow" />
+      </Suspense>
+
+      <Suspense>
+        <EffectComposerPmndrs>
+          <SepiaPmndrs :intensity="intensity" :blendFunction="Number(blendFunction)" />
+        </EffectComposerPmndrs>
+      </Suspense>
+    </TresCanvas>
+  </div>
+
+  <TresLeches :float="false" />
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue b/docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue
index 01178bfe..a71fb6aa 100644
--- a/docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue
@@ -5,7 +5,7 @@ import { TresLeches, useControls } from '@tresjs/leches'
 import { NoToneMapping, Shape, Vector3 } from 'three'
 import { computed, onUnmounted, reactive, ref, shallowRef } from 'vue'
 import { DepthPickingPassPmndrs, EffectComposerPmndrs, ShockWavePmndrs } from '@tresjs/post-processing'
-import { useElementBounding, useMouse, useParentElement } from '@vueuse/core'
+import { useElementBounding, useMouse } from '@vueuse/core'
 import { gsap } from 'gsap'
 
 import '@tresjs/leches/styles'
@@ -18,6 +18,7 @@ const gl = {
 
 const shockWaveEffectRef = shallowRef(null)
 const elCanvasRef = ref(null)
+const mainRef = ref(null)
 const depthPickingPassRef = ref(null)
 const meshHeartRef = ref(null)
 const mousePosition = ref(new Vector3())
@@ -40,9 +41,8 @@ function createHeartShape(scale: number) {
 
 const heartShapeFront = createHeartShape(0.35)
 
-const parentEl = useParentElement()
-const { x, y } = useMouse({ target: parentEl })
-const { width, height, left, top } = useElementBounding(parentEl)
+const { x, y } = useMouse({ target: mainRef })
+const { width, height, left, top } = useElementBounding(mainRef)
 
 const extrudeSettings = reactive({
   depth: 0.1,
@@ -157,49 +157,50 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <TresLeches style="left: initial;right:10px; top:10px;" />
+  <div ref="mainRef" class="aspect-16/9 relative">
+    <TresCanvas
+      ref="elCanvasRef"
+      v-bind="gl"
+    >
+      <TresPerspectiveCamera
+        :position="[0, 0, 10]"
+      />
 
-  <p class="doc-shock-wave-instructions text-xs font-semibold text-zinc-600">Click on the heart to distribute love</p>
+      <OrbitControls make-default auto-rotate />
 
-  <TresCanvas
-    ref="elCanvasRef"
-    v-bind="gl"
-  >
-    <TresPerspectiveCamera
-      :position="[0, 0, 10]"
-    />
+      <TresMesh ref="meshHeartRef" :position-y="2" @click="triggerShockWave">
+        <TresExtrudeGeometry :args="[heartShapeFront, extrudeSettings]" />
+        <TresMeshPhysicalMaterial
+          v-bind="materialProps"
+        />
+      </TresMesh>
 
-    <OrbitControls make-default auto-rotate />
+      <TresDirectionalLight
+        :position="[5, 5, 7.5]"
+        :intensity="2"
+      />
 
-    <TresMesh ref="meshHeartRef" :position-y="2" @click="triggerShockWave">
-      <TresExtrudeGeometry :args="[heartShapeFront, extrudeSettings]" />
-      <TresMeshPhysicalMaterial
-        v-bind="materialProps"
+      <ContactShadows
+        :opacity="1"
+        :position-y="-2.75"
+        :blur=".5"
       />
-    </TresMesh>
-
-    <TresDirectionalLight
-      :position="[5, 5, 7.5]"
-      :intensity="2"
-    />
-
-    <ContactShadows
-      :opacity="1"
-      :position-y="-2.75"
-      :blur=".5"
-    />
-
-    <Suspense>
-      <Environment preset="night" />
-    </Suspense>
-
-    <Suspense>
-      <EffectComposerPmndrs>
-        <DepthPickingPassPmndrs ref="depthPickingPassRef" />
-        <ShockWavePmndrs ref="shockWaveEffectRef" :position="mousePosition" :amplitude="amplitude" :waveSize="waveSize" :speed="speed" :maxRadius="maxRadius" />
-      </EffectComposerPmndrs>
-    </Suspense>
-  </TresCanvas>
+
+      <Suspense>
+        <Environment preset="night" />
+      </Suspense>
+
+      <Suspense>
+        <EffectComposerPmndrs>
+          <DepthPickingPassPmndrs ref="depthPickingPassRef" />
+          <ShockWavePmndrs ref="shockWaveEffectRef" :position="mousePosition" :amplitude="amplitude" :waveSize="waveSize" :speed="speed" :maxRadius="maxRadius" />
+        </EffectComposerPmndrs>
+      </Suspense>
+    </TresCanvas>
+    <p class="doc-shock-wave-instructions text-xs font-semibold text-zinc-600">Click on the heart to distribute love</p>
+  </div>
+
+  <TresLeches :float="false" />
 </template>
 
 <style scoped>
diff --git a/docs/.vitepress/theme/components/pmdrs/TiltShiftDemo.vue b/docs/.vitepress/theme/components/pmdrs/TiltShiftDemo.vue
index 2b7b6041..c119aa6c 100644
--- a/docs/.vitepress/theme/components/pmdrs/TiltShiftDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/TiltShiftDemo.vue
@@ -39,41 +39,42 @@ const { blendFunction, offset, rotation, focusArea, feather } = useControls({
 </script>
 
 <template>
-  <TresLeches style="left: initial;right:10px; top:10px;" />
+  <div class="aspect-16/9">
+    <TresCanvas v-bind="gl">
+      <TresPerspectiveCamera :position="[0, 4, 8]" />
+      <OrbitControls auto-rotate />
 
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[0, 4, 8]" />
-    <OrbitControls auto-rotate />
+      <template v-for="index in 50" :key="index">
+        <TresMesh :position="[(index % 10) * 3 - 13.5, 0, Math.floor(index / 10) * 3 - 7.5]" :scale="[2, Math.random() * 5 + 2, 2]">
+          <TresBoxGeometry :args="[1, 1, 1]" />
+          <TresMeshPhysicalMaterial
+            :color="colors[index % colors.length]"
+            :roughness="0.35"
+            :metalness="0.5"
+            :clearcoat="0.3"
+            :clearcoatRoughness="0.25"
+          />
+        </TresMesh>
+      </template>
 
-    <template v-for="index in 50" :key="index">
-      <TresMesh :position="[(index % 10) * 3 - 13.5, 0, Math.floor(index / 10) * 3 - 7.5]" :scale="[2, Math.random() * 5 + 2, 2]">
-        <TresBoxGeometry :args="[1, 1, 1]" />
-        <TresMeshPhysicalMaterial
-          :color="colors[index % colors.length]"
-          :roughness="0.35"
-          :metalness="0.5"
-          :clearcoat="0.3"
-          :clearcoatRoughness="0.25"
-        />
-      </TresMesh>
-    </template>
+      <Suspense>
+        <Environment background :blur=".35" preset="snow" />
+      </Suspense>
 
-    <Suspense>
-      <Environment background :blur=".35" preset="snow" />
-    </Suspense>
+      <Suspense>
+        <EffectComposerPmndrs>
+          <TiltShiftPmndrs
+            :blendFunction="Number(blendFunction)"
+            :offset="offset"
+            :rotation="rotation"
+            :focusArea="focusArea"
+            :feather="feather"
+          />
+        </EffectComposerPmndrs>
+      </Suspense>
 
-    <Suspense>
-      <EffectComposerPmndrs>
-        <TiltShiftPmndrs
-          :blendFunction="Number(blendFunction)"
-          :offset="offset"
-          :rotation="rotation"
-          :focusArea="focusArea"
-          :feather="feather"
-        />
-      </EffectComposerPmndrs>
-    </Suspense>
-
-    <TresGridHelper :position="[0, -3.5, 0]" :args="[30, 15]" />
-  </TresCanvas>
+      <TresGridHelper :position="[0, -3.5, 0]" :args="[30, 15]" />
+    </TresCanvas>
+  </div>
+  <TresLeches :float="false" />
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/ToneMappingDemo.vue b/docs/.vitepress/theme/components/pmdrs/ToneMappingDemo.vue
index 9c3782aa..4d1e6f0a 100644
--- a/docs/.vitepress/theme/components/pmdrs/ToneMappingDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/ToneMappingDemo.vue
@@ -41,33 +41,34 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <TresLeches style="left: initial;right:10px; top:10px;" />
+  <div class="aspect-16/9">
+    <TresCanvas
+      v-bind="gl"
+      :toneMappingExposure="toneMappingExposure"
+    >
+      <TresPerspectiveCamera
+        :position="[6.5, 6.5, 6.5]"
+        :look-at="[0, 1, 0]"
+      />
+      <OrbitControls />
 
-  <TresCanvas
-    v-bind="gl"
-    :toneMappingExposure="toneMappingExposure"
-  >
-    <TresPerspectiveCamera
-      :position="[6.5, 6.5, 6.5]"
-      :look-at="[0, 1, 0]"
-    />
-    <OrbitControls />
+      <primitive ref="modelRef" :object="model" :position-y="-.5" :scale=".25" />
 
-    <primitive ref="modelRef" :object="model" :position-y="-.5" :scale=".25" />
+      <Suspense>
+        <Environment background :blur=".35" preset="dawn" />
+      </Suspense>
 
-    <Suspense>
-      <Environment background :blur=".35" preset="dawn" />
-    </Suspense>
+      <ContactShadows
+        :opacity=".5"
+        :position-y="-3.25"
+      />
 
-    <ContactShadows
-      :opacity=".5"
-      :position-y="-3.25"
-    />
-
-    <Suspense>
-      <EffectComposerPmndrs>
-        <ToneMappingPmndrs :mode="Number(mode)" />
-      </EffectComposerPmndrs>
-    </Suspense>
-  </TresCanvas>
+      <Suspense>
+        <EffectComposerPmndrs>
+          <ToneMappingPmndrs :mode="Number(mode)" />
+        </EffectComposerPmndrs>
+      </Suspense>
+    </TresCanvas>
+  </div>
+  <TresLeches :float="false" />
 </template>
diff --git a/docs/guide/pmndrs/chromatic-aberration.md b/docs/guide/pmndrs/chromatic-aberration.md
index 011263aa..5bd229d5 100644
--- a/docs/guide/pmndrs/chromatic-aberration.md
+++ b/docs/guide/pmndrs/chromatic-aberration.md
@@ -1,8 +1,8 @@
 # Chromatic Aberration
 
-<DocsDemo>
+<DocsDemoGUI>
   <ChromaticAberrationDemo />
-</DocsDemo>
+</DocsDemoGUI>
 
 The `ChromaticAberration` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ChromaticAberrationEffect.js~ChromaticAberrationEffect.html) package. It simulates the dispersion of light as it passes through a lens, creating subtle or dramatic color fringing effects at the edges of objects. This effect can enhance the visual appeal of your scene by adding a realistic lens effect or a stylized touch.
 
diff --git a/docs/guide/pmndrs/color-average.md b/docs/guide/pmndrs/color-average.md
index 239146ed..289ecaf9 100644
--- a/docs/guide/pmndrs/color-average.md
+++ b/docs/guide/pmndrs/color-average.md
@@ -1,8 +1,8 @@
 # Color Average
 
-<DocsDemo>
+<DocsDemoGUI>
   <ColorAverageDemo />
-</DocsDemo>
+</DocsDemoGUI>
 
 The `ColorAverage` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ColorAverageEffect.js~ColorAverageEffect.html) package. It averages the colors of the scene, creating a unique visual effect. This effect can be used to achieve a variety of artistic styles.
 
diff --git a/docs/guide/pmndrs/dot-screen.md b/docs/guide/pmndrs/dot-screen.md
index 7f20d35b..49c8ecef 100644
--- a/docs/guide/pmndrs/dot-screen.md
+++ b/docs/guide/pmndrs/dot-screen.md
@@ -1,8 +1,8 @@
 # Dot Screen
 
-<DocsDemo>
+<DocsDemoGUI>
   <DotScreenDemo />
-</DocsDemo>
+</DocsDemoGUI>
 
 The `DotScreen` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/DotScreenEffect.js~DotScreenEffect.html) package. It allows you to create a dot screen effect, providing flexibility for artistic effects.
 
diff --git a/docs/guide/pmndrs/hue-saturation.md b/docs/guide/pmndrs/hue-saturation.md
index 249ab335..17ca76fa 100644
--- a/docs/guide/pmndrs/hue-saturation.md
+++ b/docs/guide/pmndrs/hue-saturation.md
@@ -1,8 +1,8 @@
 # Hue & Saturation
 
-<DocsDemo>
+<DocsDemoGUI>
   <HueSaturationDemo />
-</DocsDemo>
+</DocsDemoGUI>
 
 The `HueSaturation` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/HueSaturationEffect.js~HueSaturationEffect.html) package. It allows you to adjust the hue and saturation of your scene, providing flexibility for color grading and artistic effects.
 
diff --git a/docs/guide/pmndrs/kuwahara.md b/docs/guide/pmndrs/kuwahara.md
index 03090f4c..5af69490 100644
--- a/docs/guide/pmndrs/kuwahara.md
+++ b/docs/guide/pmndrs/kuwahara.md
@@ -1,8 +1,8 @@
 # Kuwahara (Watercolor Painting)
 
-<DocsDemo>
+<DocsDemoGUI>
   <KuwaharaDemo />
-</DocsDemo>
+</DocsDemoGUI>
 
 The `Kuwahara` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/KuwaharaEffect.js~KuwaharaEffect.html) package. It allows you to apply a Kuwahara filter to your scene, providing a painterly effect.
 
diff --git a/docs/guide/pmndrs/lens-distortion.md b/docs/guide/pmndrs/lens-distortion.md
index 20ba9699..7ac4ddea 100644
--- a/docs/guide/pmndrs/lens-distortion.md
+++ b/docs/guide/pmndrs/lens-distortion.md
@@ -1,8 +1,8 @@
 # Lens Distortion
 
-<DocsDemo>
+<DocsDemoGUI>
   <LensDistortionDemo />
-</DocsDemo>
+</DocsDemoGUI>
 
 The `LensDistortion` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/LensDistortionEffect.js~LensDistortionEffect.html) package. It allows you to apply a lens distortion effect to your scene, providing flexibility for creating realistic camera effects.
 
diff --git a/docs/guide/pmndrs/linocut.md b/docs/guide/pmndrs/linocut.md
index 8b8d286b..cd402a59 100644
--- a/docs/guide/pmndrs/linocut.md
+++ b/docs/guide/pmndrs/linocut.md
@@ -1,8 +1,8 @@
 # Linocut
 
-<DocsDemo>
+<DocsDemoGUI>
   <LinocutDemo />
-</DocsDemo>
+</DocsDemoGUI>
 
 The `Linocut` effect is a custom shader effect inspired by traditional linocut and woodcut printmaking. It transforms the scene into a high-contrast black-and-white composition, featuring bold lines and intricate patterns that replicate the handcrafted aesthetic of relief printing techniques.
 
diff --git a/docs/guide/pmndrs/scanline.md b/docs/guide/pmndrs/scanline.md
index 7933cca7..05890b3c 100644
--- a/docs/guide/pmndrs/scanline.md
+++ b/docs/guide/pmndrs/scanline.md
@@ -1,8 +1,8 @@
 # Scanline
 
-<DocsDemo>
+<DocsDemoGUI>
   <ScanlineDemo />
-</DocsDemo>
+</DocsDemoGUI>
 
 The `Scanline` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ScanlineEffect.js~ScanlineEffect.html) package. It simulates scanlines reminiscent of old CRT displays, creating a nostalgic or stylized visual effect for your scene. This effect can enhance the retro aesthetic of your project or add a unique visual touch.
 
diff --git a/docs/guide/pmndrs/sepia.md b/docs/guide/pmndrs/sepia.md
index 55fc1330..a4bff6a7 100644
--- a/docs/guide/pmndrs/sepia.md
+++ b/docs/guide/pmndrs/sepia.md
@@ -1,8 +1,8 @@
 # Sepia
 
-<DocsDemo>
+<DocsDemoGUI>
   <SepiaDemo />
-</DocsDemo>
+</DocsDemoGUI>
 
 The `Sepia` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/SepiaEffect.js~SepiaEffect.html) package. It applies a sepia tone to the scene, giving it a warm, antique appearance. This effect can enhance the visual appeal of your scene by adding a vintage or stylized touch.
 
diff --git a/docs/guide/pmndrs/shock-wave.md b/docs/guide/pmndrs/shock-wave.md
index e2778043..a544c6d2 100644
--- a/docs/guide/pmndrs/shock-wave.md
+++ b/docs/guide/pmndrs/shock-wave.md
@@ -1,8 +1,8 @@
 # Shock Wave
 
-<DocsDemo>
+<DocsDemoGUI>
   <ShockWaveDemo />
-</DocsDemo>
+</DocsDemoGUI>
 
 <details>
   <summary>Demo code</summary>
diff --git a/docs/guide/pmndrs/tilt-shift.md b/docs/guide/pmndrs/tilt-shift.md
index f3188501..c0a34dd8 100644
--- a/docs/guide/pmndrs/tilt-shift.md
+++ b/docs/guide/pmndrs/tilt-shift.md
@@ -1,8 +1,8 @@
 # Tilt Shift
 
-<DocsDemo>
+<DocsDemoGUI>
   <TiltShiftDemo />
-</DocsDemo>
+</DocsDemoGUI>
 
 The `TiltShift` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/TiltShiftEffect.js~TiltShiftEffect.html) package. It allows you to create a tilt-shift effect, simulating a shallow depth of field.
 
diff --git a/docs/guide/pmndrs/tone-mapping.md b/docs/guide/pmndrs/tone-mapping.md
index d00d30eb..35b4bce4 100644
--- a/docs/guide/pmndrs/tone-mapping.md
+++ b/docs/guide/pmndrs/tone-mapping.md
@@ -1,8 +1,8 @@
 # ToneMapping
 
-<DocsDemo>
+<DocsDemoGUI>
   <ToneMappingDemo />
-</DocsDemo>
+</DocsDemoGUI>
 
 The `ToneMapping` effect from the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ToneMappingEffect.js~ToneMappingEffect.html) package provides an abstraction for various tone mapping algorithms to improve the visual rendering of HDR (high dynamic range) content. Tone mapping is used to map high-range brightness values to a range that is displayable on standard screens. This effect contributes significantly to the visual quality of your scene by controlling luminance and color balance.
 

From 3057df3d6dea8097c1130d18db2eb01cd027822a Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Thu, 6 Feb 2025 20:16:46 +0100
Subject: [PATCH 10/10] fisheye: modify doc and add float params for leches

---
 .../theme/components/pmdrs/FishEyeDemo.vue    | 121 +++++++++---------
 docs/guide/pmndrs/fish-eye.md                 |   4 +-
 2 files changed, 63 insertions(+), 62 deletions(-)

diff --git a/docs/.vitepress/theme/components/pmdrs/FishEyeDemo.vue b/docs/.vitepress/theme/components/pmdrs/FishEyeDemo.vue
index 908e1888..fb5431cf 100644
--- a/docs/.vitepress/theme/components/pmdrs/FishEyeDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/FishEyeDemo.vue
@@ -70,67 +70,68 @@ watch(enabled, () => {
 </script>
 
 <template>
-  <TresLeches style="left: initial;right:10px; top:10px;" />
-
-  <TresCanvas
-    v-bind="gl"
-  >
-    <TresPerspectiveCamera
-      :position="[5, 5, 5]"
-    />
-    <OrbitControls :target="[0, .5, 0]" auto-rotate :maxPolarAngle="Math.PI / 2" />
-
-    <Suspense>
-      <Environment preset="snow" />
-    </Suspense>
-
-    <TresAmbientLight :intensity=".5" />
-
-    <TresMesh :rotation-x="-Math.PI / 2">
-      <TresPlaneGeometry :args="[15, 15]" />
-      <TresMeshPhysicalMaterial
-        :metalness=".5"
-        :roughness=".85"
-      />
-    </TresMesh>
-
-    <TresMesh>
-      <TresSphereGeometry :args="[7.5, 32, 32]" />
-      <TresMeshPhysicalMaterial
-        :metalness=".5"
-        :roughness=".25"
-        :side="BackSide"
-      />
-    </TresMesh>
-
-    <RoundedBox
-      v-for="(positionX, index) in [-1.75, 1.75]"
-      :key="index"
-      :position="positionX"
-      :position-y="1.05"
-      :args="[2, 2, 2, 2, 0.25]"
+  <div class="aspect-16/9">
+    <TresCanvas
+      v-bind="gl"
     >
-      <TresMeshPhysicalMaterial
-        :metalness="0.5"
-        :roughness=".3"
+      <TresPerspectiveCamera
+        :position="[5, 5, 5]"
       />
-    </RoundedBox>
-
-    <Precipitation
-      :randomness="3"
-      :speed="1"
-      :count="2500"
-    />
-
-    <Suspense>
-      <EffectComposerPmndrs>
-        <FishEyePmndrs
-          :blendFunction="localBlendFunction"
-          :lensS="[lensSX, lensSY]"
-          :lensF="[lensFX, lensFY]"
-          :scale="scale"
+      <OrbitControls :target="[0, .5, 0]" auto-rotate :maxPolarAngle="Math.PI / 2" />
+
+      <Suspense>
+        <Environment preset="snow" />
+      </Suspense>
+
+      <TresAmbientLight :intensity=".5" />
+
+      <TresMesh :rotation-x="-Math.PI / 2">
+        <TresPlaneGeometry :args="[15, 15]" />
+        <TresMeshPhysicalMaterial
+          :metalness=".5"
+          :roughness=".85"
         />
-      </EffectComposerPmndrs>
-    </Suspense>
-  </TresCanvas>
+      </TresMesh>
+
+      <TresMesh>
+        <TresSphereGeometry :args="[7.5, 32, 32]" />
+        <TresMeshPhysicalMaterial
+          :metalness=".5"
+          :roughness=".25"
+          :side="BackSide"
+        />
+      </TresMesh>
+
+      <RoundedBox
+        v-for="(positionX, index) in [-1.75, 1.75]"
+        :key="index"
+        :position="positionX"
+        :position-y="1.05"
+        :args="[2, 2, 2, 2, 0.25]"
+      >
+        <TresMeshPhysicalMaterial
+          :metalness="0.5"
+          :roughness=".3"
+        />
+      </RoundedBox>
+
+      <Precipitation
+        :randomness="3"
+        :speed="1"
+        :count="2500"
+      />
+
+      <Suspense>
+        <EffectComposerPmndrs>
+          <FishEyePmndrs
+            :blendFunction="localBlendFunction"
+            :lensS="[lensSX, lensSY]"
+            :lensF="[lensFX, lensFY]"
+            :scale="scale"
+          />
+        </EffectComposerPmndrs>
+      </Suspense>
+    </TresCanvas>
+  </div>
+  <TresLeches :float="false" />
 </template>
diff --git a/docs/guide/pmndrs/fish-eye.md b/docs/guide/pmndrs/fish-eye.md
index 47bf1f04..bf9b6d3b 100644
--- a/docs/guide/pmndrs/fish-eye.md
+++ b/docs/guide/pmndrs/fish-eye.md
@@ -1,8 +1,8 @@
 # Fish Eye
 
-<DocsDemo>
+<DocsDemoGUI>
   <FishEyeDemo />
-</DocsDemo>
+</DocsDemoGUI>
 
 <details>
   <summary>Demo code</summary>