diff --git a/playground/index.html b/playground/index.html
index 143557b5..1516b380 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue + TS</title>
   </head>
diff --git a/playground/public/favicon.svg b/playground/public/favicon.svg
new file mode 100644
index 00000000..63b3c87c
--- /dev/null
+++ b/playground/public/favicon.svg
@@ -0,0 +1,3 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M78.8489 9L9 78.45M79 79L9.15114 9.54999" stroke="#FF7BAC" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/playground/public/logo.svg b/playground/public/logo.svg
new file mode 100644
index 00000000..d6d0a72f
--- /dev/null
+++ b/playground/public/logo.svg
@@ -0,0 +1,6 @@
+<svg width="389" height="80" viewBox="0 0 389 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44.5703 5.71662C46.124 3.12726 49.8767 3.12726 51.4303 5.71662L92.3655 73.942C93.9652 76.6081 92.0447 80 88.9355 80H7.06507C3.95589 80 2.03544 76.6081 3.6351 73.942L44.5703 5.71662Z" fill="#82DBC5"/>
+<rect x="172" y="2.65002" width="74.7" height="74.7" rx="4" fill="#4F4F4F"/>
+<path d="M322.821 11.5L378.7 68.0521" stroke="#FF7BAC" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M322.7 68.5L378.579 11.9479" stroke="#FF7BAC" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/playground/public/nuxt-stones/package.json b/playground/public/nuxt-stones/package.json
new file mode 100644
index 00000000..558cbb66
--- /dev/null
+++ b/playground/public/nuxt-stones/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "docs",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vitepress dev",
+    "build": "vitepress build",
+    "preview": "vitepress preview"
+  },
+  "dependencies": {
+    "@tresjs/cientos": "^3.0.1",
+    "@tresjs/core": "^3.2.2",
+    "@tresjs/post-processing": "workspace:^",
+    "gsap": "^3.11.5"
+  },
+  "devDependencies": {
+    "unocss": "^0.52.3",
+    "unplugin-vue-components": "^0.24.1",
+    "vite-svg-loader": "^4.0.0",
+    "vitepress": "1.0.0-beta.1"
+  }
+}
diff --git a/playground/src/App.vue b/playground/src/App.vue
index 9f7a5936..2417aab6 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -1,5 +1,17 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+function setBodyClass(routeName: string) {
+  document.title = `Post-processing Playground - ${routeName}`
+  document.body.className = routeName
+}
+watch([route], () => setBodyClass(route.name?.toString() ?? ''))
+</script>
 
 <template>
-  <router-view />
+  <Suspense>
+    <router-view />
+  </Suspense>
 </template>
diff --git a/playground/src/components/GlitchDemo.vue b/playground/src/components/GlitchDemo.vue
deleted file mode 100644
index 2c6b5140..00000000
--- a/playground/src/components/GlitchDemo.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<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, Vector2 } from 'three'
-import { reactive } from 'vue'
-import { GlitchMode } from 'postprocessing'
-
-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="true"
-  >
-    <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/UnrealBloom.vue b/playground/src/components/UnrealBloom.vue
deleted file mode 100644
index 4eda71e0..00000000
--- a/playground/src/components/UnrealBloom.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import { Color, BasicShadowMap, NoToneMapping } from 'three'
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, useTweakPane } from '@tresjs/cientos'
-import { BlendFunction } from 'postprocessing'
-import { EffectComposer, Bloom } from '@tresjs/post-processing'
-import { onMounted, reactive, ref } from 'vue'
-
-const gl = {
-  clearColor: '#121212',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  toneMapping: NoToneMapping,
-}
-
-const bloomParams = reactive({
-  luminanceThreshold: 0.2,
-  luminanceSmoothing: 0.3,
-  intensity: 4.0,
-  blendFunction: BlendFunction.ADD,
-})
-
-const { pane } = useTweakPane()
-
-pane.addInput(bloomParams, 'luminanceThreshold', { min: 0, max: 1 })
-pane.addInput(bloomParams, 'luminanceSmoothing', { min: 0, max: 1 })
-pane.addInput(bloomParams, 'intensity', { min: 0, max: 10 })
-
-const materialRef = ref(null)
-
-onMounted(() => {
-  if (materialRef.value) {
-    pane.addInput(materialRef.value, 'emissiveIntensity', { min: 0, max: 10, step: 0.1 })
-  }
-})
-</script>
-
-<template>
-  <TresCanvas
-    v-bind="gl"
-    :disable-render="true"
-  >
-    <TresPerspectiveCamera
-      :position="[5, 5, 5]"
-      :look-at="[0, 0, 0]"
-    />
-    <OrbitControls />
-    <TresMesh>
-      <TresSphereGeometry :args="[2, 32, 32]" />
-      <TresMeshStandardMaterial
-        color="hotpink"
-        :emissive="new Color('hotpink')"
-        :emissive-intensity="9"
-      />
-    </TresMesh>
-    <TresMesh :position="[2, 2, -2]">
-      <TresSphereGeometry :args="[2, 32, 32]" />
-      <TresMeshStandardMaterial color="hotpink" />
-    </TresMesh>
-    <TresMesh>
-      <TresSphereGeometry :args="[2, 32, 32]" />
-      <TresMeshStandardMaterial
-        ref="materialRef"
-        color="hotpink"
-        :emissive="new Color('hotpink')"
-        :emissive-intensity="1"
-      />
-    </TresMesh>
-    <TresGridHelper />
-    <TresAmbientLight :intensity="0.5" />
-    <TresDirectionalLight
-      :position="[3, 3, 3]"
-      :intensity="2"
-    />
-    <Suspense>
-      <EffectComposer :depth-buffer="true">
-        <Bloom
-          v-bind="bloomParams"
-          mipmap-blur
-        />
-      </EffectComposer>
-    </Suspense>
-  </TresCanvas>
-</template>
diff --git a/playground/src/pages/bloom.vue b/playground/src/pages/bloom.vue
new file mode 100644
index 00000000..51065a6b
--- /dev/null
+++ b/playground/src/pages/bloom.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { Color, BasicShadowMap, NoToneMapping } from 'three'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, useTweakPane } from '@tresjs/cientos'
+import { BlendFunction, KernelSize } from 'postprocessing'
+import { EffectComposer, Bloom } from '@tresjs/post-processing'
+import { onMounted, reactive, ref, watch } from 'vue'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#121212',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  toneMapping: NoToneMapping,
+}
+
+useControls('fpsgraph')
+
+const materialRef = ref()
+const {
+  intensity,
+  blendFunction, 
+  resolution,
+  kernelSize,
+  mipmapBlur,
+} = useControls({
+  intensity: {
+    value: 4.0,
+    min: 0,
+    max: 10,
+    step: 0.1,
+  },
+  blendFunction: {
+    options: Object.keys(BlendFunction).map(key => ({
+      text: key,
+      value: BlendFunction[key],
+    })),
+    value: BlendFunction.ADD,
+  },
+  resolution: {
+    value: 256,
+    min: 64,
+    max: 512,
+    step: 64,
+  },
+  kernelSize: {
+    options: Object.keys(KernelSize).map(key => ({
+      text: key,
+      value: KernelSize[key],
+    })),
+    value: KernelSize.VERY_SMALL,
+  },
+  mipmapBlur: true,
+})
+
+const { threshold, smoothing } = useControls('luminance', {
+  threshold: {
+    value: 0.2,
+    min: 0,
+    max: 1,
+    step: 0.01,
+  },
+  smoothing: {
+    value: 0.3,
+    min: 0,
+    max: 1,
+    step: 0.01,
+  },
+})
+
+onMounted(() => {
+  if (materialRef.value) {
+    const { value: emissiveIntensity } = useControls({
+      emissiveIntensity: {
+        value: 1,
+        min: 0,
+        max: 10,
+        step: 0.1,
+      },
+    })
+    
+    watch(emissiveIntensity, (newValue) => {
+      materialRef.value.emissiveIntensity = newValue
+    })
+  }
+})
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas
+    v-bind="gl"
+    :disable-render="true"
+  >
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <TresMesh>
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresMeshStandardMaterial
+        color="hotpink"
+        :emissive="new Color('hotpink')"
+        :emissive-intensity="9"
+      />
+    </TresMesh>
+    <TresMesh :position="[2, 2, -2]">
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresMeshStandardMaterial color="hotpink" />
+    </TresMesh>
+    <TresMesh>
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresMeshStandardMaterial
+        ref="materialRef"
+        color="hotpink"
+        :emissive="new Color('hotpink')"
+        :emissive-intensity="1"
+      />
+    </TresMesh>
+    <TresGridHelper />
+    <TresAmbientLight :intensity="0.5" />
+    <TresDirectionalLight
+      :position="[3, 3, 3]"
+      :intensity="2"
+    />
+    <Suspense>
+      <EffectComposer :depth-buffer="true">
+        <Bloom
+          :luminance-threshold="threshold.value"
+          :luminance-smoothing="smoothing.value"
+          :intensity="intensity.value"
+          :blend-function="blendFunction.value"
+          :kernel-size="kernelSize.value"
+          :resolution="resolution.value"
+          :mipmap-blur="mipmapBlur.value"
+        />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>
diff --git a/playground/src/pages/glitch.vue b/playground/src/pages/glitch.vue
index 739a5287..f473f3c6 100644
--- a/playground/src/pages/glitch.vue
+++ b/playground/src/pages/glitch.vue
@@ -1,5 +1,107 @@
-<script lang="ts" setup></script>
+<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, Vector2 } from 'three'
+import { reactive } from 'vue'
+import { GlitchMode } from 'postprocessing'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#121212',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  toneMapping: NoToneMapping,
+}
+
+const { mode,
+  active,
+  ratio,
+  columns,
+  delay,
+  duration,
+  strength, 
+  chromaticAberrationOffset,
+  chromaticAberrationEnabled, 
+} = useControls({
+  delay: new Vector2(1.5, 3.5),
+  duration: new Vector2(0.6, 1.0),
+  strength: new Vector2(0.3, 1.0),
+  mode: {
+    value: GlitchMode.SPORADIC,
+    options: [
+      {
+        text: 'Sporadic',
+        value: GlitchMode.SPORADIC,
+      },
+      {
+        text: 'Constant Mild',
+        value: GlitchMode.CONSTANT_MILD,
+      },
+      {
+        text: 'Constant Wild',
+        value: GlitchMode.CONSTANT_WILD,
+      },
+    ],
+  },
+  active: true,
+  ratio: 0.85,
+  columns: 2,
+  dtSize: 64,
+  chromaticAberrationOffset: new Vector2(0.001, 0.001),
+  chromaticAberrationEnabled: true,
+})
+
+/* 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>
-  <GlitchDemo />
+  <TresLeches />
+  <TresCanvas
+    v-bind="gl"
+    :disable-render="true"
+  >
+    <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
+          :delay="delay.value"
+          :duration="duration.value"
+          :strength="strength.value"
+          :mode="mode.value"
+          :active="active.value"
+          :ratio="ratio.value"
+          :columns="columns.value"
+          :chromatic-aberration-offset="chromaticAberrationOffset.value"
+          :chromatic-aberration-enabled="chromaticAberrationEnabled.value"
+        />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
 </template>
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
index edef43ed..cd8dbf6d 100644
--- a/playground/src/pages/index.vue
+++ b/playground/src/pages/index.vue
@@ -1,5 +1,92 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import {
+  routes,
+} from '../router'
+
+const [_home, ...restRoutes] = routes
+</script>
 
 <template>
-  <UnrealBloom />
+  <div
+    class="
+  container mx-auto max-w-3xl
+  font-sans text-xs color-gray
+  bg-white 
+  "
+  >
+    <div class="mx-4">
+      <div
+        class="
+    mt-24 mb-12 text-center align-baseline items-center gap-6
+    sm:mt-16 sm:mb-6 sm:text-left sm:flex sm:flex-row-reverse
+    "
+      >
+        <div>
+          <img
+            src="/logo.svg"
+            alt="Post-processing logo"
+            class="max-w-36 sm:max-w-xs align-baseline"
+          >
+        </div>
+        <div class="sm:w-2/3">
+          <h1
+            class="
+        w-auto max-w-75 mx-auto text-5xl text-zinc-700 mb-3
+        sm:mx-none sm:w-1/2 sm:max-w-72
+        "
+          >
+            <span class="text-cientos-blue">Post-processing</span> Playground
+          </h1>
+          <p class="text-lg">
+            Testing zone for TresJS/post-processing components
+          </p>
+        </div>
+      </div>
+      <div class="text-center sm:text-left sm:grid sm:grid-cols-2 md:grid-cols-3 gap-4">
+        <router-link
+          v-for="{ name, path, meta } in restRoutes"
+          :key="name"
+          :to="path"
+          class="
+          p-4 my-4 leading-normal no-underline size-m weight-600 bg-zinc-50 rounded
+          sm:my-0
+          "
+        >
+          <div class="inline-block p-2 p-x-3 m-b-3 text-2xl bg-zinc-200 rounded">
+            {{ meta.icon }}
+          </div>
+          <h2 class="text-sm p-0 m-0 mb-1.5 font-semibold text-zinc-600">
+            {{ name }}
+          </h2>
+        </router-link>
+        <!-- <div
+          v-for="{ title, routes, icon } in routes"
+          :key="title"
+          class="
+          p-4 my-4 leading-normal size-m weight-600 bg-zinc-50 rounded
+          sm:my-0
+          "
+        >
+          <div class="inline-block p-2 p-x-3 m-b-3 text-2xl bg-zinc-200 rounded">
+            {{ icon }}
+          </div>
+          <h2 class="text-sm p-0 m-0 mb-1.5 font-semibold text-zinc-600">
+            {{ title }}
+          </h2>
+          <div
+            v-for="route in routes"
+            :key="route.name"
+            class="link-wrapper"
+          >
+            <router-link
+              class="no-underline text-zinc-700 visited:text-zinc-400 hover:text-cientos-blue"
+              :to="route.path"
+            >
+              <span>{{ route.name }} </span>
+            </router-link>
+          </div>
+        </div> -->
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/playground/src/router.ts b/playground/src/router.ts
index dc606278..1ac1dc72 100644
--- a/playground/src/router.ts
+++ b/playground/src/router.ts
@@ -2,26 +2,30 @@ import type { RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHistory } from 'vue-router'
 import { kebabCase } from './util/string'
 
-const makeRoute = (name: string): RouteRecordRaw => {
+const makeRoute = (name: string, icon: string): RouteRecordRaw => {
   const nameInKebab = kebabCase(name)
 
   return {
     path: `/${nameInKebab}`,
     name,
+    meta: {
+      icon,
+    },
     component: () => import(`./pages/${nameInKebab}.vue`),
   }
 }
-const routes = [
+export const routes = [
   {
     path: '/',
     name: 'Home',
     component: () => import('./pages/index.vue'),
   },
-  makeRoute('Outline'),
-  makeRoute('Glitch'),
-  makeRoute('Depth of Field'),
-  makeRoute('Pixelation'),
-  makeRoute('Noise'),
+  makeRoute('Outline', '🔲'),
+  makeRoute('Glitch', '📺'),
+  makeRoute('Depth of Field', '📷'),
+  makeRoute('Pixelation', '👾'),
+  makeRoute('Bloom', '🌼'),
+  makeRoute('Noise', '📟'),
 ]
 
 export const router = createRouter({
