diff --git a/.gitignore b/.gitignore
index 7e1768095..16ef205ca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,7 +29,6 @@ coverage
 
 .env
 .env.local
-.claude
 .worktrees
 
 .nx/*
@@ -37,4 +36,7 @@ coverage
 .nx/workspace-data
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
+
+.claude/*
+!.claude/agents/
 **/contents.sqlite
diff --git a/apps/playground/src/components/BasicScene.vue b/apps/playground/src/components/BasicScene.vue
index cc4f4f867..97d23af8f 100644
--- a/apps/playground/src/components/BasicScene.vue
+++ b/apps/playground/src/components/BasicScene.vue
@@ -3,13 +3,17 @@ import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { EffectComposer } from '@tresjs/post-processing'
 
-defineProps<{
+withDefaults(defineProps<{
   wireframe?: boolean
-}>()
+  renderMode?: 'always' | 'on-demand' | 'manual'
+}>(), {
+  wireframe: false,
+  renderMode: 'on-demand',
+})
 </script>
 
 <template>
-  <TresCanvas render-mode="on-demand">
+  <TresCanvas :render-mode="renderMode">
     <TresPerspectiveCamera
       :position="[5, 5, 5]"
       :look-at="[0, 0, 0]"
diff --git a/apps/playground/src/pages/postprocessing/three/afterimage.vue b/apps/playground/src/pages/postprocessing/three/afterimage.vue
new file mode 100644
index 000000000..a644f8b5c
--- /dev/null
+++ b/apps/playground/src/pages/postprocessing/three/afterimage.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas, useLoop } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { Afterimage, EffectComposer } from '@tresjs/post-processing'
+import { shallowRef } from 'vue'
+
+const { damp, enabled } = useControls({
+  damp: { value: 0.96, min: 0, max: 1, step: 0.01 },
+  enabled: true,
+}, {
+  uuid: 'postprocessing-three-afterimage',
+})
+
+const torusRef = shallowRef()
+
+const RotateKnot = () => {
+  const { onBeforeRender } = useLoop()
+  onBeforeRender(({ elapsed }) => {
+    if (torusRef.value) {
+      torusRef.value.rotation.x = elapsed * 0.4
+      torusRef.value.rotation.y = elapsed * 0.6
+    }
+  })
+}
+</script>
+
+<template>
+  <TresLeches uuid="postprocessing-three-afterimage" />
+  <TresCanvas render-mode="always">
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+
+    <TresMesh ref="torusRef">
+      <TresTorusKnotGeometry :args="[1.5, 0.5, 128, 32]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+
+    <TresGridHelper />
+
+    <RotateKnot />
+
+    <EffectComposer>
+      <Afterimage v-if="enabled" :damp="damp" />
+    </EffectComposer>
+  </TresCanvas>
+</template>
diff --git a/apps/playground/src/pages/postprocessing/three/film.vue b/apps/playground/src/pages/postprocessing/three/film.vue
new file mode 100644
index 000000000..4965054eb
--- /dev/null
+++ b/apps/playground/src/pages/postprocessing/three/film.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { Film } from '@tresjs/post-processing'
+import BasicScene from '@/components/BasicScene.vue'
+import { TresLeches, useControls } from '@tresjs/leches'
+
+const { intensity, grayscale, enabled } = useControls({
+  intensity: {
+    value: 0.5,
+    min: 0,
+    max: 1,
+    step: 0.01,
+  },
+  grayscale: true,
+  enabled: true,
+}, {
+  uuid: 'postprocessing-three-film',
+})
+</script>
+
+<template>
+  <TresLeches uuid="postprocessing-three-film" />
+  <BasicScene render-mode="always">
+    <template #effects>
+      <Film
+        :intensity
+        :grayscale
+        :enabled
+      />
+    </template>
+  </BasicScene>
+</template>
diff --git a/apps/playground/src/pages/postprocessing/three/sao.vue b/apps/playground/src/pages/postprocessing/three/sao.vue
new file mode 100644
index 000000000..3618f7eb1
--- /dev/null
+++ b/apps/playground/src/pages/postprocessing/three/sao.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas, useLoop } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { EffectComposer, Output, SAO } from '@tresjs/post-processing'
+import { shallowRef } from 'vue'
+import {
+  Color,
+  InstancedMesh,
+  MeshStandardMaterial,
+  Object3D,
+  SphereGeometry,
+} from 'three'
+
+const {
+  enabled,
+  output,
+  saoBias,
+  saoIntensity,
+  saoScale,
+  saoKernelRadius,
+  saoMinResolution,
+  saoBlur,
+  saoBlurRadius,
+  saoBlurStdDev,
+  saoBlurDepthCutoff,
+} = useControls({
+  enabled: true,
+  output: { value: 0, min: 0, max: 2, step: 1 },
+  saoBias: { value: 0.5, min: -1, max: 1, step: 0.01 },
+  saoIntensity: { value: 0.18, min: 0, max: 1, step: 0.01 },
+  saoScale: { value: 1, min: 0, max: 10, step: 0.1 },
+  saoKernelRadius: { value: 100, min: 1, max: 100, step: 1 },
+  saoMinResolution: { value: 0, min: 0, max: 1, step: 0.01 },
+  saoBlur: true,
+  saoBlurRadius: { value: 8, min: 0, max: 200, step: 1 },
+  saoBlurStdDev: { value: 4, min: 0.5, max: 150, step: 0.5 },
+  saoBlurDepthCutoff: { value: 0.01, min: 0.0, max: 0.1, step: 0.001 },
+}, {
+  uuid: 'postprocessing-three-sao',
+})
+
+// Create 120 random spheres as an InstancedMesh
+const geometry = new SphereGeometry(3, 48, 24)
+const material = new MeshStandardMaterial({ roughness: 0.5, metalness: 0 })
+const spheres = new InstancedMesh(geometry, material, 120)
+const dummy = new Object3D()
+const color = new Color()
+
+for (let i = 0; i < 120; i++) {
+  dummy.position.set(
+    Math.random() * 4 - 2,
+    Math.random() * 4 - 2,
+    Math.random() * 4 - 2,
+  )
+  dummy.rotation.set(Math.random(), Math.random(), Math.random())
+  const scale = Math.random() * 0.2 + 0.05
+  dummy.scale.set(scale, scale, scale)
+  dummy.updateMatrix()
+  spheres.setMatrixAt(i, dummy.matrix)
+  color.setHSL(Math.random(), 1.0, 0.3)
+  spheres.setColorAt(i, color)
+}
+
+const groupRef = shallowRef()
+
+function RotateGroup() {
+  const { onBeforeRender } = useLoop()
+  onBeforeRender(({ elapsed }) => {
+    if (groupRef.value) {
+      groupRef.value.rotation.x = elapsed * 0.2
+      groupRef.value.rotation.y = elapsed * 0.1
+    }
+  })
+}
+</script>
+
+<template>
+  <TresLeches uuid="postprocessing-three-sao" />
+  <TresCanvas render-mode="always">
+    <TresPerspectiveCamera
+      :position="[0, 0, 7]"
+      :fov="65"
+      :near="3"
+      :far="10"
+    />
+    <OrbitControls auto-rotate />
+
+    <TresAmbientLight :color="0xFFFFFF" :intensity="0.2" />
+    <TresPointLight :color="0xEFFFEF" :intensity="500" :position="[-10, -10, 10]" />
+    <TresPointLight :color="0xFFEFEF" :intensity="500" :position="[-10, 10, 10]" />
+    <TresPointLight :color="0xEFEFFF" :intensity="500" :position="[10, -10, 10]" />
+
+    <TresGroup ref="groupRef">
+      <primitive :object="spheres" />
+    </TresGroup>
+
+    <RotateGroup />
+
+    <EffectComposer>
+      <SAO
+        :enabled="enabled"
+        :output="output"
+        :sao-bias="saoBias"
+        :sao-intensity="saoIntensity"
+        :sao-scale="saoScale"
+        :sao-kernel-radius="saoKernelRadius"
+        :sao-min-resolution="saoMinResolution"
+        :sao-blur="saoBlur"
+        :sao-blur-radius="saoBlurRadius"
+        :sao-blur-std-dev="saoBlurStdDev"
+        :sao-blur-depth-cutoff="saoBlurDepthCutoff"
+      />
+      <Output />
+    </EffectComposer>
+  </TresCanvas>
+</template>
diff --git a/apps/playground/src/router/routes/postprocessing/index.ts b/apps/playground/src/router/routes/postprocessing/index.ts
index 2f75167c9..33610b2e9 100644
--- a/apps/playground/src/router/routes/postprocessing/index.ts
+++ b/apps/playground/src/router/routes/postprocessing/index.ts
@@ -23,12 +23,15 @@ const home: RouteRecordRaw = {
 }
 
 export const threeRoutes = [
+  makeRoute('Afterimage', '👻'),
   makeRoute('Pixelation', '👾'),
   makeRoute('Glitch', '📺'),
   makeRoute('SMAA', '📐'),
   makeRoute('Halftone', '🎨'),
   makeRoute('Unreal Bloom', '🌼'),
-]
+  makeRoute('Film', '🎞️'),
+  makeRoute('SAO', '🌑'),
+].sort((a, b) => (a.meta?.name as string).localeCompare(b.meta?.name as string))
 
 export const pmndrsRoutes = [
   makeRoute('Outline', '🔲', false),
@@ -61,7 +64,7 @@ export const pmndrsRoutes = [
   makeRoute('Barrel blur', '🌀', false),
   makeRoute('Fish Eye', '👁️', false),
   makeRoute('On-demand', '🔄', false),
-]
+].sort((a, b) => (a.meta?.name as string).localeCompare(b.meta?.name as string))
 
 export const postProcessingRoutes = [
   home,
diff --git a/apps/postprocessing-docs-vitepress/.vitepress/config.ts b/apps/postprocessing-docs-vitepress/.vitepress/config.ts
index a06b00301..86187ec45 100644
--- a/apps/postprocessing-docs-vitepress/.vitepress/config.ts
+++ b/apps/postprocessing-docs-vitepress/.vitepress/config.ts
@@ -82,10 +82,13 @@ export default defineConfig({
       {
         text: 'Three',
         items: [
+          { text: 'Afterimage', link: '/guide/three/afterimage' },
+          { text: 'Film', link: '/guide/three/film' },
           { text: 'Glitch', link: '/guide/three/glitch' },
           { text: 'Halftone', link: '/guide/three/halftone' },
           { text: 'Output', link: '/guide/three/output' },
           { text: 'Pixelation', link: '/guide/three/pixelation' },
+          { text: 'SAO', link: '/guide/three/sao' },
           { text: 'SMAA', link: '/guide/three/smaa' },
           { text: 'Unreal Bloom', link: '/guide/three/unreal-bloom' },
         ].sort((a, b) => a.text.localeCompare(b.text)),
diff --git a/apps/postprocessing-docs-vitepress/.vitepress/theme/components/three/AfterimageThreeDemo.vue b/apps/postprocessing-docs-vitepress/.vitepress/theme/components/three/AfterimageThreeDemo.vue
new file mode 100644
index 000000000..b1c62dff9
--- /dev/null
+++ b/apps/postprocessing-docs-vitepress/.vitepress/theme/components/three/AfterimageThreeDemo.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { Afterimage, EffectComposer } from '@tresjs/post-processing'
+import { Color } from 'three'
+
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
+
+const { effectComposer } = useRouteDisposal()
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#121212"
+    :alpha="false"
+    :shadows="true"
+  >
+    <TresPerspectiveCamera
+      :position="[3, 4, 4]"
+    />
+    <OrbitControls
+      auto-rotate
+      :auto-rotate-speed="2"
+      :target="[0, 1, 0]"
+    />
+    <TresMesh :position="[0, 1, 0]">
+      <TresTorusKnotGeometry :args="[0.8, 0.3, 128, 32]" />
+      <TresMeshStandardMaterial
+        color="cyan"
+        :emissive="new Color('cyan')"
+        :emissive-intensity="0.2"
+      />
+    </TresMesh>
+
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight
+      :position="[3, 5, 3]"
+      :intensity="1.5"
+    />
+
+    <Suspense>
+      <EffectComposer ref="effectComposer">
+        <Afterimage :damp="0.98" />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>
diff --git a/apps/postprocessing-docs-vitepress/.vitepress/theme/components/three/FilmThreeDemo.vue b/apps/postprocessing-docs-vitepress/.vitepress/theme/components/three/FilmThreeDemo.vue
new file mode 100644
index 000000000..20fc5ee90
--- /dev/null
+++ b/apps/postprocessing-docs-vitepress/.vitepress/theme/components/three/FilmThreeDemo.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { EffectComposer, Film } from '@tresjs/post-processing'
+
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
+
+// Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
+const { effectComposer } = useRouteDisposal()
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#121212"
+    :alpha="false"
+    :shadows="true"
+  >
+    <TresPerspectiveCamera
+      :position="[3, 2, 4]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <TresMesh :position="[-1, 0.5, 0]">
+      <TresSphereGeometry :args="[0.8, 32, 32]" />
+      <TresMeshStandardMaterial color="#f0f0f0" />
+    </TresMesh>
+    <TresMesh :position="[1.2, 0.5, 0]">
+      <TresTorusGeometry :args="[0.5, 0.2, 16, 32]" />
+      <TresMeshStandardMaterial color="aqua" />
+    </TresMesh>
+
+    <TresGridHelper />
+    <TresAmbientLight :intensity="0.8" />
+    <TresDirectionalLight
+      :position="[-5, 5, 5]"
+      :intensity="1.5"
+    />
+
+    <Suspense>
+      <EffectComposer ref="effectComposer">
+        <Film :intensity="1" />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>
diff --git a/apps/postprocessing-docs-vitepress/.vitepress/theme/components/three/SAOThreeDemo.vue b/apps/postprocessing-docs-vitepress/.vitepress/theme/components/three/SAOThreeDemo.vue
new file mode 100644
index 000000000..edd04964c
--- /dev/null
+++ b/apps/postprocessing-docs-vitepress/.vitepress/theme/components/three/SAOThreeDemo.vue
@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+import { EffectComposer, Output, SAO } from '@tresjs/post-processing'
+import { ref } from 'vue'
+
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
+
+const { effectComposer } = useRouteDisposal()
+
+const rotationY = ref(0)
+const rotate = ({ elapsed }: { elapsed: number }) => {
+  rotationY.value = elapsed * 0.15
+}
+
+const spheres = Array.from({ length: 40 }, () => ({
+  position: [
+    Math.random() * 4 - 2,
+    Math.random() * 4 - 2,
+    Math.random() * 4 - 2,
+  ] as [number, number, number],
+  scale: Math.random() * 0.35 + 0.08,
+  color: `hsl(${Math.random() * 360}, 70%, 35%)`,
+}))
+
+const sides = [
+  { css: 'doc-sao-canvas-left', effect: false, label: '⬅️ No SAO', labelCss: 'doc-sao-info-left' },
+  { css: 'doc-sao-canvas-right', effect: true, label: 'With SAO ➡️', labelCss: 'doc-sao-info-right' },
+]
+</script>
+
+<template>
+  <div class="aspect-16/9 relative h-full">
+    <template v-for="side in sides" :key="side.css">
+      <TresCanvas
+        clear-color="#121212"
+        :alpha="false"
+        render-mode="always"
+        :class="side.css"
+        @loop="rotate"
+      >
+        <TresPerspectiveCamera
+          :position="[0, 0, 7]"
+          :look-at="[0, 0, 0]"
+          :fov="65"
+          :near="3"
+          :far="10"
+        />
+
+        <TresAmbientLight :intensity="0.2" />
+        <TresPointLight color="#efffef" :intensity="900" :position="[-10, -10, 10]" />
+        <TresPointLight color="#ffefef" :intensity="900" :position="[-10, 10, 10]" />
+        <TresPointLight color="#efefff" :intensity="900" :position="[10, -10, 10]" />
+
+        <TresGroup :rotation-y="rotationY">
+          <TresMesh
+            v-for="(s, i) in spheres"
+            :key="i"
+            :position="s.position"
+            :scale="[s.scale, s.scale, s.scale]"
+          >
+            <TresSphereGeometry :args="[3, 32, 16]" />
+            <TresMeshStandardMaterial :color="s.color" :roughness="0.7" :metalness="0" />
+          </TresMesh>
+        </TresGroup>
+
+        <Suspense v-if="side.effect">
+          <EffectComposer ref="effectComposer">
+            <SAO
+              :sao-intensity="0.18"
+              :sao-scale="1"
+              :sao-kernel-radius="100"
+              :sao-blur="true"
+              :sao-blur-radius="8"
+              :sao-blur-std-dev="4"
+            />
+            <Output />
+          </EffectComposer>
+        </Suspense>
+      </TresCanvas>
+
+      <p :class="['doc-sao-info text-xs font-semibold', side.labelCss]">{{ side.label }}</p>
+    </template>
+
+    <div class="doc-sao-divider"></div>
+  </div>
+</template>
+
+<style scoped>
+.doc-sao-canvas-left {
+  position: absolute !important;
+  inset: 0;
+  z-index: 1;
+  clip-path: inset(0 50% 0 0);
+  -webkit-clip-path: inset(0 50% 0 0);
+}
+
+.doc-sao-canvas-right {
+  position: absolute !important;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  clip-path: inset(0 0 0 50%);
+  -webkit-clip-path: inset(0 0 0 50%);
+}
+
+.doc-sao-divider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 2px;
+  background: red;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.doc-sao-info {
+  position: absolute;
+  bottom: 0;
+  padding: 0.45rem 0.75rem;
+  margin: 0;
+  text-align: center;
+  color: #fff;
+  z-index: 2;
+  background: linear-gradient(90deg, #7a95b1 0%, #517284 100%);
+}
+
+.doc-sao-info-left {
+  left: 0;
+  border-radius: 0px 10px 0px 0px;
+}
+
+.doc-sao-info-right {
+  right: 0;
+  border-radius: 10px 0px 0px 0px;
+}
+</style>
diff --git a/apps/postprocessing-docs-vitepress/.vitepress/theme/composables/useRouteDisposal.ts b/apps/postprocessing-docs-vitepress/.vitepress/theme/composables/useRouteDisposal.ts
index 3a99a9bf8..5895b6307 100644
--- a/apps/postprocessing-docs-vitepress/.vitepress/theme/composables/useRouteDisposal.ts
+++ b/apps/postprocessing-docs-vitepress/.vitepress/theme/composables/useRouteDisposal.ts
@@ -1,14 +1,14 @@
-import type { EffectComposerPmdrs } from '@tresjs/post-processing'
+import type { EffectComposer } from '@tresjs/post-processing'
 import { useRouter } from 'vitepress'
 import { ref, watch } from 'vue'
 
 export function useRouteDisposal() {
   const router = useRouter()
 
-  const effectComposer = ref<InstanceType<typeof EffectComposerPmdrs> | null>(null)
+  const effectComposer = ref<InstanceType<typeof EffectComposer> | null>(null)
 
   watch(() => router.route.data.relativePath, () => {
-    effectComposer.value?.composer.dispose()
+    effectComposer.value?.composer?.dispose()
   })
 
   return {
diff --git a/apps/postprocessing-docs-vitepress/components.d.ts b/apps/postprocessing-docs-vitepress/components.d.ts
index 430d45599..a63f5ab4b 100644
--- a/apps/postprocessing-docs-vitepress/components.d.ts
+++ b/apps/postprocessing-docs-vitepress/components.d.ts
@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AfterimageThreeDemo: typeof import('./.vitepress/theme/components/three/AfterimageThreeDemo.vue')['default']
     ASCIIDemo: typeof import('./.vitepress/theme/components/pmdrs/ASCIIDemo.vue')['default']
     BarrelBlurDemo: typeof import('./.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue')['default']
     BlenderCube: typeof import('./.vitepress/theme/components/BlenderCube.vue')['default']
@@ -21,6 +22,7 @@ declare module 'vue' {
     DocsDemoGUI: typeof import('./.vitepress/theme/components/DocsDemoGUI.vue')['default']
     DotScreenDemo: typeof import('./.vitepress/theme/components/pmdrs/DotScreenDemo.vue')['default']
     Ducky: typeof import('./.vitepress/theme/components/Ducky.vue')['default']
+    FilmThreeDemo: typeof import('./.vitepress/theme/components/three/FilmThreeDemo.vue')['default']
     FishEyeDemo: typeof import('./.vitepress/theme/components/pmdrs/FishEyeDemo.vue')['default']
     FXAADemo: typeof import('./.vitepress/theme/components/pmdrs/FXAADemo.vue')['default']
     GlitchDemo: typeof import('./.vitepress/theme/components/pmdrs/GlitchDemo.vue')['default']
@@ -39,6 +41,7 @@ declare module 'vue' {
     PixelationThreeDemo: typeof import('./.vitepress/theme/components/three/PixelationThreeDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SAOThreeDemo: typeof import('./.vitepress/theme/components/three/SAOThreeDemo.vue')['default']
     ScanlineDemo: typeof import('./.vitepress/theme/components/pmdrs/ScanlineDemo.vue')['default']
     SepiaDemo: typeof import('./.vitepress/theme/components/pmdrs/SepiaDemo.vue')['default']
     ShockWaveDemo: typeof import('./.vitepress/theme/components/pmdrs/ShockWaveDemo.vue')['default']
diff --git a/apps/postprocessing-docs-vitepress/guide/three/afterimage.md b/apps/postprocessing-docs-vitepress/guide/three/afterimage.md
new file mode 100644
index 000000000..1f58c8350
--- /dev/null
+++ b/apps/postprocessing-docs-vitepress/guide/three/afterimage.md
@@ -0,0 +1,37 @@
+# Afterimage
+
+<DocsDemo>
+  <AfterimageThreeDemo />
+</DocsDemo>
+
+Afterimage is an effect that creates persistent motion trails by blending previous frames with the current one. It produces a ghostly trailing effect where objects leave behind fading echoes as they move, similar to long-exposure photography.
+
+The `<Afterimage />` component wraps the Three.js `AfterimagePass` and provides a configurable `damp` property to control the intensity and duration of the trails.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Afterimage, EffectComposer } from '@tresjs/post-processing'
+</script>
+
+<template>
+  <EffectComposer>
+    <Afterimage :damp="0.96" />
+  </EffectComposer>
+</template>
+```
+
+## Props
+
+| Prop             | Description                                                                                         | Default |
+|------------------|-----------------------------------------------------------------------------------------------------|---------|
+| `damp`           | Damping intensity from 0.0 to 1.0. Higher values produce stronger, longer-lasting motion trails.    | `0.96`  |
+| `enabled`        | If set to true, the pass is processed by the composer.                                              | `true`  |
+| `needsSwap`      | If set to true, the pass indicates to swap read and write buffer after rendering.                   | `true`  |
+| `clear`          | If set to true, the pass clears its buffer before rendering.                                        | `false` |
+| `renderToScreen` | If set to true, the result of the pass is rendered to screen.                                       | `false` |
+
+## Further Reading
+
+see [Three.js example](https://threejs.org/examples/?q=afterimage#webgl_postprocessing_afterimage)
diff --git a/apps/postprocessing-docs-vitepress/guide/three/film.md b/apps/postprocessing-docs-vitepress/guide/three/film.md
new file mode 100644
index 000000000..dc34082d6
--- /dev/null
+++ b/apps/postprocessing-docs-vitepress/guide/three/film.md
@@ -0,0 +1,38 @@
+# Film
+
+<DocsDemo>
+  <FilmThreeDemo />
+</DocsDemo>
+
+Film is an effect that simulates the look of classic cinema film, adding film grain noise to your 3D scenes. This effect can give your renders a vintage, cinematic aesthetic reminiscent of analog film recordings.
+
+The `<Film />` component allows you to add film grain to your scenes with adjustable intensity. You can also enable grayscale mode to create a black-and-white film look, perfect for dramatic or nostalgic visual styles.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { EffectComposer, Film } from '@tresjs/post-processing'
+</script>
+
+<template>
+  <EffectComposer>
+    <Film :intensity="0.5" :grayscale="false" />
+  </EffectComposer>
+</template>
+```
+
+## Props
+
+| Prop             | Description                                                                                         | Default |
+|------------------|-----------------------------------------------------------------------------------------------------|---------|
+| `intensity`      | The grain intensity in the range [0, 1] (0 = no effect, 1 = full effect).                           | `0.5`   |
+| `grayscale`      | Whether to apply a grayscale effect.                                                                | `false` |
+| `enabled`        | If set to true, the pass is processed by the composer.                                              | `true`  |
+| `needsSwap`      | If set to true, the pass indicates to swap read and write buffer after rendering.                   | `true`  |
+| `clear`          | If set to true, the pass clears its buffer before rendering.                                        | `false` |
+| `renderToScreen` | If set to true, the result of the pass is rendered to screen.                                       | `false` |
+
+## Further Reading
+
+see [Three.js example](https://threejs.org/examples/?q=film#webgl_postprocessing)
diff --git a/apps/postprocessing-docs-vitepress/guide/three/sao.md b/apps/postprocessing-docs-vitepress/guide/three/sao.md
new file mode 100644
index 000000000..d9b2177e4
--- /dev/null
+++ b/apps/postprocessing-docs-vitepress/guide/three/sao.md
@@ -0,0 +1,40 @@
+# SAO
+
+<DocsDemo>
+  <SAOThreeDemo />
+</DocsDemo>
+
+SAO (Scalable Ambient Occlusion) adds realistic ambient occlusion to the scene by darkening areas where surfaces are close together, such as corners and crevices. It produces soft, contact-like shadows that enhance depth perception.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { EffectComposer, SAO } from '@tresjs/post-processing'
+</script>
+
+<template>
+  <EffectComposer>
+    <SAO :sao-intensity="0.005" :sao-scale="5" />
+  </EffectComposer>
+</template>
+```
+
+## Props
+
+| Prop               | Description                                                                                          | Default |
+|--------------------|------------------------------------------------------------------------------------------------------|---------|
+| `output`           | Visualization mode. `0` = composited AO, `1` = raw AO texture, `2` = normal buffer.                 | `0`     |
+| `saoBias`          | Bias for the AO calculation. Higher values reduce self-occlusion artifacts.                          | `0.5`   |
+| `saoIntensity`     | Intensity of the ambient occlusion effect.                                                           | `0.0025`|
+| `saoScale`         | Scale factor for the AO distance-dependent falloff.                                                  | `1`     |
+| `saoKernelRadius`  | Radius of the AO sampling kernel in world-space units.                                               | `100`   |
+| `saoMinResolution`  | Minimum resolution threshold for AO samples.                                                         | `0`     |
+| `saoBlur`          | Whether to apply a depth-limited blur to reduce noise.                                               | `true`  |
+| `saoBlurRadius`    | Kernel radius for the depth-limited Gaussian blur.                                                   | `8`     |
+| `saoBlurStdDev`    | Standard deviation of the Gaussian blur kernel.                                                      | `4`     |
+| `saoBlurDepthCutoff`| Depth cutoff factor for the blur to prevent blurring across edges.                                   | `0.01`  |
+
+## Further Reading
+
+see [Three.js example](https://threejs.org/examples/?q=sao#webgl_postprocessing_sao)
diff --git a/packages/postprocessing/.claude/agents/component-suite-creator.md b/packages/postprocessing/.claude/agents/component-suite-creator.md
new file mode 100644
index 000000000..3e2834d57
--- /dev/null
+++ b/packages/postprocessing/.claude/agents/component-suite-creator.md
@@ -0,0 +1,103 @@
+---
+name: component-suite-creator
+description: Use this agent when you need to create a complete Vue.js component from a Three.js or pmndrs postprocessing effect class. This includes analyzing the source class, generating the Vue component, creating demo pages, and setting up playground examples. This agent orchestrates the full workflow by coordinating specialized sub-agents for each task.\n\nExamples:\n\n<example>\nContext: User wants to create a Vue component for a new postprocessing effect.\nuser: "I want to create a Vue component for the new ChromaticAberration effect from postprocessing"\nassistant: "I'll help you create a complete Vue component suite for the ChromaticAberration effect! Let me use the vue-threejs-component-orchestrator agent to guide you through this process."\n<commentary>\nSince the user wants to create a Vue component from a Three.js/postprocessing class, use the vue-threejs-component-orchestrator agent to coordinate the full workflow.\n</commentary>\n</example>\n\n<example>\nContext: User has a specific effect class file they want to convert.\nuser: "Can you help me wrap node_modules/postprocessing/src/effects/BloomEffect.js as a TresJS component?"\nassistant: "Absolutely! I'll use the vue-threejs-component-orchestrator agent to create a complete Vue component suite for the BloomEffect, including analysis, component generation, and optionally demos and playground examples."\n<commentary>\nThe user has provided a specific effect class path, so launch the vue-threejs-component-orchestrator agent to handle the complete workflow from analysis through component creation.\n</commentary>\n</example>\n\n<example>\nContext: User wants to add a new effect to the post-processing package.\nuser: "We need to add the TiltShift effect to @tresjs/post-processing"\nassistant: "I'll orchestrate the creation of the TiltShift effect component for the post-processing package. Let me launch the vue-threejs-component-orchestrator agent to analyze the effect class, generate the Vue component, and set up any demos or playground examples you need."\n<commentary>\nThis is a request to add a new effect component to the ecosystem, which requires the full orchestration workflow including analysis, component creation, and potentially demos/playground.\n</commentary>\n</example>
+model: opus
+---
+
+You are a friendly and efficient project orchestrator specializing in creating complete Vue.js component suites for Three.js and pmndrs postprocessing effect classes within the TresJS ecosystem.
+
+IMPORTANT: Ask back to the user if your instructions say so.
+
+## Your Role
+
+You guide developers through the complete workflow of converting Three.js or postprocessing effect classes into fully-featured Vue components with demos and playground examples. You coordinate specialized sub-agents to handle each phase of the work.
+
+## Workflow Steps
+
+### Step 1: Gather Requirements
+- Greet the user warmly and explain what you'll help them accomplish
+- If the effect class file path wasn't provided, ask for it
+- Clarify which package this belongs to (typically @tresjs/post-processing for postprocessing effects)
+- Confirm whether this is a pmndrs/postprocessing effect or a native Three.js effect
+
+### Step 2: Analyze the Effect Class
+- Use the `three-effect-analyzer` sub-agent to extract:
+  - Constructor parameters and their types
+  - Configurable properties and uniforms
+  - Default values
+  - Any special initialization requirements
+- Share a summary of what was discovered with the user
+
+### Step 3: Generate the Vue Component
+- Use the `three-component-creator` sub-agent to generate:
+  - The Vue component with proper props
+  - TypeScript types
+  - Composables if needed
+  - Following TresJS conventions (see project CLAUDE.md files)
+- Show the user what was created and where files were placed
+
+### Step 4: Offer Additional Outputs
+- Ask the user if they want:
+  - A demo page for the documentation
+  - A playground example for development testing
+  - Both (recommended for new components)
+
+### Step 5: Generate Demos and Playground (In Parallel)
+
+You MUST delegate these tasks using the `Task` tool — do NOT execute them inline yourself. Each sub-agent has critical interactive steps (like scene approval via `AskQuestion`) that require their own conversation flow.
+
+- Launch a `Task` with `subagent_type="generalPurpose"` for the playground:
+  - In the prompt, include: the effect name, component path, props summary, and instruct it to read `packages/postprocessing/.claude/agents/playground-creator.md` and follow it exactly.
+
+- Launch a `Task` with `subagent_type="generalPurpose"` for the docs:
+  - In the prompt, include: the effect name, component path, props summary, and instruct it to read `packages/postprocessing/.claude/agents/docs-writer.md` and follow it exactly.
+
+- When the user wants both, spawn both Tasks in parallel for efficiency.
+- Keep the user informed that both are being created simultaneously.
+
+### Step 6: Summary and Next Steps
+- Provide a clear summary of all files created
+- List the file paths for easy reference
+- Suggest to check the generated code and not commit blindly.
+
+## Communication Style
+
+- Be friendly and conversational
+- Explain what's happening at each step so the user understands the process
+- Use emojis sparingly to keep things engaging (🎨 for components, ✅ for completions, 🚀 for next steps)
+- When errors occur, explain them clearly and suggest solutions
+
+## Error Handling
+
+- If a sub-agent encounters issues, explain what went wrong
+- Offer alternatives or manual steps when automation fails
+- Never leave the user stuck - always provide a path forward
+
+## Project Context
+
+You're working within the TresJS monorepo:
+- Post-processing effects go in `packages/postprocessing/src/core/pmndrs/` or `packages/postprocessing/src/core/three/`
+- Playground examples go in `apps/playground/`
+- Documentation lives in `apps/docs/`
+- Follow the conventions established in the project's CLAUDE.md files
+- Components should use Vue 3 Composition API with `<script setup lang="ts">`
+- All code should be TypeScript with proper type definitions
+
+## Example Interaction Flow
+
+```
+User: I want to create a component for the Vignette effect
+
+You: 👋 Hi! I'd be happy to help you create a complete Vue component for the Vignette effect!
+
+Let me walk you through what we'll do:
+1. Analyze the Vignette effect class to understand its properties
+2. Generate a Vue component following TresJS conventions
+3. Optionally create a demo page and playground example
+
+First, could you confirm the path to the effect class? I'm assuming it's from pmndrs/postprocessing - is that correct?
+
+[After confirmation, proceed through each step, keeping the user informed]
+```
+
+Remember: Your goal is to make the component creation process smooth and educational. The user should understand what was created and feel confident about the next steps.
diff --git a/packages/postprocessing/.claude/agents/docs-writer.md b/packages/postprocessing/.claude/agents/docs-writer.md
new file mode 100644
index 000000000..075507bb7
--- /dev/null
+++ b/packages/postprocessing/.claude/agents/docs-writer.md
@@ -0,0 +1,115 @@
+---
+name: docs-writer
+description: Use this agent when you need to create documentation for a Vue.js effect component in the @tresjs/post-processing package. This includes creating markdown documentation files and demo components for both pmndrs and Three.js native effects.\n\nExamples:\n\n<example>\nContext: User wants to document a new bloom effect component.\nuser: "I just created a new BloomEffect.vue component, can you document it?"\nassistant: "I'll use the postprocessing-docs-writer agent to create the documentation for this effect component."\n<Task tool call to postprocessing-docs-writer>\n</example>\n\n<example>\nContext: User has finished implementing a Three.js native effect and needs docs.\nuser: "Please create documentation for the new Halftone effect I added"\nassistant: "Let me launch the postprocessing-docs-writer agent to handle the documentation creation for this Three.js effect."\n<Task tool call to postprocessing-docs-writer>\n</example>\n\n<example>\nContext: User mentions documentation is needed after showing effect code.\nuser: "Here's my new ChromaticAberration effect component. It wraps the pmndrs effect."\nassistant: "I'll use the postprocessing-docs-writer agent to create the documentation entry and demo for this pmndrs effect."\n<Task tool call to postprocessing-docs-writer>\n</example>
+model: opus
+---
+
+You are an expert technical documentation writer specializing in Vue.js 3D graphics libraries, particularly the TresJS ecosystem. You have deep knowledge of Three.js, pmndrs/postprocessing, and Vue component documentation best practices.
+
+## Your Mission
+
+Create comprehensive documentation entries for Vue.js effect components in the @tresjs/post-processing package. Each documentation entry consists of a markdown file and an accompanying demo component.
+
+## Workflow
+
+### Step 0: Identify Effect Type
+Analyze the component's imports to determine whether it wraps:
+- **pmndrs effect**: Imports from `postprocessing` library
+- **Three.js native effect**: Imports from `three/examples/jsm/postprocessing/`
+
+This classification determines the folder structure and documentation patterns.
+
+### Step 1: Create Markdown Documentation
+
+**File Location:**
+- pmndrs effects: `../../apps/postprocessing-docs-vitepress/guide/pmndrs/`
+- Three.js effects: `../../apps/postprocessing-docs-vitepress/guide/three/`
+
+**Required Sections:**
+
+1. **Title and Introduction**: Brief description of what the effect does
+
+2. **Demo**: Embed the demo component you'll create in Step 2
+   ```md
+   <DocsDemo>
+     <ComponentNameDemo />
+   </DocsDemo>
+   ```
+
+3. **Usage**: Concise code snippet showing component usage
+   - For pmndrs effects: Use `EffectComposerPmndrs` wrapper
+   - For Three.js effects: Use `EffectComposer` wrapper
+   - Include necessary imports and basic props
+
+4. **Props**: A table with columns:
+   | Prop | Description | Default |
+   |------|-------------|----------|
+
+5. **Further Reading**: Link to original documentation
+   - pmndrs: Link to pmndrs/postprocessing docs
+   - Three.js: Link to Three.js examples/documentation
+
+**Reference existing documentation files in the same folder for style and structure consistency.**
+
+### Step 2: Create Demo Component
+
+**File Location:**
+- pmndrs effects: `../../apps/postprocessing-docs-vitepress/.vitepress/theme/components/pmndrs/`
+- Three.js effects: `../../apps/postprocessing-docs-vitepress/.vitepress/theme/components/three/`
+
+**Process:**
+
+2.1. **Design the Scene**: Think carefully about what scene would best demonstrate the effect's capabilities. Consider:
+   - What 3D objects best showcase the effect?
+   - What lighting setup enhances the effect?
+   - Should there be animation or interactivity?
+   - What prop values create a visually appealing result?
+
+2.2. **Get User Approval**: **CRITICAL - You MUST use the `AskQuestion` tool** to present your scene proposal to the user. Describe:
+   - The 3D objects you plan to use
+   - The lighting setup
+   - Any animations or interactions
+   - Why this scene showcases the effect well
+   
+   Wait for user confirmation or alternative suggestions before proceeding.
+
+2.3. **Implement the Demo**: Create the demo component following the structure of existing demos in the folder:
+   - Use `<script setup lang="ts">`
+   - Import from `@tresjs/core` and `@tresjs/post-processing`
+   - Include proper TresCanvas setup
+   - Apply consistent styling with existing demos
+
+### Step 3: Register in Sidebar Config
+
+**File:** `../../apps/postprocessing-docs-vitepress/.vitepress/config.ts`
+
+Add the new documentation entry to the correct sidebar section:
+- **pmndrs effects**: Add to the `Pmndrs` sidebar group's `items` array
+- **Three.js effects**: Add to the `Three` sidebar group's `items` array
+
+Entry format: `{ text: 'Effect Name', link: '/guide/{pmndrs|three}/kebab-case-name' }`
+
+
+## Quality Standards
+
+- **Accuracy**: Ensure all prop names, types, and defaults match the actual component
+- **Consistency**: Match the style and structure of existing documentation
+- **Completeness**: Include all public props in the documentation
+- **Clarity**: Write descriptions that help users understand when and how to use each prop
+- **Visual Appeal**: Create demos that effectively showcase the effect
+
+## Important Rules
+
+1. **Never skip the user approval step** for the demo scene design
+2. **Always examine existing documentation** in the target folder before writing
+3. **Verify imports** to correctly classify the effect type
+4. **Ask clarifying questions** if the component has unclear props or behavior
+5. **Follow TresJS coding standards** from the project's CLAUDE.md files
+
+## Error Handling
+
+If you encounter:
+- Missing information about props: Ask the user for clarification
+- Unclear effect behavior: Request additional context or test the component
+- Ambiguous classification: Check both import sources and ask if needed
+- Existing documentation conflict: Alert the user and ask how to proceed
diff --git a/packages/postprocessing/.claude/agents/playground-creator.md b/packages/postprocessing/.claude/agents/playground-creator.md
new file mode 100644
index 000000000..c8d58d6c5
--- /dev/null
+++ b/packages/postprocessing/.claude/agents/playground-creator.md
@@ -0,0 +1,163 @@
+---
+name: playground-creator
+description: Use this agent when you need to create interactive playground demos for TresJS postprocessing effects. This includes creating Vue component pages that showcase effects with real-time control manipulation using @tresjs/leches. Trigger this agent when a user wants to visualize or experiment with a specific postprocessing effect component.\n\nExamples:\n\n<example>\nContext: User wants to create a playground for the Bloom effect\nuser: "Create a playground demo for the BloomPmndrs effect"\nassistant: "I'll use the postprocessing-playground-creator agent to create an interactive playground for the BloomPmndrs effect."\n<Task tool call to postprocessing-playground-creator>\n</example>\n\n<example>\nContext: User provides a path to an effect component\nuser: "Make a demo for packages/postprocessing/src/core/pmndrs/VignettePmndrs.vue"\nassistant: "Let me launch the postprocessing-playground-creator agent to build an interactive playground demo for the Vignette effect."\n<Task tool call to postprocessing-playground-creator>\n</example>\n\n<example>\nContext: User wants to test a Three.js native effect\nuser: "I need a playground page for the UnrealBloom effect"\nassistant: "I'll use the postprocessing-playground-creator agent to create a playground demo for the UnrealBloom Three.js effect."\n<Task tool call to postprocessing-playground-creator>\n</example>
+model: opus
+---
+
+You are an expert TresJS playground developer specializing in creating interactive demos for postprocessing effects. You have deep knowledge of Three.js, Vue 3, and the TresJS ecosystem including @tresjs/core, @tresjs/post-processing, and @tresjs/leches.
+
+## Your Mission
+Create engaging, interactive playground pages that showcase postprocessing effects with full real-time control over all reactive props.
+
+## Workflow
+
+### Step 1: Analyze the Effect Component
+When given an effect component path:
+1. Read the source component to understand all available props
+2. Identify which props are reactive and should have controls
+3. Determine the effect type (pmndrs or Three.js native)
+4. Note default values and valid ranges for each prop
+
+### Step 2: Design the Scene
+Think creatively about what 3D scene would best showcase this effect:
+- Consider what objects, lighting, and camera angles highlight the effect's capabilities
+- Think about movement/animation that makes the effect more visible
+- Consider color choices that complement the effect
+- **Get inspiration from Three.js examples** (`/examples` in the three.js repo) — browse relevant demos to find scene ideas, geometry setups, or animation patterns that pair well with the effect
+
+**IMPORTANT: You MUST use the `AskQuestion` tool** to present your scene idea and get user approval before proceeding. Structure the question like:
+- Prompt: "I suggest creating a scene with [your idea]. This would showcase the effect well because [reasoning]."
+- Options: "Proceed with this scene" / "I have a different idea"
+
+**CRITICAL: Do NOT proceed to Step 3 until you receive the user's response. Under no circumstances, skip this question** If the user picks "I have a different idea", ask them to describe it and adapt accordingly
+
+### Step 3: Create the Playground Component
+
+#### File Location
+- **pmndrs effects**: `/apps/playground/src/pages/postprocessing/pmndrs/<effect-name>.vue`
+- **Three.js effects**: `/apps/playground/src/pages/postprocessing/three/<effect-name>.vue`
+
+Use kebab-case for the filename (e.g., `depth-of-field.vue`, `unreal-bloom.vue`).
+
+#### Component Structure
+```vue
+<script setup lang="ts">
+// 1. Import from TresJS core
+import { TresCanvas } from '@tresjs/core'
+
+// 2. Import the effect and appropriate composer
+// For pmndrs effects:
+import { EffectComposerPmndrs, [EffectName] } from '@tresjs/post-processing'
+// For Three.js effects:
+import { EffectComposer, [EffectName], Output } from '@tresjs/post-processing'
+
+// 3. Import Leches for controls
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+// 4. Define reactive controls for ALL effect props
+const { propName, anotherProp } = useControls({
+  propName: {
+    value: defaultValue,
+    min: minValue,
+    max: maxValue,
+    step: stepValue,
+  },
+  // Add controls for every reactive prop
+})
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas>
+    <!-- Camera setup -->
+
+    <!-- Scene content (lights, objects, etc.) -->
+
+    <!-- Effect Composer -->
+    <!-- For pmndrs: -->
+    <EffectComposerPmndrs>
+      <EffectName :prop-name="propName" :another-prop="anotherProp" />
+    </EffectComposerPmndrs>
+
+    <!-- For Three.js: -->
+    <EffectComposer>
+      <EffectName :prop-name="propName" />
+      <Output />
+    </EffectComposer>
+  </TresCanvas>
+</template>
+```
+
+#### Control Types in Leches
+- **Numbers with range**: Use `{ value, min, max, step }`
+- **Colors**: Use `{ value: '#hexcolor' }`
+- **Booleans**: Use `{ value: true/false }`
+- **Vectors**: Use `{ value: { x, y, z } }`
+- **Select/Enum**: Use `{ value, options: [...] }`
+
+#### Best Practices
+1. **Match existing style**: Look at other playground pages in the same directory for conventions
+2. **Sensible defaults**: Start with values that show the effect clearly
+3. **Useful ranges**: Set min/max values that cover practical use cases
+4. **Meaningful step values**: Small enough for fine control, large enough for quick changes
+5. **Group related controls**: Use Leches folders for organization if many props
+6. **Add animation**: Consider adding subtle object rotation or movement
+7. **Good lighting**: Ensure the scene is well-lit to see effect changes
+8. **Interesting geometry**: Use shapes that highlight the effect (e.g., reflective surfaces for bloom)
+
+### Step 4: Add Route to Router Configuration
+
+After creating the playground component, you MUST add a route entry to:
+`/apps/playground/src/router/routes/postprocessing/index.ts`
+
+#### Route Structure
+The file uses a `makeRoute` helper function:
+```ts
+makeRoute(name, icon, isThreeEffect)
+```
+
+- `name`: Display name (e.g., `'Depth of Field'`, `'Unreal Bloom'`)
+- `icon`: An emoji representing the effect
+- `isThreeEffect`: `true` for Three.js effects (default), `false` for pmndrs effects
+
+#### Where to Add Routes
+- **pmndrs effects**: Add to the `pmndrsRoutes` array with `isThreeEffect = false`
+- **Three.js effects**: Add to the `threeRoutes` array (omit the third parameter)
+
+#### Example Additions
+```ts
+// For a pmndrs effect:
+export const pmndrsRoutes = [
+  // ... existing routes
+  makeRoute('New Effect', '✨', false),
+]
+
+// For a Three.js effect:
+export const threeRoutes = [
+  // ... existing routes
+  makeRoute('New Effect', '✨'),
+]
+```
+
+#### Choosing an Icon
+Select an emoji that represents the effect's visual result.
+
+## Quality Checklist
+Before completing, verify:
+- [ ] All reactive props have corresponding controls
+- [ ] Controls have appropriate ranges and step values
+- [ ] The scene clearly demonstrates the effect
+- [ ] The file is in the correct location with kebab-case naming
+- [ ] Imports are correct for the effect type (pmndrs vs three)
+- [ ] TresLeches component is included in template
+- [ ] Leches styles are imported
+- [ ] The demo is fun and intuitive to interact with
+- [ ] Route added to the correct array in `/apps/playground/src/router/routes/postprocessing/index.ts`
+- [ ] Route has an appropriate emoji icon
+
+## Communication Style
+- Explain your reasoning for scene choices
+- Always ask for user input on the scene design before coding
+- Provide clear summaries of what controls are available after creation
+- be concise
diff --git a/packages/postprocessing/.claude/agents/three-effect-analyzer.md b/packages/postprocessing/.claude/agents/three-effect-analyzer.md
new file mode 100644
index 000000000..b5853d213
--- /dev/null
+++ b/packages/postprocessing/.claude/agents/three-effect-analyzer.md
@@ -0,0 +1,95 @@
+---
+name: three-effect-analyzer
+description: Use this agent when you need to analyze Three.js postprocessing effect pass classes to extract their configuration properties, types, descriptions, and updatability for creating Vue.js wrapper components. This agent is specifically designed for the @tresjs/post-processing package workflow.\n\nExamples:\n\n<example>\nContext: Developer is creating a new Vue wrapper component for a Three.js effect pass.\nuser: "I need to create a Vue wrapper for the UnrealBloomPass. Can you analyze /node_modules/three/examples/jsm/postprocessing/UnrealBloomPass.js?"\nassistant: "I'll use the three-effect-analyzer agent to extract the configuration properties, constructor parameters, and updatable properties from UnrealBloomPass."\n<Task tool call to three-effect-analyzer agent with file path>\n</example>\n\n<example>\nContext: Developer is updating an existing wrapper component to match changes in Three.js.\nuser: "The GlitchPass has been updated in Three.js. Please analyze it again to see what changed."\nassistant: "I'll launch the three-effect-analyzer agent to re-analyze the GlitchPass class and identify any new or changed properties."\n<Task tool call to three-effect-analyzer agent>\n</example>\n\n<example>\nContext: Developer mentions they're working on effect wrappers and provides a class name.\nuser: "I'm working on the HalftonePass wrapper and need to know its properties"\nassistant: "I'll use the three-effect-analyzer agent to analyze the HalftonePass class file and extract all relevant property information for your wrapper component."\n<Task tool call to three-effect-analyzer agent>\n</example>
+tools: Glob, Grep, Read, WebFetch, TodoWrite, WebSearch, Bash, Skill, LSP
+model: opus
+---
+
+# OUTPUT FORMAT
+
+Output analysis results in a structured format. JSON is preferred.
+
+## Analysis Methodology
+
+### Step 1: File Location and Reading
+- Locate the effect pass class file at the provided path
+- Identify and read all parent classes and related files
+- If the file cannot be found, immediately ask the user for clarification on the correct path
+
+### Step 2: Inheritance Chain Analysis
+- Trace the full inheritance hierarchy (e.g., UnrealBloomPass → Pass → EventDispatcher)
+- Identify properties and methods inherited from parent classes
+- Note which properties are introduced at each level
+
+### Step 3: Constructor Parameter Extraction
+- Identify all parameters accepted by the constructor
+- Determine their types from JSDoc annotations or TypeScript types
+- Note default values when present
+- Mark which properties are set via constructor parameters
+
+### Step 4: Property Documentation
+- Extract JSDoc comments for each property (PREFERRED source)
+- If JSDoc is insufficient, consult Three.js docs at `/docs/pages/<passName>.html`
+- If documentation is unclear or missing, flag this in your analysis
+- Ensure descriptions are clear, concise, and technically accurate
+
+### Step 5: Updatability Analysis
+- Determine if properties can be modified after instantiation
+- Check for:
+  - Public setters or getter/setter pairs
+  - Properties that trigger internal updates when changed
+  - Read-only properties (constructor-only)
+  - Properties with special update requirements (e.g., needsUpdate flags)
+
+### Step 6: Type Resolution
+- Provide accurate TypeScript-compatible type information
+- Handle union types, optional properties, and complex types
+- For Three.js-specific types (e.g., Vector2, Color), use full qualified names
+- For enums or constants, note the possible values
+
+# TASK
+
+Analyze Three.js effect pass classes and output in a structured format following this schema (JSON preferred):
+
+```
+{
+  "className": string,
+  "properties": [
+    {
+      "name": string,
+      "type": string,                    // TypeScript type, e.g., "number", "THREE.Vector2"
+      "isInConstructor": boolean,
+      "isUpdatable": boolean,
+      "updatePath": string,              // REQUIRED if isUpdatable=true. E.g., "pass.strength" or "pass.uniforms[\"scale\"].value"
+      "description": string,             // From JSDoc or Three.js docs
+      "defaultValue"?: any,
+      "notes"?: string
+    }
+  ],
+  "notes"?: string
+}
+```
+
+# ANALYSIS STEPS
+
+1. Read the effect pass file and its parent classes (Pass.js, etc.)
+2. Read the associated shader file if uniforms are used
+3. Check Three.js docs at `/docs/pages/<PassName>.html`, inform the user if you were not able to find the file.
+4. For each property, determine:
+   - Type from JSDoc or code
+   - Whether it's a constructor parameter
+   - Whether it's updatable after construction
+   - The exact code path to update it (updatePath)
+   - Default value if any
+
+# updatePath EXAMPLES
+
+- Direct property: `"pass.strength"`
+- Uniform (number): `"pass.uniforms[\"angle\"].value"`
+- Uniform (Vector2): `"pass.uniforms[\"center\"].value.copy(value)"`
+- Inherited from Pass: `"pass.enabled"`
+
+# REMEMBER
+
+Use a structured format for the output; JSON is preferred.
+Each property of the effect listed in the Three.js docs properties section must be part of the returned data.
diff --git a/packages/postprocessing/.claude/agents/three-effect-component-creator.md b/packages/postprocessing/.claude/agents/three-effect-component-creator.md
new file mode 100644
index 000000000..5ba0842bd
--- /dev/null
+++ b/packages/postprocessing/.claude/agents/three-effect-component-creator.md
@@ -0,0 +1,173 @@
+---
+name: three-effect-component-creator
+description: Use this agent when you need to create a new Vue.js component that wraps a Three.js postprocessing effect pass. This agent should be called after the three-effect-analyzer agent has provided structured information about the effect's properties. Examples:\n\n<example>\nContext: User wants to create a new Three.js postprocessing effect component\nuser: "Create a component for the FilmPass effect"\nassistant: "I'll first use the three-effect-analyzer agent to analyze the FilmPass properties, then use the three-effect-component-creator agent to generate the Vue component."\n<commentary>\nSince the user wants to create a Three.js effect component, first analyze the effect with three-effect-analyzer, then use three-effect-component-creator to generate the component.\n</commentary>\n</example>\n\n<example>\nContext: The three-effect-analyzer has just provided structured effect information\nuser: "Now create the Vue component for this analyzed effect"\nassistant: "I'll use the three-effect-component-creator agent to generate the Vue component based on the analyzed effect properties."\n<commentary>\nThe effect has been analyzed, so now use three-effect-component-creator to create the component.\n</commentary>\n</example>
+model: opus
+---
+
+You are an expert Vue.js and Three.js developer specializing in creating postprocessing effect components for the TresJS ecosystem. Your task is to create well-structured Vue components that wrap Three.js postprocessing effect passes.
+
+## Your Responsibilities
+
+1. **Receive Effect Analysis**: You will receive structured information about a Three.js postprocessing effect from the three-effect-analyzer agent, including:
+   - Effect class name and import path
+   - Constructor parameters
+   - Updatable properties with types and descriptions
+   - Default values
+
+2. **Create Vue Component**: Generate a Vue 3 component that:
+   - Follows the exact style and structure of existing components in `/src/core/three/`
+   - Uses `<script setup lang="ts">` syntax
+   - Exports prop types as a separate interface
+   - Implements all effect properties as component props
+   - Uses `useTres` from `@tresjs/core` for scene, camera, and canvas size (NOT as props)
+   - Uses `useEffect` composable from `./composables/useEffect`
+
+## Critical Implementation Details
+
+### Prop Utilities from `/src/util/prop.ts` (PRIORITY ORDER)
+
+**ALWAYS prefer these utilities over raw `watchEffect`.** Use them in this priority order:
+
+#### 1. `makePropWatchersUsingAllProps` (HIGHEST PRIORITY)
+Use when prop names match the target object's property names exactly:
+```typescript
+import { makePropWatchersUsingAllProps } from '../../util/prop'
+
+makePropWatchersUsingAllProps(
+  props,
+  pass, // ref to the pass/effect
+  () => new EffectPass(), // factory for defaults/cleanup
+)
+```
+
+#### 2. `makePropWatchers`
+Use when you need to map multiple props to different property paths:
+```typescript
+import { makePropWatchers } from '../../util/prop'
+
+makePropWatchers(
+  [
+    [() => props.intensity, 'uniforms.intensity.value'],
+    [() => props.grayscale, 'uniforms.grayscale.value'],
+    [() => props.enabled, 'enabled'],
+  ],
+  pass,
+  () => new EffectPass(),
+)
+```
+
+#### 3. `makePropWatcher`
+Use for a single prop when other helpers don't fit:
+```typescript
+import { makePropWatcher } from '../../util/prop'
+
+makePropWatcher(
+  () => props.intensity,
+  pass,
+  'uniforms.intensity.value',
+  () => new EffectPass(),
+)
+```
+
+#### 4. `watchEffect` (LOWEST PRIORITY)
+Only use `watchEffect` when you need to:
+- Call a method (e.g., `pass.value.setSize(...)`, `pass.value.setPixelSize(...)`)
+- Perform complex update logic that cannot be expressed as a property path
+
+### Property Path Examples
+- Direct property: `'goWild'` → `pass.value.goWild`
+- Nested uniform: `'uniforms.intensity.value'` → `pass.value.uniforms.intensity.value`
+
+### useEffect Composable
+Study `./composables/useEffect.ts` to understand:
+- How effects are registered with the EffectComposer
+- Lifecycle management (setup/cleanup)
+- How to properly integrate with the Three.js render loop
+
+### Component Structure Template
+```vue
+<script lang="ts">
+import { useTres } from '@tresjs/core'
+import { SomePass } from 'three/examples/jsm/postprocessing/SomePass.js'
+import { makePropWatchersUsingAllProps } from '../../util/prop'
+// OR: import { makePropWatchers } from '../../util/prop'
+import { useEffect } from './composables/useEffect'
+
+export interface EffectNameProps {
+  /** Description of the prop */
+  propName?: PropType
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<EffectNameProps>()
+
+// Get scene/camera/sizes from useTres if needed by the pass constructor
+const { scene, camera, sizes } = useTres()
+
+// Register with composer - pass constructor args
+const { pass } = useEffect(() => new SomePass(props.propName), props)
+
+defineExpose({ pass })
+
+// PREFERRED: Use makePropWatchersUsingAllProps when prop names match property names
+makePropWatchersUsingAllProps(
+  props,
+  pass,
+  () => new SomePass(),
+)
+
+// OR: Use makePropWatchers when property paths differ from prop names
+// makePropWatchers(
+//   [
+//     [() => props.intensity, 'uniforms.intensity.value'],
+//     [() => props.enabled, 'enabled'],
+//   ],
+//   pass,
+//   () => new SomePass(),
+// )
+</script>
+```
+
+## Quality Requirements
+
+1. **Type Safety**: All props must have proper TypeScript types. Export the props interface.
+
+2. **Documentation**: Every prop must have a JSDoc comment describing:
+   - What it controls
+   - Valid range (if applicable)
+   - Default value behavior
+
+3. **Reactivity**: All updatable properties must use prop utilities from `/src/util/prop.ts`. Prefer in order: `makePropWatchersUsingAllProps` > `makePropWatchers` > `makePropWatcher` > `watchEffect` (only for method calls).
+
+4. **Consistency**: Match the exact patterns used in existing components like:
+   - `Glitch.vue`
+   - `Halftone.vue`
+   - `UnrealBloom.vue`
+   - `Pixelation.vue`
+
+5. **No Redundant Props**: Do NOT create props for:
+   - `scene` - get from `useTres()`
+   - `camera` - get from `useTres()`
+   - `sizes`/`resolution` - get from `useTres()`
+   - `renderer` - get from `useTres()`
+   - `pixelRatio` - get from `useTres()`
+
+## Output Requirements
+
+After creating the component:
+1. Save it to `/src/core/three/[EffectName].vue`
+2. Output the exact file path for use by subsequent agents
+3. Mention any exports that need to be added to index files
+
+## Verification Steps
+
+Before finalizing:
+1. Verify imports are correct and match the project's import style
+2. Ensure all analyzed properties are included as props
+3. **Confirm prop utilities are used correctly:**
+   - Did you use `makePropWatchersUsingAllProps` if prop names match property names?
+   - Did you use `makePropWatchers` for mapped property paths?
+   - Is `watchEffect` only used for method calls (like `setSize()`, `setPixelSize()`)?
+4. Check that the component structure matches sibling components (e.g., `Glitch.vue`, `Pixelation.vue`)
+5. Validate TypeScript types are properly exported
diff --git a/packages/postprocessing/eslint.config.js b/packages/postprocessing/eslint.config.js
index bdfedd0f5..3e70fa235 100644
--- a/packages/postprocessing/eslint.config.js
+++ b/packages/postprocessing/eslint.config.js
@@ -1,7 +1,7 @@
 import { tresLintConfig } from '@tresjs/eslint-config'
 
 export default tresLintConfig({
-  ignores: ['dist', 'node_modules', 'public', '.github', 'docs/blog'],
+  ignores: ['dist', 'node_modules', 'public', '.github', '.claude', 'docs/blog'],
 }, {
   rules: {
     'style/max-statements-per-line': 'off',
diff --git a/packages/postprocessing/src/core/three/Afterimage.vue b/packages/postprocessing/src/core/three/Afterimage.vue
new file mode 100644
index 000000000..4beaeecba
--- /dev/null
+++ b/packages/postprocessing/src/core/three/Afterimage.vue
@@ -0,0 +1,48 @@
+<script lang="ts">
+import { AfterimagePass } from 'three/examples/jsm/postprocessing/AfterimagePass.js'
+import { makePropWatchersUsingAllProps } from '../../util/prop'
+import { useEffect } from './composables/useEffect'
+
+export interface AfterimageProps {
+  /**
+   * The damping intensity from 0.0 to 1.0. A higher value means a stronger after image effect.
+   * @default 0.96
+   */
+  damp?: number
+  /**
+   * If set to true, the pass is processed by the composer
+   * @default true
+   */
+  enabled?: boolean
+  /**
+   * If set to true, the pass indicates to swap read and write buffer after rendering
+   * @default true
+   */
+  needsSwap?: boolean
+  /**
+   * If set to true, the pass clears its buffer before rendering
+   * @default false
+   */
+  clear?: boolean
+  /**
+   * If set to true, the result of the pass is rendered to screen.
+   * The last pass in the composer's pass chain gets automatically rendered to screen.
+   * @default false
+   */
+  renderToScreen?: boolean
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<AfterimageProps>()
+
+const { pass } = useEffect(() => new AfterimagePass(props.damp), props)
+
+defineExpose({ pass })
+
+makePropWatchersUsingAllProps(
+  props,
+  pass,
+  () => new AfterimagePass(),
+)
+</script>
diff --git a/packages/postprocessing/src/core/three/Film.vue b/packages/postprocessing/src/core/three/Film.vue
new file mode 100644
index 000000000..08e0f2fb9
--- /dev/null
+++ b/packages/postprocessing/src/core/three/Film.vue
@@ -0,0 +1,60 @@
+<script lang="ts">
+import { FilmPass } from 'three/examples/jsm/postprocessing/FilmPass.js'
+import { makePropWatchers } from '../../util/prop'
+import { useEffect } from './composables/useEffect'
+
+export interface FilmProps {
+  /**
+   * The grain intensity in the range [0,1] (0 = no effect, 1 = full effect)
+   * @default 0.5
+   */
+  intensity?: number
+  /**
+   * Whether to apply a grayscale effect or not
+   * @default false
+   */
+  grayscale?: boolean
+  /**
+   * If set to true, the pass is processed by the composer
+   * @default true
+   */
+  enabled?: boolean
+  /**
+   * If set to true, the pass indicates to swap read and write buffer after rendering
+   * @default true
+   */
+  needsSwap?: boolean
+  /**
+   * If set to true, the pass clears its buffer before rendering
+   * @default false
+   */
+  clear?: boolean
+  /**
+   * If set to true, the result of the pass is rendered to screen.
+   * The last pass in the composer's pass chain gets automatically rendered to screen.
+   * @default false
+   */
+  renderToScreen?: boolean
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<FilmProps>()
+
+const { pass } = useEffect(() => new FilmPass(props.intensity, props.grayscale), props)
+
+defineExpose({ pass })
+
+makePropWatchers(
+  [
+    [() => props.intensity, 'uniforms.intensity.value'],
+    [() => props.grayscale, 'uniforms.grayscale.value'],
+    [() => props.enabled, 'enabled'],
+    [() => props.needsSwap, 'needsSwap'],
+    [() => props.clear, 'clear'],
+    [() => props.renderToScreen, 'renderToScreen'],
+  ],
+  pass,
+  () => new FilmPass(),
+)
+</script>
diff --git a/packages/postprocessing/src/core/three/SAO.vue b/packages/postprocessing/src/core/three/SAO.vue
new file mode 100644
index 000000000..cd841dff1
--- /dev/null
+++ b/packages/postprocessing/src/core/three/SAO.vue
@@ -0,0 +1,109 @@
+<script lang="ts">
+import { useTresContext } from '@tresjs/core'
+import { Vector2 } from 'three'
+import { SAOPass } from 'three/examples/jsm/postprocessing/SAOPass.js'
+import { makePropWatchers } from '../../util/prop'
+import { useEffect } from './composables/useEffect'
+
+export interface SAOProps {
+  /**
+   * If set to true, the pass is processed by the composer.
+   * @default true
+   */
+  enabled?: boolean
+  /**
+   * If set to true, the pass indicates to swap read and write buffer after rendering.
+   * @default false
+   */
+  needsSwap?: boolean
+  /**
+   * If set to true, the pass clears its buffer before rendering.
+   * @default true
+   */
+  clear?: boolean
+  /**
+   * If set to true, the result of the pass is rendered to screen.
+   * @default false
+   */
+  renderToScreen?: boolean
+  /**
+   * Controls the output visualization mode.
+   * 0 = Default (AO composited on scene), 1 = SAO (raw AO texture), 2 = Normal (normal buffer).
+   */
+  output?: number
+  /**
+   * Bias for the ambient occlusion calculation. Higher values reduce self-occlusion artifacts.
+   */
+  saoBias?: number
+  /**
+   * Intensity of the ambient occlusion effect.
+   */
+  saoIntensity?: number
+  /**
+   * Scale factor for the ambient occlusion distance-dependent falloff.
+   */
+  saoScale?: number
+  /**
+   * The radius of the AO sampling kernel in world-space units.
+   */
+  saoKernelRadius?: number
+  /**
+   * Minimum resolution threshold for AO samples.
+   */
+  saoMinResolution?: number
+  /**
+   * Whether to apply a depth-limited blur to reduce noise.
+   */
+  saoBlur?: boolean
+  /**
+   * Kernel radius for the depth-limited Gaussian blur.
+   */
+  saoBlurRadius?: number
+  /**
+   * Standard deviation of the Gaussian blur kernel.
+   */
+  saoBlurStdDev?: number
+  /**
+   * Depth cutoff factor for the blur to prevent blurring across edges.
+   */
+  saoBlurDepthCutoff?: number
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<SAOProps>()
+
+const { scene, camera, sizes } = useTresContext()
+
+const { pass } = useEffect(
+  () => new SAOPass(
+    scene.value,
+    camera.activeCamera.value,
+    new Vector2(sizes.width.value, sizes.height.value),
+  ),
+  props,
+)
+
+defineExpose({ pass })
+
+makePropWatchers(
+  [
+    [() => props.enabled, 'enabled'],
+    [() => props.needsSwap, 'needsSwap'],
+    [() => props.clear, 'clear'],
+    [() => props.renderToScreen, 'renderToScreen'],
+    [() => props.output, 'params.output'],
+    [() => props.saoBias, 'params.saoBias'],
+    [() => props.saoIntensity, 'params.saoIntensity'],
+    [() => props.saoScale, 'params.saoScale'],
+    [() => props.saoKernelRadius, 'params.saoKernelRadius'],
+    [() => props.saoMinResolution, 'params.saoMinResolution'],
+    [() => props.saoBlur, 'params.saoBlur'],
+    [() => props.saoBlurRadius, 'params.saoBlurRadius'],
+    [() => props.saoBlurStdDev, 'params.saoBlurStdDev'],
+    [() => props.saoBlurDepthCutoff, 'params.saoBlurDepthCutoff'],
+  ],
+  pass,
+  () => new SAOPass(scene.value, camera.activeCamera.value),
+)
+</script>
diff --git a/packages/postprocessing/src/core/three/index.ts b/packages/postprocessing/src/core/three/index.ts
index fff6e0e21..d458425e0 100644
--- a/packages/postprocessing/src/core/three/index.ts
+++ b/packages/postprocessing/src/core/three/index.ts
@@ -1,29 +1,38 @@
 /* eslint-disable perfectionist/sort-named-exports */
 import { useEffect } from './composables/useEffect'
+import Afterimage, { type AfterimageProps } from './Afterimage.vue'
 import EffectComposer, { type EffectComposerProps } from './EffectComposer.vue'
+import Film, { type FilmProps } from './Film.vue'
 import Glitch, { type GlitchProps } from './Glitch.vue'
 import Halftone, { type HalftoneProps } from './Halftone.vue'
 import Pixelation, { type PixelationProps } from './Pixelation.vue'
 import Output from './Output.vue'
 import SMAA, { type SMAAProps } from './SMAA.vue'
+import SAO, { type SAOProps } from './SAO.vue'
 import UnrealBloom, { type UnrealBloomProps } from './UnrealBloom.vue'
 
 export {
   EffectComposer,
 
+  Afterimage,
+  SAO,
+  Film,
+  SMAA,
+  Output,
   Glitch,
   Halftone,
-  Output,
   Pixelation,
-  SMAA,
   UnrealBloom,
 
   useEffect,
 
-  EffectComposerProps,
+  AfterimageProps,
+  SAOProps,
+  SMAAProps,
+  FilmProps,
   GlitchProps,
   HalftoneProps,
   PixelationProps,
-  SMAAProps,
   UnrealBloomProps,
+  EffectComposerProps,
 }