diff --git a/package.json b/package.json
index d1369ced..cc9efd78 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^8.0.1",
-    "@tresjs/core": "4.0.0-next.1",
+    "@tresjs/core": "4.0.0-rc.1",
     "@tresjs/eslint-config": "^1.0.0",
     "@tweakpane/core": "^1.1.9",
     "@types/node": "^20.12.10",
diff --git a/playground/components.d.ts b/playground/components.d.ts
index b8e54cdd..d54b8cdb 100644
--- a/playground/components.d.ts
+++ b/playground/components.d.ts
@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     AkuAku: typeof import('./src/components/AkuAku.vue')['default']
diff --git a/playground/package.json b/playground/package.json
index a01a1e97..6d5912eb 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tresjs/core": "3.9.0",
+    "@tresjs/core": "4.0.0-rc.1",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4cdeb62b..83d2f633 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,8 +34,8 @@ importers:
         specifier: ^8.0.1
         version: 8.0.1(release-it@17.2.1)
       '@tresjs/core':
-        specifier: 4.0.0-next.1
-        version: 4.0.0-next.1(three@0.164.1)(vue@3.4.27)
+        specifier: 4.0.0-rc.1
+        version: 4.0.0-rc.1(three@0.164.1)(vue@3.4.27)
       '@tresjs/eslint-config':
         specifier: ^1.0.0
         version: 1.0.0(@vue/compiler-sfc@3.4.27)(eslint@9.2.0)(typescript@5.4.5)
@@ -137,8 +137,8 @@ importers:
   playground:
     dependencies:
       '@tresjs/core':
-        specifier: 3.9.0
-        version: 3.9.0(three@0.164.1)(vue@3.4.27)
+        specifier: 4.0.0-rc.1
+        version: 4.0.0-rc.1(three@0.164.1)(vue@3.4.27)
       vue-router:
         specifier: ^4.2.5
         version: 4.3.2(vue@3.4.27)
@@ -160,7 +160,7 @@ importers:
         version: 0.2.3(vite@5.2.11)
       vue-tsc:
         specifier: ^2.0.16
-        version: 2.0.18(typescript@5.4.5)
+        version: 2.0.19(typescript@5.4.5)
 
 packages:
 
@@ -381,11 +381,11 @@ packages:
       eslint-flat-config-utils: 0.2.4
       eslint-merge-processors: 0.1.0(eslint@9.2.0)
       eslint-plugin-antfu: 2.2.0(eslint@9.2.0)
-      eslint-plugin-command: 0.2.0(eslint@9.2.0)
+      eslint-plugin-command: 0.2.1(eslint@9.2.0)
       eslint-plugin-eslint-comments: 3.2.0(eslint@9.2.0)
       eslint-plugin-format: 0.1.1(eslint@9.2.0)
       eslint-plugin-import-x: 0.5.0(eslint@9.2.0)(typescript@5.4.5)
-      eslint-plugin-jsdoc: 48.2.4(eslint@9.2.0)
+      eslint-plugin-jsdoc: 48.2.5(eslint@9.2.0)
       eslint-plugin-jsonc: 2.15.1(eslint@9.2.0)
       eslint-plugin-markdown: 5.0.0(eslint@9.2.0)
       eslint-plugin-n: 17.7.0(eslint@9.2.0)
@@ -1704,34 +1704,19 @@ packages:
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
     dev: true
 
-  /@tresjs/core@3.9.0(three@0.164.1)(vue@3.4.27):
-    resolution: {integrity: sha512-6el70oXSduTvSA3XCI8/rQV2GzcgCLceZKA443CTU/MBPmRDULJ12q/UYl18Ij4CJ68rTqgVi0Da+WNMrs784A==}
-    peerDependencies:
-      three: '>=0.133'
-      vue: '>=3.3'
-    dependencies:
-      '@alvarosabu/utils': 3.2.0
-      '@vue/devtools-api': 6.6.1
-      '@vueuse/core': 10.9.0(vue@3.4.27)
-      three: 0.164.1
-      vue: 3.4.27(typescript@5.4.5)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-    dev: false
-
-  /@tresjs/core@4.0.0-next.1(three@0.164.1)(vue@3.4.27):
-    resolution: {integrity: sha512-JNHFE8iqKSWz7TjIafslMDFx2EGgu9pc+UlklcLcvnt0v954UvkCTDgxOBJmmwWABhWkjUPPK8ve9Ovq2Q6amg==}
+  /@tresjs/core@4.0.0-rc.1(three@0.164.1)(vue@3.4.27):
+    resolution: {integrity: sha512-XD1FXGLO2/+0okR2bUAnfiKzngFKfeSUFg98rnv4qla4F1jFKmzpJCKF2MkhpIPupaN/vx5VJ/VZhL/e03UKsQ==}
     peerDependencies:
       three: '>=0.133'
       vue: '>=3.4'
     dependencies:
       '@alvarosabu/utils': 3.2.0
+      '@vue/devtools-api': 6.6.1
       '@vueuse/core': 10.9.0(vue@3.4.27)
       three: 0.164.1
       vue: 3.4.27(typescript@5.4.5)
     transitivePeerDependencies:
       - '@vue/composition-api'
-    dev: true
 
   /@tresjs/eslint-config@1.0.0(@vue/compiler-sfc@3.4.27)(eslint@9.2.0)(typescript@5.4.5):
     resolution: {integrity: sha512-m28JMAHfJ/jSESh5o38EdPfD27HD+ptRiUSh6lgF6CY8mQ5QreFlTzUcYsaBqvoCC1PnKzUyGBBomscXj5X5cw==}
@@ -2312,7 +2297,6 @@ packages:
 
   /@vue/devtools-api@6.6.1:
     resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==}
-    dev: false
 
   /@vue/devtools-api@7.2.0(vue@3.4.27):
     resolution: {integrity: sha512-92RsjyH9WKNFO6U/dECUMakq4dm2CeqEDJYLJ8wZ81AnCifpXE7d4jPIjK34ENsPaapA6BSfIZdH/qzLOHiepA==}
@@ -2361,8 +2345,8 @@ packages:
       vue-template-compiler: 2.7.16
     dev: true
 
-  /@vue/language-core@2.0.18(typescript@5.4.5):
-    resolution: {integrity: sha512-MwKRQAReHN1z7P3/8k/ISC5MjDRjHxGyitn50jWrMmzW9FNySG/1NxMPgAHcVJ4zApJUolS9TexYzT4I6BKL5w==}
+  /@vue/language-core@2.0.19(typescript@5.4.5):
+    resolution: {integrity: sha512-A9EGOnvb51jOvnCYoRLnMP+CcoPlbZVxI9gZXE/y2GksRWM6j/PrLEIC++pnosWTN08tFpJgxhSS//E9v/Sg+Q==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -2757,8 +2741,8 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001618
-      electron-to-chromium: 1.4.769
+      caniuse-lite: 1.0.30001620
+      electron-to-chromium: 1.4.772
       node-releases: 2.0.14
       update-browserslist-db: 1.0.16(browserslist@4.23.0)
     dev: true
@@ -2842,8 +2826,8 @@ packages:
       three: 0.164.1
     dev: false
 
-  /caniuse-lite@1.0.30001618:
-    resolution: {integrity: sha512-p407+D1tIkDvsEAPS22lJxLQQaG8OTBEqo0KhzfABGk0TU4juBNDSfH0hyAp/HRyx+M8L17z/ltyhxh27FTfQg==}
+  /caniuse-lite@1.0.30001620:
+    resolution: {integrity: sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew==}
     dev: true
 
   /chalk@2.4.2:
@@ -3502,8 +3486,8 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: true
 
-  /electron-to-chromium@1.4.769:
-    resolution: {integrity: sha512-bZu7p623NEA2rHTc9K1vykl57ektSPQYFFqQir8BOYf6EKOB+yIsbFB9Kpm7Cgt6tsLr9sRkqfqSZUw7LP1XxQ==}
+  /electron-to-chromium@1.4.772:
+    resolution: {integrity: sha512-jFfEbxR/abTTJA3ci+2ok1NTuOBBtB4jH+UT6PUmRN+DY3WSD4FFRsgoVQ+QNIJ0T7wrXwzsWCI2WKC46b++2A==}
     dev: true
 
   /emoji-regex@10.3.0:
@@ -3780,11 +3764,12 @@ packages:
       eslint: 9.2.0
     dev: true
 
-  /eslint-plugin-command@0.2.0(eslint@9.2.0):
-    resolution: {integrity: sha512-SGOMTs6Pu5HQKwCF9uZ214cdVlJ99U+6GRoUS01zeLZmcQcFU4YXy2KTKqXaEsNCvaFY91OrHRZbh4/1xt9Yzw==}
+  /eslint-plugin-command@0.2.1(eslint@9.2.0):
+    resolution: {integrity: sha512-dA44MFCzjNpGlKa1xRA+qi2bTbpf5+zr2JgWUp9IFPteN+qCIS8DHu4EGmPs1680STcwQPvYBANFudpvIOeCYA==}
     peerDependencies:
       eslint: '*'
     dependencies:
+      '@es-joy/jsdoccomment': 0.43.0
       eslint: 9.2.0
     dev: true
 
@@ -3846,8 +3831,8 @@ packages:
       - typescript
     dev: true
 
-  /eslint-plugin-jsdoc@48.2.4(eslint@9.2.0):
-    resolution: {integrity: sha512-3ebvVgCJFy06gpmuS2ynz13uh9iFSzZ1C1dDkgcSAqVVg82zlORKMk2fvjq708pAO6bwfs5YLttknFEbaoDiGw==}
+  /eslint-plugin-jsdoc@48.2.5(eslint@9.2.0):
+    resolution: {integrity: sha512-ZeTfKV474W1N9niWfawpwsXGu+ZoMXu4417eBROX31d7ZuOk8zyG66SO77DpJ2+A9Wa2scw/jRqBPnnQo7VbcQ==}
     engines: {node: '>=18'}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
@@ -7717,14 +7702,14 @@ packages:
       typescript: 5.4.5
     dev: true
 
-  /vue-tsc@2.0.18(typescript@5.4.5):
-    resolution: {integrity: sha512-0SrsAJzsUrX7A6aXLsBrXrAesozAirASPnVz5VUt2+4imFNP2cEXtLQy1s8ayUHLex3zoYIoZVgZ7h7UgqaEVw==}
+  /vue-tsc@2.0.19(typescript@5.4.5):
+    resolution: {integrity: sha512-JWay5Zt2/871iodGF72cELIbcAoPyhJxq56mPPh+M2K7IwI688FMrFKc/+DvB05wDWEuCPexQJ6L10zSwzzapg==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
       '@volar/typescript': 2.2.4
-      '@vue/language-core': 2.0.18(typescript@5.4.5)
+      '@vue/language-core': 2.0.19(typescript@5.4.5)
       semver: 7.6.2
       typescript: 5.4.5
     dev: true
diff --git a/src/core/abstractions/AnimatedSprite/component.vue b/src/core/abstractions/AnimatedSprite/component.vue
index 7306d8e8..3e045ded 100644
--- a/src/core/abstractions/AnimatedSprite/component.vue
+++ b/src/core/abstractions/AnimatedSprite/component.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onUnmounted, ref, shallowRef, watch } from 'vue'
 import type { TresVector2 } from '@tresjs/core'
-import { normalizeVectorFlexibleParam, useRenderLoop } from '@tresjs/core'
+import { normalizeVectorFlexibleParam, useLoop } from '@tresjs/core'
 import type { Intersection } from 'three'
 import { DoubleSide } from 'three'
 import type { Atlasish } from './Atlas'
@@ -99,7 +99,7 @@ let frameHeldOnLoopEnd = false
 let dirtyFlag = true
 const TEXTURE_PX_TO_WORLD_UNITS = 0.01
 
-useRenderLoop().onLoop(({ delta }) => {
+useLoop().onBeforeRender(({ delta }) => {
   if (!props.paused && !frameHeldOnLoopEnd) {
     cooldown -= delta * props.fps
   }
diff --git a/src/core/abstractions/Levioso.vue b/src/core/abstractions/Levioso.vue
index 06d2b83e..a1d3f9e1 100644
--- a/src/core/abstractions/Levioso.vue
+++ b/src/core/abstractions/Levioso.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRenderLoop } from '@tresjs/core'
+import { useLoop } from '@tresjs/core'
 import { MathUtils } from 'three'
 import { shallowRef } from 'vue'
 
@@ -31,10 +31,10 @@ defineExpose({
   const AMPLITUDE_ROTATION_Z = 1 / 20
   const START_OFFSET = Math.random() * 10000
 
-  const { onLoop } = useRenderLoop()
+  const { onBeforeRender } = useLoop()
   let elapsed = START_OFFSET
 
-  onLoop(({ delta }) => {
+  onBeforeRender(({ delta }) => {
     if (!groupRef.value) { return }
 
     elapsed += delta * props.speed
diff --git a/src/core/abstractions/MouseParallax.vue b/src/core/abstractions/MouseParallax.vue
index e4327d52..953b0e1c 100644
--- a/src/core/abstractions/MouseParallax.vue
+++ b/src/core/abstractions/MouseParallax.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, toRefs, watch } from 'vue'
 import type { Group } from 'three'
-import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { useLoop, useTresContext } from '@tresjs/core'
 import { useElementSize, useMouse, useWindowSize } from '@vueuse/core'
 import type { UseMouseOptions } from '@vueuse/core'
 
@@ -68,9 +68,9 @@ const cameraGroupRef = ref<Group>()
 const cursorX = computed(() => (x.value / width.value - 0.5) * factor.value)
 const cursorY = computed(() => -(y.value / height.value - 0.5) * factor.value)
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(({ delta }) => {
+onBeforeRender(({ delta }) => {
   if (
     disabled.value
     || !cameraGroupRef.value
diff --git a/src/core/abstractions/useAnimations.ts b/src/core/abstractions/useAnimations.ts
index 60ebb4eb..3f3d5bdb 100644
--- a/src/core/abstractions/useAnimations.ts
+++ b/src/core/abstractions/useAnimations.ts
@@ -1,6 +1,6 @@
 import type { AnimationAction, AnimationClip, Object3D, Scene } from 'three'
 import { AnimationMixer } from 'three'
-import { useRenderLoop } from '@tresjs/core'
+import { useLoop } from '@tresjs/core'
 import type { Ref } from 'vue'
 import { ref, shallowReactive } from 'vue'
 
@@ -28,9 +28,9 @@ export function useAnimations<T extends AnimationClip>(
     actions[animation.name] = action
   })
 
-  const { onLoop } = useRenderLoop()
+  const { onBeforeRender } = useLoop()
 
-  onLoop(({ delta }) => {
+  onBeforeRender(({ delta }) => {
     mixer.update(delta)
   })
 
diff --git a/src/core/controls/CameraControls.vue b/src/core/controls/CameraControls.vue
index c85045aa..2b422bfe 100644
--- a/src/core/controls/CameraControls.vue
+++ b/src/core/controls/CameraControls.vue
@@ -19,7 +19,7 @@ import {
   Vector3,
   Vector4,
 } from 'three'
-import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { useLoop, useTresContext } from '@tresjs/core'
 import { useEventListener } from '@vueuse/core'
 import { isOrthographicCamera, isPerspectiveCamera } from '../../utils/types'
 
@@ -416,9 +416,9 @@ function addEventListeners() {
   useEventListener(controlsRef.value as any, 'controlstart', () => emit('start', controlsRef.value))
 }
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(({ delta }) => {
+onBeforeRender(({ delta }) => {
   if (controlsRef.value?.enabled) { controlsRef.value?.update(delta) }
 })
 
diff --git a/src/core/controls/KeyboardControls.vue b/src/core/controls/KeyboardControls.vue
index 979d36e4..5aff7a72 100644
--- a/src/core/controls/KeyboardControls.vue
+++ b/src/core/controls/KeyboardControls.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, toRefs, watchEffect } from 'vue'
-import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { useLoop, useTresContext } from '@tresjs/core'
 import { useMagicKeys } from '@vueuse/core'
 import { PointerLockControls as PointerLockControlsType } from 'three-stdlib'
 import { Quaternion, Vector3 } from 'three'
@@ -100,9 +100,9 @@ const moveForward = (delta: number, movementSpeed: number) => {
   if (sidewardMove.value || forwardMove.value) { emit('change', controls.value) }
 }
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(({ delta }) => {
+onBeforeRender(({ delta }) => {
   if (controls.value instanceof PointerLockControlsType && controls.value?.isLocked) {
     moveForward(delta, forwardMove.value)
     controls.value.moveRight(sidewardMove.value)
diff --git a/src/core/controls/OrbitControls.vue b/src/core/controls/OrbitControls.vue
index 2f51f1aa..ed273ac1 100644
--- a/src/core/controls/OrbitControls.vue
+++ b/src/core/controls/OrbitControls.vue
@@ -4,7 +4,7 @@ import { TOUCH } from 'three'
 import { OrbitControls } from 'three-stdlib'
 import { onUnmounted, ref, toRefs, watch } from 'vue'
 import type { TresVector3 } from '@tresjs/core'
-import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { useLoop, useTresContext } from '@tresjs/core'
 import { useEventListener } from '@vueuse/core'
 
 export interface OrbitControlsProps {
@@ -302,9 +302,9 @@ function addEventListeners() {
   useEventListener(controlsRef.value as any, 'end', () => emit('end', controlsRef.value))
 }
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(() => {
+onBeforeRender(() => {
   if (controlsRef.value && (enableDamping.value || autoRotate.value)) {
     controlsRef.value.update()
   }
diff --git a/src/core/controls/ScrollControls.vue b/src/core/controls/ScrollControls.vue
index 431ea900..2c69d4d8 100644
--- a/src/core/controls/ScrollControls.vue
+++ b/src/core/controls/ScrollControls.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, shallowRef, watch } from 'vue'
-import { useLogger, useRenderLoop, useTresContext } from '@tresjs/core'
+import { useLogger, useLoop, useTresContext } from '@tresjs/core'
 import { useScroll, useWindowScroll, useWindowSize } from '@vueuse/core'
 
 export interface ScrollControlsProps {
@@ -184,9 +184,9 @@ watch(
   },
 )
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(() => {
+onBeforeRender(() => {
   if (camera.value?.position) {
     const delta
       = (progress.value * props.distance - camera.value.position[direction] + initCameraPos) * props.smoothScroll
diff --git a/src/core/materials/holographicMaterial/index.vue b/src/core/materials/holographicMaterial/index.vue
index 8967974b..b7779bbb 100644
--- a/src/core/materials/holographicMaterial/index.vue
+++ b/src/core/materials/holographicMaterial/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
-import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { useLoop, useTresContext } from '@tresjs/core'
 import type { TresColor } from '@tresjs/core'
 import { FrontSide } from 'three'
 import type { Side } from 'three'
@@ -44,9 +44,9 @@ extend({ HolographicMaterial })
 
 defineExpose({ root: MeshHolographicMaterialClass, constructor: HolographicMaterial })
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(() => {
+onBeforeRender(() => {
   MeshHolographicMaterialClass.value?.update()
 })
 </script>
diff --git a/src/core/materials/meshWobbleMaterial/index.vue b/src/core/materials/meshWobbleMaterial/index.vue
index b3ee8edb..cb4c6cb9 100644
--- a/src/core/materials/meshWobbleMaterial/index.vue
+++ b/src/core/materials/meshWobbleMaterial/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
-import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { useLoop, useTresContext } from '@tresjs/core'
 
 import { WobbleMaterialImpl as MeshWobbleMaterial } from './material'
 
@@ -20,9 +20,9 @@ const materialRef = shallowRef()
 const { extend } = useTresContext()
 extend({ MeshWobbleMaterial })
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(({ elapsed }) => {
+onBeforeRender(({ elapsed }) => {
   if (materialRef.value) {
     materialRef.value.time = elapsed * props?.speed
   }
diff --git a/src/core/misc/html/HTML.vue b/src/core/misc/html/HTML.vue
index 1bf788c2..9559379c 100644
--- a/src/core/misc/html/HTML.vue
+++ b/src/core/misc/html/HTML.vue
@@ -12,7 +12,7 @@ import {
   Vector3,
 } from 'three'
 import type { TresCamera, TresObject3D } from '@tresjs/core'
-import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { useLoop, useTresContext } from '@tresjs/core'
 
 import type { Mutable } from '@vueuse/core'
 import vertexShader from './shaders/vertex.glsl'
@@ -224,9 +224,9 @@ watchEffect(() => {
 
 const visible = ref(true)
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(() => {
+onBeforeRender(() => {
   if (groupRef.value && camera.value && renderer.value) {
     camera.value?.updateMatrixWorld()
     groupRef.value.updateWorldMatrix(true, false)
diff --git a/src/core/staging/ContactShadows.vue b/src/core/staging/ContactShadows.vue
index 651b7228..7b4495e1 100644
--- a/src/core/staging/ContactShadows.vue
+++ b/src/core/staging/ContactShadows.vue
@@ -6,7 +6,7 @@
 // https://github.com/pmndrs/drei/blob/master/src/core/ContactShadows.tsx#L113
 
 import type { TresColor } from '@tresjs/core'
-import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { useLoop, useTresContext } from '@tresjs/core'
 import type {
   ColorRepresentation,
   Material,
@@ -154,7 +154,7 @@ const props = withDefaults(defineProps<ContactShadowsProps>(), {
 const groupRef = shallowRef()
 const shadowCamera = shallowRef<OrthographicCamera>()
 
-defineExpose(groupRef)
+defineExpose({ instance: groupRef })
 
 let renderTarget: WebGLRenderTarget, renderTargetBlur: WebGLRenderTarget
 let planeGeometry: PlaneGeometry, blurPlane: Mesh
@@ -247,13 +247,13 @@ function blurShadows(blur: number) {
   blurPlane.visible = false
 }
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
 let count = 0
 let initialBackground: Color | Texture | null
 let initialOverrideMaterial: Material | null
 
-onLoop(() => {
+onBeforeRender(() => {
   if (!shadowCamera.value || scene.value === undefined || renderer.value === undefined) { return }
 
   if (props.frames === Number.POSITIVE_INFINITY || count < props.frames) {
diff --git a/src/core/staging/Ocean.vue b/src/core/staging/Ocean.vue
index 36874805..1de2c87b 100644
--- a/src/core/staging/Ocean.vue
+++ b/src/core/staging/Ocean.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { nextTick, onMounted, shallowRef, toRefs } from 'vue'
-import { useRenderLoop, useTexture, useTresContext } from '@tresjs/core'
+import { useLoop, useTexture, useTresContext } from '@tresjs/core'
 import type { TresColor, TresVector3 } from '@tresjs/core'
 import { Water } from 'three/addons/objects/Water.js'
 import { FrontSide, RepeatWrapping, Vector3 } from 'three'
@@ -151,9 +151,9 @@ const { normalMap } = (await useTexture({ normalMap: waterNormals.value })) as {
 
 normalMap.wrapS = normalMap.wrapT = RepeatWrapping
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(({ delta }) => {
+onBeforeRender(({ delta }) => {
   waterRef.value.material.uniforms.time.value += delta
 })
 </script>
diff --git a/src/core/staging/Precipitation.vue b/src/core/staging/Precipitation.vue
index 1ee83290..7886a6d5 100644
--- a/src/core/staging/Precipitation.vue
+++ b/src/core/staging/Precipitation.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { shallowRef, toRefs, watchEffect } from 'vue'
 import type { TresColor } from '@tresjs/core'
-import { useRenderLoop } from '@tresjs/core'
+import { useLoop } from '@tresjs/core'
 
 export interface PrecipitationProps {
   /**
@@ -171,9 +171,9 @@ watchEffect(() => {
   setPosition()
 })
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(() => {
+onBeforeRender(() => {
   if (geometryRef.value?.attributes.position.array && geometryRef.value?.attributes.position.count) {
     const positionArray = geometryRef.value.attributes.position.array
     for (let i = 0; i < geometryRef.value.attributes.position.count; i++) {
diff --git a/src/core/staging/Smoke.vue b/src/core/staging/Smoke.vue
index 2a06b0c8..7e6acdd2 100644
--- a/src/core/staging/Smoke.vue
+++ b/src/core/staging/Smoke.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, shallowRef, toRefs } from 'vue'
 import type { TresColor } from '@tresjs/core'
-import { useRenderLoop, useTexture, useTresContext } from '@tresjs/core'
+import { useLoop, useTexture, useTresContext } from '@tresjs/core'
 import type { Object3D, Texture } from 'three'
 
 export interface SmokeProps {
@@ -106,9 +106,9 @@ const { map } = (await useTexture({ map: texture.value })) as { map: Texture }
 const { renderer, camera } = useTresContext()
 const colorSpace = computed(() => renderer.value?.outputColorSpace)
 
-const { onLoop } = useRenderLoop()
+const { onBeforeRender } = useLoop()
 
-onLoop(() => {
+onBeforeRender(() => {
   if (smokeRef.value && camera.value && groupRef.value) {
     groupRef.value?.children.forEach((child: Object3D, index: number) => {
       child.rotation.z += smoke[index].rotation
diff --git a/src/core/staging/Sparkles/component.vue b/src/core/staging/Sparkles/component.vue
index e87bd055..dabff986 100644
--- a/src/core/staging/Sparkles/component.vue
+++ b/src/core/staging/Sparkles/component.vue
@@ -12,7 +12,7 @@ import {
   Vector3,
 } from 'three'
 import type { TresColor } from '@tresjs/core'
-import { useRenderLoop, useTexture, useTresContext } from '@tresjs/core'
+import { useLoop, useTexture, useTresContext } from '@tresjs/core'
 import type { Ref } from 'vue'
 import { onMounted, onUnmounted, shallowRef, toRefs, watch } from 'vue'
 import type { VectorFlexibleParams } from '@tresjs/core/dist/utils/normalize'
@@ -356,7 +356,7 @@ watch(refs.map, () => {
 
 const rotation = new Quaternion()
 const normal = new Vector3()
-useRenderLoop().onLoop(({ elapsed }) => {
+useLoop().onBeforeRender(({ elapsed }) => {
   sparkles.getWorldQuaternion(rotation)
   normal.copy(props.directionalLight ? props.directionalLight.position : Object3D.DEFAULT_UP).normalize()
   normal.applyQuaternion(rotation.invert())