diff --git a/components/content/array-cameras/KnightRigged.vue b/components/content/array-cameras/KnightRigged.vue
index 52d1dc46..bbb1dfed 100644
--- a/components/content/array-cameras/KnightRigged.vue
+++ b/components/content/array-cameras/KnightRigged.vue
@@ -5,14 +5,11 @@ const { nodes, state } = useGLTF(
   'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/warcraft-3-alliance-footmanfanmade/source/Footman_RIG.glb',
 )
 
-watch(nodes, (newState) => {
-  console.log(newState)
-})
 
 const model = computed(() => nodes.value.Footman_rig)
 const animations = computed(() => state.value?.animations || [])
 
-const { actions } = useAnimations(animations, model)
+const { actions } = useAnimations(animations, model as TresObject)
 
 const currentAction = ref()
 
diff --git a/components/content/dancing-blob/TheDancingBlob.vue b/components/content/dancing-blob/TheDancingBlob.vue
index 712086a6..4cc2a85b 100644
--- a/components/content/dancing-blob/TheDancingBlob.vue
+++ b/components/content/dancing-blob/TheDancingBlob.vue
@@ -1,19 +1,20 @@
 <!-- Github Luckystriike: https://github.com/luckystriike22/TresJsPlayground/ -->
 <script lang="ts" setup>
+import type { Mesh } from 'three';
 import { Vector2 } from 'three'
 import vertexShader from './shaders/vertex.glsl'
 import fragmentShader from './shaders/fragment.glsl'
 
 const props = defineProps<{
-  analyser: any
-  dataArray: any
+  analyser: AnalyserNode
+  dataArray: Uint8Array
 }>()
 
 // composables
 const { onBeforeRender } = useLoop()
 
 // refs
-const blobRef = shallowRef<any>(null)
+const blobRef = shallowRef<Mesh | null>(null)
 
 onBeforeRender(({ elapsed }) => {
   if (blobRef.value && props.analyser && props.dataArray) {
@@ -46,12 +47,8 @@ const uniforms = ref({
   <OrbitControls />
   <TresMesh ref="blobRef">
     <TresIcosahedronGeometry :args="[4, 80]" />
-    <TresShaderMaterial
-      wireframe
-      :uniforms="uniforms"
-      :fragment-shader="fragmentShader"
-      :vertex-shader="vertexShader"
-    />
+    <TresShaderMaterial wireframe :uniforms="uniforms" :fragment-shader="fragmentShader"
+      :vertex-shader="vertexShader" />
   </TresMesh>
   <TresDirectionalLight :position="[1, 1, 1]" />
   <TresAmbientLight :intensity="1" />
diff --git a/components/content/github-stars/Star.vue b/components/content/github-stars/Star.vue
deleted file mode 100644
index 4dc43801..00000000
--- a/components/content/github-stars/Star.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-
-import type { Star } from '#build/components';
-<script setup lang="ts">
-const { nodes } = await useGLTF('/models/star.glb', { draco: true })
-
-const model = nodes['star']
-
-const stars = Array.from({ length: 2000 }, () => ({
-  position: [(Math.random() - 0.5) * 80, (Math.random() - 0.5) * 80, (Math.random() - 0.5) * 80],
-  rotation: [(Math.random() - 0.5) * 10, (Math.random() - 0.5) * 10, (Math.random() - 0.5) * 10],
-  scale: [1, 1, 2],
-}))
-
-const starsRef = ref(null)
-
-const { onLoop } = useRenderLoop()
-
-onLoop(({ delta }) => {
-  if (starsRef.value) {
-    for (const star of starsRef.value.children) {
-      star.rotation.x += delta * 0.2
-      star.rotation.y += delta * 0.2
-      star.rotation.z += delta * 0.2
-
-      if (star.position.y < -80) {
-        star.position.y = 40
-      }
-      if (star.position.x < -80) {
-        star.position.x = 40
-      }
-      star.position.y -= delta * 0.2
-      star.position.x -= delta * 0.2
-    }
-  }
-})
-</script>
-
-<template>
-  <TresGroup ref="starsRef">
-    <primitive
-      v-for="star in stars"
-      :key="star"
-      :position="star.position"
-      :rotation="star.rotation"
-      :scale="star.scale"
-      :object="model.clone()"
-    />
-  </TresGroup>
-</template>
\ No newline at end of file
diff --git a/components/content/github-stars/index.vue b/components/content/github-stars/index.vue
deleted file mode 100644
index ad6ed916..00000000
--- a/components/content/github-stars/index.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, SRGBColorSpace, ACESFilmicToneMapping, MeshStandardMaterial } from 'three'
-
-import { OrbitControls, Text3D } from '@tresjs/cientos'
-import { TresLeches, useControls } from '@tresjs/leches'
-import '@tresjs/leches/styles'
-
-const gl = {
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: true,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: ACESFilmicToneMapping,
-}
-
-const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
-</script>
-
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera
-      :position="[8.48, 2.65, 17.94]"
-      :far="1000"
-    />
-    <OrbitControls
-      make-default
-      :min-distance="15"
-      :max-distance="30"
-    />
-    <Suspense>
-      <Environment preset="sunset" />
-    </Suspense>
-    <Suspense>
-      <Text3D
-        font="https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json"
-        center
-        text="2k Github Stars"
-        :size="1"
-        :height="0.2"
-        :curve-segments="12"
-        :bevel-enabled="true"
-        :bevel-thickness="0.05"
-        :bevel-size="0.03"
-        :bevel-offset="0"
-        :bevel-segments="4"
-      >
-        <TresMeshMatcapMaterial :matcap="matcapTexture" />
-      </Text3D>
-    </Suspense>
-    <Suspense>
-      <Star>
-        <primitive :object="yellowMaterial" />
-      </Star>
-    </Suspense>
-    <Suspense />
-    <TresAmbientLight :intensity="2" />
-    <TresDirectionalLight
-      :position="[10, 10, 10]"
-      :intensity="1"
-    />
-  </TresCanvas>
-</template>
\ No newline at end of file
diff --git a/components/content/magical-marbles/Marble.vue b/components/content/magical-marbles/Marble.vue
new file mode 100644
index 00000000..1b5f83b8
--- /dev/null
+++ b/components/content/magical-marbles/Marble.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { gsap } from 'gsap'
+import { Color, RepeatWrapping, NearestFilter, MeshStandardMaterial } from 'three'
+import { useTexture, CustomShaderMaterial } from '@tresjs/cientos'
+import { useLoop, useTres } from '@tresjs/core'
+import { vertex, fragment } from './shaders'
+
+const ctx = gsap.context(() => { })
+let tl: gsap.core.Timeline
+
+const props = defineProps({
+  colors: {
+    type: Array as PropType<[number, number, number][]>,
+    required: true,
+  },
+  params: {
+    type: Object as PropType<{
+      roughness?: number,
+      metalness?: number,
+      iterations?: number,
+      depth?: number,
+      smoothing?: number,
+      displacement?: number,
+      speed?: number,
+    }>,
+    default: () => ({}),
+  },
+  indexColor: {
+    type: Number,
+    required: true,
+  },
+})
+
+const { colors, params, indexColor } = toRefs(props)
+
+const emit = defineEmits(['sphere-click'])
+
+const sphereRef = shallowRef(null)
+const elapsedStart = ref(0)
+const onPointerHovered = ref(false)
+
+const { onRender } = useLoop()
+
+const { renderer, controls } = useTres()
+
+const currentColor = computed(() => colors.value[indexColor.value])
+
+const colorFinalB = computed(() => new Color(`hsl(${currentColor.value[0]}, ${currentColor.value[1]}%, ${currentColor.value[2]}%)`))
+
+const animateSphereColor = async () => {
+  await nextTick()
+
+    ctx.add(() => {
+      tl = gsap.timeline({})
+        .addLabel('sphereAnimation')
+        .to(uniforms.colorB.value, {
+          r: colorFinalB.value.r,
+          g: colorFinalB.value.g,
+          b: colorFinalB.value.b,
+          duration: 1.2,
+          ease: 'power2.out',
+        }, 'sphereAnimation')
+        .to(uniforms.uDisplacementSpeed, {
+          overwrite: 'auto',
+          ease: 'power2.out',
+          keyframes: [
+            { value: 1.175, duration: 0.3 },
+            { value: 1, duration: 0.65, overwrite: 'auto' },
+          ],
+        }, 'sphereAnimation')
+    })
+}
+
+const { state: heightMapTexture } =  useTexture('/magical-marbles/heightMap.jpeg')
+const { state: displacementMapTexture } =  useTexture('/magical-marbles/displacementMap.jpeg')
+
+const uniforms = reactive({
+  uTime: { value: 1 },
+  uDisplacementSpeed: { value: 1 },
+  colorA: { value: new Color(0, 0, 0) },
+  colorB: { value: new Color(`hsl(${colors.value[indexColor.value][0]}, ${colors.value[indexColor.value][1]}%, ${colors.value[indexColor.value][2]}%)`) },
+  heightMap: { value: heightMapTexture.value },
+  displacementMap: { value: displacementMapTexture.value },
+  iterations: { value: params.value.iterations},
+  depth: { value: params.value.depth},
+  smoothing: { value: params.value.smoothing},
+  displacement: { value: params.value.displacement},
+})
+
+const uniformKeys = ['iterations', 'depth', 'smoothing', 'displacement'] as const
+
+uniformKeys.forEach((key) => {
+  watch(
+    () => params.value[key],
+    (val) => {
+      uniforms[key].value = val
+    },
+    { immediate: true }
+  )
+})
+
+watch([heightMapTexture, displacementMapTexture], () => {
+  heightMapTexture.value.wrapS = heightMapTexture.value.wrapT = RepeatWrapping
+  displacementMapTexture.value.wrapS = displacementMapTexture.value.wrapT = RepeatWrapping
+
+  heightMapTexture.value.minFilter = displacementMapTexture.value.minFilter = NearestFilter
+  
+  uniforms.heightMap.value = heightMapTexture.value
+  uniforms.displacementMap.value = displacementMapTexture.value
+})
+
+function animateScale(targetScale: number) {
+  if(!sphereRef.value || !sphereRef.value.instance) return
+  
+  gsap.to(sphereRef.value.instance.scale, {
+    x: targetScale,
+    y: targetScale,
+    z: targetScale,
+    duration: 1,
+    ease: 'elastic.out(1, 0.4)',
+    overwrite: 'auto'
+  })
+}
+
+const onSpherePointerDown = () => {
+  animateScale(0.925)
+}
+
+const onSpherePointerUp = () => {
+  animateScale(1)
+  emit('sphere-click')
+}
+
+const onSpherePointerEnter = () => {
+  onPointerHovered.value = true
+  renderer.domElement.style.cursor = 'pointer'
+  animateScale(0.965)
+}
+
+const onSpherePointerLeave = () => {
+  onPointerHovered.value = false
+  renderer.domElement.style.cursor = 'initial'
+  animateScale(1)
+}
+
+onUnmounted(() => {
+  ctx?.revert()
+})
+
+onRender(({ delta, elapsed }) => {
+  if (!elapsedStart.value) {
+    elapsedStart.value = elapsed
+  }
+  
+  uniforms.uTime.value = ((elapsed - elapsedStart.value) * params.value.speed)
+})
+
+defineExpose({
+  animateSphereColor
+})
+</script>
+
+<template>
+  <Sphere
+    ref="sphereRef"
+    :args="[1, 64, 32]"
+    @pointerdown="onSpherePointerDown"
+    @pointerup="onSpherePointerUp"
+    @pointerenter="onSpherePointerEnter"
+    @pointerleave="onSpherePointerLeave"
+  >
+    <CustomShaderMaterial
+      :roughness="params.roughness"
+      :metalness="params.metalness"
+      :base-material="MeshStandardMaterial"
+      :vertex-shader="vertex"
+      :fragment-shader="fragment"
+      :uniforms="uniforms"
+      silent
+    />
+  </Sphere>
+</template>
diff --git a/components/content/magical-marbles/index.vue b/components/content/magical-marbles/index.vue
index 6f98ecec..b279af3a 100644
--- a/components/content/magical-marbles/index.vue
+++ b/components/content/magical-marbles/index.vue
@@ -1,131 +1,133 @@
 <script setup lang="ts">
 import { gsap } from 'gsap'
-import { Color, RepeatWrapping, NearestFilter, MeshStandardMaterial } from 'three'
-import { vertex, fragment } from './shaders'
+import { EffectComposerPmndrs, ToneMappingPmndrs } from '@tresjs/post-processing'
+import { ToneMappingMode } from 'postprocessing'
+import { ContactShadows } from '@tresjs/cientos'
+import Marble from './Marble.vue'
 
 const gl = {
   alpha: true,
   shadows: false,
+  clearAlpha: 0,
 }
 
-let ctx, tl
+let ctx: gsap.Context
 
-const sphereRef = shallowRef(null)
+const marbleRef = shallowRef(null)
 const backgroundRef = ref(null)
 const mainRef = ref(null)
 const indexColor = ref(0)
-const tlInProgress = ref(false)
 
-const colors = ref([
-  [0, 100, 50],
-  [60, 100, 50],
-  [150, 100, 50],
-  [240, 70, 60],
-  [0, 0, 80],
-])
-
-const params = reactive({
-  timeOffset: 0,
+const marbleParams = reactive({
   roughness: 0.15,
-  speed: 0.05,
+  metalness: 0,
   iterations: 48,
   depth: 0.6,
   smoothing: 0.2,
   displacement: 0.1,
-  metalness: 0,
+  speed: 0.05,
 })
 
-const heightMap = await useTexture(['/magical-marbles/heightMap.jpeg'])
-const displacementMap = await useTexture(['/magical-marbles/displacementMap.jpeg'])
-heightMap.minFilter = displacementMap.minFilter = NearestFilter
-displacementMap.wrapS = displacementMap.wrapT = RepeatWrapping
-
-const { onLoop } = useRenderLoop()
-
 const { roughness, iterations, depth, smoothing, displacement, metalness, speed } = useControls({
   roughness: {
-    value: params.roughness,
+    value: marbleParams.roughness,
     min: 0,
     max: 1,
     step: 0.01,
   },
   metalness: {
-    value: params.metalness,
+    value: marbleParams.metalness,
     min: 0,
     max: 1,
     step: 0.01,
   },
   iterations: {
-    value: params.iterations,
+    value: marbleParams.iterations,
     min: 1,
     max: 64,
     step: 1,
   },
   depth: {
-    value: params.depth,
+    value: marbleParams.depth,
     min: 0,
     max: 1,
     step: 0.01,
   },
   smoothing: {
-    value: params.smoothing,
+    value: marbleParams.smoothing,
     min: 0,
     max: 1,
     step: 0.01,
   },
   displacement: {
-    value: params.displacement,
+    value: marbleParams.displacement,
     min: 0,
-    max: .35,
+    max: 0.35,
     step: 0.01,
   },
   speed: {
-    value: params.speed,
+    value: marbleParams.speed,
     min: 0,
-    max: .5,
+    max: 0.5,
     step: 0.001,
   },
 })
 
-const currentColor = computed(() => colors.value[indexColor.value])
+const { toneMappingMode, toneMappingExposure } = useControls('toneMapping', {
+  mode: {
+    options: Object.keys(ToneMappingMode).map(key => ({
+      text: key,
+      value: ToneMappingMode[key as keyof typeof ToneMappingMode],
+    })),
+    value: ToneMappingMode.NEUTRAL,
+  },
+  exposure: {
+    value: 1,
+    min: 0,
+    max: 10,
+    step: 0.1,
+  },
+})
 
-const colorFinalB = computed(() => new Color(`hsl(${currentColor.value[0]}, ${currentColor.value[1]}%, ${currentColor.value[2]}%)`))
+watchEffect(() => {
+  marbleParams.roughness = roughness.value
+  marbleParams.iterations = iterations.value
+  marbleParams.depth = depth.value
+  marbleParams.smoothing = smoothing.value
+  marbleParams.displacement = displacement.value
+  marbleParams.metalness = metalness.value
+  marbleParams.speed = speed.value
+})
 
-const backgroundGradient = computed(() => `radial-gradient(hsl(${currentColor.value[0]}, ${currentColor.value[1] * 0.7}%, ${currentColor.value[2]}%), hsl(${currentColor.value[0]},${currentColor.value[1] * 0.4}%, ${currentColor.value[2] * 0.2}%))`)
+const colors: [number, number, number][] = [
+  [0, 100, 50],
+  [60, 100, 50],
+  [150, 100, 50],
+  [240, 70, 60],
+  [0, 0, 80],
+]
 
-const uniforms = reactive({
-  time: { value: 0 },
-  colorA: { value: new Color(0, 0, 0) },
-  colorB: { value: new Color(`hsl(${colors.value[0][0]}, ${colors.value[0][1]}%, ${colors.value[0][2]}%)`) },
-  heightMap: { value: heightMap },
-  displacementMap: { value: displacementMap },
-  iterations,
-  depth,
-  smoothing,
-  displacement,
-})
+const currentColor = computed(() => colors[indexColor.value])
+
+const backgroundGradient = computed(() => `radial-gradient(hsl(${currentColor.value[0]}, ${currentColor.value[1] * 0.7}%, ${currentColor.value[2]}%), hsl(${currentColor.value[0]},${currentColor.value[1] * 0.4}%, ${currentColor.value[2] * 0.2}%))`)
 
 onMounted(() => {
   ctx = gsap.context(() => { }, mainRef.value)
+
+  animateColorTransition(true)
 })
 
 onUnmounted(() => {
   ctx?.revert()
 })
 
-watch(sphereRef, (value) => {
-  updateBackground(true)
-})
-
-const onPointerClick = () => {
-  if (tlInProgress.value) return
+const handleSphereClick = () => {
+  indexColor.value = (indexColor.value + 1) % colors.length
 
-  indexColor.value = (indexColor.value + 1) % colors.value.length
-
-  updateBackground()
+  animateColorTransition()
 }
 
-const updateBackground = (immediate = false) => {
+const animateColorTransition = (immediate = false) => {
   if (immediate) {
     ctx.add(() => {
       gsap.set(backgroundRef.value, {
@@ -135,82 +137,31 @@ const updateBackground = (immediate = false) => {
   }
   else {
     ctx.add(() => {
-      tl = gsap.timeline({
-        onStart: () => {
-          tlInProgress.value = true
-        },
-        onComplete: () => {
-          tlInProgress.value = false
-        },
+      marbleRef.value?.animateSphereColor()
+
+      gsap.to(backgroundRef.value, {
+        background: `${backgroundGradient.value}`,
+        duration: 1.2,
+        ease: 'power2.out',
+        overwrite: 'auto'
       })
-        .addLabel('sphereAnimation')
-        .to(backgroundRef.value, {
-          background: `${backgroundGradient.value}`,
-          duration: .75,
-          ease: 'power1.out',
-        }, 'sphereAnimation+=.15')
-        .to(uniforms.colorB.value, {
-          r: colorFinalB.value.r,
-          g: colorFinalB.value.g,
-          b: colorFinalB.value.b,
-          duration: .75,
-          ease: 'power1.out',
-        }, 'sphereAnimation+=.15')
-        .to(sphereRef.value.value.scale, {
-          x: .95,
-          y: .95,
-          z: .95,
-          duration: 0.35,
-          ease: 'power1.inOut',
-        }, 'sphereAnimation+=.15')
-        .to(sphereRef.value.value.scale, {
-          x: 1,
-          y: 1,
-          z: 1,
-          duration: 0.5,
-          ease: 'elastic.out(1, 0.5)',
-        }, 'sphereAnimation+=85%')
-        .to(params, {
-          timeOffset: ((1 + indexColor.value) * 0.0035),
-          duration: 0.65,
-          ease: 'power1.inOut',
-        }, 'sphereAnimation')
-        .to(params, {
-          timeOffset: 0,
-          duration: 0.35,
-          ease: 'power1.out',
-        }, 'sphereAnimation+=.5')
     })
   }
 }
 
-onLoop(({ delta }) => {
-  uniforms.time.value += params.timeOffset + delta * speed.value.value
+const contactShadowColor = computed(() => {
+  const [h, s, l] = currentColor.value
+  return `hsl(${h}, ${s}%, ${Math.max(0, l - 30)}%)`
 })
 </script>
 
 <template>
+  <TresLeches />
+
   <div
     ref="mainRef"
     class="magical-marbles"
   >
-    <NuxtLink
-      class="magical-marbles__logo"
-      to="/"
-    >
-      <img
-        src="/lab.svg"
-        alt="TresJS Logo"
-      >
-    </NuxtLink>
-
-    <button
-      class="magical-marbles__cta"
-      @click.stop="onPointerClick"
-    >
-      shuffle colors
-    </button>
-
     <div class="magical-marbles__infos">
       <NuxtLink to="/">
         See more experiments and examples
@@ -230,44 +181,47 @@ onLoop(({ delta }) => {
       ref="backgroundRef"
       class="magical-marbles__bg"
     />
-
-    <TresLeches />
+  </div>
 
     <TresCanvas
       window-size
       v-bind="gl"
+      :toneMappingExposure="toneMappingExposure"
     >
       <TresPerspectiveCamera
-        :position="[0, 0, 4.5]"
+        :position="[0, 0, 3.5]"
         :fov="45"
         :near=".1"
         :far="1000"
       />
+      
       <OrbitControls
         auto-rotate
+        :enable-rotate="false"
+        :enable-pan="false"
         make-default
       />
 
+      <Marble
+        ref="marbleRef" 
+        :colors="colors"
+        :params="marbleParams"
+        :indexColor="indexColor"
+        @sphere-click="handleSphereClick"
+      />
+
+    <ContactShadows :position-y="-1.1" :color="contactShadowColor" :blur="0.85" :scale="5" :opacity="0.35" />
+      <Suspense>
+        <Environment preset="urban" :environmentIntensity="0.85"  />
+      </Suspense>
+
       <Suspense>
-        <Environment preset="hangar" />
+        <EffectComposerPmndrs :multisampling="4">
+          <ToneMappingPmndrs :mode="toneMappingMode" />
+        </EffectComposerPmndrs>
       </Suspense>
 
-      <Sphere
-        ref="sphereRef"
-        :args="[1, 64, 32]"
-      >
-        <CustomShaderMaterial
-          :roughness="roughness.value"
-          :metalness="metalness.value"
-          :base-material="MeshStandardMaterial"
-          :vertex-shader="vertex"
-          :fragment-shader="fragment"
-          :uniforms="uniforms"
-          silent
-        />
-      </Sphere>
     </TresCanvas>
-  </div>
 </template>
 
 <style scoped>
@@ -289,47 +243,12 @@ onLoop(({ delta }) => {
     pointer-events: none;
 }
 
-.magical-marbles__logo {
-    align-self: flex-start;
-    position: absolute;
-    top: 40px;
-    left: 60px;
-    width: 5%;
-    z-index: 3;
-}
-
 .magical-marbles__infos {
     margin-top: auto;
     position: absolute;
     bottom: 40px;
     left: 60px;
-    z-index: 3;
-}
-
-.magical-marbles__cta {
-    z-index: 3;
-    background: white;
-    position: absolute;
-    bottom: 40px;
-    right: 60px;
-    padding: 10px 20px;
-    color: black;
-    border-radius: 5px;
-    transition: transform .3s cubic-bezier(0.33, 1, 0.68, 1);
-    will-change: transform;
-    text-transform: uppercase;
-    font-weight: 800;
-    font-size: 0.85vw;
-    transform: scale(1)
-}
-
-.magical-marbles__cta:hover {
-    transform: scale(1.05)
-}
-
-.magical-marbles p,
-.magical-marbles a {
-    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
+    z-index: 5;
 }
 
 .magical-marbles__infos p {
@@ -352,8 +271,7 @@ canvas {
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 2;
+    z-index: 4;
     /* pointer-events: none !important; */
-
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/content/magical-marbles/shaders.ts b/components/content/magical-marbles/shaders.ts
index 9c4d4c94..68bc3f87 100644
--- a/components/content/magical-marbles/shaders.ts
+++ b/components/content/magical-marbles/shaders.ts
@@ -5,80 +5,72 @@ export const vertex = /* glsl */ `
     void main() {
         v_pos = position;
         v_dir = position - cameraPosition; // Points from camera to vertex
-
-        // csm_Position = position;
     }
 `
 
 export const fragment = /* glsl */ `
-      #define FLIP vec2(1., -1.)
-
-      uniform vec3 colorA;
-      uniform vec3 colorB;
-      uniform sampler2D heightMap;
-      uniform sampler2D displacementMap;
-      uniform int iterations;
-      uniform float depth;
-      uniform float smoothing;
-      uniform float displacement;
-      uniform float time;
-
-      varying vec3 v_pos;
-      varying vec3 v_dir;
-
-         	/**
-         * @param p - Point to displace
-         * @param strength - How much the map can displace the point
-         * @returns Point with scrolling displacement applied
-         */
-        vec3 displacePoint(vec3 p, float strength) {
-        	vec2 uv = equirectUv(normalize(p));
-          vec2 scroll = vec2(time, 0.);
-          vec3 displacementA = texture(displacementMap, uv + scroll).rgb; // Upright
-					vec3 displacementB = texture(displacementMap, uv * FLIP - scroll).rgb; // Upside down
-
-          // Center the range to [-0.5, 0.5], note the range of their sum is [-1, 1]
-          displacementA -= 0.5;
-          displacementB -= 0.5;
-
-          return p + strength * (displacementA + displacementB);
-        }
-
-				/**
-          * @param rayOrigin - Point on sphere
-          * @param rayDir - Normalized ray direction
-          * @returns Diffuse RGB color
-          */
-        vec3 marchMarble(vec3 rayOrigin, vec3 rayDir) {
-          float perIteration = 1. / float(iterations);
-          vec3 deltaRay = rayDir * perIteration * depth;
-
-          // Start at point of intersection and accumulate volume
-          vec3 p = rayOrigin;
-          float totalVolume = 0.;
-
-          for (int i=0; i<iterations; ++i) {
-            // Read heightmap from spherical direction of displaced ray position
-            vec3 displaced = displacePoint(p, displacement);
-            vec2 uv = equirectUv(normalize(displaced));
-            float heightMapVal = texture(heightMap, uv).r;
-
-            // Take a slice of the heightmap
-            float height = length(p); // 1 at surface, 0 at core, assuming radius = 1
-            float cutoff = 1. - float(i) * perIteration;
-            float slice = smoothstep(cutoff, cutoff + smoothing, heightMapVal);
-
-            // Accumulate the volume and advance the ray forward one step
-            totalVolume += slice * perIteration;
-            p += deltaRay;
-          }
-          return mix(colorA, colorB, totalVolume);
-        }
+#define FLIP vec2(1., -1.)
 
-    void main() {
-      	vec3 rayDir = normalize(v_dir);
-        vec3 rayOrigin = v_pos;
+uniform vec3 colorA;
+uniform vec3 colorB;
+uniform sampler2D heightMap;
+uniform sampler2D displacementMap;
+uniform int iterations;
+uniform float depth;
+uniform float smoothing;
+uniform float displacement;
+uniform float uTime;
+uniform float uDisplacementSpeed;
+
+varying vec3 v_pos;
+varying vec3 v_dir;
+
+vec2 getUv(vec3 p) {
+  vec3 n = normalize(p);
+  float u = atan(n.z, n.x) / (2.0 * 3.141592653589793238) + 0.5;
+  float v = asin(n.y) / 3.141592653589793238 + 0.5;
+  return vec2(u, v);
+}
+
+vec3 displacePoint(vec3 p, float strength) {
+  vec2 uv = getUv(p);
+  vec2 scroll = vec2(((uTime + 1.0) * (uDisplacementSpeed * 0.5)), 0.0);
+
+  vec3 displaceA = texture(displacementMap, uv + scroll).rgb - 0.5;
+  vec3 displaceB = texture(displacementMap, uv * FLIP - scroll).rgb - 0.5;
+
+  return p + strength * uDisplacementSpeed * (displaceA + displaceB);
+}
+
+vec3 marchMarble(vec3 rayOrigin, vec3 rayDir) {
+  float invIterations = 1.0 / float(iterations);
+  vec3 deltaRay = rayDir * invIterations * depth * uDisplacementSpeed;
+  vec3 p = rayOrigin;
+  float totalVolume = 0.0;
 
-        vec3 rgb = marchMarble(rayOrigin, rayDir);
-				csm_DiffuseColor = vec4(rgb, 1.);
-    } `
+  for (int i = 0; i < 256; ++i) {
+    if (i >= iterations) break;
+
+    vec3 displaced = displacePoint(p, displacement);
+    vec2 uv = getUv(displaced);
+    float heightMapVal = texture(heightMap, uv).r;
+
+    float height = length(p);
+    float cutoff = 1.0 - float(i) * invIterations;
+    float slice = smoothstep(cutoff, cutoff + smoothing, heightMapVal);
+
+    totalVolume += slice * invIterations;
+    p += deltaRay;
+  }
+
+  return mix(colorA, colorB, totalVolume);
+}
+
+void main() {
+  vec3 rayDir = normalize(v_dir);
+  vec3 rayOrigin = v_pos;
+
+  vec3 rgb = marchMarble(rayOrigin, rayDir);
+  csm_DiffuseColor = vec4(rgb, 1.0);
+}
+`
diff --git a/components/content/materials/MaterialSphere.vue b/components/content/materials/MaterialSphere.vue
deleted file mode 100644
index f206fdc8..00000000
--- a/components/content/materials/MaterialSphere.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script setup lang="ts">
-import {
-  Color,
-  MeshBasicMaterial,
-  MeshToonMaterial,
-  MeshLambertMaterial,
-  MeshMatcapMaterial,
-  MeshNormalMaterial,
-  MeshPhongMaterial,
-  MeshPhysicalMaterial,
-  MeshStandardMaterial,
-  CubeTextureLoader,
-} from 'three'
-
-const materialState = shallowReactive({
-  color: '#008080',
-  metalness: 0.5,
-  wireframe: false,
-})
-
-const cubeTextureLoader = new CubeTextureLoader()
-
-const environmentMap = cubeTextureLoader.load([
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/px.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/nx.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/py.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/ny.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/pz.jpg',
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/nz.jpg',
-])
-
-const sphereRef = shallowRef()
-
-// Tweakpane
-
-const { pane } = useTweakPane()
-pane
-  .addInput(materialState, 'color', {
-    label: 'Color',
-  })
-  .on('change', (ev: any) => {
-    sphereRef.value.material.color = new Color(ev.value)
-  })
-
-pane
-  .addInput(materialState, 'wireframe', {
-    label: 'Wireframe',
-  })
-  .on('change', (ev: any) => {
-    sphereRef.value.material.wireframe = ev.value
-  })
-
-const materialProps = ['metalness', 'roughness']
-
-materialProps.forEach((element) => {
-  pane
-    .addBlade({
-      view: 'slider',
-      label: element,
-      min: 0,
-      max: 1,
-      value: 0.5,
-    })
-    .on('change', (ev: any) => {
-      materialState[element] = ev.value
-      sphereRef.value.material[element] = ev.value
-    })
-})
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'Materials',
-    options: [
-      { text: 'MeshBasicMaterial', value: MeshBasicMaterial },
-      { text: 'MeshToonMaterial', value: MeshToonMaterial },
-      /*    { text: 'MeshDepthMaterial', value: MeshDepthMaterial },
-      { text: 'MeshDistanceMaterial', value: MeshDistanceMaterial }, */
-      { text: 'MeshLambertMaterial', value: MeshLambertMaterial },
-      { text: 'MeshMatcapMaterial', value: MeshMatcapMaterial },
-      { text: 'MeshNormalMaterial', value: MeshNormalMaterial },
-      { text: 'MeshPhongMaterial', value: MeshPhongMaterial },
-      { text: 'MeshPhysicalMaterial', value: MeshPhysicalMaterial },
-      { text: 'MeshStandardMaterial', value: MeshStandardMaterial },
-    ],
-    value: MeshToonMaterial,
-  })
-  .on('change', (ev) => {
-    sphereRef.value.material = new ev.value(materialState)
-
-    if (ev.value === MeshStandardMaterial || ev.value === MeshPhysicalMaterial) {
-      sphereRef.value.material.envMap = environmentMap
-    }
-  })
-</script>
-
-<template>
-  <TresMesh
-    ref="sphereRef"
-    :position="[0, 1, 0]"
-  >
-    <TresSphereGeometry :args="[1, 32, 32]" />
-    <TresMeshToonMaterial :color="materialState.color" />
-  </TresMesh>
-</template>
diff --git a/components/content/materials/index.vue b/components/content/materials/index.vue
deleted file mode 100644
index b74e48ee..00000000
--- a/components/content/materials/index.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { OrbitControls, Plane } from '@tresjs/cientos'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-import { shallowReactive } from 'vue'
-
-const gl = shallowReactive({
-  clearColor: '#4f4f4f',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-})
-</script>
-
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera
-      :position="[3, 3, 5]"
-      :fov="45"
-      :aspect="1"
-      :near="0.1"
-      :far="1000"
-    />
-    <OrbitControls />
-    <Suspense />
-    <TresDirectionalLight
-      :position="[-3, 4, 4]"
-      :intensity="2"
-      cast-shadow
-    />
-    <TresDirectionalLight
-      :position="[3, 4, 0]"
-      :intensity="0.5"
-      cast-shadow
-    />
-    <MaterialSphere />
-    <Plane :args="[10, 10]">
-      <TresMeshToonMaterial color="#222" />
-    </Plane>
-    <TresAmbientLight :intensity="1" />
-  </TresCanvas>
-</template>
diff --git a/content/experiments/magical-marbles.md b/content/experiments/magical-marbles.md
new file mode 100644
index 00000000..3ee8f75e
--- /dev/null
+++ b/content/experiments/magical-marbles.md
@@ -0,0 +1,10 @@
+---
+title: Magical Marbles
+author: damienmontastier
+description: Magical Marbles Sphere
+tags: ['magical', 'marbles', 'sphere', 'shaders', 'glsl', 'contact shadow']
+date: 2024-02-28
+updated: 2025-06-29
+---
+
+<MagicalMarbles />
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6844acf0..154e2357 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -46,7 +46,7 @@ export default defineNuxtConfig({
     '@nuxt/eslint',
   ],
 
-  css: ['/styles/main.css', '@tresjs/leches/styles'],
+  css: ['/styles/main.css'],
   declare: ['*.glsl'],
 
   tres: {
diff --git a/package.json b/package.json
index c1b17946..544d7805 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "@tresjs/cientos": "5.0.0-next.4",
     "@tresjs/core": "5.0.0-next.6",
     "@tresjs/eslint-config-vue": "^0.2.1",
-    "@tresjs/leches": "https://pkg.pr.new/@tresjs/leches@5536ad5",
+    "@tresjs/leches": "https://pkg.pr.new/@tresjs/leches@f356fed",
     "@tresjs/nuxt": "4.1.0-next.1",
     "@tweakpane/plugin-essentials": "^0.2.1",
     "@types/three": "^0.177.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7af3abd3..43f41f09 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -73,8 +73,8 @@ importers:
         specifier: ^0.2.1
         version: 0.2.1(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)
       '@tresjs/leches':
-        specifier: https://pkg.pr.new/@tresjs/leches@5536ad5
-        version: https://pkg.pr.new/@tresjs/leches@5536ad5(magicast@0.3.5)(unocss@66.2.3(@unocss/webpack@66.2.3(webpack@5.99.9(esbuild@0.25.5)))(postcss@8.5.6)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.43.0)(yaml@2.8.0))(vue@3.5.17(typescript@5.8.3)))(vue@3.5.17(typescript@5.8.3))
+        specifier: https://pkg.pr.new/@tresjs/leches@f356fed
+        version: https://pkg.pr.new/@tresjs/leches@f356fed(magicast@0.3.5)(unocss@66.2.3(@unocss/webpack@66.2.3(webpack@5.99.9(esbuild@0.25.5)))(postcss@8.5.6)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.43.0)(yaml@2.8.0))(vue@3.5.17(typescript@5.8.3)))(vue@3.5.17(typescript@5.8.3))
       '@tresjs/nuxt':
         specifier: 4.1.0-next.1
         version: 4.1.0-next.1(jwt-decode@4.0.0)(magicast@0.3.5)(postcss@8.5.6)(rollup@4.43.0)(three@0.177.0)(typescript@5.8.3)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.43.0)(yaml@2.8.0))(vue@3.5.17(typescript@5.8.3))(webpack@5.99.9(esbuild@0.25.5))(zod@3.25.67)
@@ -1487,8 +1487,8 @@ packages:
       eslint: '>=7.4.0'
       typescript: '>=3.9'
 
-  '@tresjs/leches@https://pkg.pr.new/@tresjs/leches@5536ad5':
-    resolution: {tarball: https://pkg.pr.new/@tresjs/leches@5536ad5}
+  '@tresjs/leches@https://pkg.pr.new/@tresjs/leches@f356fed':
+    resolution: {tarball: https://pkg.pr.new/@tresjs/leches@f356fed}
     version: 0.14.1
     peerDependencies:
       vue: '>=3.3.4'
@@ -1750,12 +1750,12 @@ packages:
   '@unocss/core@65.5.0':
     resolution: {integrity: sha512-XYWdS09M2XOjZNDotGhI2TIW/6duLNiyssopwjCbv4AlPklF0bZI86SKI55syYDBt6GRadoQbuvUkhSiTV/hzQ==}
 
-  '@unocss/core@66.1.0-beta.7':
-    resolution: {integrity: sha512-l1/r+Jd9TbsRqR/geEdIV/Erzvs26GitTtMVsGcJfuaK1/WWOLtbSHRUDQAB/UpcOOWvuNuAv4UWsXX9Z0DFmw==}
-
   '@unocss/core@66.2.3':
     resolution: {integrity: sha512-mRpwm3HUAqCtQrBB7+vkCp0qDZT+G1s2EAVJIF6zzrnoqb2BmIlHgz7DXVDufRFMRJtQUCp2jVMtEQZCTXEVjQ==}
 
+  '@unocss/core@66.3.2':
+    resolution: {integrity: sha512-C8UbTenNb/pHo68Ob+G1DTKJkQOeWT8IXTzDV7Vq6hPa9R7eE1l2l20pDKGs6gXYEBYPpY9EV4f5E0vUKDf8sw==}
+
   '@unocss/extractor-arbitrary-variants@65.5.0':
     resolution: {integrity: sha512-7K3gftOdkv9jbWvbkExTcx6/FDP2Xk/NSsOYTvR9oITLnLjmdQvp+9276WSnNfKF3frBl8ZcqpkC2EsuL2Yutw==}
 
@@ -9161,9 +9161,9 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  '@tresjs/leches@https://pkg.pr.new/@tresjs/leches@5536ad5(magicast@0.3.5)(unocss@66.2.3(@unocss/webpack@66.2.3(webpack@5.99.9(esbuild@0.25.5)))(postcss@8.5.6)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.43.0)(yaml@2.8.0))(vue@3.5.17(typescript@5.8.3)))(vue@3.5.17(typescript@5.8.3))':
+  '@tresjs/leches@https://pkg.pr.new/@tresjs/leches@f356fed(magicast@0.3.5)(unocss@66.2.3(@unocss/webpack@66.2.3(webpack@5.99.9(esbuild@0.25.5)))(postcss@8.5.6)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.43.0)(yaml@2.8.0))(vue@3.5.17(typescript@5.8.3)))(vue@3.5.17(typescript@5.8.3))':
     dependencies:
-      '@unocss/core': 66.1.0-beta.7
+      '@unocss/core': 66.3.2
       '@vueuse/components': 13.3.0(vue@3.5.17(typescript@5.8.3))
       '@vueuse/motion': 3.0.3(magicast@0.3.5)(vue@3.5.17(typescript@5.8.3))
       unocss-preset-scrollbar: 3.2.0(unocss@66.2.3(@unocss/webpack@66.2.3(webpack@5.99.9(esbuild@0.25.5)))(postcss@8.5.6)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.43.0)(yaml@2.8.0))(vue@3.5.17(typescript@5.8.3)))
@@ -9559,10 +9559,10 @@ snapshots:
 
   '@unocss/core@65.5.0': {}
 
-  '@unocss/core@66.1.0-beta.7': {}
-
   '@unocss/core@66.2.3': {}
 
+  '@unocss/core@66.3.2': {}
+
   '@unocss/extractor-arbitrary-variants@65.5.0':
     dependencies:
       '@unocss/core': 65.5.0
diff --git a/public/experiments/magical-marbles.png b/public/experiments/magical-marbles.png
new file mode 100644
index 00000000..a9e7f612
Binary files /dev/null and b/public/experiments/magical-marbles.png differ