final, abandoning

src/fluidDistortion.js

@@ -1,19 +1,25 @@
 import * as THREE from 'three';
 
-// Enhanced ripple simulation with multiple trailing ripples and lighting
+const textureLoader = new THREE.TextureLoader();
+const noiseTexture = textureLoader.load('./noise.jpg');
+noiseTexture.wrapS = THREE.RepeatWrapping;
+noiseTexture.wrapT = THREE.RepeatWrapping;
 
-const FluidSimShader = {
+const InkSimShader = {
   uniforms: {
     tPrev: { value: null },
     iResolution: { value: new THREE.Vector2() },
     iTime: { value: 0.0 },
     mouse: { value: new THREE.Vector3(-1, -1, 0.0) },
-    dissipation: { value: 0.950 }, // Slightly more persistent for trails
-    tension: { value: 2.2 }, // Higher tension for stronger ripples
-    radius: { value: 20.0 }, // Larger splat radius
-    trailLength: { value: 5 }, // Number of trailing ripples
+    dissipation: { value: 0.97 },
+    turbulence: { value: 0.2 },
+    scale: { value: 0.9 },
+    speed: { value: 0.5 },
+    octaves: { value: 2 },
+    lacunarity: { value: 2.0 },
+    gain: { value: 0.5 },
+    mouseRadius: { value: 0.15 }
   },
-
   vertexShader: `
     varying vec2 vUv;
     void main() {
@@ -21,7 +27,6 @@ const FluidSimShader = {
       gl_Position = vec4(position.xy, 0.0, 1.0);
     }
   `,
-
   fragmentShader: `
     precision highp float;
     varying vec2 vUv;
@@ -30,86 +35,96 @@ const FluidSimShader = {
     uniform float iTime;
     uniform vec3 mouse;
     uniform float dissipation;
-    uniform float tension;
-    uniform float radius;
-    uniform float trailLength;
+    uniform float turbulence;
+    uniform float scale;
+    uniform float speed;
+    uniform float octaves;
+    uniform float lacunarity;
+    uniform float gain;
+    uniform float mouseRadius;
 
-    vec2 readRG(vec2 uv) {
-      vec4 c = texture2D(tPrev, uv);
-      return c.rg;
+    vec2 hash22(vec2 p) {
+      p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
+      return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
+    }
+
+    float noise(vec2 p) {
+      vec2 i = floor(p);
+      vec2 f = fract(p);
+      vec2 u = f * f * (3.0 - 2.0 * f);
+      return mix(
+        mix(dot(hash22(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
+          dot(hash22(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
+        mix(dot(hash22(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
+          dot(hash22(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y);
+    }
+
+    float fbm(vec2 p) {
+      float value = 0.0;
+      float amplitude = 0.5;
+      float frequency = scale;
+      for(float i = 0.0; i < 8.0; i++) {
+        if(i >= octaves) break;
+        value += amplitude * noise(p * frequency);
+        frequency *= lacunarity;
+        amplitude *= gain;
+      }
+      return value;
     }
 
     void main() {
-      vec2 texel = 1.0 / iResolution;
-      vec2 currPrev = readRG(vUv);
-      float curr = currPrev.r;
-      float prev = currPrev.g;
-
-      // Enhanced 8-neighbor laplacian for stronger ripples
-      float up = readRG(vUv + vec2(0.0, texel.y)).r;
-      float down = readRG(vUv + vec2(0.0, -texel.y)).r;
-      float right = readRG(vUv + vec2( texel.x, 0.0)).r;
-      float left = readRG(vUv + vec2(-texel.x, 0.0)).r;
-
-      // Diagonal neighbors for smoother ripples
-      float upLeft = readRG(vUv + vec2(-texel.x, texel.y)).r;
-      float upRight = readRG(vUv + vec2( texel.x, texel.y)).r;
-      float downLeft = readRG(vUv + vec2(-texel.x, -texel.y)).r;
-      float downRight = readRG(vUv + vec2( texel.x, -texel.y)).r;
-
-      // Enhanced laplacian with diagonal weights
-      float lap = (up + down + left + right) * 0.2 +
-                  (upLeft + upRight + downLeft + downRight) * 0.05 - curr;
-
-      // Wave equation with enhanced parameters
-      float next = curr + (curr - prev) * dissipation + lap * tension;
-
-      // Multiple trailing ripples from mouse movement
-      if (mouse.z > 0.0001) {
-        vec2 uvPx = vUv * iResolution;
-        vec2 d = uvPx - mouse.xy;
-        float dist = length(d);
-
-        // Create multiple concentric ripples
-        for (float i = 0.0; i < 4.0; i++) {
-          if (i >= trailLength) break;
-          
-          float offset = i * radius * 0.4; // Spacing between ripples
-          float r = radius + offset;
-          float timeOffset = i * 0.3; // Temporal offset for trailing effect
-          
-          // Gaussian with sine wave for ripple pattern
-          float g = exp(-pow(dist - offset, 2.0) / (r * r * 0.5));
-          float ripple = sin(dist * 0.2 - iTime * 8.0 + timeOffset) * g;
-          
-          // Diminishing strength for trailing ripples
-          float strength = mouse.z * (1.0 - i * 0.2) * 0.8;
-          next += ripple * strength;
+      vec2 uv = vUv;
+      vec4 prev = texture2D(tPrev, uv);
+      float time = iTime * speed;
+      float distortion = 0.0;
+      if(mouse.z > 0.001) {
+        vec2 mouseUv = mouse.xy / iResolution;
+        vec2 diff = uv - mouseUv;
+        float dist = length(diff);
+        float falloff = 1.0 - smoothstep(0.0, mouseRadius * 2.0, dist);
+        float coreFalloff = 1.0 - smoothstep(0.0, mouseRadius * 0.5, dist);
+        if(falloff > 0.0) {
+          vec2 p = uv * 6.0 + time * 0.3;
+          vec2 warpQ = vec2(fbm(p), fbm(p + vec2(5.2, 1.3)));
+          vec2 warpR = vec2(fbm(p + 3.0 * warpQ + vec2(1.7, 9.2) + time * 0.15),
+            fbm(p + 3.0 * warpQ + vec2(8.3, 2.8) + time * 0.12));
+          float inkDistortion = fbm(p + 4.0 * warpR + diff * 8.0) * turbulence;
+          float angle = atan(diff.y, diff.x);
+          float spiral = sin(angle * 4.0 + time * 10.0 + dist * 15.0) * 0.6;
+          inkDistortion += spiral * coreFalloff;
+          float mouseNoise = fbm(uv * 10.0 + time * 4.0 + mouseUv * 6.0);
+          inkDistortion += mouseNoise * mouse.z * 1.2;
+          distortion += inkDistortion * falloff * mouse.z * 0.8;
+        }
+        float trailFalloff = 1.0 - smoothstep(0.0, mouseRadius * 4.0, dist);
+        if(trailFalloff > 0.0) {
+          float trail = fbm(uv * 8.0 + time * 2.0 + mouseUv * 4.0) * mouse.z * 0.3;
+          distortion += trail * trailFalloff;
         }
       }
-
-      gl_FragColor = vec4(next, curr, 0.0, 1.0);
+      float newValue = prev.r * dissipation + distortion * 0.12;
+      newValue = clamp(newValue, -2.0, 2.0);
+      gl_FragColor = vec4(newValue, prev.r, 0.0, 1.0);
     }
   `
 };
 
-// Enhanced distortion shader with dynamic lighting and ripple whiteness
-export const FluidDistortionShader = {
+export const InkDistortionShader = {
   uniforms: {
     tDiffuse: { value: null },
     tSim: { value: null },
+    tNoise: { value: noiseTexture },
     iResolution: { value: new THREE.Vector2() },
-    amount: { value: 0.12 }, // Stronger base distortion
-    chromaticAmount: { value: 0.015 }, // Enhanced chromatic aberration
-    lightPosition: { value: new THREE.Vector3(0.5, 0.5, 1.0) }, // Light position
-    lightIntensity: { value: 1.5 }, // Light brightness
-    lightColor: { value: new THREE.Color(0.8, 0.9, 1.0) }, // Cool light color
-    normalStrength: { value: 2.0 }, // How pronounced the lighting effect is
-    ambientLight: { value: 0.15 }, // Base ambient lighting
-    rippleWhiteness: { value: 0.15 }, // Amount of white tint for ripples
-    rippleBrightness: { value: 1.8 }, // Brightness multiplier for ripple areas
+    amount: { value: 0.035 },
+    chromaticAmount: { value: 0.015 },
+    time: { value: 0.0 },
+    noiseScale: { value: 2.0 },
+    flowSpeed: { value: 1.0 },
+    inkDensity: { value: 0.4 },
+    chaosAmount: { value: 1.3 },
+    grainStrength: { value: 3.12 },
+    grainScale: { value: 8.0 }
   },
-
   vertexShader: `
     varying vec2 vUv;
     void main() {
@@ -117,173 +132,155 @@ export const FluidDistortionShader = {
       gl_Position = vec4(position.xy, 0.0, 1.0);
     }
   `,
-
   fragmentShader: `
     precision highp float;
     varying vec2 vUv;
     uniform sampler2D tDiffuse;
     uniform sampler2D tSim;
+    uniform sampler2D tNoise;
     uniform vec2 iResolution;
     uniform float amount;
     uniform float chromaticAmount;
-    uniform vec3 lightPosition;
-    uniform float lightIntensity;
-    uniform vec3 lightColor;
-    uniform float normalStrength;
-    uniform float ambientLight;
-    uniform float rippleWhiteness;
-    uniform float rippleBrightness;
+    uniform float time;
+    uniform float noiseScale;
+    uniform float flowSpeed;
+    uniform float inkDensity;
+    uniform float chaosAmount;
+    uniform float grainStrength;
+    uniform float grainScale;
+
+    vec2 hash22(vec2 p) {
+      p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
+      return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
+    }
+
+    float noise(vec2 p) {
+      vec2 i = floor(p);
+      vec2 f = fract(p);
+      vec2 u = f * f * (3.0 - 2.0 * f);
+      return mix(
+        mix(dot(hash22(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
+          dot(hash22(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
+        mix(dot(hash22(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
+          dot(hash22(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y);
+    }
+
+    float fbm(vec2 p) {
+      float value = 0.0;
+      float amplitude = 0.5;
+      float frequency = 1.0;
+      for(int i = 0; i < 4; i++) {
+        value += amplitude * noise(p * frequency);
+        frequency *= 2.0;
+        amplitude *= 0.5;
+      }
+      return value;
+    }
 
     void main() {
-      vec2 texel = 1.0 / iResolution;
-
-      // Sample height field for normal calculation
-      float hC = texture2D(tSim, vUv).r;
-      float hL = texture2D(tSim, vUv - vec2(texel.x, 0.0)).r;
-      float hR = texture2D(tSim, vUv + vec2(texel.x, 0.0)).r;
-      float hD = texture2D(tSim, vUv - vec2(0.0, texel.y)).r;
-      float hU = texture2D(tSim, vUv + vec2(0.0, texel.y)).r;
-
-      // Calculate gradient and normal
-      vec2 grad = vec2(hR - hL, hU - hD) * normalStrength;
-      vec3 normal = normalize(vec3(-grad.x, -grad.y, 1.0));
-
-      // Enhanced distortion with trailing effect
-      vec2 baseOffset = grad * amount;
-      
-      // Add subtle trailing distortion based on height
-      vec2 trailOffset = grad * abs(hC) * amount * 0.3;
-      vec2 totalOffset = baseOffset + trailOffset;
-
-      // Chromatic aberration with enhanced separation
-      vec2 chromaticOffset = grad * chromaticAmount;
-      vec2 uvR = vUv + totalOffset + chromaticOffset;
-      vec2 uvG = vUv + totalOffset;
-      vec2 uvB = vUv + totalOffset - chromaticOffset;
-
-      // Clamp UVs
+      float distortionField = texture2D(tSim, vUv).r;
+      vec2 totalDistortion = vec2(distortionField) * amount;
+      float distortionIntensity = abs(distortionField);
+      if(distortionIntensity > 0.01) {
+        vec2 flowTime = vec2(time * flowSpeed * 0.3, time * flowSpeed * 0.2);
+        vec2 flowNoise = vec2(
+          fbm(vUv * noiseScale + flowTime),
+          fbm(vUv * noiseScale + flowTime + vec2(100.0, 50.0))
+        );
+        totalDistortion += flowNoise * chaosAmount * 0.02 * distortionIntensity;
+        float swirl = sin(time * 2.0 + vUv.x * 15.0) * cos(time * 1.7 + vUv.y * 12.0);
+        vec2 swirlOffset = vec2(-swirl, swirl) * 0.01 * chaosAmount * distortionIntensity;
+        totalDistortion += swirlOffset;
+      }
+      vec2 chromaticOffset = totalDistortion * chromaticAmount;
+      vec2 chaosChromatic = totalDistortion * 0.3;
+      vec2 uvR = vUv + totalDistortion + chromaticOffset + chaosChromatic;
+      vec2 uvG = vUv + totalDistortion;
+      vec2 uvB = vUv + totalDistortion - chromaticOffset - chaosChromatic * 0.5;
       uvR = clamp(uvR, vec2(0.0), vec2(1.0));
       uvG = clamp(uvG, vec2(0.0), vec2(1.0));
       uvB = clamp(uvB, vec2(0.0), vec2(1.0));
-
-      // Sample distorted colors
       float r = texture2D(tDiffuse, uvR).r;
       float g = texture2D(tDiffuse, uvG).g;
       float b = texture2D(tDiffuse, uvB).b;
-      vec3 distortedColor = vec3(r, g, b);
-
-      // Dynamic lighting calculation
-      vec3 lightDir = normalize(vec3(lightPosition.xy - vUv, lightPosition.z));
-      float NdotL = max(dot(normal, lightDir), 0.0);
-
-      // Create rim lighting effect for ripples
-      float rimLight = pow(1.0 - abs(dot(normal, vec3(0.0, 0.0, 1.0))), 2.0);
-
-      // Combine lighting effects
-      vec3 lighting = lightColor * (NdotL * lightIntensity + rimLight * 0.3) + ambientLight;
-
-      // Calculate ripple intensity for both lighting and whiteness
-      float rippleIntensity = abs(hC) + length(grad) * 0.5;
-      rippleIntensity = clamp(rippleIntensity, 0.0, 1.0);
-
-      // Apply lighting selectively - stronger where there are ripples
-      vec3 litColor = mix(distortedColor, distortedColor * lighting, rippleIntensity);
-
-      // Add white tint to ripples for visibility over black areas
-      vec3 whiteColor = vec3(1.0, 1.0, 1.0);
-      
-      // Create a smooth falloff for the whiteness effect
-      float whiteIntensity = smoothstep(0.0, 0.3, rippleIntensity) * rippleWhiteness;
-      
-      // Blend in the white tint
-      vec3 rippleColor = mix(litColor, whiteColor, whiteIntensity);
-      
-      // Brighten areas with ripples
-      rippleColor = mix(rippleColor, rippleColor * rippleBrightness, rippleIntensity * 0.5);
-
-      gl_FragColor = vec4(rippleColor, 1.0);
+      vec3 color = vec3(r, g, b);
+      if(distortionIntensity > 0.01) {
+        float density = distortionIntensity * inkDensity;
+        float inkEffect = 1.0 + density * 0.5;
+        color *= inkEffect;
+        float bleeding = smoothstep(0.02, 0.6, distortionIntensity);
+        color = mix(color, color * 0.92, bleeding * 0.3);
+        vec2 grainUv = vUv * grainScale + vec2(time * 0.05, time * 0.03);
+        vec3 grainColor = texture2D(tNoise, grainUv).rgb;
+        grainColor = (grainColor - 0.5) * grainStrength * distortionIntensity;
+        color += grainColor;
+      }
+      gl_FragColor = vec4(color, 1.0);
     }
   `
 };
 
-// Enhanced fluid simulation factory
-export function createFluidSimulation(renderer, dpr = 1) {
+export function createInkSimulation(renderer, dpr = 1) {
   const simScene = new THREE.Scene();
   const simCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
-  
   const quad = new THREE.Mesh(
     new THREE.PlaneGeometry(2, 2),
     new THREE.ShaderMaterial({
-      uniforms: THREE.UniformsUtils.clone(FluidSimShader.uniforms),
-      vertexShader: FluidSimShader.vertexShader,
-      fragmentShader: FluidSimShader.fragmentShader,
+      uniforms: THREE.UniformsUtils.clone(InkSimShader.uniforms),
+      vertexShader: InkSimShader.vertexShader,
+      fragmentShader: InkSimShader.fragmentShader,
       depthTest: false,
       depthWrite: false
     })
   );
-  
   simScene.add(quad);
-
-  // Higher precision for better ripple quality
   const params = {
     minFilter: THREE.LinearFilter,
     magFilter: THREE.LinearFilter,
     format: THREE.RGBAFormat,
-    type: THREE.FloatType, // Use float for better precision
+    type: THREE.FloatType,
     depthBuffer: false,
     stencilBuffer: false
   };
-
-  let width = Math.max(2, Math.floor(window.innerWidth * dpr));
-  let height = Math.max(2, Math.floor(window.innerHeight * dpr));
-  
+  let width = Math.max(2, Math.floor(window.innerWidth * dpr * 0.5));
+  let height = Math.max(2, Math.floor(window.innerHeight * dpr * 0.5));
   let rtA = new THREE.WebGLRenderTarget(width, height, params);
   let rtB = new THREE.WebGLRenderTarget(width, height, params);
-
-  // Initialize
   renderer.setRenderTarget(rtA);
   renderer.clear();
   renderer.setRenderTarget(rtB);
   renderer.clear();
   renderer.setRenderTarget(null);
-
   quad.material.uniforms.iResolution.value.set(width, height);
   quad.material.uniforms.tPrev.value = rtA.texture;
-
   function swap() {
-    const tmp = rtA; rtA = rtB; rtB = tmp;
+    const tmp = rtA;
+    rtA = rtB;
+    rtB = tmp;
   }
-
   function update(mouseX, mouseY, strength, timeSec) {
     quad.material.uniforms.iTime.value = timeSec;
-    
     if (mouseX < 0.0 || mouseY < 0.0) {
       quad.material.uniforms.mouse.value.set(-1, -1, 0.0);
     } else {
-      // Enhanced strength for better trailing effect
-      const enhancedStrength = Math.max(0.0, Math.min(1.0, strength * 1.5));
-      quad.material.uniforms.mouse.value.set(mouseX, mouseY, enhancedStrength);
+      const enhancedStrength = Math.max(0.0, Math.min(1.0, strength * 2.5));
+      quad.material.uniforms.mouse.value.set(mouseX * 0.5, mouseY * 0.5, enhancedStrength);
     }
-
     quad.material.uniforms.tPrev.value = rtA.texture;
     renderer.setRenderTarget(rtB);
     renderer.render(simScene, simCamera);
     renderer.setRenderTarget(null);
-    
     swap();
   }
-
   function getTexture() {
     return rtA.texture;
   }
-
   function resize(w, h, newDpr = dpr) {
-    width = Math.max(2, Math.floor(w * newDpr));
-    height = Math.max(2, Math.floor(h * newDpr));
+    width = Math.max(2, Math.floor(w * newDpr * 0.5));
+    height = Math.max(2, Math.floor(h * newDpr * 0.5));
     rtA.setSize(width, height);
     rtB.setSize(width, height);
     quad.material.uniforms.iResolution.value.set(width, height);
   }
-
   return { update, getTexture, resize };
 }

src/main.js

@@ -1,4 +1,4 @@
-import './style.css'
+import './style.css';
 import * as THREE from 'three';
 import { SceneLoader } from './sceneLoader.js';
 import { createScene, setupLighting, setupControls } from './sceneSetup.js';
@@ -12,204 +12,163 @@ import {
   updateTransition,
   onMouseScroll,
   setCurrentModel,
-  setMixer
+  setMixer,
+  setGLBRepulsionSystem,
+  calculateTransitionVectors
 } from './transitionManager.js';
 import {
   startBoldRoughnessAnimation,
   updateBoldRoughnessAnimation,
   updateInnovationGlassAnimation
 } from './animationManager.js';
-
-// Fluid distortion imports
 import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-import { createFluidSimulation, FluidDistortionShader } from './fluidDistortion.js';
-
-// Starfield import
+import { createInkSimulation, InkDistortionShader } from './fluidDistortion.js';
 import { createStarfield } from './starfield.js';
 
-// Initialize loader
 const sceneLoader = new SceneLoader();
 sceneLoader.setLoadingMessage('Preparing Your Experience...');
-
-// Create scene components
 const { scene, camera, renderer, composer } = createScene();
 setupLighting(scene, camera);
 const controls = setupControls(camera, renderer);
-
-// Create starfield
+controls.addEventListener('change', () => calculateTransitionVectors(camera));
 const starfield = createStarfield(scene);
-
-// Turntable animation settings
 const turntableSpeed = 0.5;
-
-// Store preloaded models
 let preloadedModels = {};
-
-// Enhanced fluid simulation + distortion pass
 const dpr = renderer.getPixelRatio ? renderer.getPixelRatio() : Math.min(window.devicePixelRatio || 1, 2);
-const fluid = createFluidSimulation(renderer, dpr);
-
-const distortionPass = new ShaderPass(FluidDistortionShader);
-distortionPass.material.uniforms.tSim.value = fluid.getTexture();
+const inkSim = createInkSimulation(renderer, dpr);
+const distortionPass = new ShaderPass(InkDistortionShader);
+distortionPass.material.uniforms.tSim.value = inkSim.getTexture();
 distortionPass.material.uniforms.iResolution.value.set(window.innerWidth * dpr, window.innerHeight * dpr);
-distortionPass.material.uniforms.amount.value = 0.005; // Stronger distortion
-distortionPass.material.uniforms.chromaticAmount.value = 0.002; // Enhanced chromatic aberration
-
-// Enhanced lighting parameters
-distortionPass.material.uniforms.lightIntensity.value = 0;
-distortionPass.material.uniforms.lightColor.value.set(1, 1, 1);
-distortionPass.material.uniforms.normalStrength.value = 2.0;
-distortionPass.material.uniforms.ambientLight.value = 1;
-
-// New ripple whiteness parameters
-distortionPass.material.uniforms.rippleWhiteness.value = 0.025; // Amount of white tint
-distortionPass.material.uniforms.rippleBrightness.value = 1; // Brightness boost for ripples
-
+distortionPass.material.uniforms.amount.value = 0.03;
+distortionPass.material.uniforms.chromaticAmount.value = 0.100;
+distortionPass.material.uniforms.noiseScale.value = 0.05;
+distortionPass.material.uniforms.flowSpeed.value = 2.2;
+distortionPass.material.uniforms.inkDensity.value = 0.35;
+distortionPass.material.uniforms.chaosAmount.value = 0.05;
+distortionPass.material.uniforms.grainStrength.value = 0.8;
+distortionPass.material.uniforms.grainScale.value = 5.0;
 composer.addPass(distortionPass);
-
-// Enhanced pointer tracking
-const pointer = {
-  x: -1,
-  y: -1,
-  strength: 0.0,
-  prevX: -1,
-  prevY: -1,
-  trail: [], // Store trail positions for enhanced effect
-  maxTrailLength: 5
-};
-
-// Mouse coordinates for starfield
+const pointer = { x: -1, y: -1, strength: 0, prevX: -1, prevY: -1 };
 const mouse = new THREE.Vector2();
-
+const raycaster = new THREE.Raycaster();
+const glbRepulsion = {
+  radius: 30,
+  maxDistance: 2,
+  strength: 8,
+  originalPositions: new Map(),
+  currentTargets: new Map(),
+  interpolationSpeed: 3
+};
+setGLBRepulsionSystem(glbRepulsion);
 function toSimPixels(e) {
   const rect = renderer.domElement.getBoundingClientRect();
   const x = (e.clientX - rect.left) * dpr;
   const y = (rect.height - (e.clientY - rect.top)) * dpr;
   return { x, y };
 }
-
 renderer.domElement.addEventListener('pointermove', (e) => {
   const { x, y } = toSimPixels(e);
-  const dx = (pointer.prevX < 0) ? 0 : Math.abs(x - pointer.prevX);
-  const dy = (pointer.prevY < 0) ? 0 : Math.abs(y - pointer.prevY);
-  const speed = Math.min(Math.sqrt(dx * dx + dy * dy) / (6.0 * dpr), 1.0); // More sensitive
-
+  const dx = pointer.prevX < 0 ? 0 : Math.abs(x - pointer.prevX);
+  const dy = pointer.prevY < 0 ? 0 : Math.abs(y - pointer.prevY);
+  const speed = Math.min(Math.sqrt(dx * dx + dy * dy) / (3 * dpr), 1);
   pointer.x = x;
   pointer.y = y;
-  pointer.strength = speed * 1.2; // Enhanced strength
+  pointer.strength = speed * 4.0;
   pointer.prevX = x;
   pointer.prevY = y;
-
-  // Update light position to follow cursor
   const rect = renderer.domElement.getBoundingClientRect();
-  const normalizedX = (e.clientX - rect.left) / rect.width;
-  const normalizedY = 1.0 - (e.clientY - rect.top) / rect.height; // Flip Y
-  distortionPass.material.uniforms.lightPosition.value.set(normalizedX, normalizedY, 1.0);
-
-  // Update mouse coordinates for starfield
-  mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
-  mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+  const nx = (e.clientX - rect.left) / rect.width;
+  const ny = 1 - (e.clientY - rect.top) / rect.height;
+  mouse.x = nx * 2 - 1;
+  mouse.y = -ny * 2 + 1;
 }, { passive: true });
-
 renderer.domElement.addEventListener('pointerleave', () => {
-  pointer.x = -1;
-  pointer.y = -1;
-  pointer.strength = 0.0;
-  mouse.x = -999;
-  mouse.y = -999;
-
-  // Reset light to center when mouse leaves
-  distortionPass.material.uniforms.lightPosition.value.set(0.5, 0.5, 1.0);
+  Object.assign(pointer, { x: -1, y: -1, strength: 0 });
+  mouse.set(-999, -999);
 }, { passive: true });
-
-// Initialize first scene
+function updateGLBRepulsion(camera, mouse, dt) {
+  if (mouse.x === -999) {
+    [currentModel, nextModel].forEach(m => {
+      if (!m) return;
+      const orig = glbRepulsion.originalPositions.get(m);
+      if (!orig) return;
+      const tgt = glbRepulsion.currentTargets.get(m) || orig.clone();
+      tgt.copy(orig);
+      glbRepulsion.currentTargets.set(m, tgt);
+      m.position.lerp(tgt, Math.min(glbRepulsion.interpolationSpeed * dt, 1));
+    });
+    return;
+  }
+  raycaster.setFromCamera(mouse, camera);
+  const mouseWorld = raycaster.ray.direction.clone().multiplyScalar(50).add(raycaster.ray.origin);
+  [currentModel, nextModel].forEach(m => {
+    if (!m) return;
+    if (!glbRepulsion.originalPositions.has(m))
+      glbRepulsion.originalPositions.set(m, m.position.clone());
+    const orig = glbRepulsion.originalPositions.get(m);
+    const dx = m.position.x - mouseWorld.x;
+    const dy = m.position.y - mouseWorld.y;
+    const dz = m.position.z - mouseWorld.z;
+    const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
+    let target = orig.clone();
+    if (dist < glbRepulsion.radius && dist > 0) {
+      const force = (1 - dist / glbRepulsion.radius) * glbRepulsion.strength;
+      target.add(new THREE.Vector3(dx, dy, dz).normalize().multiplyScalar(force));
+      const offset = target.clone().sub(orig);
+      if (offset.length() > glbRepulsion.maxDistance)
+        target = orig.clone().add(offset.normalize().multiplyScalar(glbRepulsion.maxDistance));
+    }
+    glbRepulsion.currentTargets.set(m, target);
+    m.position.lerp(target, Math.min(glbRepulsion.interpolationSpeed * dt, 1));
+  });
+}
 function initializeScene() {
-  console.log('Initializing first scene (bold)');
   const { model, animMixer } = createModelFromPreloaded('bold', preloadedModels, camera, controls);
   setCurrentModel(model);
   setMixer(animMixer);
   scene.add(currentModel);
+  glbRepulsion.originalPositions.set(currentModel, currentModel.position.clone());
   startBoldRoughnessAnimation(true);
-  console.log('Bold scene initialized');
 }
-
-// Animation loop
 const clock = new THREE.Clock();
-
 function animate() {
   requestAnimationFrame(animate);
-  const delta = clock.getDelta();
-
-  // Update mixers
-  if (mixer) mixer.update(delta);
-  if (nextMixer) nextMixer.update(delta);
-
-  // Update transition
-  if (isTransitioning) {
-    updateTransition(delta, scene);
-  }
-
-  // Turntable rotation
-  if (currentModel) {
-    currentModel.rotation.y += turntableSpeed * delta;
-  }
-  if (nextModel) {
-    nextModel.rotation.y += turntableSpeed * delta;
-  }
-
-  // Update material animations
+  const dt = clock.getDelta();
+  const elapsedTime = clock.getElapsedTime();
+  if (mixer) mixer.update(dt);
+  if (nextMixer) nextMixer.update(dt);
+  if (isTransitioning) updateTransition(dt, scene);
+  else updateGLBRepulsion(camera, mouse, dt);
+  if (currentModel) currentModel.rotation.y += turntableSpeed * dt;
+  if (nextModel) nextModel.rotation.y += turntableSpeed * dt;
   updateBoldRoughnessAnimation();
   updateInnovationGlassAnimation();
-
-  // Animate stars with cursor interaction
-  starfield.animateStars(camera, mouse, delta);
-
-  // Update enhanced fluid sim
-  const nowSec = performance.now() / 1000;
-  fluid.update(pointer.x, pointer.y, pointer.strength, nowSec);
-  distortionPass.material.uniforms.tSim.value = fluid.getTexture();
-
+  starfield.animateStars(camera, mouse, dt);
+  inkSim.update(pointer.x, pointer.y, pointer.strength, elapsedTime);
+  distortionPass.material.uniforms.tSim.value = inkSim.getTexture();
+  distortionPass.material.uniforms.time.value = elapsedTime;
   controls.update();
   composer.render();
 }
-
-// Initialize the scene
 async function init() {
   try {
-    console.log('Starting application initialization');
     preloadedModels = await sceneLoader.loadAllModels();
-    console.log('All models loaded successfully');
-    
     initializeScene();
     animate();
-    console.log('Animation loop started');
-
-    window.addEventListener('wheel', (event) => {
-      onMouseScroll(event, preloadedModels, scene, camera, controls);
-    }, { passive: true });
-    console.log('Scroll event listener attached');
-
-  } catch (error) {
-    console.error('Failed to initialize scene:', error);
+    window.addEventListener('wheel', (e) => onMouseScroll(e, preloadedModels, scene, camera, controls), { passive: true });
+    window.addEventListener('resize', () => {
+      const w = window.innerWidth, h = window.innerHeight;
+      camera.aspect = w / h;
+      camera.updateProjectionMatrix();
+      renderer.setSize(w, h);
+      composer.setSize(w, h);
+      const pr = renderer.getPixelRatio ? renderer.getPixelRatio() : Math.min(window.devicePixelRatio || 1, 2);
+      distortionPass.material.uniforms.iResolution.value.set(w * pr, h * pr);
+      inkSim.resize(w, h, pr);
+    });
+  } catch (err) {
+    console.error('Failed to initialise:', err);
     sceneLoader.setLoadingMessage('Error loading experience. Please refresh.');
   }
 }
-
-// Handle window resize
-window.addEventListener('resize', () => {
-  console.log('Window resized');
-  const w = window.innerWidth;
-  const h = window.innerHeight;
-
-  camera.aspect = w / h;
-  camera.updateProjectionMatrix();
-  renderer.setSize(w, h);
-  composer.setSize(w, h);
-
-  const pixelRatio = renderer.getPixelRatio ? renderer.getPixelRatio() : Math.min(window.devicePixelRatio || 1, 2);
-  distortionPass.material.uniforms.iResolution.value.set(w * pixelRatio, h * pixelRatio);
-  fluid.resize(w, h, pixelRatio);
-});
-
-// Start the application
 init();

src/materialDefinitions.js

@@ -40,7 +40,7 @@ export const boldGlassMaterial = new THREE.MeshPhysicalMaterial({
 
 // Orange wireframe material for bold Cubewire mesh
 export const boldWireframeMaterial = new THREE.MeshStandardMaterial({
-  color: 0xff8600,
+  color: 0xffa000,
   metalness: 0.05,
   roughness: 0.5
 });
@@ -69,7 +69,7 @@ export const innovationGlassMaterial = new THREE.MeshPhysicalMaterial({
 export const frostedGlassMaterial = new THREE.MeshPhysicalMaterial({
   color: 0xffffff,
   metalness: 0.0,
-  roughness: 0.25,
+  roughness: 0.35,
   transmission: 1.0,
   ior: 1.5,
   thickness: 2.0,
@@ -87,11 +87,11 @@ export const frostedGlassMaterial = new THREE.MeshPhysicalMaterial({
 
 // Orange material with video shader for innovation
 export const lightOrangeMaterial = new THREE.MeshStandardMaterial({
-  color: 0xff8600,
+  color: 0xffa000,
   metalness: 0.05,
   roughness: 0.4,
   envMapIntensity: 0,
-  emissive: new THREE.Color(0xffad47),
+  emissive: new THREE.Color(0xddbbbb),
   emissiveMap: videoTexture,
   emissiveIntensity: 2.25
 });

src/sceneSetup.js

@@ -30,11 +30,10 @@ export function createScene() {
   const composer = new EffectComposer(renderer);
   const renderPass = new RenderPass(scene, camera);
   composer.addPass(renderPass);
-
   const bloomPass = new UnrealBloomPass(
     new THREE.Vector2(window.innerWidth, window.innerHeight),
-    1.0, // strength
-    0.45, // radius
+    0.8, // strength
+    0.4, // radius
     0.85 // threshold
   );
   composer.addPass(bloomPass);
@@ -52,57 +51,47 @@ export function createScene() {
 
 export function setupLighting(scene, camera) {
   // Consistent Lighting Setup
-  const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+  const ambientLight = new THREE.AmbientLight(0xffffff, 1);
   scene.add(ambientLight);
-
-  const hemiLight = new THREE.HemisphereLight(0xffffff, 0x666666, 1.5);
+  const hemiLight = new THREE.HemisphereLight(0xffffff, 0x666666, 2);
   hemiLight.position.set(0, 20, 0);
   scene.add(hemiLight);
-
-  const fillLight = new THREE.DirectionalLight(0xffffff, 1.2);
+  const fillLight = new THREE.DirectionalLight(0xffffff, 1.8);
   fillLight.position.set(-12, 6, -8);
   scene.add(fillLight);
-
-  const topLight = new THREE.DirectionalLight(0xffffff, 1.5);
+  const topLight = new THREE.DirectionalLight(0xffffff, 2);
   topLight.position.set(5, 15, 5);
   scene.add(topLight);
-
-  const bottomLight = new THREE.DirectionalLight(0xffffff, 0.8);
+  const bottomLight = new THREE.DirectionalLight(0xffffff, 2.2);
   bottomLight.position.set(-3, -8, 3);
   scene.add(bottomLight);
-
-  const leftLight = new THREE.DirectionalLight(0xffffff, 1.0);
+  const leftLight = new THREE.DirectionalLight(0xffffff, 1.5);
   leftLight.position.set(-12, 2, 5);
   scene.add(leftLight);
-
-  const rightLight = new THREE.DirectionalLight(0xffffff, 1.0);
+  const rightLight = new THREE.DirectionalLight(0xffffff, 1.5);
   rightLight.position.set(12, 2, -5);
   scene.add(rightLight);
-
-  const frontLight = new THREE.DirectionalLight(0xffffff, 0.8);
+  const frontLight = new THREE.DirectionalLight(0xffffff, 1.2);
   frontLight.position.set(8, 4, 12);
   scene.add(frontLight);
-
-  const backLight = new THREE.DirectionalLight(0xffffff, 0.8);
+  const backLight = new THREE.DirectionalLight(0xffffff, 1.2);
   backLight.position.set(-8, 4, -12);
   scene.add(backLight);
-
-  const cameraLight = new THREE.PointLight(0xffffff, 0.8, 0, 2);
+  const cameraLight = new THREE.PointLight(0xffffff, 0.8, 0, 3);
   camera.add(cameraLight);
   scene.add(camera);
 }
 
 export function setupControls(camera, renderer) {
-  // Controls with zoom disabled and camera constraints
+  // Controls with zoom and pan disabled and camera constraints
   const controls = new OrbitControls(camera, renderer.domElement);
   controls.enableDamping = true;
   controls.dampingFactor = 0.25;
   controls.enableZoom = false; // Disable zoom
-
+  controls.enablePan = false; // Disable panning
   // Add camera constraints to prevent extreme angles
   controls.maxPolarAngle = Math.PI * 0.8; // Prevent looking too far up
   controls.minPolarAngle = Math.PI * 0.2; // Prevent looking too far down
-
-  console.log('Orbit controls initialized with camera constraints');
+  console.log('Orbit controls initialized with camera constraints and pan disabled');
   return controls;
 }

src/starfield.js

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 
 export function createStarfield(scene) {
-  const starCount = 12000;
+  const starCount = 16000;
   const starDistance = 300;
   
   // Create geometry for stars

src/transitionManager.js

@@ -2,238 +2,145 @@ import * as THREE from 'three';
 import { createModelFromPreloaded, resetMeshGeometry, cleanupGeometryData } from './modelManager.js';
 import { startBoldRoughnessAnimation, startInnovationGlassAnimation } from './animationManager.js';
 
-// Transition state management
-export let currentScene = 0; // 0: bold, 1: innovation, 2: agility, 3: storytelling
-export let isTransitioning = false;
-export const fadeSpeed = 1; // Easily adjustable fade speed
-export const transitionDuration = 1; // Easily adjustable transition duration (seconds)
-export let scrollDownCount = 0;
-export let scrollUpCount = 0;
-export const scrollThreshold = 10; // Changed to 10 as requested
-export let transitionStartTime = 0;
-export let transitionDirection = 1; // 1 for forward, -1 for backward
+/* ------------------------------------------------------------------ */
+/* state                                                               */
+export let currentScene       = 0;            // 0-bold | 1-innovation | 2-agility | 3-storytelling
+let       pendingScene        = 0;            // target index during a transition
+export let isTransitioning    = false;
 
-// Camera-relative transition vectors
-export let transitionUpVector = new THREE.Vector3();
-export let transitionDownVector = new THREE.Vector3();
-export const transitionDistance = 50; // Increased distance for more dramatic transitions
+export const transitionDuration = 1;          // seconds
+export const scrollThreshold   = 10;
+export const transitionDistance = 50;
 
-// Scene objects
+let scrollDownCount = 0;
+let scrollUpCount   = 0;
+let transitionStartTime = 0;
+let transitionDirection = 1;                  // 1 forward | -1 back
+
+/* ------------------------------------------------------------------ */
+/* scene objects                                                       */
 export let currentModel = null;
-export let nextModel = null;
-export let mixer = null;
-export let nextMixer = null;
-export let autoRotationAngle = 0;
+export let nextModel    = null;
+export let mixer        = null;
+export let nextMixer    = null;
+export let glbRepulsionSystem = null;
 
-// Setter functions to modify exported variables safely
-export function setCurrentModel(model) {
-  currentModel = model;
+/* camera-aligned vectors */
+let transitionUpVector   = new THREE.Vector3();
+let transitionDownVector = new THREE.Vector3();
+
+/* setters ----------------------------------------------------------- */
+export const setCurrentModel        = m => currentModel = m;
+export const setMixer               = m => mixer = m;
+export const setGLBRepulsionSystem  = s => glbRepulsionSystem = s;
+
+/* utilities --------------------------------------------------------- */
+const sceneKey = idx => ['bold','innovation','agility','storytelling'][idx];
+
+/* compute camera-relative diagonal vectors                            */
+export function calculateTransitionVectors(camera){
+  const fwd = new THREE.Vector3(); camera.getWorldDirection(fwd).normalize();
+  const up  = new THREE.Vector3(0,1,0);
+  const right = new THREE.Vector3().crossVectors(fwd, up).normalize();
+  const camUp = new THREE.Vector3().crossVectors(right, fwd).normalize();
+
+  const diag = new THREE.Vector3()
+                 .addScaledVector(camUp,  0.5)
+                 .addScaledVector(right, -0.5)
+                 .normalize();
+
+  transitionUpVector  .copy(diag).multiplyScalar( transitionDistance);
+  transitionDownVector.copy(diag).multiplyScalar(-transitionDistance);
 }
 
-export function setMixer(animMixer) {
-  mixer = animMixer;
-}
+/* ------------------------------------------------------------------ */
+/* transition start                                                    */
+export function startTransition(dir, preload, scene, camera, controls){
+  if(isTransitioning) return;
 
-export function setNextModel(model) {
-  nextModel = model;
-}
+  const nextIdx = currentScene + dir;
+  if(nextIdx < 0 || nextIdx > 3) return;      // out-of-range
 
-export function setNextMixer(animMixer) {
-  nextMixer = animMixer;
-}
+  isTransitioning    = true;
+  pendingScene       = nextIdx;
+  transitionDirection = dir;
+  transitionStartTime = performance.now();
 
-// Calculate camera-relative transition vectors for diagonal movement
-export function calculateTransitionVectors(camera) {
-  // Get camera's world direction
-  const cameraDirection = new THREE.Vector3();
-  camera.getWorldDirection(cameraDirection);
-  // Get world up vector
-  const worldUp = new THREE.Vector3(0, 1, 0);
-  // Calculate camera's left vector - BACK TO ORIGINAL (this gave correct left direction)
-  const cameraLeft = new THREE.Vector3();
-  cameraLeft.crossVectors(worldUp, cameraDirection).normalize();
-  // Calculate camera's local up vector
-  const cameraUp = new THREE.Vector3();
-  cameraUp.crossVectors(cameraLeft, cameraDirection).normalize();
-  // Blend camera up with world up - BUT NEGATE to flip up/down direction
-  const blendedUp = new THREE.Vector3();
-  blendedUp.addVectors(
-    cameraUp.clone().multiplyScalar(0.5),
-    worldUp.clone().multiplyScalar(0.5)
-  ).normalize().negate(); // ADD .negate() here to flip up to down
-  // Create diagonal vector (up-left)
-  const diagonalUpLeft = new THREE.Vector3();
-  diagonalUpLeft.addVectors(
-    blendedUp.clone().multiplyScalar(0.5),
-    cameraLeft.clone().multiplyScalar(0.5)
-  ).normalize();
-  // Set transition vectors
-  transitionUpVector = diagonalUpLeft.clone().multiplyScalar(transitionDistance);
-  transitionDownVector = diagonalUpLeft.clone().multiplyScalar(-transitionDistance);
-  console.log('Diagonal transition vectors calculated with distance:', transitionDistance);
-}
-
-// Start transition to next or previous scene
-export function startTransition(direction = 1, preloadedModels, scene, camera, controls) {
-  if (isTransitioning) return;
-  // Check bounds - now 4 scenes (0-3)
-  if (direction > 0 && currentScene >= 3) return; // Can't go forward from storytelling
-  if (direction < 0 && currentScene <= 0) return; // Can't go backward from bold
-
-  console.log(`Starting diagonal transition: direction=${direction}, currentScene=${currentScene}`);
-  // Calculate camera-relative diagonal transition vectors
   calculateTransitionVectors(camera);
 
-  isTransitioning = true;
-  transitionStartTime = performance.now();
-  transitionDirection = direction;
+  const { model, animMixer } =
+        createModelFromPreloaded(sceneKey(nextIdx), preload, camera, controls);
 
-  // Determine next model based on direction and current scene
-  let nextModelType = '';
-  if (direction > 0) {
-    // Moving forward
-    if (currentScene === 0) {
-      nextModelType = 'innovation';
-    } else if (currentScene === 1) {
-      nextModelType = 'agility';
-    } else if (currentScene === 2) {
-      nextModelType = 'storytelling';
-    }
-  } else {
-    // Moving backward
-    if (currentScene === 1) {
-      nextModelType = 'bold';
-    } else if (currentScene === 2) {
-      nextModelType = 'innovation';
-    } else if (currentScene === 3) {
-      nextModelType = 'agility';
-    }
-  }
+  nextModel = model;
+  nextMixer = animMixer;
+  nextModel.position.copy(dir > 0 ? transitionDownVector : transitionUpVector);
 
-  console.log(`Next model type: ${nextModelType}`);
-  if (nextModelType) {
-    const { model, animMixer } = createModelFromPreloaded(nextModelType, preloadedModels, camera, controls);
-    nextModel = model;
-    nextMixer = animMixer;
+  if(glbRepulsionSystem)
+    glbRepulsionSystem.originalPositions.set(nextModel, nextModel.position.clone());
 
-    // Position next model based on transition direction
-    if (transitionDirection === 1) {
-      // Forward: next model starts from diagonal down position (bottom-right)
-      nextModel.position.copy(transitionDownVector);
-      console.log(`Next model positioned at diagonal down vector (bottom-right): x=${nextModel.position.x}, y=${nextModel.position.y}, z=${nextModel.position.z}`);
-    } else {
-      // Backward: next model starts from diagonal up position (top-left)
-      nextModel.position.copy(transitionUpVector);
-      console.log(`Next model positioned at diagonal up vector (top-left): x=${nextModel.position.x}, y=${nextModel.position.y}, z=${nextModel.position.z}`);
-    }
-    // Add next model to scene without opacity changes - it will appear instantly when it enters the camera view
-    scene.add(nextModel);
-  }
+  scene.add(nextModel);
 }
 
-// Update transition animation
-export function updateTransition(deltaTime, scene) {
-  if (!isTransitioning) return;
+/* ------------------------------------------------------------------ */
+/* transition update                                                   */
+export function updateTransition(_dt, scene){
+  if(!isTransitioning) return;
 
-  const elapsed = (performance.now() - transitionStartTime) / 1000;
-  const transitionProgress = Math.min(elapsed / transitionDuration, 1);
-  // Smooth easing function (ease-in-out)
-  const easeInOut = (t) => t * t * (3 - 2 * t);
-  const easedProgress = easeInOut(transitionProgress);
+  const t  = Math.min((performance.now() - transitionStartTime)/1000 / transitionDuration, 1);
+  const e  = t*t*(3-2*t);                     // smoothstep easing
 
-  if (currentModel) {
-    // Move current model along diagonal vector based on transition direction
-    let moveVector;
-    if (transitionDirection === 1) {
-      // Forward: current model moves top-left
-      moveVector = transitionUpVector.clone().multiplyScalar(easedProgress);
-      console.log('Current model moving top-left (forward transition)');
-    } else {
-      // Backward: current model moves bottom-right
-      moveVector = transitionDownVector.clone().multiplyScalar(easedProgress);
-      console.log('Current model moving bottom-right (backward transition)');
+  if(currentModel)
+    currentModel.position.copy(
+      (transitionDirection>0 ? transitionUpVector : transitionDownVector).clone().multiplyScalar(e)
+    );
+
+  if(nextModel)
+    nextModel.position.copy(
+      (transitionDirection>0 ? transitionDownVector : transitionUpVector).clone().multiplyScalar(1-e)
+    );
+
+  if(t < 1) return;                           // still animating
+
+  /* ----- complete transition -------------------------------------- */
+  if(currentModel){
+    currentModel.traverse(o => o.isMesh && resetMeshGeometry(o));
+    cleanupGeometryData(currentModel);
+    if(glbRepulsionSystem){
+      glbRepulsionSystem.originalPositions.delete(currentModel);
+      glbRepulsionSystem.currentTargets.delete(currentModel);
     }
-    currentModel.position.copy(moveVector);
+    scene.remove(currentModel);
   }
 
-  if (nextModel) {
-    // Move next model from diagonal vector to center based on transition direction
-    let moveVector;
-    if (transitionDirection === 1) {
-      // Forward: next model moves from bottom-right to center
-      moveVector = transitionDownVector.clone().multiplyScalar(1 - easedProgress);
-      console.log('Next model moving from bottom-right to center (forward transition)');
-    } else {
-      // Backward: next model moves from top-left to center
-      moveVector = transitionUpVector.clone().multiplyScalar(1 - easedProgress);
-      console.log('Next model moving from top-left to center (backward transition)');
-    }
-    nextModel.position.copy(moveVector);
-  }
+  currentModel = nextModel;
+  mixer        = nextMixer;
+  currentModel.position.set(0,0,0);
 
-  // Complete transition
-  if (transitionProgress >= 1) {
-    console.log('Diagonal transition animation complete');
-    // FIXED: Reset geometry before removing the model
-    if (currentModel) {
-      // Reset all geometry to original state before removal
-      currentModel.traverse((object) => {
-        if (object.isMesh) {
-          resetMeshGeometry(object);
-        }
-      });
-      // Clean up geometry user data completely
-      cleanupGeometryData(currentModel);
-      scene.remove(currentModel);
-      console.log('Previous model removed from scene');
-    }
+  if(glbRepulsionSystem)
+    glbRepulsionSystem.originalPositions.set(currentModel, currentModel.position.clone());
 
-    // Switch to next model
-    if (nextModel) {
-      currentModel = nextModel;
-      mixer = nextMixer;
-      // Reset position to center
-      currentModel.position.set(0, 0, 0);
-    }
+  nextModel = nextMixer = null;
 
-    nextModel = null;
-    nextMixer = null;
-    isTransitioning = false;
-    currentScene += transitionDirection; // Update scene based on direction
-    scrollDownCount = 0;
-    scrollUpCount = 0;
+  currentScene    = pendingScene;             // now official
+  isTransitioning = false;
+  scrollDownCount = scrollUpCount = 0;
 
-    // Start animations based on current scene
-    if (currentScene === 0) {
-      // Restart bold roughness animation when returning to bold section WITHOUT delay
-      startBoldRoughnessAnimation(false);
-    } else if (currentScene === 1) {
-      startInnovationGlassAnimation();
-    }
-
-    console.log(`Diagonal transition complete. Current scene: ${currentScene}`);
-  }
+  if(currentScene === 0) startBoldRoughnessAnimation(false);
+  if(currentScene === 1) startInnovationGlassAnimation();
 }
 
-// Scroll event handler
-export function onMouseScroll(event, preloadedModels, scene, camera, controls) {
-  if (isTransitioning) return;
+/* ------------------------------------------------------------------ */
+/* scroll handler                                                      */
+export function onMouseScroll(ev, preload, scene, camera, controls){
+  if(isTransitioning) return;
 
-  if (event.deltaY > 0) {
-    // Scrolling down - move forward
-    scrollDownCount++;
-    scrollUpCount = 0; // Reset up count
-    console.log(`Scroll down count: ${scrollDownCount}`);
-    if (scrollDownCount >= scrollThreshold) {
-      startTransition(1, preloadedModels, scene, camera, controls); // Forward direction
-    }
-  } else if (event.deltaY < 0) {
-    // Scrolling up - move backward
-    scrollUpCount++;
-    scrollDownCount = 0; // Reset down count
-    console.log(`Scroll up count: ${scrollUpCount}`);
-    if (scrollUpCount >= scrollThreshold) {
-      startTransition(-1, preloadedModels, scene, camera, controls); // Backward direction
-    }
+  if(ev.deltaY > 0){
+    scrollDownCount++; scrollUpCount = 0;
+    if(scrollDownCount >= scrollThreshold)
+      startTransition(+1, preload, scene, camera, controls);
+  }else if(ev.deltaY < 0){
+    scrollUpCount++; scrollDownCount = 0;
+    if(scrollUpCount >= scrollThreshold)
+      startTransition(-1, preload, scene, camera, controls);
   }
 }