diff --git a/docs/.vitepress/theme/components/SmokeDemo.vue b/docs/.vitepress/theme/components/SmokeDemo.vue
index a9180fea..10e580a5 100644
--- a/docs/.vitepress/theme/components/SmokeDemo.vue
+++ b/docs/.vitepress/theme/components/SmokeDemo.vue
@@ -1,7 +1,71 @@
 <script setup lang="ts">
-import { Box, OrbitControls, Smoke } from '@tresjs/cientos'
+import { Smoke } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { NoToneMapping, SRGBColorSpace } from 'three'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const { segments, opacity, speed, depth, color, depthTest, spreadY, spreadX, scale } = useControls({
+  segments: {
+    label: 'Segments',
+    value: 5,
+    min: 1,
+    max: 20,
+    step: 1,
+  },
+  opacity: {
+    label: 'Opacity',
+    value: 0.5,
+    min: 0,
+    max: 1,
+    step: 0.1,
+  },
+  speed: {
+    label: 'Speed',
+    value: 0.4,
+    min: 0,
+    max: 1,
+    step: 0.1,
+  },
+  depth: {
+    label: 'Depth',
+    value: 0.3,
+    min: 0,
+    max: 1,
+    step: 0.1,
+  },
+  color: {
+    type: 'color',
+    label: 'Color',
+    value: '#f7f7f7',
+  },
+  depthTest: {
+    type: 'boolean',
+    label: 'Depth Test',
+    value: false,
+  },
+  spreadY: {
+    label: 'Spread Y',
+    value: 0.1,
+    min: 0,
+    max: 4,
+    step: 0.1,
+  },
+  spreadX: {
+    label: 'Spread X',
+    value: 0.5,
+    min: 0,
+    max: 4,
+    step: 0.1,
+  },
+  scale: {
+    label: 'Scale',
+    value: 1,
+    min: 0.1,
+    max: 4,
+    step: 0.1,
+  },
+})
 
 const gl = {
   clearColor: '#333',
@@ -12,53 +76,24 @@ const gl = {
 </script>
 
 <template>
-  <TresCanvas
-    v-bind="gl"
-  >
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Suspense>
-      <Smoke
-        :segments="4"
-        :width="1"
-        :position="[-4, -2, 0]"
-      />
-    </Suspense>
-    <Suspense>
-      <Smoke
-        :segments="4"
-        :width="1"
-        :position="[-4, 2, 0]"
-      />
-    </Suspense>
-    <Suspense>
-      <Smoke
-        :segments="4"
-        :width="1"
-      />
-    </Suspense>
-    <Suspense>
-      <Smoke
-        :segments="4"
-        :width="1"
-        :position="[4, -2, 0]"
-      />
-    </Suspense>
+  <TresLeches class="important-top-[-2rem] important-left-0" />
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[-0.5, 1, 5]" />
     <Suspense>
       <Smoke
-        :segments="4"
-        :width="1"
-        :position="[4, 2, 0]"
+        :segments="segments.value"
+        :opacity="opacity.value"
+        :speed="speed.value"
+        :depth="depth.value"
+        :color="color.value"
+        :depth-test="depthTest.value"
+        :spreadY="spreadY.value"
+        :spreadX="spreadX.value"
+        :scale="scale.value"
       />
     </Suspense>
-    <Box :args="[2, 2]">
-      <TresMeshToonMaterial color="#82DBC5" />
-    </Box>
     <TresGridHelper :args="[10, 10]" />
     <TresAmbientLight :intensity="1" />
-    <TresDirectionalLight
-      :intensity="1"
-      :position="[2, 2, 2]"
-    />
-    <OrbitControls />
+    <TresDirectionalLight :intensity="1" :position="[2, 2, 2]" />
   </TresCanvas>
 </template>
diff --git a/docs/guide/staging/smoke.md b/docs/guide/staging/smoke.md
index a0a6d225..e7d33323 100644
--- a/docs/guide/staging/smoke.md
+++ b/docs/guide/staging/smoke.md
@@ -26,32 +26,20 @@ You can use `<Smoke />` component without passing any props, but still if you wa
 </template>
 ```
 
-Notice that you can pass a texture in combination with props,  to personalize your effect
-
-```vue
-<template>
-  <TresCanvas>
-    ...
-    <Suspense>
-      <Smoke
-        :speed="0.8"
-        :segments="12"
-        texture="my_texture_path"
-        :color="#f7f"
-      />
-    </Suspense>
-    ...
-  </TresCanvas>
-</template>
-```
 ## Props
 
 <table><thead><tr class="row-header"><th class="col-name">Name</th><th class="col-type">Type</th><th class="col-description">Description</th><th class="col-default">Default</th><th class="col-required">Required</th></tr></thead><tbody><tr class="row-color"><td class="col-name"><strong><nobr>color</nobr></strong></td><td class="col-type"><code>TresColor</code></td><td class="col-description">The color of the smoke.<br>
 </td><td class="col-default"><code>'#ffffff'</code></td><td class="col-required">No</td></tr><tr class="row-opacity"><td class="col-name"><strong><nobr>opacity</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">The strength of the opacity.<br>
 </td><td class="col-default"><code>0.5</code></td><td class="col-required">No</td></tr><tr class="row-speed"><td class="col-name"><strong><nobr>speed</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">The rotation speed of the smoke.<br>
-</td><td class="col-default"><code>0.4</code></td><td class="col-required">No</td></tr><tr class="row-width"><td class="col-name"><strong><nobr>width</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">The base width.<br>
-</td><td class="col-default"><code>10</code></td><td class="col-required">No</td></tr><tr class="row-depth"><td class="col-name"><strong><nobr>depth</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">The base depth.<br>
+</td><td class="col-default"><code>0.4</code></td><td class="col-required">No</td></tr><tr class="row-depth"><td class="col-name"><strong><nobr>depth</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">The base depth.<br>
 </td><td class="col-default"><code>1.5</code></td><td class="col-required">No</td></tr><tr class="row-segments"><td class="col-name"><strong><nobr>segments</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">The number of smoke to render.<br>
-</td><td class="col-default"><code>20</code></td><td class="col-required">No</td></tr><tr class="row-texture"><td class="col-name"><strong><nobr>texture</nobr></strong></td><td class="col-type"><code>string</code></td><td class="col-description">The texture of the smoke.<br>
+</td><td class="col-default"><code>20</code></td><td class="col-required">No</td></tr>
+<tr class="row-segments"><td class="col-name"><strong><nobr>SpreadX</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">Spread factor on the X axis.<br>
+</td><td class="col-default"><code>20</code></td><td class="col-required">No</td></tr>
+<tr class="row-segments"><td class="col-name"><strong><nobr>SpreadY</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">Spread factor on the Y axis.<br>
+</td><td class="col-default"><code>20</code></td><td class="col-required">No</td></tr>
+<tr class="row-segments"><td class="col-name"><strong><nobr>Scale</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">controls the overall size of the smoke segments<br>
+</td><td class="col-default"><code>1</code></td><td class="col-required">No</td></tr>
+<tr class="row-texture"><td class="col-name"><strong><nobr>texture</nobr></strong></td><td class="col-type"><code>string</code></td><td class="col-description">The texture of the smoke.<br>
 </td><td class="col-default">default component texture</td><td class="col-required">No</td></tr><tr class="row-depth-test"><td class="col-name"><strong><nobr>depthTest</nobr></strong></td><td class="col-type"><code>boolean</code></td><td class="col-description">The depthTest.<br>
 </td><td class="col-default"><code>true</code></td><td class="col-required">No</td></tr></tbody></table>
diff --git a/playground/vue/src/pages/staging/SmokeDemo.vue b/playground/vue/src/pages/staging/SmokeDemo.vue
index 1d2379fc..90e0f9b6 100644
--- a/playground/vue/src/pages/staging/SmokeDemo.vue
+++ b/playground/vue/src/pages/staging/SmokeDemo.vue
@@ -2,6 +2,70 @@
 import { Box, OrbitControls, Smoke } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { NoToneMapping, SRGBColorSpace } from 'three'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const { segments, opacity, speed, depth, color, depthTest, spreadY, spreadX, scale } = useControls({
+  segments: {
+    label: 'Segments',
+    value: 5,
+    min: 1,
+    max: 20,
+    step: 1,
+  },
+  opacity: {
+    label: 'Opacity',
+    value: 0.5,
+    min: 0,
+    max: 1,
+    step: 0.1,
+  },
+  speed: {
+    label: 'Speed',
+    value: 0.4,
+    min: 0,
+    max: 1,
+    step: 0.1,
+  },
+  depth: {
+    label: 'Depth',
+    value: 0.3,
+    min: 0,
+    max: 1,
+    step: 0.1,
+  },
+  color: {
+    type: 'color',
+    label: 'Color',
+    value: '#f7f7f7',
+  },
+  depthTest: {
+    type: 'boolean',
+    label: 'Depth Test',
+    value: false,
+  },
+  spreadY: {
+    label: 'Spread Y',
+    value: 0.1,
+    min: 0,
+    max: 4,
+    step: 0.1,
+  },
+  spreadX: {
+    label: 'Spread X',
+    value: 0.5,
+    min: 0,
+    max: 4,
+    step: 0.1,
+  },
+  scale: {
+    label: 'Scale',
+    value: 1,
+    min: 0.1,
+    max: 4,
+    step: 0.1,
+  },
+})
 
 const gl = {
   clearColor: '#333',
@@ -12,46 +76,28 @@ const gl = {
 </script>
 
 <template>
-  <TresCanvas
-    v-bind="gl"
-  >
+  <TresLeches />
+  <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[0, 2, 5]" />
     <Suspense>
       <Smoke
-        :position="[-4, -2, 0]"
-        :segments="8"
-      />
-    </Suspense>
-    <Suspense>
-      <Smoke
-        :position="[-4, 2, 0]"
-        :segments="8"
-      />
-    </Suspense>
-    <Suspense>
-      <Smoke :segments="8" />
-    </Suspense>
-    <Suspense>
-      <Smoke
-        :position="[4, -2, 0]"
-        :segments="8"
-      />
-    </Suspense>
-    <Suspense>
-      <Smoke
-        :position="[4, 2, 0]"
-        :segments="8"
+        :segments="segments.value"
+        :opacity="opacity.value"
+        :speed="speed.value"
+        :depth="depth.value"
+        :color="color.value"
+        :depth-test="depthTest.value"
+        :spreadY="spreadY.value"
+        :spreadX="spreadX.value"
+        :scale="scale.value"
       />
     </Suspense>
     <Box :args="[2, 2]">
-      <TresMeshToonMaterial color="#82DBC5" />
+      <TresMeshToonMaterial color="#82DBC5" wireframe />
     </Box>
     <TresGridHelper :args="[10, 10]" />
     <TresAmbientLight :intensity="1" />
-    <TresDirectionalLight
-      :intensity="1"
-      :position="[2, 2, 2]"
-    />
+    <TresDirectionalLight :intensity="1" :position="[2, 2, 2]" />
     <OrbitControls />
   </TresCanvas>
 </template>
diff --git a/src/core/staging/Smoke.vue b/src/core/staging/Smoke.vue
index b3bd88eb..ec87fe3d 100644
--- a/src/core/staging/Smoke.vue
+++ b/src/core/staging/Smoke.vue
@@ -19,7 +19,6 @@ export interface SmokeProps {
    * @default 0.5
    * @type {number}
    * @memberof SmokeProps
-   * @see https://threejs.org/docs/#api/en/materials/MeshStandardMaterial
    */
   opacity?: number
   /**
@@ -27,23 +26,13 @@ export interface SmokeProps {
    * @default 0.4
    * @type {number}
    * @memberof SmokeProps
-   * @see https://threejs.org/docs/#api/en/materials/MeshStandardMaterial
    */
   speed?: number
-  /**
-   * The base width.
-   * @default 4
-   * @type {number}
-   * @memberof SmokeProps
-   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
-   */
-  width?: number
   /**
    * The base depth.
    * @default 10
    * @type {number}
    * @memberof SmokeProps
-   * @see https://threejs.org/docs/#api/en/geometries/PlaneGeometry
    */
   depth?: number
   /**
@@ -51,7 +40,6 @@ export interface SmokeProps {
    * @default 10
    * @type {number}
    * @memberof SmokeProps
-   * @see https://threejs.org/docs/#api/en/materials/MeshStandardMaterial
    */
   segments?: number
   /**
@@ -59,7 +47,6 @@ export interface SmokeProps {
    * @default 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png'
    * @type {string}
    * @memberof SmokeProps
-   * @see https://threejs.org/docs/#api/en/materials/MeshStandardMaterial
    */
   texture?: string
   /**
@@ -67,23 +54,48 @@ export interface SmokeProps {
    * @default true
    * @type {boolean}
    * @memberof SmokeProps
-   * @see https://threejs.org/docs/#api/en/materials/MeshStandardMaterial
    */
   depthTest?: boolean
+  /**
+   * Spread on the Y axis.
+   * @default 0.1
+   * @type {number}
+   * @memberof SmokeProps
+   */
+  spreadY?: number
+  /**
+   * Spread on the X axis.
+   * @default 0.5
+   * @type {number}
+   * @memberof SmokeProps
+   */
+  spreadX?: number
+  /**
+   * Scale.
+   * @default 1
+   * @type {number}
+   * @memberof SmokeProps
+   */
+  scale?: number
 }
 
 const props = withDefaults(defineProps<SmokeProps>(), {
   opacity: 0.5,
   speed: 0.4,
-  width: 10,
-  depth: 1.5,
-  segments: 20,
-  texture: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png',
-  color: '#ffffff',
-  depthTest: true,
+  depth: 0.3,
+  segments: 10,
+  texture:
+    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png',
+  color: '#f7f7f7',
+  depthTest: false,
+  spreadY: 0.1,
+  spreadX: 0.5,
+  scale: 1,
 })
 
-const { width, depth, segments, texture, color, depthTest, opacity, speed } = toRefs(props)
+const { depth, segments, texture, color, depthTest, opacity, speed, spreadY, spreadX, scale } = toRefs(
+  props,
+)
 
 const smokeRef = shallowRef()
 const groupRef = shallowRef()
@@ -92,15 +104,13 @@ defineExpose({
   instance: smokeRef,
 })
 
-const smoke = [...[segments]].map((_, index) => ({
-  x: width.value / 2 - Math.random() * width.value,
-  y: width.value / 2 - Math.random() * width.value,
-  scale: 0.4 + Math.sin(((index + 1) / segments.value) * Math.PI) * ((0.2 + Math.random()) * 10),
-  density: Math.max(0.2, Math.random()),
-  rotation: Math.max(0.002, 0.005 * Math.random()) * speed.value,
-}))
-
-const calculateOpacity = (scale: number, density: number): number => (scale / 6) * density * opacity.value
+const smoke = computed(() =>
+  Array.from({ length: segments.value }, (_, index) => ({
+    x: (Math.random() - 0.5) * spreadX.value,
+    y: (Math.random() - 0.5) * spreadY.value,
+    scale: Math.sin((index + 1) / segments.value) * scale.value,
+  })),
+)
 
 const { state: map } = useTexture(texture.value)
 
@@ -111,8 +121,8 @@ const { onBeforeRender } = useLoop()
 
 onBeforeRender(() => {
   if (smokeRef.value && camera.activeCamera.value && groupRef.value) {
-    groupRef.value?.children.forEach((child: Object3D, index: number) => {
-      child.rotation.z += smoke[index].rotation
+    groupRef.value?.children.forEach((child: Object3D) => {
+      child.rotation.z += Math.max(0.002, 0.005 * Math.random()) * speed.value
     })
     smokeRef.value.lookAt(camera.activeCamera.value?.position)
     // TODO: comment this until invalidate is back in the loop callback on v5
@@ -122,23 +132,15 @@ onBeforeRender(() => {
 </script>
 
 <template>
-  <TresGroup
-    ref="smokeRef"
-    v-bind="$attrs"
-  >
-    <TresGroup
-      ref="groupRef"
-      :position="[0, 0, (segments / 2) * depth]"
-    >
+  <TresGroup ref="smokeRef">
+    <TresGroup ref="groupRef" :position="[0, 0, (segments / 2) * depth]">
       <TresMesh
-        v-for="({ scale, x, y, density }, index) in smoke"
+        v-for="({ x, y, scale: smokeScale }, index) in smoke"
         :key="`${index}`"
         :position="[x, y, -index * depth]"
+        :scale="smokeScale"
       >
-        <TresPlaneGeometry
-          :scale="[scale, scale, scale]"
-          :rotation="[0, 0, 0]"
-        />
+        <TresPlaneGeometry />
         <TresMeshStandardMaterial
           :map="map"
           :depth-test="depthTest"
@@ -146,7 +148,7 @@ onBeforeRender(() => {
           :color="color"
           :depth-write="false"
           transparent
-          :opacity="calculateOpacity(scale, density)"
+          :opacity="opacity"
         />
       </TresMesh>
     </TresGroup>