diff --git a/package.json b/package.json
index 7822a1685..b80bb6aef 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,8 @@
   },
   "pnpm": {
     "onlyBuiltDependencies": [
-      "better-sqlite3"
+      "better-sqlite3",
+      "nx"
     ],
     "overrides": {
       "ipx": "3.0.2"
diff --git a/packages/cientos/src/core/abstractions/useSurfaceSampler/component.vue b/packages/cientos/src/core/abstractions/useSurfaceSampler/component.vue
index f71892b9d..f6315656c 100644
--- a/packages/cientos/src/core/abstractions/useSurfaceSampler/component.vue
+++ b/packages/cientos/src/core/abstractions/useSurfaceSampler/component.vue
@@ -3,9 +3,9 @@ import { useTres } from '@tresjs/core'
 import { ref, watch, watchEffect } from 'vue'
 import type { InstancedMesh, Mesh } from 'three'
 import { useSurfaceSampler } from '.'
-import type { useSurfaceSamplerProps } from '.'
+import type { SurfaceSamplerOptions } from '.'
 
-const props = defineProps<useSurfaceSamplerProps>()
+const props = defineProps<SurfaceSamplerOptions>()
 
 const samplerRef = ref()
 const instancedRef = ref()
diff --git a/packages/cientos/src/core/abstractions/useSurfaceSampler/index.ts b/packages/cientos/src/core/abstractions/useSurfaceSampler/index.ts
index 92c4fca94..806fd848d 100644
--- a/packages/cientos/src/core/abstractions/useSurfaceSampler/index.ts
+++ b/packages/cientos/src/core/abstractions/useSurfaceSampler/index.ts
@@ -5,11 +5,11 @@ import {
   Vector3,
 } from 'three'
 import { MeshSurfaceSampler } from 'three-stdlib'
-import { ref } from 'vue'
+import { isReactive, reactive, ref, toRefs } from 'vue'
 import type { InstancedMesh, Mesh, Object3DEventMap } from 'three'
 import type { TresObject } from '@tresjs/core'
 
-export interface useSurfaceSamplerProps {
+export interface SurfaceSamplerOptions {
   /*
    * A function that can be .
    *
@@ -79,23 +79,19 @@ type TransformPayload = SamplePayload & {
 
 export type TransformFn = (payload: TransformPayload, i: number) => void
 
-export const useSurfaceSampler = (
-  mesh: Mesh,
-  count: number = 16,
-  instanceMesh?: InstancedMesh | null,
-  weight?: string,
-  transform?: TransformFn,
-) => {
-  const arr = new Float32Array(count * 16)
+export function useSurfaceSampler(options: SurfaceSamplerOptions) {
+  const { mesh, count, instanceMesh, weight, transform } = isReactive(options) ? toRefs(options) : toRefs(reactive(options))
+  const counter = ref(count?.value || 16)
+  const arr = new Float32Array(counter.value * 16)
   const buffer = ref(new InterleavedBuffer(arr, 16))
 
   const updateBuffer = () => {
-    if (!mesh) { return }
+    if (!mesh?.value) { return }
 
-    const sampler = new MeshSurfaceSampler(mesh)
+    const sampler = new MeshSurfaceSampler(mesh.value)
 
-    if (weight) {
-      sampler.setWeightAttribute(weight)
+    if (weight?.value) {
+      sampler.setWeightAttribute(weight.value)
     }
     sampler.build()
 
@@ -104,9 +100,9 @@ export const useSurfaceSampler = (
     const color = new Color()
     const dummy = new Object3D<Object3DEventMap>() as TresObject
 
-    mesh.updateMatrixWorld(true)
+    mesh.value.updateMatrixWorld(true)
 
-    for (let i = 0; i < count; i++) {
+    for (let i = 0; i < counter.value; i++) {
       sampler.sample(position, normal, color)
 
       if (typeof transform === 'function') {
@@ -126,13 +122,13 @@ export const useSurfaceSampler = (
       }
       dummy.updateMatrix()
 
-      if (instanceMesh) {
-        instanceMesh.setMatrixAt(i, dummy.matrix)
+      if (instanceMesh?.value) {
+        instanceMesh.value.setMatrixAt(i, dummy.matrix)
       }
       dummy.matrix.toArray(buffer.value.array, i * 16)
     }
-    if (instanceMesh) {
-      instanceMesh.instanceMatrix.needsUpdate = true
+    if (instanceMesh?.value) {
+      instanceMesh.value.instanceMatrix.needsUpdate = true
     }
 
     buffer.value.needsUpdate = true