diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index feca1a8d..2b60d429 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,5 +1,6 @@
 import { resolve } from 'pathe'
 import { defineConfig } from 'vitepress'
+import components from '../component-list/components'
 
 const whitelist = ['TresCanvas', 'TresLeches', 'TresScene']
 
@@ -61,134 +62,7 @@ export default defineConfig({
           { text: 'Migration from v3', link: '/guide/migrating-from-v3' },
         ],
       },
-      {
-        text: 'Abstractions',
-        items: [
-          { text: 'Text3D', link: '/guide/abstractions/text-3d' },
-          { text: 'Levioso (Float)', link: '/guide/abstractions/levioso' },
-          { text: 'useAnimations', link: '/guide/abstractions/use-animations' },
-          { text: 'MouseParallax', link: '/guide/abstractions/mouse-parallax' },
-          { text: 'Lensflare', link: '/guide/abstractions/lensflare' },
-          { text: 'Reflector', link: '/guide/abstractions/reflector' },
-          { text: 'GlobalAudio', link: '/guide/abstractions/global-audio' },
-          { text: 'Fbo', link: '/guide/abstractions/fbo' },
-          { text: 'useFBO', link: '/guide/abstractions/use-fbo' },
-          { text: 'useSurfaceSampler', link: '/guide/abstractions/use-surface-sampler' },
-          { text: 'Sampler', link: '/guide/abstractions/sampler' },
-          { text: 'Edges', link: '/guide/abstractions/edges' },
-          { text: 'PositionalAudio', link: '/guide/abstractions/positional-audio' },
-          { text: 'AnimatedSprite', link: '/guide/abstractions/animated-sprite' },
-          { text: 'MarchingCubes', link: '/guide/abstractions/marching-cubes' },
-          { text: 'Mask', link: '/guide/abstractions/mask' },
-          { text: 'CubeCamera', link: '/guide/abstractions/cube-camera' },
-          { text: 'ScreenSizer', link: '/guide/abstractions/screen-sizer' },
-          { text: 'ScreenSpace', link: '/guide/abstractions/screen-space' },
-          { text: 'Outline', link: '/guide/abstractions/outline' },
-          { text: 'Image', link: '/guide/abstractions/image' },
-          { text: 'Billboard', link: '/guide/abstractions/billboard' },
-        ],
-      },
-      {
-        text: 'Controls',
-        items: [
-          { text: 'OrbitControls', link: '/guide/controls/orbit-controls' },
-          { text: 'CameraControls', link: '/guide/controls/camera-controls' },
-          { text: 'TransformControls', link: '/guide/controls/transform-controls' },
-          { text: 'PointerLockControls', link: '/guide/controls/pointer-lock-controls' },
-          { text: 'KeyboardControls', link: '/guide/controls/keyboard-controls' },
-          { text: 'ScrollControls', link: '/guide/controls/scroll-controls' },
-          { text: 'MapControls', link: '/guide/controls/map-controls' },
-          { text: 'Helper', link: '/guide/controls/helper' },
-        ],
-      },
-      {
-        text: 'Loaders',
-        items: [
-          { text: 'useProgress', link: '/guide/loaders/use-progress' },
-          { text: 'useGLTF', link: '/guide/loaders/use-gltf' },
-          { text: 'GLTFModel', link: '/guide/loaders/gltf-model' },
-          { text: 'useFBX', link: '/guide/loaders/use-fbx' },
-          { text: 'FBXModel', link: '/guide/loaders/fbx-model' },
-          { text: 'useVideoTexture', link: '/guide/loaders/use-video-texture' },
-          { text: 'SVG', link: '/guide/loaders/svg' },
-        ],
-      },
-      {
-        text: 'Materials',
-        collapsed: true,
-        items: [
-          { text: 'WobbleMaterial', link: '/guide/materials/wobble-material' },
-          { text: 'MeshGlassMaterial', link: '/guide/materials/glass-material' },
-          { text: 'CustomShaderMaterial', link: '/guide/materials/custom-shader-material' },
-          { text: 'MeshReflectionMaterial', link: '/guide/materials/mesh-reflection-material' },
-          { text: 'PointMaterial', link: '/guide/materials/point-material' },
-          { text: 'MeshDiscardMaterial', link: '/guide/materials/mesh-discard-material' },
-        ],
-      },
-      {
-        text: 'Shapes',
-        collapsed: true,
-        items: [
-          { text: 'Box', link: '/guide/shapes/box' },
-          { text: 'CatmullRomCurve3', link: '/guide/shapes/catmullromcurve3' },
-          { text: 'Circle', link: '/guide/shapes/circle' },
-          { text: 'Cone', link: '/guide/shapes/cone' },
-          { text: 'CubicBezierLine', link: '/guide/shapes/cubic-bezier-line' },
-          { text: 'Cylinder', link: '/guide/shapes/cylinder' },
-          { text: 'Dodecahedron', link: '/guide/shapes/dodecahedron' },
-          { text: 'Icosahedron', link: '/guide/shapes/icosahedron' },
-          { text: 'Line2', link: '/guide/shapes/line2' },
-          { text: 'Octahedron', link: '/guide/shapes/octahedron' },
-          { text: 'Plane', link: '/guide/shapes/plane' },
-          { text: 'QuadraticBezierLine', link: '/guide/shapes/quadratic-bezier-line' },
-          { text: 'Ring', link: '/guide/shapes/ring' },
-          { text: 'RoundedBox', link: '/guide/shapes/rounded-box' },
-          { text: 'ScreenQuad', link: '/guide/shapes/screen-quad' },
-          { text: 'Sphere', link: '/guide/shapes/sphere' },
-          { text: 'Superformula', link: '/guide/shapes/superformula' },
-          { text: 'Tetrahedron', link: '/guide/shapes/tetrahedron' },
-          { text: 'Torus', link: '/guide/shapes/torus' },
-          { text: 'TorusKnot', link: '/guide/shapes/torus-knot' },
-          { text: 'Tube', link: '/guide/shapes/tube' },
-        ],
-      },
-      {
-        text: 'Staging',
-        items: [
-          { text: 'Backdrop', link: '/guide/staging/backdrop' },
-          { text: 'Environment', link: '/guide/staging/environment' },
-          { text: 'useEnvironment', link: '/guide/staging/use-environment' },
-          { text: 'Sky', link: '/guide/staging/sky' },
-          { text: 'Stars', link: '/guide/staging/stars' },
-          { text: 'Smoke', link: '/guide/staging/smoke' },
-          { text: 'AccumulativeShadows', link: '/guide/staging/accumulative-shadows' },
-          { text: 'ContactShadows', link: '/guide/staging/contact-shadows' },
-          { text: 'Precipitation', link: '/guide/staging/precipitation' },
-          { text: 'Sparkles', link: '/guide/staging/sparkles' },
-          { text: 'Ocean', link: '/guide/staging/ocean' },
-          { text: 'Align', link: '/guide/staging/align' },
-          { text: 'SoftShadows', link: '/guide/staging/soft-shadows' },
-          { text: 'Grid', link: '/guide/staging/grid' },
-          { text: 'CircleShadow', link: '/guide/staging/circle-shadow' },
-          { text: 'Bounds', link: '/guide/staging/bounds' },
-          { text: 'RandomizedLights', link: '/guide/staging/randomized-lights' },
-          { text: 'Bounds', link: '/guide/staging/bounds' },
-          { text: 'Stage', link: '/guide/staging/stage' },
-        ],
-      },
-      {
-        text: 'Misc',
-        collapsed: true,
-        items: [
-          { text: 'Stats', link: '/guide/misc/stats' },
-          { text: 'Html', link: '/guide/misc/html-component' },
-          { text: 'StatsGl', link: '/guide/misc/stats-gl' },
-          { text: 'useGLTFExporter', link: '/guide/misc/use-gltf-exporter' },
-          { text: 'BakeShadows', link: '/guide/misc/bake-shadows' },
-          { text: 'useIntersect', link: '/guide/misc/use-intersect' },
-          { text: 'LOD', link: '/guide/misc/lod' },
-        ],
-      },
+      ...components,
     ],
 
     socialLinks: [
diff --git a/docs/.vitepress/theme/components/BackdropDemo.vue b/docs/.vitepress/theme/components/BackdropDemo.vue
index 4c2bc311..f1e41475 100644
--- a/docs/.vitepress/theme/components/BackdropDemo.vue
+++ b/docs/.vitepress/theme/components/BackdropDemo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { Backdrop, GLTFModel, useProgress } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-
+import type { Camera } from 'three'
 import { PCFSoftShadowMap, SRGBColorSpace } from 'three'
-import { ref, watch, watchEffect } from 'vue'
+import { ref, watchEffect } from 'vue'
 
 const gl = {
   clearColor: 'pink',
@@ -13,21 +13,11 @@ const gl = {
   outputColorSpace: SRGBColorSpace,
 }
 
-const model = ref(null)
-
-watch(model, ({ value }) => {
-  value.traverse((child) => {
-    if (child.isMesh) {
-      child.castShadow = true
-    }
-  })
-})
-
 const cameraRef = ref(null)
 
 watchEffect(() => {
   if (cameraRef.value) {
-    (cameraRef.value as THREE.Camera).lookAt(0, 5, 0)
+    (cameraRef.value as Camera).lookAt(0, 5, 0)
   }
 })
 
@@ -58,7 +48,6 @@ const { hasFinishLoading, progress } = await useProgress()
       />
       <Suspense>
         <GLTFModel
-          ref="model"
           path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb"
           :rotation="[0, 0.5, 0]"
           :position="[0, 0.4, 0]"
diff --git a/docs/component-list/components.ts b/docs/component-list/components.ts
index 69ae2d4a..c18bd931 100644
--- a/docs/component-list/components.ts
+++ b/docs/component-list/components.ts
@@ -2,6 +2,8 @@ export default [
   {
     text: 'Abstractions',
     items: [
+      { text: 'AnimatedSprite', link: '/guide/abstractions/animated-sprite' },
+      { text: 'Edges', link: '/guide/abstractions/edges' },
       { text: 'Text3D', link: '/guide/abstractions/text-3d' },
       { text: 'Levioso (Float)', link: '/guide/abstractions/levioso' },
       { text: 'useAnimations', link: '/guide/abstractions/use-animations' },
@@ -21,6 +23,7 @@ export default [
       { text: 'Mask', link: '/guide/abstractions/mask' },
       { text: 'CubeCamera', link: '/guide/abstractions/cube-camera' },
       { text: 'GradientTexture', link: '/guide/abstractions/gradient-texture' },
+      { text: 'ScreenSizer', link: '/guide/abstractions/screen-sizer' },
       { text: 'ScreenSpace', link: '/guide/abstractions/screen-space' },
       { text: 'Outline', link: '/guide/abstractions/outline' },
       { text: 'Image', link: '/guide/abstractions/image' },
@@ -57,7 +60,9 @@ export default [
   },
   {
     text: 'Materials',
+    collapsed: true,
     items: [
+      { text: 'MeshReflectionMaterial', link: '/guide/materials/mesh-reflection-material' },
       { text: 'WobbleMaterial', link: '/guide/materials/wobble-material' },
       { text: 'MeshGlassMaterial', link: '/guide/materials/glass-material' },
       {
@@ -80,6 +85,7 @@ export default [
   },
   {
     text: 'Shapes',
+    collapsed: true,
     items: [
       { text: 'Box', link: '/guide/shapes/box' },
       { text: 'CatmullRomCurve3', link: '/guide/shapes/catmullromcurve3' },
@@ -125,12 +131,12 @@ export default [
       { text: 'CircleShadow', link: '/guide/staging/circle-shadow' },
       { text: 'Bounds', link: '/guide/staging/bounds' },
       { text: 'RandomizedLights', link: '/guide/staging/randomized-lights' },
-      { text: 'Bounds', link: '/guide/staging/bounds' },
       { text: 'Stage', link: '/guide/staging/stage' },
     ],
   },
   {
     text: 'Misc',
+    collapsed: true,
     items: [
       { text: 'Stats', link: '/guide/misc/stats' },
       { text: 'Html', link: '/guide/misc/html-component' },
@@ -141,15 +147,6 @@ export default [
       { text: 'LOD', link: '/guide/misc/lod' },
     ],
   },
-  {
-    text: 'Directives',
-    items: [
-      { text: 'v-log', link: '/guide/directives/v-log' },
-      { text: 'v-light-helper', link: '/guide/directives/v-light-helper' },
-      { text: 'v-always-look-at', link: '/guide/directives/v-always-look-at' },
-      { text: 'v-distance-to', link: '/guide/directives/v-distance-to' },
-    ],
-  },
 ] as { text: string, items: { text: string, link: string }[] }[]
 
 export const icons = {
diff --git a/docs/guide/staging/environment.md b/docs/guide/staging/environment.md
index d6fa7296..f20c1a62 100644
--- a/docs/guide/staging/environment.md
+++ b/docs/guide/staging/environment.md
@@ -63,21 +63,17 @@ watch(environmentRef, texture => {
 
 You can use one of the available presets by passing the `preset` prop:
 
-```html
+```vue
 <Environment preset="city" />
 ```
 
-<DocsDemo>
-  <EnvironmentPresetsDemo/>
-</DocsDemo>
-
 ## Lightformer
 
 You can incorporate `Lightformer` into the environment just like a slot.
 
-```html
+```vue
 <script setup>
-  import { Enviroment, LightFormer } from '@tres/cientos'
+import { Enviroment, LightFormer } from '@tres/cientos'
 </script>
 
 <template>
@@ -85,7 +81,7 @@ You can incorporate `Lightformer` into the environment just like a slot.
     <Lightformer :intensity="0.75" :position="[0, 5, -9]" />
     <Lightformer from="ring" :rotation-y="-Math.PI / 2" :scale="[10, 10, 1]" />
   </Environment>
-</template>

+</template>
 ```
 
 ### Props for Lightformer