diff --git a/playground/components.d.ts b/playground/components.d.ts
index b5d9b38c..45ebd25d 100644
--- a/playground/components.d.ts
+++ b/playground/components.d.ts
@@ -14,17 +14,10 @@ declare module 'vue' {
     LeviosoDemo: typeof import('./src/components/LeviosoDemo.vue')['default']
     MapControlsDemo: typeof import('./src/components/MapControlsDemo.vue')['default']
     ModelsDemo: typeof import('./src/components/ModelsDemo.vue')['default']
-    OrbitControlsDemo: typeof import('./src/components/OrbitControlsDemo.vue')['default']
-    PointerLockControlsDemo: typeof import('./src/components/PointerLockControlsDemo.vue')['default']
-    PrecipitationDemo: typeof import('./src/components/PrecipitationDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScrollDemo: typeof import('./src/components/ScrollDemo.vue')['default']
     TheGizmos: typeof import('./src/components/TheGizmos.vue')['default']
-    TheSmoke: typeof import('./src/components/TheSmoke.vue')['default']
-    TheStars: typeof import('./src/components/TheStars.vue')['default']
-    TheText3D: typeof import('./src/components/TheText3D.vue')['default']
-    TransformControlsDemo: typeof import('./src/components/TransformControlsDemo.vue')['default']
     WobbleMaterial: typeof import('./src/components/WobbleMaterial.vue')['default']
   }
 }
diff --git a/playground/src/pages/StarsDemo.vue b/playground/src/pages/StarsDemo.vue
index 0147d617..606a5d0d 100644
--- a/playground/src/pages/StarsDemo.vue
+++ b/playground/src/pages/StarsDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, Stars } from '@tresjs/cientos'
+import { OrbitControls, Stars, MouseParallax } from '@tresjs/cientos'
 import { SRGBColorSpace, NoToneMapping } from 'three'
 
 const gl = {
@@ -16,6 +16,7 @@ const star = shallowRef<Stars>(null)
 <template>
   <TresCanvas v-bind="gl" ref="canvas">
     <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <MouseParallax />
     <Stars ref="star" :radius="1" />
     <TresGridHelper :args="[10, 10]" />
     <OrbitControls />
diff --git a/src/core/abstractions/index.ts b/src/core/abstractions/index.ts
index 0ecf25c6..699f267d 100644
--- a/src/core/abstractions/index.ts
+++ b/src/core/abstractions/index.ts
@@ -1,20 +1,20 @@
 import Text3D from './Text3D.vue'
 import { useAnimations } from './useAnimations'
 import { Environment } from './useEnvironment/component'
-import { MouseParallax } from './useParallax/component'
+// import { MouseParallax } from './mouseParallax'
 import Stars from './Stars.vue'
 import Precipitation from './Precipitation.vue'
 import Smoke from './Smoke.vue'
 import Levioso from './Levioso.vue'
 import ContactShadows from './ContactShadows.vue'
 
-export * from './useParallax'
+export * from './mouseParallax'
 export * from './useEnvironment'
 export {
   Text3D,
   useAnimations,
   Environment,
-  MouseParallax,
+  // MouseParallax,
   Stars,
   Smoke,
   Levioso,
diff --git a/src/core/abstractions/mouseParallax/index.ts b/src/core/abstractions/mouseParallax/index.ts
new file mode 100644
index 00000000..ac61accd
--- /dev/null
+++ b/src/core/abstractions/mouseParallax/index.ts
@@ -0,0 +1,67 @@
+import { defineComponent, computed } from 'vue'
+import { useRenderLoop } from '@tresjs/core'
+import { useWindowSize, useMouse, watchOnce } from '@vueuse/core'
+import { useCientos } from '../../useCientos'
+import { Group } from 'three'
+
+export interface MouseParallaxProps {
+  /**
+   * Whether to disable the mouse controls.
+   * @type {boolean}
+   * @default false
+   * @memberof MouseParallaxProps
+   *
+   */
+  disabled?: boolean
+  /**
+   * The factor to multiply the mouse movement by.
+   * @type {number}
+   * @default 2.5
+   * @memberof MouseParallaxProps
+   *
+   **/
+  factor?: number
+  /**
+   * The factor to multiply the mouse movement by.
+   * @type {number}
+   * @default 2.5
+   * @memberof MouseParallaxProps
+   *
+   **/
+  ease?: number
+}
+
+export const MouseParallax = defineComponent<MouseParallaxProps>({
+  name: 'MouseParallax',
+  props: ['disabled', 'factor', 'ease'] as unknown as undefined,
+  setup(props) {
+    const { state } = useCientos()
+
+    const { x, y } = useMouse()
+    const { width, height } = useWindowSize()
+
+    const { onLoop } = useRenderLoop()
+    const cameraGroup = new Group()
+    state.scene?.add(cameraGroup)
+    const easeFactor = props.ease || 2.5
+    const factor = props.factor || 2.5
+
+    const cursorX = computed(() => (x.value / width.value - 0.5) * factor)
+    const cursorY = computed(() => -(y.value / height.value - 0.5) * factor)
+
+    watchOnce(() => state.camera, () => {
+      if(state.camera){
+        cameraGroup.add(state.camera)
+      }
+    })
+
+    onLoop(({ delta }) => {
+      if (props.disabled) return
+      cameraGroup.position.x += (cursorX.value - cameraGroup.position.x) * easeFactor * delta
+      cameraGroup.position.y += (cursorY.value - cameraGroup.position.y) * easeFactor * delta
+    })
+    return () => {
+      null
+    }
+  },
+})
diff --git a/src/core/abstractions/useParallax/component.ts b/src/core/abstractions/useParallax/component.ts
deleted file mode 100644
index 5b067558..00000000
--- a/src/core/abstractions/useParallax/component.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { defineComponent, watchEffect } from 'vue'
-import { useMouseParallax } from '.'
-import { useCientos } from '../../../core/useCientos'
-
-export interface MouseParallaxProps {
-  /**
-   * Whether to disable the mouse controls.
-   * @type {boolean}
-   * @default false
-   * @memberof MouseParallaxProps
-   *
-   */
-  disabled?: boolean
-  /**
-   * The factor to multiply the mouse movement by.
-   * @type {number}
-   * @default 2.5
-   * @memberof MouseParallaxProps
-   *
-   **/
-  factor?: number
-  /**
-   * The factor to multiply the mouse movement by.
-   * @type {boolean}
-   * @default true
-   * @memberof MouseParallaxProps
-   *
-   **/
-  ease?: boolean
-}
-
-export const MouseParallax = defineComponent<MouseParallaxProps>({
-  name: 'PamCameraMouse',
-  props: ['disabled', 'factor', 'ease'] as unknown as undefined,
-  setup(props) {
-    const { state } = useCientos()
-
-    watchEffect(() => {
-      if (state?.camera) {
-        const camera = state?.camera
-
-        useMouseParallax(props.disabled as boolean, props.factor as number, props.ease as boolean, camera)
-      }
-    })
-    return () => {
-      null
-    }
-  },
-})
diff --git a/src/core/abstractions/useParallax/index.ts b/src/core/abstractions/useParallax/index.ts
deleted file mode 100644
index af8bfb17..00000000
--- a/src/core/abstractions/useParallax/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { computed } from 'vue'
-import { useLogger, useRenderLoop } from '@tresjs/core'
-import { useWindowSize, useMouse } from '@vueuse/core'
-import { Camera, Group } from 'three'
-import { useCientos } from '../../useCientos'
-
-export function useMouseParallax(disabled = false, factor = 2.5, ease = true, camera: Camera | undefined) {
-  const { x, y } = useMouse()
-  const { logWarning } = useLogger()
-  const { state } = useCientos()
-  const { width, height } = useWindowSize()
-
-  const { onLoop } = useRenderLoop()
-  const cameraGroup = new Group()
-  const easeFactor = ease ? 2.5 : 30
-
-  const cursorX = computed(() => (x.value / width.value - 0.5) * factor)
-  const cursorY = computed(() => -(y.value / height.value - 0.5) * factor)
-  if (camera && state.scene) {
-    cameraGroup.add(camera)
-    state.scene?.add(cameraGroup)
-    onLoop(({ delta }) => {
-      if (disabled) return
-      cameraGroup.position.x += (cursorX.value - cameraGroup.position.x) * easeFactor * delta
-      cameraGroup.position.y += (cursorY.value - cameraGroup.position.y) * easeFactor * delta
-    })
-  } else {
-    logWarning('Scene must contain a Camera component to use this composable')
-  }
-}