diff --git a/playground/.eslintrc-auto-import.json b/playground/.eslintrc-auto-import.json
index 81815b05..bd42a113 100644
--- a/playground/.eslintrc-auto-import.json
+++ b/playground/.eslintrc-auto-import.json
@@ -58,7 +58,6 @@
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,
-    "watchSyncEffect": true,
-    "toValue": true
+    "watchSyncEffect": true
   }
 }
diff --git a/playground/components.d.ts b/playground/components.d.ts
index 5ea681b4..e14c09d7 100644
--- a/playground/components.d.ts
+++ b/playground/components.d.ts
@@ -9,7 +9,9 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    copy: typeof import('./src/components/TheExperience copy.vue')['default']
+    copy: typeof import('./src/components/UnrealBloom copy.vue')['default']
+    GlitchDemo: typeof import('./src/components/GlitchDemo.vue')['default']
+    OutlineDemo: typeof import('./src/components/OutlineDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TheExperience: typeof import('./src/components/TheExperience.vue')['default']
diff --git a/playground/src/components/GlitchDemo.vue b/playground/src/components/GlitchDemo.vue
new file mode 100644
index 00000000..cb6c441b
--- /dev/null
+++ b/playground/src/components/GlitchDemo.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, useTweakPane } from '@tresjs/cientos'
+import { EffectComposer, Glitch } from '@tresjs/post-processing'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import { reactive } from 'vue'
+import { GlitchMode } from 'postprocessing'
+import { Vector2 } from 'three'
+
+const gl = {
+  clearColor: '#121212',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  toneMapping: NoToneMapping,
+}
+
+const glitchParams = reactive({
+  delay: new Vector2(1.5, 3.5),
+  duration: new Vector2(0.6, 1.0),
+  strength: new Vector2(0.3, 1.0),
+  mode: GlitchMode.SPORADIC,
+  active: true,
+  ratio: 0.85,
+  columns: 2,
+  chromaticAberrationOffset: new Vector2(0.001, 0.001),
+  chromaticAberrationEnabled: true,
+  dtSize: 64,
+})
+
+const { pane } = useTweakPane()
+
+pane.addInput(glitchParams, 'delay')
+pane.addInput(glitchParams, 'duration')
+pane.addInput(glitchParams, 'strength')
+pane.addInput(glitchParams, 'mode', {
+  options: {
+    SPORADIC: GlitchMode.SPORADIC,
+    CONSTANT_MILD: GlitchMode.CONSTANT_MILD,
+    CONSTANT_WILD: GlitchMode.CONSTANT_WILD,
+  },
+})
+pane.addInput(glitchParams, 'active')
+pane.addInput(glitchParams, 'ratio', { min: 0, max: 1 })
+pane.addInput(glitchParams, 'columns', { min: 1, max: 64, step: 1 })
+pane.addInput(glitchParams, 'chromaticAberrationOffset')
+pane.addInput(glitchParams, 'dtSize', { min: 1, max: 64, step: 1 })
+</script>
+
+<template>
+  <TresCanvas v-bind="gl" disable-render>
+    <TresPerspectiveCamera :position="[5, 5, 5]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <TresMesh>
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+    <Suspense>
+      <EffectComposer>
+        <Glitch v-bind="glitchParams" />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>
diff --git a/playground/src/components/OutlineDemo.vue b/playground/src/components/OutlineDemo.vue
new file mode 100644
index 00000000..06ae2994
--- /dev/null
+++ b/playground/src/components/OutlineDemo.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, useTweakPane } from '@tresjs/cientos'
+import { reactive, ref } from 'vue'
+import { EffectComposer, Outline, Glitch } from '@tresjs/post-processing'
+import { BasicShadowMap, NoToneMapping, Object3D, Intersection } from 'three'
+
+const gl = {
+  clearColor: '#4ADE80',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  toneMapping: NoToneMapping,
+}
+
+const outlinedObjects = ref<Object3D[]>([])
+
+const toggleMeshSelectionState = ({ object }: Intersection) => {
+  if (outlinedObjects.value.some(({ uuid }) => uuid === object.uuid))
+    outlinedObjects.value = outlinedObjects.value.filter(({ uuid }) => uuid !== object.uuid)
+  else outlinedObjects.value = [...outlinedObjects.value, object]
+}
+
+const outlineParameters = reactive({
+  pulseSpeed: 0,
+  edgeStrength: 2.5,
+  visibleEdgeColor: '#ff0000',
+})
+
+const { pane } = useTweakPane()
+
+pane.addInput(outlineParameters, 'edgeStrength', { min: 0, max: 10 })
+pane.addInput(outlineParameters, 'pulseSpeed', { min: 0, max: 2 })
+pane.addInput(outlineParameters, 'visibleEdgeColor')
+</script>
+
+<template>
+  <TresCanvas v-bind="gl" disable-render>
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[2, 2, 2]" />
+    <OrbitControls />
+    <template v-for="i in 5" :key="i">
+      <TresMesh @click="toggleMeshSelectionState" :position="[i * 1.1 - 2.8, 1, 0]">
+        <TresBoxGeometry :width="4" :height="4" :depth="4" />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </template>
+
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+    <Suspense>
+      <EffectComposer>
+        <Outline :outlined-objects="outlinedObjects" v-bind="outlineParameters" />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>
diff --git a/playground/src/components/UnrealBloom.vue b/playground/src/components/UnrealBloom.vue
index c0667c10..cc12d3a3 100644
--- a/playground/src/components/UnrealBloom.vue
+++ b/playground/src/components/UnrealBloom.vue
@@ -4,6 +4,7 @@ import { TresCanvas } from '@tresjs/core'
 import { OrbitControls, useTweakPane } from '@tresjs/cientos'
 import { EffectComposer, Bloom } from '@tresjs/post-processing'
 import { BasicShadowMap, NoToneMapping } from 'three'
+import { onMounted, reactive, ref } from 'vue'
 
 const gl = {
   clearColor: '#121212',
@@ -14,11 +15,10 @@ const gl = {
 }
 
 const bloomParams = reactive({
-  luminanceThreshold: 0.1,
+  luminanceThreshold: 0.2,
   luminanceSmoothing: 0.3,
   mipmapBlur: true,
   intensity: 4.0,
-  radius: 0.85,
 })
 
 const { pane } = useTweakPane()
@@ -27,7 +27,6 @@ pane.addInput(bloomParams, 'luminanceThreshold', { min: 0, max: 1 })
 pane.addInput(bloomParams, 'luminanceSmoothing', { min: 0, max: 1 })
 pane.addInput(bloomParams, 'mipmapBlur')
 pane.addInput(bloomParams, 'intensity', { min: 0, max: 10 })
-pane.addInput(bloomParams, 'radius', { min: 0, max: 1 })
 
 const materialRef = ref(null)
 
@@ -46,7 +45,7 @@ onMounted(() => {
       <TresSphereGeometry :args="[2, 32, 32]" />
       <TresMeshStandardMaterial color="hotpink" :emissive="new Color('hotpink')" :emissive-intensity="9" />
     </TresMesh> -->
-    <TresMesh :position="[2, 2, 2]">
+    <TresMesh :position="[2, 2, -2]">
       <TresSphereGeometry :args="[2, 32, 32]" />
       <TresMeshStandardMaterial color="hotpink" />
     </TresMesh>
@@ -63,8 +62,8 @@ onMounted(() => {
     <TresAmbientLight :intensity="0.5" />
     <TresDirectionalLight :position="[3, 3, 3]" :intensity="2" />
     <Suspense>
-      <EffectComposer>
-        <Bloom v-bind="bloomParams"> </Bloom>
+      <EffectComposer :depth-buffer="true">
+        <Bloom v-bind="bloomParams"></Bloom>
       </EffectComposer>
     </Suspense>
   </TresCanvas>
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
index edef43ed..a994230f 100644
--- a/playground/src/pages/index.vue
+++ b/playground/src/pages/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts"></script>
 
 <template>
-  <UnrealBloom />
+  <OutlineDemo />
 </template>
diff --git a/src/core/EffectComposer.vue b/src/core/EffectComposer.vue
new file mode 100644
index 00000000..2ffb0ab7
--- /dev/null
+++ b/src/core/EffectComposer.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { HalfFloatType, Scene } from 'three'
+import { TresCamera, TresObject, useRenderLoop } from '@tresjs/core'
+import { DepthDownsamplingPass, EffectComposer as EffectComposerImpl, NormalPass, RenderPass } from 'postprocessing'
+
+import { useCore } from './useCore'
+import { ShallowRef, provide, shallowRef, watchEffect } from 'vue'
+import { isWebGL2Available } from 'three-stdlib'
+import { useWindowSize } from '@vueuse/core'
+
+export type EffectComposerProps = {
+  enabled?: boolean
+  children?: TresObject[]
+  depthBuffer?: boolean
+  dissableNormalPass?: boolean
+  stencilBuffer?: boolean
+  resolutionScale?: number
+  /*   renderPriority?: number */
+  autoClear?: boolean
+  multisampling?: number
+  frameBufferType?: number
+  scene?: Scene
+  camera?: TresCamera
+}
+
+const { state } = useCore()
+
+const {
+  enabled = true,
+  /*   renderPriority = 1, */
+  autoClear = true,
+  multisampling = 8,
+  frameBufferType = HalfFloatType,
+  dissableNormalPass = false,
+  depthBuffer,
+  stencilBuffer,
+  scene,
+  camera,
+  resolutionScale,
+} = defineProps<EffectComposerProps>()
+
+const effectComposer: ShallowRef<EffectComposerImpl | null> = shallowRef(null)
+
+const localScene = scene || state.scene
+const localCamera = camera || state.camera
+
+let downSamplingPass = null
+let normalPass = null
+const webGL2Available = isWebGL2Available()
+
+provide('effectComposer', effectComposer)
+
+const { width, height } = useWindowSize()
+
+function setNormalPass() {
+  if (effectComposer.value) {
+    normalPass = new NormalPass(scene as Scene, camera as TresCamera)
+    normalPass.enabled = false
+    effectComposer.value.addPass(normalPass)
+    if (resolutionScale !== undefined && webGL2Available) {
+      downSamplingPass = new DepthDownsamplingPass({
+        normalBuffer: normalPass.texture,
+        resolutionScale: resolutionScale,
+      })
+      downSamplingPass.enabled = false
+      effectComposer.value.addPass(downSamplingPass)
+    }
+  }
+}
+
+watchEffect(() => {
+  if (state.renderer) {
+    state.renderer.setSize(width.value, height.value)
+    state.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+    effectComposer.value = new EffectComposerImpl(state.renderer, {
+      depthBuffer,
+      stencilBuffer,
+      multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
+      frameBufferType,
+    })
+    effectComposer.value.addPass(new RenderPass(localScene, localCamera))
+
+    if (!dissableNormalPass) {
+      setNormalPass()
+    }
+  }
+})
+
+const { onLoop } = useRenderLoop()
+
+onLoop(() => {
+  if (effectComposer.value) {
+    effectComposer.value.render()
+  }
+})
+
+onLoop(({ delta }) => {
+  if (enabled && state.renderer && effectComposer.value) {
+    const currentAutoClear = state.renderer.autoClear
+    state.renderer.autoClear = autoClear
+    if (stencilBuffer && !autoClear) state.renderer.clearStencil()
+    effectComposer.value.render(delta)
+    state.renderer.autoClear = currentAutoClear
+  }
+})
+</script>
+<template>
+  <slot />
+</template>
diff --git a/src/core/effects/Bloom.vue b/src/core/effects/Bloom.vue
new file mode 100644
index 00000000..0ca07abf
--- /dev/null
+++ b/src/core/effects/Bloom.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { Ref, inject, onUnmounted, ref, toRaw, unref } from 'vue'
+import { BlurPass, KernelSize, EffectPass, BloomEffect, EffectComposer, BlendFunction } from 'postprocessing'
+import { useCore } from '../useCore'
+import { watch } from 'vue'
+
+export type BloomProps = {
+  blendFunction?: BlendFunction
+  /**
+   * The intensity of the bloom effect.
+   *
+   * @default 1
+   * @type {number}
+   * @memberof BloomProps
+   */
+  intensity?: number
+  /**
+   *  An efficient, incremental blur pass.
+   *
+   * @type {BlurPass}
+   * @memberof BloomProps
+   */
+  blurPass?: BlurPass
+  /**
+   * The width of the render
+   *
+   * @type {number}
+   * @memberof BloomProps
+   */
+  width?: number
+  /**
+   * The height of the render
+   *
+   * @type {number}
+   * @memberof BloomProps
+   */
+  height?: number
+  /**
+   * The kernel size.
+   *
+   * @default KernelSize.LARGE
+   *
+   * @type {KernelSize}
+   * @memberof BloomProps
+   */
+  kernelSize?: KernelSize
+  /**
+   * The luminance threshold. Raise this value to mask out darker elements in the scene. Range is [0, 1].
+   *
+   * @default 0.9
+   *
+   * @type {number}
+   * @memberof BloomProps
+   */
+  luminanceThreshold?: number
+  /**
+   * Controls the smoothness of the luminance threshold. Range is [0, 1].
+   *
+   * @default 0.025
+   *
+   * @type {number}
+   * @memberof BloomProps
+   */
+  luminanceSmoothing?: number
+  /**
+   * Enables mip map blur.
+   *
+   * @default false
+   *
+   * @type {boolean}
+   * @memberof BloomProps
+   */
+  mipmapBlur?: boolean
+}
+
+const {
+  blendFunction = BlendFunction.ADD,
+  mipmapBlur = false,
+  intensity = 1,
+  luminanceThreshold = 0.9,
+  luminanceSmoothing = 0.025,
+} = defineProps<BloomProps>()
+
+const { state } = useCore()
+
+const composer = inject<Ref<EffectComposer>>('effectComposer')
+const pass = ref<EffectPass | null>(null)
+const effect = ref<BloomEffect | null>(null)
+
+defineExpose({ pass, effect })
+
+function createPass() {
+  effect.value = new BloomEffect({
+    blendFunction,
+    mipmapBlur,
+    intensity,
+    luminanceThreshold,
+    luminanceSmoothing,
+  })
+  pass.value = new EffectPass(unref(state.camera), toRaw(effect.value) as BloomEffect)
+}
+
+function disposePass() {
+  effect.value?.dispose()
+  pass.value?.dispose()
+  composer?.value.removePass(toRaw(pass.value) as EffectPass)
+}
+
+const unwatchComposer = watch(
+  () => [state.camera, composer?.value],
+  () => {
+    if (state.camera && composer && composer.value) {
+      createPass()
+      composer?.value?.addPass(toRaw(pass.value) as EffectPass)
+    }
+  },
+)
+
+const unwatchProps = watch(
+  () => [blendFunction, mipmapBlur, intensity, luminanceThreshold, luminanceSmoothing],
+  () => {
+    if (pass.value) {
+      disposePass()
+      createPass()
+      composer?.value?.addPass(toRaw(pass.value) as EffectPass)
+    }
+  },
+)
+
+onUnmounted(() => {
+  disposePass()
+  unwatchComposer()
+  unwatchProps()
+})
+</script>
+<template></template>
diff --git a/src/core/effects/Glitch.vue b/src/core/effects/Glitch.vue
new file mode 100644
index 00000000..fb81a404
--- /dev/null
+++ b/src/core/effects/Glitch.vue
@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { GlitchMode, EffectComposer, EffectPass, GlitchEffect, BlendFunction } from 'postprocessing'
+import { Ref, inject, onUnmounted, ref, toRaw, unref, watch, watchEffect } from 'vue'
+
+import { Vector2, Texture } from 'three'
+
+import { useCore } from '../useCore'
+
+export interface GlitchProps {
+  blendFunction?: BlendFunction
+  /**
+   *  The minimum and maximum delay between glitch activations in seconds.
+   *
+   * @default [1.5, 3.5]
+   *
+   * @type {Vector2}
+   * @memberof GlitchProps
+   */
+  delay?: Vector2
+  /**
+   * The minimum and maximum duration of a glitch in seconds.
+   *
+   * @default [0.6, 1.0]
+   *
+   * @type {Vector2}
+   * @memberof GlitchProps
+   */
+  duration?: Vector2
+  /**
+   * The strength of weak and strong glitches.
+   *
+   * @default [0.3, 1.0]
+   *
+   * @type {Vector2}
+   * @memberof GlitchProps
+   */
+  strength?: Vector2
+  /**
+   * The glitch mode. Can be DISABLED | SPORADIC | CONSTANT_MILD | CONSTANT_WILD .
+   *
+   * @default GlitchMode.SPORADIC
+   *
+   * @type {GlitchMode}
+   * @memberof GlitchProps
+   */
+  mode?: GlitchMode
+  /**
+   * Turn the effect on and off.
+   *
+   * @type {boolean}
+   * @memberof GlitchProps
+   */
+  active?: boolean
+  /**
+   *
+   * The threshold for strong glitches.
+   *
+   * @default 0.85
+   *
+   * @type {number}
+   * @memberof GlitchProps
+   */
+  ratio?: number
+  /**
+   * The scale of the blocky glitch columns.
+   *
+   * @default 0.05
+   *
+   * @type {number}
+   * @memberof GlitchProps
+   */
+  columns?: number
+  /**
+   * A chromatic aberration offset. If provided, the glitch effect will influence this offset.
+   *
+   * @type {Vector2}
+   * @memberof GlitchProps
+   */
+  chromaticAberrationOffset?: Vector2
+  /**
+   * A perturbation map. If none is provided, a noise texture will be created.
+   *
+   * @type {Texture}
+   * @memberof GlitchProps
+   */
+  peturbationMap?: Texture
+  /**
+   * The size of the generated noise map. Will be ignored if a perturbation map is provided.
+   *
+   * @default 64
+   *
+   * @type {number}
+   * @memberof GlitchProps
+   */
+  dtSize?: number
+}
+
+const {
+  blendFunction = BlendFunction.ADD,
+  delay,
+  duration,
+  strength,
+  mode,
+  active,
+  ratio = 0.85,
+  columns = 0.05,
+  chromaticAberrationOffset,
+  peturbationMap,
+  dtSize = 64,
+} = defineProps<GlitchProps>()
+
+const { state } = useCore()
+
+const composer = inject<Ref<EffectComposer>>('effectComposer')
+const pass = ref<EffectPass | null>(null)
+const effect = ref<GlitchEffect | null>(null)
+
+defineExpose({ pass })
+
+function createPass() {
+  effect.value = new GlitchEffect({
+    blendFunction,
+    delay,
+    duration,
+    strength,
+    ratio,
+    columns,
+    chromaticAberrationOffset,
+    dtSize,
+  })
+  pass.value = new EffectPass(unref(state.camera), toRaw(effect.value) as GlitchEffect)
+}
+
+function disposePass() {
+  effect.value?.dispose()
+  pass.value?.dispose()
+  composer?.value.removePass(toRaw(pass.value) as EffectPass)
+}
+
+const unwatchComposer = watch(
+  () => [state.camera, composer?.value],
+  () => {
+    if (state.camera && composer && composer.value) {
+      createPass()
+      composer?.value?.addPass(toRaw(pass.value) as EffectPass)
+    }
+  },
+)
+
+const unwatchProps = watch(
+  () => [delay, duration, strength, ratio, columns, chromaticAberrationOffset, peturbationMap, dtSize],
+  () => {
+    if (pass.value) {
+      composer?.value.removePass(toRaw(pass.value) as EffectPass)
+      createPass()
+      composer?.value?.addPass(toRaw(pass.value) as EffectPass)
+    }
+  },
+)
+
+watchEffect(() => {
+  if (pass.value) {
+    pass.value.mode = active ? mode || GlitchMode.SPORADIC : GlitchMode.DISABLED
+  }
+})
+
+const unwatchActive = watch(
+  () => active,
+  value => {
+    if (pass.value) {
+      pass.value.enabled = value as boolean
+    }
+  },
+)
+
+onUnmounted(() => {
+  disposePass()
+  unwatchComposer()
+  unwatchProps()
+  unwatchActive()
+})
+</script>
+<template></template>
diff --git a/src/core/effects/Outline.vue b/src/core/effects/Outline.vue
new file mode 100644
index 00000000..d0d9b206
--- /dev/null
+++ b/src/core/effects/Outline.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { Color } from 'three'
+import { useCore } from '../useCore'
+import { EffectPass, OutlineEffect } from 'postprocessing'
+import { inject, onUnmounted, shallowRef, watch, watchEffect, computed, Ref } from 'vue'
+
+import type { TresColor, TresObject } from '@tresjs/core'
+import type { BlendFunction } from 'postprocessing'
+import type { ColorRepresentation } from 'three'
+
+export type OutlineProps = {
+  /**
+   * The objects in the scene which should have an outline.
+   */
+  outlinedObjects: TresObject | TresObject[] | Ref<TresObject[]> | Ref<TresObject>
+  blendFunction?: BlendFunction
+  selectionLayer?: number
+  patternTexture?: number
+  patternScale?: number
+  edgeStrength?: number
+  pulseSpeed?: number
+  visibleEdgeColor?: TresColor
+  hiddenEdgeColor?: TresColor
+  multisampling?: number
+  resolutionScale?: number
+  resolutionX?: number
+  resolutionY?: number
+  kernelSize?: number
+  blur?: number
+  xRay?: boolean
+}
+
+const props = defineProps<OutlineProps>()
+
+const { state } = useCore()
+const composer = inject<any>('effectComposer') // TODO inject type
+const pass = shallowRef<EffectPass | null>(null)
+const effect = shallowRef<OutlineEffect | null>(null)
+
+type OutlineEffectParameters = NonNullable<
+  Exclude<
+    ConstructorParameters<typeof OutlineEffect>[2],
+    'width' | 'height' // excluded, because those are deprecated in postprocessing's OutlineEffec
+  >
+>
+
+const normalizeColor = (value: Color | Array<number> | string | number | ColorRepresentation) => {
+  //TODO import from core (after exporting it from there first 😊)
+  if (value instanceof Color) return value
+  if (Array.isArray(value)) return new Color(...value)
+
+  return new Color(value as ColorRepresentation)
+}
+
+const colorToNumber = (color: TresColor | undefined) =>
+  color !== undefined ? normalizeColor(color).getHex() : undefined
+
+const outlineEffectParameters = computed<OutlineEffectParameters>(() => {
+  const {
+    blur,
+    xRay,
+    kernelSize,
+    pulseSpeed,
+    resolutionX,
+    resolutionY,
+    patternScale,
+    edgeStrength,
+    blendFunction,
+    multisampling,
+    patternTexture,
+    resolutionScale,
+    hiddenEdgeColor,
+    visibleEdgeColor,
+  } = props // thre rest operator (const {outlinedObjects: _, ...rest} = props) was intentionally not used here to prevent triggering this computed when outlinedObjects changes
+
+  return {
+    blur,
+    xRay,
+    kernelSize,
+    pulseSpeed,
+    resolutionX,
+    resolutionY,
+    patternScale,
+    edgeStrength,
+    blendFunction,
+    multisampling,
+    patternTexture,
+    resolutionScale,
+    hiddenEdgeColor: colorToNumber(hiddenEdgeColor),
+    visibleEdgeColor: colorToNumber(visibleEdgeColor),
+  }
+})
+
+const unwatch = watchEffect(() => {
+  if (state.camera && composer && composer.value && state.scene) {
+    effect.value = new OutlineEffect(state.scene, state.camera, outlineEffectParameters.value)
+    pass.value = new EffectPass(state.camera, effect.value)
+
+    composer.value?.addPass(pass.value)
+    unwatch()
+  }
+})
+
+watch(
+  [() => props.outlinedObjects, effect], // whatchEffect is intentionally not used here as it would result in an endless loop
+  ([value, effect]) => {
+    effect.value?.selection.set(value)
+  },
+  {
+    immediate: true,
+  },
+)
+
+watchEffect(() => {
+  if (!effect.value) return
+
+  const plainEffectPass = new OutlineEffect()
+
+  /* some properties are not updated because of different reasons:
+        resolutionX - has no setter in OutlineEffect
+        resolutionY - has no setter in OutlineEffect
+        blendFunction - has no setter in OutlineEffect
+        patternTexture - different type in constructor and in setter
+        resolutionScale - has no setter in OutlineEffect
+      */
+
+  const {
+    blur,
+    xRay,
+    kernelSize,
+    pulseSpeed,
+    patternScale,
+    edgeStrength,
+    multisampling,
+    hiddenEdgeColor,
+    visibleEdgeColor,
+  } = outlineEffectParameters.value
+
+  effect.value.blur = blur !== undefined ? blur : plainEffectPass.blur
+  effect.value.xRay = xRay !== undefined ? xRay : plainEffectPass.xRay
+  effect.value.pulseSpeed = pulseSpeed !== undefined ? pulseSpeed : plainEffectPass.pulseSpeed
+  effect.value.kernelSize = kernelSize !== undefined ? kernelSize : plainEffectPass.kernelSize
+  effect.value.edgeStrength = edgeStrength !== undefined ? edgeStrength : plainEffectPass.edgeStrength
+  effect.value.patternScale = patternScale !== undefined ? patternScale : plainEffectPass.patternScale
+  effect.value.multisampling = multisampling !== undefined ? multisampling : plainEffectPass.multisampling
+
+  effect.value.hiddenEdgeColor =
+    hiddenEdgeColor !== undefined ? normalizeColor(hiddenEdgeColor) : plainEffectPass.hiddenEdgeColor
+  effect.value.visibleEdgeColor =
+    visibleEdgeColor !== undefined ? normalizeColor(visibleEdgeColor) : plainEffectPass.visibleEdgeColor
+
+  plainEffectPass.dispose()
+})
+
+onUnmounted(() => {
+  effect.value?.selection.clear()
+  composer.value?.removePass(pass.value)
+  effect.value?.dispose()
+  pass.value?.dispose()
+})
+</script>
+<template></template>
diff --git a/src/core/useEffectComposer/component.ts b/src/core/useEffectComposer/component.ts
deleted file mode 100644
index 33d31fbd..00000000
--- a/src/core/useEffectComposer/component.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-import { useWindowSize } from '@vueuse/core'
-import { useRenderLoop, Camera } from '@tresjs/core'
-import { defineComponent, provide, shallowRef, ShallowRef, toRefs, watch, watchEffect } from 'vue'
-import { DepthDownsamplingPass, EffectComposer as EffectComposerImpl, NormalPass, RenderPass } from 'postprocessing'
-import { isWebGL2Available } from 'three-stdlib'
-
-import { useCore } from '../useCore'
-import { /* HalfFloatType, */ Scene } from 'three'
-
-export interface EffectComposerProps {
-  /**
-   * The children of the effect composer.
-   * @default []
-   * @type {Array}
-   * @memberof EffectComposerProps
-   * @name children
-   *
-   **/
-  children?: Array<any>
-  /**
-   * Whether the depth buffer is enabled.
-   * @default true
-   * @type {boolean}
-   * @memberof EffectComposerProps
-   * @name depthBuffer
-   *
-   **/
-  depthBuffer?: boolean
-  /**
-   *
-   * @default false
-   * @type {boolean}
-   * @memberof EffectComposerProps
-   * @name dissableNormalPass
-   *
-   **/
-  dissableNormalPass?: boolean
-  /**
-   *
-   * Stencil buffer.
-   *
-   * @type {boolean}
-   * @memberof EffectComposerProps
-   * @name stencilBuffer
-   *
-   **/
-  stencilBuffer?: boolean
-  /**
-   *
-   * Whether the effect composer should clear the buffers before rendering.
-   *
-   * @type {boolean}
-   * @memberof EffectComposerProps
-   * @name autoClear
-   *
-   **/
-  autoClear?: boolean
-  /**
-   *
-   * The resolution scale.
-   *
-   * @type {number}
-   * @memberof EffectComposerProps
-   * @name resolutionScale
-   *
-   **/
-  resolutionScale?: number
-  /**
-   *
-   * The multisampling.
-   *
-   * @type {number}
-   * @memberof EffectComposerProps
-   * @name multisampling
-   *
-   **/
-  multisampling?: number
-  /**
-   *
-   * The frame buffer type.
-   *
-   * @type {number}
-   * @memberof EffectComposerProps
-   * @name frameBufferType
-   *
-   **/
-  frameBufferType?: number
-
-  /**
-   *
-   * The render priority.
-   *
-   * @type {number}
-   * @memberof EffectComposerProps
-   * @name renderPriority
-   *
-   **/
-  renderPriority?: number
-  /**
-   *
-   * A camera to use for rendering.
-   *
-   * @type {Camera}
-   * @memberof EffectComposerProps
-   * @name camera
-   *
-   **/
-  camera?: Camera
-  /**
-   * A scene to use for rendering.
-   * @type {Scene}
-   * @memberof EffectComposerProps
-   * @name scene
-   *
-   **/
-  scene?: Scene
-}
-
-export const EffectComposer = defineComponent<EffectComposerProps>({
-  name: 'EffectComposer',
-  props: [
-    'children',
-    'depthBuffer',
-    'dissableNormalPass',
-    'stencilBuffer',
-    'autoClear',
-    'resolutionScale',
-    'multisampling',
-    'frameBufferType',
-    'renderPriority',
-    'camera',
-    'scene',
-  ] as unknown as undefined,
-
-  setup(props, { slots }) {
-    const { state } = useCore()
-    const {
-    // TODO: Add support for these props
-    /*    renderPriority = 1,
-      autoClear = true,
-      multisampling = 8,
-      frameBufferType = HalfFloatType, */
-      resolutionScale,
-    } = toRefs(props)
-    const effectComposer: ShallowRef<EffectComposerImpl | null> = shallowRef(null)
-
-    const scene = props.scene || state.scene
-    const camera = props.camera || state.camera
-    let downSamplingPass = null
-    let normalPass = null
-    const webGL2Available = isWebGL2Available()
-
-    provide('effectComposer', effectComposer)
-
-    const { width, height } = useWindowSize()
-
-    function setNormalPass() {
-      if (effectComposer.value) {
-        normalPass = new NormalPass(scene as Scene, camera as Camera)
-        normalPass.enabled = false
-        effectComposer.value.addPass(normalPass)
-        if (resolutionScale.value !== undefined && webGL2Available) {
-          downSamplingPass = new DepthDownsamplingPass({
-            normalBuffer: normalPass.texture,
-            resolutionScale: resolutionScale?.value,
-          })
-          downSamplingPass.enabled = false
-          effectComposer.value.addPass(downSamplingPass)
-        }
-      }
-    }
-
-    watchEffect(() => {
-      if (state.renderer && state.scene && state.camera) {
-        state.renderer.setSize(width.value, height.value)
-        state.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
-        effectComposer.value = new EffectComposerImpl(state.renderer)
-        effectComposer.value.addPass(new RenderPass(scene, camera))
-
-        if (!props.dissableNormalPass) {
-          setNormalPass()
-        }
-      }
-    })
-
-    const { onLoop } = useRenderLoop()
-
-    onLoop(() => {
-      if (effectComposer.value) {
-        effectComposer.value.render()
-      }
-    })
-
-    return () => {
-      return slots.default?.()
-    }
-  },
-})
diff --git a/src/index.ts b/src/index.ts
index b53ff095..218879ce 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,6 @@
-import { EffectComposer } from './core/useEffectComposer/component'
-import { Bloom } from './core/effects/Bloom'
-import { Glitch } from './core/effects/Glitch'
+import EffectComposer from './core/EffectComposer.vue'
+import Bloom from './core/effects/Bloom.vue'
+import Glitch from './core/effects/Glitch.vue'
 import { Outline } from './core/effects/Outline'
 
 export { EffectComposer, Bloom, Glitch, Outline }
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe2..aafef950 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,8 @@
 /// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}