From 12b5bb58913adf4a20daab786afef9ebd87174d2 Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Tue, 12 Aug 2025 22:11:25 +0200
Subject: [PATCH 1/4] feat: add grainy liquid effect with Blob component and
 shaders

- Introduced `Blob.vue` to create a dynamic grainy liquid effect using Three.js shaders.
- Added `Experience.vue` to manage the scene setup, including camera and lighting configurations.
- Created vertex and fragment shaders for realistic liquid movement and color mixing.
- Implemented a global entry point in `index.global.vue` to render the grainy liquid experience.
- Added TypeScript definitions for shader files to ensure type safety.
- Documented the grainy liquid experiment in a new markdown file for clarity and reference.

These additions enhance the visual effects and interactivity of the application, providing a more engaging user experience.
---
 app/components/grainy-liquid/Blob.vue         | 115 ++++++++++++++++++
 app/components/grainy-liquid/Experience.vue   |  24 ++++
 app/components/grainy-liquid/index.global.vue |   8 ++
 .../grainy-liquid/shaders/fragment.glsl       |  73 +++++++++++
 .../grainy-liquid/shaders/fragment.glsl.d.ts  |   2 +
 .../grainy-liquid/shaders/vertex.glsl         | 109 +++++++++++++++++
 .../grainy-liquid/shaders/vertex.glsl.d.ts    |   2 +
 content/experiments/grainy-liquid.md          |   7 ++
 8 files changed, 340 insertions(+)
 create mode 100644 app/components/grainy-liquid/Blob.vue
 create mode 100644 app/components/grainy-liquid/Experience.vue
 create mode 100644 app/components/grainy-liquid/index.global.vue
 create mode 100644 app/components/grainy-liquid/shaders/fragment.glsl
 create mode 100644 app/components/grainy-liquid/shaders/fragment.glsl.d.ts
 create mode 100644 app/components/grainy-liquid/shaders/vertex.glsl
 create mode 100644 app/components/grainy-liquid/shaders/vertex.glsl.d.ts
 create mode 100644 content/experiments/grainy-liquid.md

diff --git a/app/components/grainy-liquid/Blob.vue b/app/components/grainy-liquid/Blob.vue
new file mode 100644
index 00000000..b707464e
--- /dev/null
+++ b/app/components/grainy-liquid/Blob.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { Mesh } from 'three'
+import { Vector3, Color } from 'three'
+import vertexShader from './shaders/vertex.glsl'
+import fragmentShader from './shaders/fragment.glsl'
+
+const { onBeforeRender } = useLoop()
+
+const blobRef = ref<Mesh | null>(null)
+
+const { amplitude, frequency, speed, colorA, colorB, colorC, noiseScale, grainIntensity, fresnelPower } = useControls({
+  amplitude: {
+    value: 0.15,
+    min: 0,
+    max: 0.5,
+    step: 0.01,
+    label: 'Amplitude'
+  },
+  frequency: {
+    value: 1.2,
+    min: 0.1,
+    max: 3,
+    step: 0.1,
+    label: 'Frequency'
+  },
+  speed: {
+    value: 0.8,
+    min: 0.1,
+    max: 2,
+    step: 0.1,
+    label: 'Speed'
+  },
+  colorA: '#1a66cc',
+  colorB: '#cc3366',
+  colorC: '#e6e6e6',
+  noiseScale: {
+    value: 2.0,
+    min: 0.5,
+    max: 5,
+    step: 0.1,
+    label: 'Noise Scale'
+  },
+  grainIntensity: {
+    value: 0.05,
+    min: 0,
+    max: 0.2,
+    step: 0.01,
+    label: 'Grain'
+  },
+  fresnelPower: {
+    value: 2.0,
+    min: 0.5,
+    max: 5,
+    step: 0.1,
+    label: 'Fresnel'
+  }
+})
+
+function hexToVector3(hex: string): Vector3 {
+  const color = new Color(hex)
+  return new Vector3(color.r, color.g, color.b)
+}
+
+const uniforms = ref({
+  u_time: { value: 0.0 },
+  u_amplitude: { value: amplitude.value },
+  u_frequency: { value: frequency.value },
+  u_speed: { value: speed.value },
+  u_colorA: { value: hexToVector3(colorA.value) },
+  u_colorB: { value: hexToVector3(colorB.value) },
+  u_colorC: { value: hexToVector3(colorC.value) },
+  u_noiseScale: { value: noiseScale.value },
+  u_grainIntensity: { value: grainIntensity.value },
+  u_fresnelPower: { value: fresnelPower.value }
+})
+
+watch([amplitude, frequency, speed, noiseScale, grainIntensity, fresnelPower], () => {
+  uniforms.value.u_amplitude.value = amplitude.value
+  uniforms.value.u_frequency.value = frequency.value
+  uniforms.value.u_speed.value = speed.value
+  uniforms.value.u_noiseScale.value = noiseScale.value
+  uniforms.value.u_grainIntensity.value = grainIntensity.value
+  uniforms.value.u_fresnelPower.value = fresnelPower.value
+})
+
+watch([colorA, colorB, colorC], () => {
+  uniforms.value.u_colorA.value = hexToVector3(colorA.value)
+  uniforms.value.u_colorB.value = hexToVector3(colorB.value)
+  uniforms.value.u_colorC.value = hexToVector3(colorC.value)
+})
+
+onBeforeRender(({ elapsed }) => {
+  if (uniforms.value) {
+    uniforms.value.u_time.value = elapsed
+  }
+  
+  if (blobRef.value) {
+    blobRef.value.rotation.y += 0.005
+    blobRef.value.rotation.x += 0.002
+  }
+})
+</script>
+
+<template>
+  <TresMesh ref="blobRef">
+    <TresIcosahedronGeometry :args="[2, 64]" />
+    <TresShaderMaterial 
+      :uniforms="uniforms" 
+      :vertex-shader="vertexShader"
+      :fragment-shader="fragmentShader"
+      :transparent="false"
+      :side="0"
+    />
+  </TresMesh>
+</template>
\ No newline at end of file
diff --git a/app/components/grainy-liquid/Experience.vue b/app/components/grainy-liquid/Experience.vue
new file mode 100644
index 00000000..5b76cd25
--- /dev/null
+++ b/app/components/grainy-liquid/Experience.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import Blob from './Blob.vue'
+import { BlendFunction } from 'postprocessing'
+
+</script>
+
+<template>
+  <TresPerspectiveCamera :position="[0, 0, 6]" />
+  <OrbitControls />
+  
+  <Blob />
+  
+  <TresDirectionalLight :position="[5, 5, 5]" :intensity="0.8" />
+  <TresAmbientLight :intensity="0.3" />
+  <Suspense>
+    <EffectComposerPmndrs>
+      <NoisePmndrs
+        premultiply
+        :blend-function="BlendFunction.COLOR_DODGE"
+      />
+    </EffectComposerPmndrs>
+  </Suspense>
+</template>
\ No newline at end of file
diff --git a/app/components/grainy-liquid/index.global.vue b/app/components/grainy-liquid/index.global.vue
new file mode 100644
index 00000000..b64c1226
--- /dev/null
+++ b/app/components/grainy-liquid/index.global.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+
+</script>
+<template>
+ <TresCanvas clear-color="white">
+    <GrainyLiquidExperience />
+ </TresCanvas>
+</template>
\ No newline at end of file
diff --git a/app/components/grainy-liquid/shaders/fragment.glsl b/app/components/grainy-liquid/shaders/fragment.glsl
new file mode 100644
index 00000000..82b7d06a
--- /dev/null
+++ b/app/components/grainy-liquid/shaders/fragment.glsl
@@ -0,0 +1,73 @@
+uniform float u_time;
+uniform vec3 u_colorA;
+uniform vec3 u_colorB;
+uniform vec3 u_colorC;
+uniform float u_noiseScale;
+uniform float u_grainIntensity;
+uniform float u_fresnelPower;
+
+varying vec3 v_position;
+varying vec3 v_normal;
+varying vec2 v_uv;
+
+// Random function for grain effect
+float random(vec2 st) {
+    return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
+}
+
+// Noise function for color mixing
+float noise(vec2 st) {
+    vec2 i = floor(st);
+    vec2 f = fract(st);
+    
+    float a = random(i);
+    float b = random(i + vec2(1.0, 0.0));
+    float c = random(i + vec2(0.0, 1.0));
+    float d = random(i + vec2(1.0, 1.0));
+    
+    vec2 u = f * f * (3.0 - 2.0 * f);
+    
+    return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+}
+
+// Fractal Brownian Motion for more complex noise
+float fbm(vec2 st) {
+    float value = 0.0;
+    float amplitude = 0.5;
+    float frequency = 1.0;
+    
+    for (int i = 0; i < 5; i++) {
+        value += amplitude * noise(st * frequency);
+        frequency *= 2.0;
+        amplitude *= 0.5;
+    }
+    
+    return value;
+}
+
+void main() {
+    vec3 normal = normalize(v_normal);
+    vec3 viewDirection = normalize(cameraPosition - v_position);
+    
+    // Fresnel effect for liquid-like rim lighting
+    float fresnel = 1.0 - dot(normal, viewDirection);
+    fresnel = pow(fresnel, u_fresnelPower);
+    
+    // Create flowing noise pattern for color mixing
+    vec2 flowUv = v_uv + u_time * 0.1;
+    float colorNoise = fbm(flowUv * u_noiseScale);
+    
+    // Mix colors based on noise and fresnel
+    vec3 baseColor = mix(u_colorA, u_colorB, colorNoise);
+    vec3 finalColor = mix(baseColor, u_colorC, fresnel);
+    
+    // Add grain effect
+    float grain = random(v_uv + u_time * 0.01) * u_grainIntensity;
+    finalColor += vec3(grain);
+    
+    // Add some iridescence based on viewing angle
+    float iridescence = sin(fresnel * 3.14159 + u_time) * 0.1;
+    finalColor += vec3(iridescence * 0.5, iridescence * 0.8, iridescence);
+    
+    gl_FragColor = vec4(finalColor, 1.0);
+}
\ No newline at end of file
diff --git a/app/components/grainy-liquid/shaders/fragment.glsl.d.ts b/app/components/grainy-liquid/shaders/fragment.glsl.d.ts
new file mode 100644
index 00000000..f93db699
--- /dev/null
+++ b/app/components/grainy-liquid/shaders/fragment.glsl.d.ts
@@ -0,0 +1,2 @@
+declare const content: string
+export default content
\ No newline at end of file
diff --git a/app/components/grainy-liquid/shaders/vertex.glsl b/app/components/grainy-liquid/shaders/vertex.glsl
new file mode 100644
index 00000000..81fbb17d
--- /dev/null
+++ b/app/components/grainy-liquid/shaders/vertex.glsl
@@ -0,0 +1,109 @@
+uniform float u_time;
+uniform float u_amplitude;
+uniform float u_frequency;
+uniform float u_speed;
+
+varying vec3 v_position;
+varying vec3 v_normal;
+varying vec2 v_uv;
+
+// Simplex noise functions
+vec3 mod289(vec3 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 mod289(vec4 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x) {
+     return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r) {
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float snoise(vec3 v) { 
+  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  vec3 i  = floor(v + dot(v, C.yyy) );
+  vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min( g.xyz, l.zxy );
+  vec3 i2 = max( g.xyz, l.zxy );
+
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy; 
+  vec3 x3 = x0 - D.yyy;      
+
+  i = mod289(i); 
+  vec4 p = permute( permute( permute( 
+             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+           + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
+           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+  float n_ = 0.142857142857; 
+  vec3  ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_ );    
+
+  vec4 x = x_ *ns.x + ns.yyyy;
+  vec4 y = y_ *ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4( x.xy, y.xy );
+  vec4 b1 = vec4( x.zw, y.zw );
+
+  vec4 s0 = floor(b0)*2.0 + 1.0;
+  vec4 s1 = floor(b1)*2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+  vec3 p0 = vec3(a0.xy,h.x);
+  vec3 p1 = vec3(a0.zw,h.y);
+  vec3 p2 = vec3(a1.xy,h.z);
+  vec3 p3 = vec3(a1.zw,h.w);
+
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
+                                dot(p2,x2), dot(p3,x3) ) );
+}
+
+void main() {
+  v_uv = uv;
+  v_normal = normal;
+  
+  vec3 pos = position;
+  float time = u_time * u_speed;
+  
+  // Create multiple layers of noise for liquid-like movement
+  float noise1 = snoise(pos * u_frequency + time * 0.5);
+  float noise2 = snoise(pos * u_frequency * 2.0 + time * 0.3);
+  float noise3 = snoise(pos * u_frequency * 4.0 + time * 0.7);
+  
+  // Combine noise layers with different amplitudes
+  float displacement = noise1 * 0.6 + noise2 * 0.3 + noise3 * 0.1;
+  
+  // Apply displacement along normal direction with smoother transition
+  vec3 displacedPosition = pos + normal * displacement * u_amplitude;
+  
+  v_position = displacedPosition;
+  
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(displacedPosition, 1.0);
+}
\ No newline at end of file
diff --git a/app/components/grainy-liquid/shaders/vertex.glsl.d.ts b/app/components/grainy-liquid/shaders/vertex.glsl.d.ts
new file mode 100644
index 00000000..f93db699
--- /dev/null
+++ b/app/components/grainy-liquid/shaders/vertex.glsl.d.ts
@@ -0,0 +1,2 @@
+declare const content: string
+export default content
\ No newline at end of file
diff --git a/content/experiments/grainy-liquid.md b/content/experiments/grainy-liquid.md
new file mode 100644
index 00000000..bb9c843b
--- /dev/null
+++ b/content/experiments/grainy-liquid.md
@@ -0,0 +1,7 @@
+---
+title: Grainy Liquid 
+author: alvarosabu
+description: A grainy liquid blob
+tags: ['shaders']
+date: 2025-08-12
+---

From 424834bae305b6f53191b05be28403456f223091 Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Tue, 12 Aug 2025 22:34:09 +0200
Subject: [PATCH 2/4] feat: introduce MultiBlob component for enhanced grainy
 liquid effect

- Added `MultiBlob.vue` to render multiple `Blob` instances with configurable properties for position, scale, and color, enhancing the visual complexity of the grainy liquid effect.
- Updated `Blob.vue` to accept props for color and animation parameters, allowing for dynamic customization.
- Refactored `Experience.vue` to utilize `MultiBlob` instead of a single `Blob`, improving scene depth and interaction.
- Created `WebsiteLayout.vue` to structure the main layout, integrating the 3D canvas and content overlay for a cohesive user experience.
- Enhanced fragment shader to improve the grain effect, adding more texture and depth to the visual output.

These changes significantly enhance the visual richness and interactivity of the grainy liquid experience, providing users with a more engaging and dynamic interface.
---
 app/components/grainy-liquid/Blob.vue         | 34 +++++--
 app/components/grainy-liquid/Experience.vue   | 15 ++--
 app/components/grainy-liquid/MultiBlob.vue    | 62 +++++++++++++
 .../grainy-liquid/WebsiteLayout.vue           | 88 +++++++++++++++++++
 app/components/grainy-liquid/index.global.vue |  7 +-
 .../grainy-liquid/shaders/fragment.glsl       |  9 +-
 6 files changed, 192 insertions(+), 23 deletions(-)
 create mode 100644 app/components/grainy-liquid/MultiBlob.vue
 create mode 100644 app/components/grainy-liquid/WebsiteLayout.vue

diff --git a/app/components/grainy-liquid/Blob.vue b/app/components/grainy-liquid/Blob.vue
index b707464e..53e7ea8c 100644
--- a/app/components/grainy-liquid/Blob.vue
+++ b/app/components/grainy-liquid/Blob.vue
@@ -4,13 +4,29 @@ import { Vector3, Color } from 'three'
 import vertexShader from './shaders/vertex.glsl'
 import fragmentShader from './shaders/fragment.glsl'
 
+interface Props {
+  colorA?: string
+  colorB?: string
+  colorC?: string
+  speed?: number
+  amplitude?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  colorA: '#6366f1',
+  colorB: '#ec4899',
+  colorC: '#f1f5f9',
+  speed: 0.8,
+  amplitude: 0.15
+})
+
 const { onBeforeRender } = useLoop()
 
 const blobRef = ref<Mesh | null>(null)
 
-const { amplitude, frequency, speed, colorA, colorB, colorC, noiseScale, grainIntensity, fresnelPower } = useControls({
+const controlsConfig = {
   amplitude: {
-    value: 0.15,
+    value: props.amplitude,
     min: 0,
     max: 0.5,
     step: 0.01,
@@ -24,15 +40,15 @@ const { amplitude, frequency, speed, colorA, colorB, colorC, noiseScale, grainIn
     label: 'Frequency'
   },
   speed: {
-    value: 0.8,
+    value: props.speed,
     min: 0.1,
     max: 2,
     step: 0.1,
     label: 'Speed'
   },
-  colorA: '#1a66cc',
-  colorB: '#cc3366',
-  colorC: '#e6e6e6',
+  colorA: props.colorA,
+  colorB: props.colorB,
+  colorC: props.colorC,
   noiseScale: {
     value: 2.0,
     min: 0.5,
@@ -41,7 +57,7 @@ const { amplitude, frequency, speed, colorA, colorB, colorC, noiseScale, grainIn
     label: 'Noise Scale'
   },
   grainIntensity: {
-    value: 0.05,
+    value: 0.08,
     min: 0,
     max: 0.2,
     step: 0.01,
@@ -54,7 +70,9 @@ const { amplitude, frequency, speed, colorA, colorB, colorC, noiseScale, grainIn
     step: 0.1,
     label: 'Fresnel'
   }
-})
+}
+
+const { amplitude, frequency, speed, colorA, colorB, colorC, noiseScale, grainIntensity, fresnelPower } = useControls(controlsConfig)
 
 function hexToVector3(hex: string): Vector3 {
   const color = new Color(hex)
diff --git a/app/components/grainy-liquid/Experience.vue b/app/components/grainy-liquid/Experience.vue
index 5b76cd25..b83f0b63 100644
--- a/app/components/grainy-liquid/Experience.vue
+++ b/app/components/grainy-liquid/Experience.vue
@@ -1,23 +1,22 @@
 <script setup lang="ts">
 import { OrbitControls } from '@tresjs/cientos'
-import Blob from './Blob.vue'
+import MultiBlob from './MultiBlob.vue'
 import { BlendFunction } from 'postprocessing'
-
 </script>
 
 <template>
-  <TresPerspectiveCamera :position="[0, 0, 6]" />
-  <OrbitControls />
+  <TresPerspectiveCamera :position="[0, 0, 8]" />
+  <OrbitControls :enable-pan="false" :enable-zoom="false" />
+  
+  <MultiBlob />
   
-  <Blob />
+  <TresAmbientLight :intensity="0.4" />
   
-  <TresDirectionalLight :position="[5, 5, 5]" :intensity="0.8" />
-  <TresAmbientLight :intensity="0.3" />
   <Suspense>
     <EffectComposerPmndrs>
       <NoisePmndrs
         premultiply
-        :blend-function="BlendFunction.COLOR_DODGE"
+        :blend-function="BlendFunction.OVERLAY"
       />
     </EffectComposerPmndrs>
   </Suspense>
diff --git a/app/components/grainy-liquid/MultiBlob.vue b/app/components/grainy-liquid/MultiBlob.vue
new file mode 100644
index 00000000..2a1f0d71
--- /dev/null
+++ b/app/components/grainy-liquid/MultiBlob.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import Blob from './Blob.vue'
+
+interface BlobConfig {
+  position: [number, number, number]
+  scale: [number, number, number]
+  colorA: string
+  colorB: string
+  colorC: string
+  speed: number
+  amplitude: number
+}
+
+const blobs: BlobConfig[] = [
+  {
+    position: [-4, 2, 0],
+    scale: [1.8, 1.8, 1.8],
+    colorA: '#6366f1',
+    colorB: '#8b5cf6',
+    colorC: '#ddd6fe',
+    speed: 0.6,
+    amplitude: 0.15
+  },
+  {
+    position: [4, -2, -1],
+    scale: [1.5, 1.5, 1.5],
+    colorA: '#ec4899',
+    colorB: '#f472b6',
+    colorC: '#fce7f3',
+    speed: 0.8,
+    amplitude: 0.12
+  },
+  {
+    position: [0, 0, -4],
+    scale: [2.2, 2.2, 2.2],
+    colorA: '#f8fafc',
+    colorB: '#e2e8f0',
+    colorC: '#cbd5e1',
+    speed: 0.4,
+    amplitude: 0.06
+  }
+]
+</script>
+
+<template>
+  <TresGroup>
+    <TresGroup 
+      v-for="(blob, index) in blobs" 
+      :key="index"
+      :position="blob.position"
+      :scale="blob.scale"
+    >
+      <Blob 
+        :color-a="blob.colorA"
+        :color-b="blob.colorB" 
+        :color-c="blob.colorC"
+        :speed="blob.speed"
+        :amplitude="blob.amplitude"
+      />
+    </TresGroup>
+  </TresGroup>
+</template>
\ No newline at end of file
diff --git a/app/components/grainy-liquid/WebsiteLayout.vue b/app/components/grainy-liquid/WebsiteLayout.vue
new file mode 100644
index 00000000..64a43c91
--- /dev/null
+++ b/app/components/grainy-liquid/WebsiteLayout.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="relative h-screen w-full overflow-hidden bg-gray-50">
+    <!-- 3D Canvas Background -->
+    <div class="absolute inset-0">
+      <TresCanvas window-size clear-color="#f8fafc">
+        <Experience />
+      </TresCanvas>
+    </div>
+
+    <!-- Content Overlay -->
+    <div class="relative z-10 h-full flex flex-col">
+      <!-- Header -->
+      <header class="p-6 md:p-8">
+        <div class="flex items-center justify-between">
+          <!-- Logo/Icon -->
+          <div class="w-12 h-12 flex items-center justify-center">
+            <div class="w-8 h-8 rounded-full border-2 border-gray-800 relative">
+              <div class="absolute inset-1 rounded-full border border-gray-800" />
+              <div class="absolute top-1/2 left-1/2 w-1 h-1 bg-gray-800 rounded-full transform -translate-x-1/2 -translate-y-1/2" />
+            </div>
+          </div>
+          
+          <!-- Nav Text -->
+          <div class="text-right text-sm text-gray-700 max-w-xs">
+            Perfect for your next web, social or branding project
+          </div>
+        </div>
+      </header>
+
+      <!-- Main Content -->
+      <main class="flex-1 flex items-center px-6 md:px-8">
+        <div class="w-full max-w-7xl mx-auto">
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+            <!-- Left Content -->
+            <div>
+              <div class="mb-6">
+                <p class="text-sm text-gray-600 mb-2">High res</p>
+                <p class="text-sm text-gray-600 mb-2">grainy</p>
+                <p class="text-sm text-gray-600 mb-2">abstract</p>
+                <p class="text-sm text-gray-600">shapes.</p>
+              </div>
+              
+              <h1 class="text-6xl md:text-8xl lg:text-9xl font-bold text-gray-900 leading-none tracking-tight" style="font-family: 'Playfair Display', serif;">
+                Grainy<br>
+                Shapes
+              </h1>
+            </div>
+
+            <!-- Right Content (3D space for blobs) -->
+            <div class="relative">
+              <!-- This space is filled by the 3D canvas -->
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <!-- Bottom Right Accent -->
+      <div class="absolute bottom-8 right-8">
+        <div class="w-24 h-24 rounded-full border border-gray-800 flex items-center justify-center">
+          <div class="w-16 h-16 rounded-full border border-gray-800" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Experience from './Experience.vue'
+
+// Load Google Font
+useHead({
+  link: [
+    {
+      rel: 'preconnect',
+      href: 'https://fonts.googleapis.com'
+    },
+    {
+      rel: 'preconnect', 
+      href: 'https://fonts.gstatic.com',
+      crossorigin: ''
+    },
+    {
+      rel: 'stylesheet',
+      href: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&display=swap'
+    }
+  ]
+})
+</script>
\ No newline at end of file
diff --git a/app/components/grainy-liquid/index.global.vue b/app/components/grainy-liquid/index.global.vue
index b64c1226..5f98fd9f 100644
--- a/app/components/grainy-liquid/index.global.vue
+++ b/app/components/grainy-liquid/index.global.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-
+import WebsiteLayout from './WebsiteLayout.vue'
 </script>
+
 <template>
- <TresCanvas clear-color="white">
-    <GrainyLiquidExperience />
- </TresCanvas>
+  <WebsiteLayout />
 </template>
\ No newline at end of file
diff --git a/app/components/grainy-liquid/shaders/fragment.glsl b/app/components/grainy-liquid/shaders/fragment.glsl
index 82b7d06a..37cd2011 100644
--- a/app/components/grainy-liquid/shaders/fragment.glsl
+++ b/app/components/grainy-liquid/shaders/fragment.glsl
@@ -61,9 +61,12 @@ void main() {
     vec3 baseColor = mix(u_colorA, u_colorB, colorNoise);
     vec3 finalColor = mix(baseColor, u_colorC, fresnel);
     
-    // Add grain effect
-    float grain = random(v_uv + u_time * 0.01) * u_grainIntensity;
-    finalColor += vec3(grain);
+    // Enhanced grain effect for more texture
+    vec2 grainUv = v_uv * 100.0 + u_time * 0.02;
+    float grain1 = random(grainUv) * u_grainIntensity;
+    float grain2 = random(grainUv * 2.0 + 0.5) * u_grainIntensity * 0.5;
+    float totalGrain = grain1 + grain2;
+    finalColor += vec3(totalGrain);
     
     // Add some iridescence based on viewing angle
     float iridescence = sin(fresnel * 3.14159 + u_time) * 0.1;

From c6739441ad0efa3ada0a9f56bcc978a67f91c5c9 Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Tue, 12 Aug 2025 23:02:03 +0200
Subject: [PATCH 3/4] fix: adjust amplitude value in MultiBlob component for
 improved visual effect

- Updated the amplitude property in `MultiBlob.vue` from `0.06` to `0.8` to enhance the visual dynamics of the grainy liquid effect. This change aims to create a more pronounced and engaging interaction within the scene.
---
 app/components/grainy-liquid/MultiBlob.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/grainy-liquid/MultiBlob.vue b/app/components/grainy-liquid/MultiBlob.vue
index 2a1f0d71..3581dd3b 100644
--- a/app/components/grainy-liquid/MultiBlob.vue
+++ b/app/components/grainy-liquid/MultiBlob.vue
@@ -37,7 +37,7 @@ const blobs: BlobConfig[] = [
     colorB: '#e2e8f0',
     colorC: '#cbd5e1',
     speed: 0.4,
-    amplitude: 0.06
+    amplitude: 0.8
   }
 ]
 </script>

From 5b36aa3c0977268eca061a80ce1fb8e921993323 Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Wed, 13 Aug 2025 07:59:00 +0200
Subject: [PATCH 4/4] feat: enhance grainy liquid experiment documentation and
 component details

- Updated the title and description in `grainy-liquid.md` to reflect the addition of animated liquid blobs and improved technical details.
- Expanded the documentation to include a comprehensive overview of the shader system, component architecture, and key features of the liquid blobs.
- Added detailed explanations of the vertex and fragment shaders, highlighting their roles in creating organic deformation and surface effects.
- Included a breakdown of the `Blob` and `MultiBlob` components, detailing their props and functionalities for better understanding and customization.
- Enhanced the overall clarity and depth of the experiment documentation, showcasing the technical implementation and design inspiration behind the grainy liquid effect.
---
 content/experiments/grainy-liquid.md | 215 ++++++++++++++++++++++++++-
 1 file changed, 211 insertions(+), 4 deletions(-)

diff --git a/content/experiments/grainy-liquid.md b/content/experiments/grainy-liquid.md
index bb9c843b..e4ef3903 100644
--- a/content/experiments/grainy-liquid.md
+++ b/content/experiments/grainy-liquid.md
@@ -1,7 +1,214 @@
 ---
-title: Grainy Liquid 
+title: Grainy Liquid Blobs
 author: alvarosabu
-description: A grainy liquid blob
-tags: ['shaders']
-date: 2025-08-12
+description: Animated liquid blobs with GLSL shaders, noise effects, and organic deformation inspired by oil drops in water
+tags: ['shaders', 'glsl', 'liquid', 'noise', 'animation', 'website-design']
+date: 2025-08-13
 ---
+
+
+A dynamic website design featuring animated liquid blobs created with custom GLSL shaders, demonstrating organic deformation and fluid-like behavior.
+
+## Technical Implementation
+
+### Architecture Overview
+
+The experiment consists of several key components working together to create the liquid blob effect:
+
+```
+app/components/grainy-liquid/
+├── index.global.vue         # Main entry point
+├── WebsiteLayout.vue        # Full website layout with text overlay
+├── Experience.vue           # 3D scene setup
+├── MultiBlob.vue           # Multiple blob instances
+├── Blob.vue                # Individual blob component
+└── shaders/
+    ├── vertex.glsl         # Vertex displacement shader
+    ├── fragment.glsl       # Color and surface effects
+    ├── vertex.glsl.d.ts    # TypeScript declarations
+    └── fragment.glsl.d.ts
+```
+
+### Shader System
+
+#### Vertex Shader (Displacement)
+
+The vertex shader creates organic liquid-like deformation using layered Simplex noise:
+
+```glsl
+// Multiple noise layers for complex deformation
+float noise1 = snoise(pos * u_frequency + time * 0.5);
+float noise2 = snoise(pos * u_frequency * 2.0 + time * 0.3);
+float noise3 = snoise(pos * u_frequency * 4.0 + time * 0.7);
+
+// Combine with different amplitudes for organic movement
+float displacement = noise1 * 0.6 + noise2 * 0.3 + noise3 * 0.1;
+vec3 displacedPosition = pos + normal * displacement * u_amplitude;
+```
+
+**Key Features:**
+- **Simplex noise implementation** for smooth, organic deformation
+- **Multi-layered noise** with different frequencies and speeds
+- **Normal-based displacement** to maintain blob volume
+- **Time-based animation** for continuous fluid movement
+
+#### Fragment Shader (Surface Effects)
+
+The fragment shader handles color mixing, surface effects, and visual texture:
+
+```glsl
+// Fresnel effect for liquid-like rim lighting
+float fresnel = 1.0 - dot(normal, viewDirection);
+fresnel = pow(fresnel, u_fresnelPower);
+
+// Flowing color mixing with noise
+vec2 flowUv = v_uv + u_time * 0.1;
+float colorNoise = fbm(flowUv * u_noiseScale);
+vec3 baseColor = mix(u_colorA, u_colorB, colorNoise);
+vec3 finalColor = mix(baseColor, u_colorC, fresnel);
+
+// Grain texture for surface detail
+float grain = random(v_uv * 100.0 + u_time * 0.02) * u_grainIntensity;
+finalColor += vec3(grain);
+```
+
+**Key Features:**
+- **Fresnel effect** for realistic edge lighting
+- **Fractal Brownian Motion (FBM)** for organic color patterns
+- **Multi-layer grain** for surface texture
+- **Flowing color animation** synchronized with deformation
+- **Iridescent highlights** for liquid shimmer
+
+### Component Architecture
+
+#### Blob Component (`Blob.vue`)
+
+Individual blob with customizable properties:
+
+```typescript
+interface Props {
+  colorA?: string     // Primary color
+  colorB?: string     // Secondary color  
+  colorC?: string     // Highlight color
+  speed?: number      // Animation speed
+  amplitude?: number  // Deformation intensity
+}
+```
+
+**Features:**
+- **Interactive controls** via `useControls()` for real-time adjustment
+- **Prop-based customization** for different blob variations
+- **Shader uniform management** with reactive updates
+- **Animation loop** using `useLoop()` composable
+
+#### MultiBlob Component (`MultiBlob.vue`)
+
+Manages multiple blob instances with varied configurations:
+
+```typescript
+const blobs: BlobConfig[] = [
+  {
+    position: [-4, 2, 0],
+    scale: [1.8, 1.8, 1.8],
+    colorA: '#6366f1',  // Purple blob
+    colorB: '#8b5cf6',
+    colorC: '#ddd6fe',
+    speed: 0.6,
+    amplitude: 0.15
+  },
+  // Pink and gray blobs with different properties...
+]
+```
+
+**Features:**
+- **Varied positioning** for layered composition
+- **Different scales** to create depth
+- **Unique color palettes** per blob
+- **Staggered animation speeds** for organic movement
+
+#### Website Layout (`WebsiteLayout.vue`)
+
+Complete website design with 3D background and text overlay:
+
+```vue
+<template>
+  <div class="relative h-screen w-full overflow-hidden bg-gray-50">
+    <!-- 3D Canvas Background -->
+    <div class="absolute inset-0">
+      <TresCanvas window-size clear-color="#f8fafc">
+        <Experience />
+      </TresCanvas>
+    </div>
+
+    <!-- Content Overlay -->
+    <div class="relative z-10 h-full flex flex-col">
+      <!-- Header, main content, decorative elements -->
+    </div>
+  </div>
+</template>
+```
+
+**Features:**
+- **Layered design** with 3D background and HTML overlay
+- **Responsive typography** using TailwindCSS
+- **Google Fonts integration** (Playfair Display serif)
+- **Interactive controls** disabled for presentation mode
+
+### Technical Highlights
+
+#### Noise-Based Animation
+
+The liquid effect relies on sophisticated noise techniques:
+
+- **Simplex noise** for smooth, organic deformation patterns
+- **Multiple octaves** combined for complex surface detail
+- **Time-based offsets** creating flowing animation
+- **Frequency variation** for different scales of movement
+
+#### Color System
+
+Realistic liquid color mixing:
+
+- **Fresnel-based rim lighting** mimicking surface tension
+- **Flowing color patterns** using FBM noise
+- **Multi-color blending** for realistic liquid appearance
+- **Grain texture overlay** for surface detail
+
+#### Performance Optimization
+
+- **Efficient shader implementation** with clamped displacement
+- **Instanced blob rendering** for multiple objects
+- **Optimized geometry** using icosahedron base mesh
+- **Controlled animation speeds** for smooth performance
+
+### Shader Mathematics
+
+The core deformation uses mathematical functions to simulate liquid behavior:
+
+```glsl
+// Simplex noise for organic patterns
+float snoise(vec3 v) { /* Implementation */ }
+
+// Fractal Brownian Motion for color variation
+float fbm(vec2 st) {
+    float value = 0.0;
+    float amplitude = 0.5;
+    for (int i = 0; i < 5; i++) {
+        value += amplitude * noise(st * frequency);
+        frequency *= 2.0;
+        amplitude *= 0.5;
+    }
+    return value;
+}
+```
+
+### Design Inspiration
+
+The visual style draws from modern liquid design trends:
+
+- **Organic blob shapes** popular in contemporary web design
+- **Grainy texture effects** for tactile visual appeal
+- **Gradient color schemes** with purple/pink palettes
+- **Minimalist layout** focusing on typography and shapes
+
+This experiment demonstrates how GLSL shaders can create sophisticated visual effects in web applications, combining mathematical precision with organic, fluid aesthetics.
\ No newline at end of file