diff --git a/docs/.vitepress/theme/components/ScrollControlsDemo.vue b/docs/.vitepress/theme/components/ScrollControlsDemo.vue
index 683d57a5..cf582d3f 100644
--- a/docs/.vitepress/theme/components/ScrollControlsDemo.vue
+++ b/docs/.vitepress/theme/components/ScrollControlsDemo.vue
@@ -1,109 +1,21 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { ScrollControls, Stars, Sphere, Box } from '@tresjs/cientos'
-import { SRGBColorSpace, NoToneMapping } from 'three'
-import { TresLeches, useControls } from '@tresjs/leches'
-import '@tresjs/leches/styles'
-
-const scRef = ref()
-const sphereRef = ref()
-const boxRef = ref()
-const progress = ref(0)
-
-watchEffect(() => {
-  // eslint-disable-next-line no-console
-  console.log('jaime ~ progress:', progress.value)
-})
-
-const gl = {
-  clearColor: '#333',
-  alpha: true,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-}
-
-useControls('fpsgraph')
-useControls({
-  progress: progress.value,
-})
-
-const { onLoop } = useRenderLoop()
-onLoop(() => {
-  if (boxRef.value) {
-    boxRef.value.value.rotation.x = progress.value * 10
-    boxRef.value.value.rotation.y = progress.value * 2
-  }
-})
+import { TresCanvas } from '@tresjs/core'
+import { ScrollControls, Stars, Box } from '@tresjs/cientos'
 </script>
 
 <template>
   <TresCanvas
-    v-bind="gl"
     class="important-absolute"
+    clear-color="#333"
   >
     <TresPerspectiveCamera :position="[0, 2, 5]" />
     <Stars :radius="1" />
     <TresGridHelper :args="[10, 10]" />
-
-    <ScrollControls
-      ref="scRef"
-      v-model="progress"
-      :distance="20"
-      :smooth-scroll="0.1"
-    >
-      <Sphere
-        ref="sphereRef"
-        :scale="0.1"
-        :position="[1, 2, 0]"
-      />
-      <Box
-        ref="boxRef"
-        :scale="0.5"
-        :color="0xff00ff"
-        :position="[-1, 1, 0]"
-      />
-    </ScrollControls>
+    <ScrollControls />
+    <Box
+      :scale="0.5"
+      :color="0xff00ff"
+      :position="[-1, 1, 0]"
+    />
   </TresCanvas>
-  <main>
-    <section>
-      <h1>First section</h1>
-    </section>
-
-    <section>
-      <h2>Second section</h2>
-    </section>
-    <section>
-      <h3>Third section</h3>
-    </section>
-  </main>
 </template>
-
-<style scoped>
-.fixed {
-  position: fixed;
-  top: 0;
-  right: 0;
-}
-.scroll {
-  height: 200vh;
-}
-.container {
-  height: 50vh;
-  overflow: scroll;
-}
-main {
-  background-color: transparent;
-}
-section {
-  min-height: 100vh;
-  display: grid;
-  place-items: center;
-  outline: 1px solid red;
-}
-h1,
-h2,
-h3 {
-  color: #f7f7f7;
-}
-</style>
diff --git a/docs/.vitepress/theme/components/ScrollControlsHorizontalDemo.vue b/docs/.vitepress/theme/components/ScrollControlsHorizontalDemo.vue
new file mode 100644
index 00000000..b89b108c
--- /dev/null
+++ b/docs/.vitepress/theme/components/ScrollControlsHorizontalDemo.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { ScrollControls, Stars, Box } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas
+    class="important-absolute"
+    clear-color="#333"
+  >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars :radius="1" />
+    <TresGridHelper :args="[10, 10]" />
+    <ScrollControls horizontal />
+    <Box
+      :scale="0.5"
+      :color="0xff00ff"
+      :position="[-1, 1, 0]"
+    />
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/ScrollControlsPagesDemo.vue b/docs/.vitepress/theme/components/ScrollControlsPagesDemo.vue
new file mode 100644
index 00000000..ebfc6524
--- /dev/null
+++ b/docs/.vitepress/theme/components/ScrollControlsPagesDemo.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { ScrollControls, Stars, Box } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas
+    class="important-absolute"
+    clear-color="#333"
+  >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars :radius="1" />
+    <TresGridHelper :args="[10, 10]" />
+    <ScrollControls
+      :pages="20"
+      :distance="20"
+      :smooth-scroll="0.05"
+    />
+    <Box
+      :scale="0.5"
+      :color="0xff00ff"
+      :position="[-1, 1, 0]"
+    />
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/ScrollControlsProgressCameraDemo.vue b/docs/.vitepress/theme/components/ScrollControlsProgressCameraDemo.vue
new file mode 100644
index 00000000..a79b76ad
--- /dev/null
+++ b/docs/.vitepress/theme/components/ScrollControlsProgressCameraDemo.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { ScrollControls, Stars, Box } from '@tresjs/cientos'
+
+const boxRef = ref()
+const progress = ref(0)
+
+const { onLoop } = useRenderLoop()
+onLoop(() => {
+  if (boxRef.value) {
+    boxRef.value.value.rotation.x = progress.value * 10
+    boxRef.value.value.rotation.y = progress.value * 2
+    boxRef.value.value.position.x = progress.value * 4.5
+  }
+})
+</script>
+
+<template>
+  <TresCanvas
+    class="important-absolute"
+    clear-color="#333"
+  >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars :radius="1" />
+    <TresGridHelper :args="[10, 10]" />
+    <ScrollControls
+      v-model="progress"
+      :distance="0"
+    />
+    <Box
+      ref="boxRef"
+      :scale="0.5"
+      :color="0xff00ff"
+      :position="[-1, 1, 0]"
+    />
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/ScrollControlsProgressDemo.vue b/docs/.vitepress/theme/components/ScrollControlsProgressDemo.vue
new file mode 100644
index 00000000..6fa6aa5e
--- /dev/null
+++ b/docs/.vitepress/theme/components/ScrollControlsProgressDemo.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { ScrollControls, Stars, Box } from '@tresjs/cientos'
+
+const boxRef = ref()
+const progress = ref(0)
+
+const { onLoop } = useRenderLoop()
+onLoop(() => {
+  if (boxRef.value) {
+    boxRef.value.value.rotation.x = progress.value * 10
+    boxRef.value.value.rotation.y = progress.value * 2
+    boxRef.value.value.position.x = progress.value * 4.5
+  }
+})
+</script>
+
+<template>
+  <TresCanvas
+    class="important-absolute"
+    clear-color="#333"
+  >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars :radius="1" />
+    <TresGridHelper :args="[10, 10]" />
+    <ScrollControls
+      v-model="progress"
+      :distance="2"
+    />
+    <Box
+      ref="boxRef"
+      :scale="0.5"
+      :color="0xff00ff"
+      :position="[-1, 1, 0]"
+    />
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/ScrollControlsSlotsDemo.vue b/docs/.vitepress/theme/components/ScrollControlsSlotsDemo.vue
new file mode 100644
index 00000000..bd869d55
--- /dev/null
+++ b/docs/.vitepress/theme/components/ScrollControlsSlotsDemo.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { ScrollControls, Stars, Sphere, Box } from '@tresjs/cientos'
+
+const scRef = ref()
+const boxRef = ref()
+const progress = ref(0)
+
+const { onLoop } = useRenderLoop()
+onLoop(() => {
+  if (boxRef.value) {
+    boxRef.value.value.rotation.x = progress.value * 10
+    boxRef.value.value.rotation.y = progress.value * 2
+  }
+})
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#333"
+    class="important-absolute"
+  >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars :radius="1" />
+    <TresGridHelper :args="[10, 10]" />
+    <Sphere
+      :scale="0.1"
+      :position="[1, 2, 0]"
+    />
+    <ScrollControls
+      ref="scRef"
+      v-model="progress"
+      :distance="20"
+      :smooth-scroll="0.1"
+    >
+      <Box
+        ref="boxRef"
+        :scale="0.5"
+        :color="0xff00ff"
+        :position="[-1, 1, 0]"
+      />
+    </ScrollControls>
+  </TresCanvas>
+</template>
diff --git a/docs/guide/controls/scroll-controls.md b/docs/guide/controls/scroll-controls.md
index e9fcc28f..78a4a6e8 100644
--- a/docs/guide/controls/scroll-controls.md
+++ b/docs/guide/controls/scroll-controls.md
@@ -12,12 +12,18 @@ The `cientos` package create this controls from scratch for you, and comes with
 
 To start using it, you just need to import it and play with it.
 
-```vue{4}
+```vue{10}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { ScrollControls, Stars, Box } from '@tresjs/cientos'
+</script>
 <template>
-  <TresCanvas window-size>
-    <TresPerspectiveCamera :position="[0, 0, 3]" />
-    <ScrollControls />
+  <TresCanvas clear-color="#333" >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars :radius="1" />
     <TresGridHelper :args="[10, 10]" />
+    <ScrollControls />
+    <Box :scale="0.5" :color="0xff00ff" :position="[-1, 1, 0]" />
   </TresCanvas>
 </template>
 ```
@@ -26,65 +32,103 @@ To start using it, you just need to import it and play with it.
 Is really important that the Perspective camera is set first in the canvas. Otherwise might break.
 :::
 
-By default `ScrollControls` creates a scroll around the canvas and takes the camera as a default for animate, also it comes with a reactive `progress` param that returns a normalized value from 0 (start point) to 1 (end point) you just need to attach it to a v-model.
-
-```vue{2-5,10}
-<script setup>
-const progress = ref(0) // it will return a normalized number from 0 to 1
-watchEffect(() => {
-  console.log('tresjs ~ progress:', progress.value)
-})
-</script>
-<template>
-  <TresCanvas window-size>
-    <TresPerspectiveCamera :position="[0, 0, 3]" />
-    <ScrollControls v-model="progress" />
-    <TresGridHelper :args="[10, 10]" />
-  </TresCanvas>
-</template>
-```
+You can use the `horizontal` prop, to makes the scroll horizontal way.
 
-You can use the `horizontal` prop, to makes the scroll horizontal way,.
+<DocsDemo>
+  <ScrollControlsHorizontalDemo />
+</DocsDemo>
 
 ```vue{4}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { ScrollControls, Stars, Box } from '@tresjs/cientos'
+</script>
 <template>
-  <TresCanvas window-size>
-    <TresPerspectiveCamera :position="[0, 0, 3]" />
-    <ScrollControls v-model="progress" horizontal />
+  <TresCanvas clear-color="#333" >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars :radius="1" />
     <TresGridHelper :args="[10, 10]" />
+    <ScrollControls horizontal />
+    <Box :scale="0.5" :color="0xff00ff" :position="[-1, 1, 0]" />
   </TresCanvas>
 </template>
 ```
 
 With the `pages` prop you can control the length of the scroll, and with the `distance` you can control how much movement is apply to the objects ( you can for example use it with 0 value and use the progress element)
 
-```vue{4-8}
+In addition a nice effect could be achieve by using the `smoothScroll` prop like so:
+<DocsDemo>
+  <ScrollControlsPagesDemo />
+</DocsDemo>
+
+```vue{8-11}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { ScrollControls, Stars, Box } from '@tresjs/cientos'
+</script>
 <template>
-  <TresCanvas window-size> // 
+  <TresCanvas>
     <TresPerspectiveCamera :position="[0, 0, 3]" />
     <ScrollControls
-    v-model="progress"
     :pages="20" // the scroll length will be really long
-    :distance="0" // the objects (camera by default) will follow the scroll
+    :distance="20" // the camera will move more units
+    :smoothScroll="0.05" // creates a smooth scroll effect
     />
     <TresGridHelper :args="[10, 10]" />
   </TresCanvas>
 </template>
 ```
 
-But it's not all, you can also pass the `htmlScroll` props and deactivate the custom scroll and use the native html scroll.
+By default `ScrollControls` creates a scroll around the canvas and takes the camera as a default for animate, also it comes with a reactive `progress` param that returns a normalized value from 0 (start point) to 1 (end point) you just need to attach it to a v-model.
 
-```vue{5}
+<DocsDemo>
+  <ScrollControlsProgressDemo />
+</DocsDemo>
+
+```vue{7,24-25}
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { ScrollControls, Stars, Box } from '@tresjs/cientos'
+
+const boxRef = ref()
+const progress = ref(0) // it wil receive a numeric value
+
+const { onLoop } = useRenderLoop()
+onLoop(() => {
+  if (boxRef.value) {
+    boxRef.value.value.rotation.x = progress.value * 10
+    boxRef.value.value.rotation.y = progress.value * 2
+    boxRef.value.value.position.x = progress.value * 4
+  }
+})
+</script>
 <template>
-<div style="height="200vh"></div> //
-  <TresCanvas window-size>
-    <TresPerspectiveCamera :position="[0, 0, 3]" />
-    <ScrollControls v-model="progress" htmlScroll />
+  <TresCanvas clear-color="#333" >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars :radius="1" />
     <TresGridHelper :args="[10, 10]" />
+    <ScrollControls
+      v-model="progress"
+      :distance="2"
+    />
+    <Box ref="boxRef" :scale="0.5" :color="0xff00ff" :position="[-1, 1, 0]" />
   </TresCanvas>
 </template>
 ```
 
+If you don't want to use the default camera movement you can set the distance to 0 a just rely on progress to animate (the progress is not affected by the `smoothScroll` )
+
+<DocsDemo>
+  <ScrollControlsProgressCameraDemo />
+</DocsDemo>
+
+But it's not all, you can also pass the `htmlScroll` props this will deactivate the custom scroll and use the native html scroll.
+
+```vue{1}
+    <ScrollControls htmlScroll />
+```
+
 ::: warning
 - If you set the `htmlScroll` you need to set your html to have content that create scroll. so the `pages` prop will not work
 - The `htmlScroll` will set the TresCanvas as a fixed background.
@@ -94,17 +138,44 @@ But it's not all, you can also pass the `htmlScroll` props and deactivate the cu
 
 The elements that you pass as a slot will be affected by the scroll effect, and follow the camera.
 
-```vue{5-7}
+<DocsDemo>
+  <ScrollControlsSlotsDemo />
+</DocsDemo>
+
+```vue{24-30}
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { ScrollControls, Stars, Sphere, Box } from '@tresjs/cientos'
+
+const scRef = ref()
+const boxRef = ref()
+const progress = ref(0)
+
+const { onLoop } = useRenderLoop()
+onLoop(() => {
+  if (boxRef.value) {
+    boxRef.value.value.rotation.x = progress.value * 10
+    boxRef.value.value.rotation.y = progress.value * 2
+  }
+})
+</script>
 <template>
-<div style="height="200vh"></div> //
-  <TresCanvas window-size>
-    <TresPerspectiveCamera :position="[0, 0, 3]" />
-    <ScrollControls v-model="progress" htmlScroll >
-      <Box :args="[1, 1, 1]" color="green" /> // will follow the camera
-    </ScrollControls>
+  <TresCanvas clear-color="#333" >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars :radius="1" />
     <TresGridHelper :args="[10, 10]" />
+    <Sphere :scale="0.1" :position="[1, 2, 0]" />
+    <ScrollControls
+      v-model="progress"
+      :distance="20"
+      :smooth-scroll="0.1"
+    >
+      <Box ref="boxRef" :scale="0.5" :color="0xff00ff" :position="[-1, 1, 0]" />
+    </ScrollControls>
   </TresCanvas>
 </template>
+
 ```
 
 ## Props
@@ -116,3 +187,7 @@ The elements that you pass as a slot will be affected by the scroll effect, and
 | **smoothScroll** | The smooth factor of the scrolling.                      | `0.5`   |
 | **horizontal**   | Whether the scroll is horizontal or vertical.            | `false` |
 | **htmlScroll**   | Whether to use the native HTML scroll.                   | `false` |
+
+::: warning
+Currently the props are not reactive for this control
+:::
\ No newline at end of file