diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 49afa85a..bd03f28e 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -145,7 +145,7 @@ export default defineConfig({
           { text: 'Sky', link: '/guide/staging/sky' },
           { text: 'Stars', link: '/guide/staging/stars' },
           { text: 'Smoke', link: '/guide/staging/smoke' },
-          { text: 'Contact Shadows', link: '/guide/staging/contact-shadows' },
+          { text: 'ContactShadows', link: '/guide/staging/contact-shadows' },
           { text: 'Precipitation', link: '/guide/staging/precipitation' },
           { text: 'Sparkles', link: '/guide/staging/sparkles' },
           { text: 'Ocean', link: '/guide/staging/ocean' },
diff --git a/docs/.vitepress/theme/components/ContactShadowDemo.vue b/docs/.vitepress/theme/components/ContactShadowDemo.vue
deleted file mode 100644
index 94812173..00000000
--- a/docs/.vitepress/theme/components/ContactShadowDemo.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { Box, ContactShadows, Icosahedron, OrbitControls, Plane } from '@tresjs/cientos'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-import { reactive, shallowRef } from 'vue'
-
-const gl = {
-  clearColor: '#fff',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-}
-
-const state = reactive({
-  blur: 3.5,
-  opacity: 1,
-  resolution: 512,
-  color: '#0000ff',
-  helper: true,
-})
-
-const boxRef = shallowRef()
-const icoRef = shallowRef()
-
-const { onLoop } = useRenderLoop()
-
-onLoop(() => {
-  if (boxRef.value) {
-    boxRef.value.instance.rotation.y += 0.02
-    boxRef.value.instance.rotation.x += 0.01
-  }
-  if (icoRef.value) {
-    icoRef.value.instance.rotation.y += 0.02
-    icoRef.value.instance.rotation.x += 0.01
-  }
-})
-</script>
-
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[5, 5, 5]" />
-    <OrbitControls />
-
-    <Box
-      ref="boxRef"
-      :args="[0.4, 0.4, 0.4]"
-      :position="[0, 1, 0]"
-    >
-      <TresMeshNormalMaterial />
-    </Box>
-    <Icosahedron
-      ref="icoRef"
-      :args="[0.3]"
-      :position="[1, 1, 1]"
-    >
-      <TresMeshNormalMaterial />
-    </Icosahedron>
-    <ContactShadows
-      :blur="state.blur"
-      :resolution="state.resolution"
-      :opacity="state.opacity"
-      :color="state.color"
-      :helper="state.helper"
-    />
-    <Plane
-      :args="[10, 10, 10]"
-      :position="[0, -0.02, 0]"
-    >
-      <TresMeshBasicMaterial color="#ffffff" />
-    </Plane>
-    <TresAmbientLight :intensity="1" />
-  </TresCanvas>
-</template>
diff --git a/docs/.vitepress/theme/components/ContactShadowsDemo.vue b/docs/.vitepress/theme/components/ContactShadowsDemo.vue
new file mode 100644
index 00000000..840f6655
--- /dev/null
+++ b/docs/.vitepress/theme/components/ContactShadowsDemo.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { ContactShadows, Levioso, TorusKnot } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas clear-color="white">
+    <Levioso :speed="2" :range="[0, 0.7]" :rotation-factor="9">
+      <TorusKnot :scale="0.45">
+        <TresMeshNormalMaterial />
+      </TorusKnot>
+    </Levioso>
+    <ContactShadows :position-y="-1" color="#335" :scale="20" />
+  </TresCanvas>
+</template>
diff --git a/docs/component-list/components.ts b/docs/component-list/components.ts
index b989fd42..ebc3cc8b 100644
--- a/docs/component-list/components.ts
+++ b/docs/component-list/components.ts
@@ -93,7 +93,7 @@ export default [
       { text: 'Sky', link: '/guide/staging/sky' },
       { text: 'Stars', link: '/guide/staging/stars' },
       { text: 'Smoke', link: '/guide/staging/smoke' },
-      { text: 'Contact Shadows', link: '/guide/staging/contact-shadows' },
+      { text: 'ContactShadows', link: '/guide/staging/contact-shadows' },
       { text: 'Precipitation', link: '/guide/staging/precipitation' },
       { text: 'Sparkles', link: '/guide/staging/sparkles' },
       { text: 'Ocean', link: '/guide/staging/ocean' },
diff --git a/docs/guide/staging/contact-shadows.md b/docs/guide/staging/contact-shadows.md
index 97ccdb35..d6b7e506 100644
--- a/docs/guide/staging/contact-shadows.md
+++ b/docs/guide/staging/contact-shadows.md
@@ -1,45 +1,28 @@
-# Contact Shadows
+# ContactShadows
 
 <DocsDemo>
-  <ContactShadowDemo />
+  <ContactShadowsDemo />
 </DocsDemo>
 
-A contact shadow implementation is a technique used in 3D graphics to create shadows that appear where objects meet or "contact" each other. This is different from traditional shadowing techniques, which often only create shadows based on the position of a light source relative to an object.
-
-This component is used to create and manage contact shadows in a 3D scene. It is based on the original code by [@mrdoob](https://twitter.com/mrdoob) and the implementation in [pmndrs drei](https://github.com/pmndrs/drei/blob/master/src/core/ContactShadows.tsx#L113) but adapted for Vue Composition API.
+`<ContactShadows />` is a "fake", non-lighting-based shadow component. It displays shadows on a single plane. The component is based on the [THREE.js contact shadows example](https://threejs.org/examples/webgl_shadow_contact.html) by [@mrdoob](https://twitter.com/mrdoob).
 
 ## Usage
 
-```vue{11}
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-    <OrbitControls />
-    <Box ref="boxRef" :args="[0.4, 0.4, 0.4]" :position="[0, 1, 0]">
-      <TresMeshNormalMaterial />
-    </Box>
-    <Icosahedron ref="icoRef" :args="[0.3]" :position="[1, 1, 1]">
-      <TresMeshNormalMaterial />
-    </Icosahedron>
-    <ContactShadows :blur="0.5" :resolution="512" :opacity="0.2" />
-    <Plane :args="[10, 10, 10]" :position="[0, -0.02, 0]">
-      <TresMeshBasicMaterial :color="'#ffffff'" />
-    </Plane>
-    <TresAmbientLight :intensity="1" />
-  </TresCanvas>
-</template>
-```
+<<< @/.vitepress/theme/components/ContactShadowsDemo.vue
+
+## Props
 
-| Prop         | Description                                                                    | Default   |
-| ------------ | ------------------------------------------------------------------------------ | --------- |
-| `opacity`    | The opacity of the shadows.                                                    | 1         |
-| `width`      | The width of the shadows.                                                      | 1         |
-| `height`     | The height of the shadows.                                                     | 1         |
-| `blur`       | The blur of the shadows.                                                       | 1         |
-| `far`        | How far the OrthographicCamera should be to capture the shadows.               | 10        |
-| `smooth`     | Whether the shadows should be smooth or not.                                   | true      |
-| `resolution` | The resolution of the shadows.                                                 | 512       |
-| `frames`     | The number of frames to render the shadows.                                    | Infinity  |
-| `scale`      | The scale of the shadows. Can be a number or an array of two numbers `[x, y]`. | 10        |
-| `color`      | The color of the shadows.                                                      | '#000000' |
-| `depthWrite` | Whether the shadows should write to the depth buffer or not.                   | false     |
+| Prop         | Description                                                                    | Default     |
+| ------------ | ------------------------------------------------------------------------------ | ----------- |
+| `opacity`    | The opacity of the shadows.                                                    | `1`         |
+| `blur`       | The blur of the shadows.                                                       | `1`         |
+| `color`      | The color of the shadows.                                                      | `'#000000'` |
+| `tint`       | If provided, the color of the "core" of the shadows. "Added" to `color`.       | `undefined` |
+| `scale`      | The scale of the shadows/shadow plane. Can be a number or an array of two numbers `[x, y]`. | 10        |
+| `width`      | The width of the shadow plane.                                                 | `1`         |
+| `height`     | The height of the shadow plane.                                                | `1`         |
+| `far`        | The distance of the orthographic shadow camera extends above the shadow plane. | `10`        |
+| `smooth`     | Whether the shadows should be smoothed to reduce artifacts.                    | `true`      |
+| `resolution` | The resolution of the shadow textures.                                         | `512`       |
+| `frames`     | For performance, optionally stop updating shadows after `frames` frames.       | `Math.POSITIVE_INFINITY`  |
+| `depthWrite` | Whether the shadows should write to the depth buffer or not.                   | `false`     |
diff --git a/package.json b/package.json
index 7c33243a..cff8f689 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
     "prepare": "node .husky/install.mjs"
   },
   "peerDependencies": {
-    "@tresjs/core": ">=3.2",
+    "@tresjs/core": ">=4.2.1",
     "three": ">=0.133",
     "vue": ">=3.3"
   },
diff --git a/playground/src/pages/staging/ContactShadowsDemo.vue b/playground/src/pages/staging/ContactShadowsDemo.vue
index d8278770..f55c9466 100644
--- a/playground/src/pages/staging/ContactShadowsDemo.vue
+++ b/playground/src/pages/staging/ContactShadowsDemo.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { Box, ContactShadows, Icosahedron, OrbitControls, Plane } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { Box, ContactShadows, Icosahedron, OrbitControls, TorusKnot } from '@tresjs/cientos'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { reactive, shallowRef } from 'vue'
 import { TresLeches, useControls } from '@tresjs/leches'
 import '@tresjs/leches/styles'
 
 const gl = {
-  clearColor: '#fff',
+  clearColor: '#CCC',
   shadows: true,
   alpha: false,
   shadowMapType: BasicShadowMap,
@@ -16,20 +16,59 @@ const gl = {
 }
 
 const state = reactive({
-  blur: 3.5,
+  width: 1,
+  height: 1,
   opacity: 1,
+  blur: 3.5,
+  near: 0,
+  far: 10,
+  smooth: true,
   resolution: 512,
+  scale: 1,
+  tint: '#000000',
   color: '#0000ff',
-  helper: true,
+  depthWrite: false,
+  rotationX: 0,
 })
 
-const { blur, opacity, resolution, color, helper } = useControls({
+const { width, height, blur, far, smooth, opacity, resolution, scale, tint, color, depthWrite, rotationX } = useControls({
+  width: {
+    value: state.width,
+    step: 0.1,
+    min: 0.1,
+    max: 10,
+  },
+  height: {
+    value: state.height,
+    step: 0.1,
+    min: 0.1,
+    max: 10,
+  },
+  near: {
+    value: state.near,
+    step: 0.1,
+    min: 0,
+    max: 30,
+  },
+  far: {
+    value: state.far,
+    step: 0.1,
+    min: 0,
+    max: 30,
+  },
+  scale: {
+    value: state.scale,
+    step: 0.1,
+    min: 0.1,
+    max: 30,
+  },
   blur: {
     value: state.blur,
     step: 0.1,
     min: 0,
     max: 10,
   },
+  smooth: state.smooth,
   opacity: {
     value: state.opacity,
     step: 0.1,
@@ -42,71 +81,112 @@ const { blur, opacity, resolution, color, helper } = useControls({
     min: 0,
     max: 1024,
   },
+  tint: {
+    type: 'color',
+    value: state.tint,
+  },
   color: {
     type: 'color',
     value: state.color,
   },
-  helper: state.helper,
+  depthWrite: state.depthWrite,
+  rotationX: {
+    value: state.rotationX,
+    step: 0.1,
+    max: 9,
+  },
 })
 
-watch([blur.value, opacity.value, resolution.value, color.value, helper.value], () => {
+watch(() => [
+  width.value.value,
+  height.value.value,
+  blur.value.value,
+  far.value.value,
+  smooth.value.value,
+  opacity.value.value,
+  resolution.value.value,
+  scale.value.value,
+  color.value.value,
+  tint.value.value,
+  depthWrite.value.value,
+  rotationX.value.value,
+], () => {
+  state.width = width.value.value
+  state.height = height.value.value
   state.blur = blur.value.value
+  state.far = far.value.value
+  state.smooth = smooth.value.value
   state.opacity = opacity.value.value
   state.resolution = resolution.value.value
+  state.tint = tint.value.value
   state.color = color.value.value
-  state.helper = helper.value.value
+  state.scale = scale.value.value
+  state.depthWrite = depthWrite.value.value
+  state.rotationX = rotationX.value.value
 })
 
-const boxRef = shallowRef()
-const icoRef = shallowRef()
+const boxRef = shallowRef({ instance: { rotation: { x: 0, y: 0, z: 0 } } })
+const icoRef = shallowRef({ instance: { rotation: { x: 0, y: 0, z: 0 } } })
+const torusRef = shallowRef({ instance: { rotation: { x: 0, y: 0, z: 0 } } })
 
-const { onLoop } = useRenderLoop()
+const intervalId = setInterval(() => {
+  boxRef.value.instance.rotation.x += 0.01
+  boxRef.value.instance.rotation.z += 0.01
+  icoRef.value.instance.rotation.x += 0.01
+  icoRef.value.instance.rotation.z += 0.01
+  torusRef.value.instance.rotation.x += 0.01
+  torusRef.value.instance.rotation.z += 0.01
+}, 20)
 
-onLoop(() => {
-  if (boxRef.value) {
-    boxRef.value.instance.rotation.y += 0.02
-    boxRef.value.instance.rotation.x += 0.01
-  }
-  if (icoRef.value) {
-    icoRef.value.instance.rotation.y += 0.02
-    icoRef.value.instance.rotation.x += 0.01
-  }
-})
+onUnmounted(() => clearInterval(intervalId))
 </script>
 
 <template>
   <TresLeches />
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[5, 5, 5]" />
+    <TresPerspectiveCamera :args="[50]" :position="[0.5, 1, 2]" />
 
     <OrbitControls />
     <Box
       ref="boxRef"
       :args="[0.4, 0.4, 0.4]"
-      :position="[0, 1, 0]"
+      :position="[
+        Math.cos((0 / 3) * 2 * Math.PI) * 0.5,
+        0.5,
+        Math.sin((0 / 3) * 2 * Math.PI) * 0.5,
+      ]"
     >
       <TresMeshNormalMaterial />
     </Box>
     <Icosahedron
       ref="icoRef"
       :args="[0.3]"
-      :position="[1, 1, 1]"
+      :position="[
+        Math.cos((1 / 3) * 2 * Math.PI) * 0.5,
+        0.5,
+        Math.sin((1 / 3) * 2 * Math.PI) * 0.5,
+      ]"
     >
       <TresMeshNormalMaterial />
     </Icosahedron>
-    <ContactShadows
-      :blur="state.blur"
-      :resolution="state.resolution"
-      :opacity="state.opacity"
-      :color="state.color"
-      :helper="state.helper"
-    />
-    <Plane
-      :args="[10, 10, 10]"
-      :position="[0, -0.02, 0]"
+
+    <TorusKnot
+      ref="torusRef"
+      :args="[0.4, 0.05, 256, 24, 1, 3]"
+      :position="[
+        Math.cos((2 / 3) * 2 * Math.PI) * 0.5,
+        0.5,
+        Math.sin((2 / 3) * 2 * Math.PI) * 0.5,
+      ]"
     >
-      <TresMeshBasicMaterial color="#ffffff" />
-    </Plane>
-    <TresAmbientLight :intensity="1" />
+      <TresMeshNormalMaterial />
+    </TorusKnot>
+    <TresGroup :rotation-x="rotationX.value">
+      <ContactShadows v-bind="state" :position-y="0.0001" />
+      <TresMesh :rotation-x="-Math.PI / 2" :scale="10">
+        <TresPlaneGeometry />
+        <TresMeshBasicMaterial color="gray" />
+      </TresMesh>
+    </TresGroup>
   </TresCanvas>
 </template>
diff --git a/src/core/staging/ContactShadows.vue b/src/core/staging/ContactShadows.vue
index 7b4495e1..6dc71ea4 100644
--- a/src/core/staging/ContactShadows.vue
+++ b/src/core/staging/ContactShadows.vue
@@ -1,32 +1,33 @@
 <script setup lang="ts">
-// The author of the original code is @mrdoob https://twitter.com/mrdoob
+// NOTE: The author of the original code is @mrdoob https://twitter.com/mrdoob
 // https://threejs.org/examples/?q=con#webgl_shadow_contact
 
-// As well, basically the same implementation as in pmndrs drei but with Vue Composition API
-// https://github.com/pmndrs/drei/blob/master/src/core/ContactShadows.tsx#L113
+// NOTE: Shader inspiration taken from R3F/Drei:
+// https://github.com/pmndrs/drei/blob/b50a2d4b1a1278ae36058b9b53b85a00ef195762/src/core/ContactShadows.tsx#L10
 
 import type { TresColor } from '@tresjs/core'
-import { useLoop, useTresContext } from '@tresjs/core'
+import { useLoop } from '@tresjs/core'
 import type {
   ColorRepresentation,
-  Material,
-  Texture,
+  Scene,
+  WebGLRenderer,
 } from 'three'
 import {
   Color,
+  Group,
   Mesh,
+  MeshBasicMaterial,
   MeshDepthMaterial,
   OrthographicCamera,
   PlaneGeometry,
   ShaderMaterial,
   WebGLRenderTarget,
 } from 'three'
-import { computed, shallowRef, watchEffect } from 'vue'
 import { HorizontalBlurShader, VerticalBlurShader } from 'three-stdlib'
+import { onUnmounted, watch } from 'vue'
 
 export interface ContactShadowsProps {
   /**
-   *
    * The opacity of the shadows.
    *
    * @default 1
@@ -36,32 +37,54 @@ export interface ContactShadowsProps {
    */
   opacity?: number
   /**
-   * The width of the shadows.
+   * The blur of the shadows.
    *
    * @default 1
    * @type {number}
    * @memberof ContactShadowsProps
    *
    */
-  width?: number
+  blur?: number
   /**
-   * The height of the shadows.
+   * The color of the shadows.
+   *
+   * @default '#000000'
+   * @type {TresColor}
+   * @memberof ContactShadowsProps
+   *
+   */
+  color?: TresColor
+  /**
+   * The tint at the "core" of the shadows.
+   *
+   * @default undefined
+   * @type {TresColor}
+   * @memberof ContactShadowsProps
+   *
+   */
+  tint?: TresColor
+  /**
+   * The scale of the shadows.
+   */
+  scale?: number | [x: number, y: number]
+  /**
+   * The width of the shadow plane.
    *
    * @default 1
    * @type {number}
    * @memberof ContactShadowsProps
    *
    */
-  height?: number
+  width?: number
   /**
-   * The blur of the shadows.
+   * The height of the shadow plane.
    *
    * @default 1
    * @type {number}
    * @memberof ContactShadowsProps
    *
    */
-  blur?: number
+  height?: number
   /**
    * How far the OrthographicCamera should be to capture the shadows.
    *
@@ -98,24 +121,6 @@ export interface ContactShadowsProps {
    *
    */
   frames?: number
-  /**
-   * The scale of the shadows.
-   *
-   * @default 10
-   * @type {(number | [x: number, y: number])}
-   * @memberof ContactShadowsProps
-   *
-   */
-  scale?: number | [x: number, y: number]
-  /**
-   * The color of the shadows.
-   *
-   * @default '#000000'
-   * @type {TresColor}
-   * @memberof ContactShadowsProps
-   *
-   */
-  color?: TresColor
   /**
    * Whether the shadows should write to the depth buffer or not.
    *
@@ -126,195 +131,234 @@ export interface ContactShadowsProps {
    */
   depthWrite?: boolean
   /**
-   * Whether the OrthographicCamera helper should be visible or not.
+   * Whether the shadows should write to the depth buffer or not.
    *
    * @default false
    * @type {boolean}
    * @memberof ContactShadowsProps
    *
    */
-  helper?: boolean
 }
 
 const props = withDefaults(defineProps<ContactShadowsProps>(), {
-  scale: 10,
-  frames: Number.POSITIVE_INFINITY,
   opacity: 1,
+  blur: 1,
+  color: '#000000',
+  tint: undefined,
+  scale: 10,
   width: 1,
   height: 1,
-  blur: 1,
   far: 10,
-  resolution: 512,
   smooth: true,
-  color: '#000000',
+  resolution: 512,
+  frames: Number.POSITIVE_INFINITY,
   depthWrite: false,
-  helper: false,
-})
-
-const groupRef = shallowRef()
-const shadowCamera = shallowRef<OrthographicCamera>()
-
-defineExpose({ instance: groupRef })
-
-let renderTarget: WebGLRenderTarget, renderTargetBlur: WebGLRenderTarget
-let planeGeometry: PlaneGeometry, blurPlane: Mesh
-let depthMaterial: MeshDepthMaterial
-
-const { renderer, scene } = useTresContext()
-
-const cameraW = computed(() => props.width * (Array.isArray(props.scale) ? props.scale[0] : props.scale || 1))
-const cameraH = computed(() => props.height * (Array.isArray(props.scale) ? props.scale[1] : props.scale || 1))
-
-watchEffect(() => {
-  // the render target that will show the shadows in the plane texture and
-  // the target that we will use to blur the first render target
-  if (renderTarget) { renderTarget.dispose() }
-  if (renderTargetBlur) { renderTargetBlur.dispose() }
-  if (planeGeometry) { planeGeometry.dispose() }
-  if (blurPlane) { blurPlane.geometry.dispose() }
-  renderTarget = new WebGLRenderTarget(props.resolution, props.resolution)
-  renderTargetBlur = new WebGLRenderTarget(props.resolution, props.resolution)
-  renderTargetBlur.texture.generateMipmaps = renderTarget.texture.generateMipmaps = false
-
-  shadowCamera.value = new OrthographicCamera(
-    -cameraW.value / 2,
-    cameraW.value / 2,
-    cameraH.value / 2,
-    -cameraH.value / 2,
-    0,
-    props.far,
-  )
-
-  planeGeometry = new PlaneGeometry(cameraW.value, cameraH.value).rotateX(Math.PI / 2)
-  blurPlane = new Mesh(planeGeometry)
-  blurPlane.visible = false
-})
-
-watchEffect(() => {
-  if (props.color) {
-    if (depthMaterial) { depthMaterial.dispose() }
-    depthMaterial = new MeshDepthMaterial()
-    depthMaterial.depthTest = depthMaterial.depthWrite = false
-
-    // Overwrite depthMaterial sahders
-    depthMaterial.onBeforeCompile = (shader) => {
-      shader.uniforms = {
-        ...shader.uniforms,
-        ucolor: { value: props.color ? new Color(props.color as ColorRepresentation) : new Color() },
-      }
-      shader.fragmentShader = shader.fragmentShader.replace(
-        'void main() {', //
-        `uniform vec3 ucolor;
-             void main() {
-            `,
-      )
-      shader.fragmentShader = shader.fragmentShader.replace(
-        'vec4( vec3( 1.0 - fragCoordZ ), opacity );',
-        // Colorize the shadow, multiply by the falloff so that the center can remain darker
-        'vec4( ucolor * fragCoordZ * 2.0, ( 1.0 - fragCoordZ ) * 1.0 );',
-      )
-    }
-  }
 })
 
-// make a plane and make it face up
-
-// Initialize the blur shaders
-const horizontalBlurMaterial = new ShaderMaterial(HorizontalBlurShader)
-const verticalBlurMaterial = new ShaderMaterial(VerticalBlurShader)
-verticalBlurMaterial.depthTest = horizontalBlurMaterial.depthTest = false
+function blurShadow(
+  blur: number,
+  renderer: WebGLRenderer,
+  pool: ReturnType<typeof init>,
+) {
+  pool.blurPlane.visible = true
+  pool.blurPlane.material = pool.horizontalBlurMaterial
+  pool.horizontalBlurMaterial.uniforms.tDiffuse.value = pool.renderTarget.texture
+  pool.horizontalBlurMaterial.uniforms.h.value = blur / 256
 
-// Blur the shadow
+  renderer.setRenderTarget(pool.renderTargetBlur)
+  renderer.render(pool.blurPlane, pool.shadowCamera)
 
-function blurShadows(blur: number) {
-  if (!renderer.value || !shadowCamera.value) { return }
+  pool.blurPlane.material = pool.verticalBlurMaterial
+  pool.verticalBlurMaterial.uniforms.tDiffuse.value = pool.renderTargetBlur.texture
+  pool.verticalBlurMaterial.uniforms.v.value = blur / 256
 
-  blurPlane.visible = true
-  blurPlane.material = horizontalBlurMaterial
-  horizontalBlurMaterial.uniforms.tDiffuse.value = renderTarget.texture
-  horizontalBlurMaterial.uniforms.h.value = blur / 256
+  renderer.setRenderTarget(pool.renderTarget)
+  renderer.render(pool.blurPlane, pool.shadowCamera)
 
-  renderer.value.setRenderTarget(renderTargetBlur)
-  renderer.value.render(blurPlane, shadowCamera.value)
+  pool.blurPlane.visible = false
+}
 
-  blurPlane.material = verticalBlurMaterial
-  verticalBlurMaterial.uniforms.tDiffuse.value = renderTargetBlur.texture
-  verticalBlurMaterial.uniforms.v.value = blur / 256
+function update(
+  ps: typeof props,
+  scene: Scene,
+  renderer: WebGLRenderer,
+  pool: ReturnType<typeof init>,
+) {
+  const {
+    renderTarget,
+    shadowCamera,
+    depthMaterial,
+  } = pool
+  const initialBackground = scene.background
+  scene.background = null
+
+  // NOTE: Force the depthMaterial to everything
+  scene.overrideMaterial = depthMaterial
+
+  // NOTE: Set renderer clear alpha
+  const initialClearAlpha = renderer.getClearAlpha()
+  renderer.setClearAlpha(0)
+
+  // NOTE: Render to the render target to get the depths
+  renderer.setRenderTarget(renderTarget)
+  renderer.render(scene, shadowCamera)
+
+  // NOTE: Reset the override material
+  scene.overrideMaterial = null
+
+  blurShadow(ps.blur, renderer, pool)
+
+  // NOTE: A second pass to reduce the artifacts
+  // (0.4 is the minimum blur amount so that the artifacts are gone)
+  if (ps.smooth) {
+    blurShadow(ps.blur * 0.4, renderer, pool)
+  }
 
-  renderer.value.setRenderTarget(renderTarget)
-  renderer.value.render(blurPlane, shadowCamera.value)
+  // NOTE: Reset and render the normal scene
+  renderer.setRenderTarget(null)
+  renderer.setClearAlpha(initialClearAlpha)
+  scene.background = initialBackground
+}
 
+function init(p: typeof props) {
+  const shadowGroup = new Group()
+
+  // NOTE: The render target that will show the shadows in the plane texture
+  const renderTarget = new WebGLRenderTarget(p.resolution, p.resolution)
+  renderTarget.texture.generateMipmaps = false
+
+  // NOTE: The render target that we will use to blur the first render target
+  const renderTargetBlur = new WebGLRenderTarget(p.resolution, p.resolution)
+  renderTargetBlur.texture.generateMipmaps = false
+
+  // NOTE: Make a plane and make it face up
+  const planeGeometry = new PlaneGeometry(p.width, p.height).rotateX(Math.PI / 2)
+  const planeMaterial = new MeshBasicMaterial({
+    map: renderTarget.texture,
+    opacity: p.opacity,
+    transparent: true,
+    depthWrite: p.depthWrite,
+    color: new Color((p.color as ColorRepresentation) ?? 'black'),
+  })
+  const plane = new Mesh(planeGeometry, planeMaterial)
+  shadowGroup.add(plane)
+
+  // NOTE: The y from the texture is flipped!
+  plane.scale.y = -1
+
+  // NOTE: The plane onto which to blur the texture
+  const blurPlane = new Mesh(planeGeometry)
   blurPlane.visible = false
+  shadowGroup.add(blurPlane)
+
+  // NOTE: The camera to render the depth material from
+  const shadowCamera = new OrthographicCamera(-p.width / 2, p.width / 2, p.height / 2, -p.height / 2, 0, 0.3)
+  shadowCamera.rotation.x = Math.PI / 2 // get the camera to look up
+  shadowGroup.add(shadowCamera)
+
+  const depthMaterial = new MeshDepthMaterial()
+  const horizontalBlurMaterial = new ShaderMaterial(HorizontalBlurShader)
+  horizontalBlurMaterial.depthTest = false
+
+  const verticalBlurMaterial = new ShaderMaterial(VerticalBlurShader)
+  verticalBlurMaterial.depthTest = false
+
+  return {
+    renderTarget,
+    renderTargetBlur,
+    shadowCamera,
+    depthMaterial,
+    horizontalBlurMaterial,
+    verticalBlurMaterial,
+    shadowGroup,
+    plane,
+    blurPlane,
+  }
+};
+
+function setSize(ps: typeof props, pool: ReturnType<typeof init>) {
+  const shadowCamera = pool.shadowCamera
+  shadowCamera.left = -ps.width / 2
+  shadowCamera.right = ps.width / 2
+  shadowCamera.top = ps.height / 2
+  shadowCamera.bottom = -ps.height / 2
+  shadowCamera.far = ps.far
+
+  const w = ps.width * (Array.isArray(ps.scale) ? ps.scale[0] : (ps.scale || 1))
+  const h = ps.height * (Array.isArray(ps.scale) ? ps.scale[1] : (ps.scale || 1))
+  pool.shadowGroup.scale.set(w, ps.far, h)
 }
 
-const { onBeforeRender } = useLoop()
-
-let count = 0
-let initialBackground: Color | Texture | null
-let initialOverrideMaterial: Material | null
-
-onBeforeRender(() => {
-  if (!shadowCamera.value || scene.value === undefined || renderer.value === undefined) { return }
+function setResolution(resolution: number, pool: ReturnType<typeof init>) {
+  pool.renderTarget.dispose()
+  pool.renderTargetBlur.dispose()
 
-  if (props.frames === Number.POSITIVE_INFINITY || count < props.frames) {
-    count++
+  pool.renderTarget = new WebGLRenderTarget(resolution, resolution)
+  pool.renderTarget.texture.generateMipmaps = false
 
-    // Save the initial background and override material
-    initialBackground = scene.value.background
-    initialOverrideMaterial = scene.value.overrideMaterial
+  pool.renderTargetBlur = new WebGLRenderTarget(resolution, resolution)
+  pool.renderTargetBlur.texture.generateMipmaps = false
 
-    // Render the shadows
-    groupRef.value.visible = false
-    scene.value.background = null
-    scene.value.overrideMaterial = depthMaterial
+  pool.plane.material.map = pool.renderTarget.texture
+}
 
-    renderer.value.setRenderTarget(renderTarget)
-    renderer.value.render(scene.value, shadowCamera.value)
+function setColors(ps: typeof props, pool: ReturnType<typeof init>) {
+  pool.plane.material.color = new Color(ps.color as ColorRepresentation ?? 'black')
+
+  pool.depthMaterial.dispose()
+  pool.depthMaterial = new MeshDepthMaterial()
+  pool.depthMaterial.onBeforeCompile = function (shader) {
+    const tint = ps.tint ? new Color(ps.tint as ColorRepresentation) : new Color('white')
+    const { r, g, b } = tint
+    shader.fragmentShader = /* glsl */`
+    ${shader.fragmentShader.replace(
+      'gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity );',
+      `gl_FragColor = vec4( ${r}, ${g}, ${b}, ( 1.0 - fragCoordZ ) * opacity);`,
+    )}
+    `
+  }
+}
 
-    // Blur the shadows
-    blurShadows(props.blur)
+const { onBeforeRender } = useLoop()
+const pool = init(props)
 
-    if (props.smooth) {
-      blurShadows(props.blur * 0.4)
+let count = 0
+const updateOnNextRender = () => count = count >= props.frames ? props.frames - 1 : count
+onBeforeRender(
+  ({ renderer, scene, invalidate }) => {
+    if (count < props.frames) {
+      count++
+      update(props, scene, renderer, pool)
+      invalidate()
+    }
+  },
+)
+
+watch(() => [props.opacity, props.depthWrite, props.blur, props.smooth], () => {
+  pool.plane.material.opacity = props.opacity ?? 1
+  pool.plane.material.depthWrite = props.depthWrite ?? false
+  updateOnNextRender()
+}, { immediate: true })
+
+watch(() => [props.color, props.tint], () => {
+  setColors(props, pool)
+  updateOnNextRender()
+}, { immediate: true })
+
+watch(() => [props.resolution], () => { setResolution(props.resolution, pool); updateOnNextRender() })
+watch(() => [props.width, props.height, props.scale, props.far], () => { setSize(props, pool); updateOnNextRender() }, { immediate: true })
+
+onUnmounted(() => {
+  for (const obj of Object.values(pool)) {
+    if (obj && 'dispose' in obj && typeof obj.dispose === 'function') {
+      obj.dispose()
     }
-
-    // Restore the initial background and override material
-    renderer.value.setRenderTarget(null)
-
-    groupRef.value.visible = true
-    scene.value.background = initialBackground
-    scene.value.overrideMaterial = initialOverrideMaterial
   }
 })
+
+defineExpose({ instance: pool.shadowGroup })
 </script>
 
 <template>
-  <TresGroup
-    ref="groupRef"
-    v-bind="$attrs"
-  >
-    <TresMesh
-      :scale="[1, -1, 1]"
-      :geometry="planeGeometry"
-    >
-      <TresMeshBasicMaterial
-        :map="renderTarget.texture"
-        :opacity="opacity"
-        :depth-write="depthWrite"
-        :transparent="true"
-      />
-    </TresMesh>
-    <primitive :object="blurPlane" />
-
-    <TresCameraHelper
-      v-if="shadowCamera && helper"
-      :args="[shadowCamera]"
-    />
-    <TresOrthographicCamera
-      ref="shadowCamera"
-      :position="[0, 0, 0]"
-      :rotation="[Math.PI / 2, 0, 0]"
-      :args="[-cameraW / 2, cameraW / 2, cameraH / 2, -cameraH / 2, 0, far]"
-    />
-  </TresGroup>
+  <primitive :object="pool.shadowGroup" />
 </template>