<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js';



// ------------------------------------------------------------
// IMAGE RESOURCES
// ------------------------------------------------------------
// Images for different layers
const layer1 = [
  "https://images.unsplash.com/photo-1744740606226-c255367b942e?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1744740606226-c255367b942e?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1744740606226-c255367b942e?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1744740606226-c255367b942e?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1744740606226-c255367b942e?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://plus.unsplash.com/premium_photo-1747852228970-e781d013da3d?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
];

const layer2 = [
  "https://images.unsplash.com/photo-1682687982167-d7fb3ed8541d?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1682687982167-d7fb3ed8541d?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1682687982167-d7fb3ed8541d?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1682687982167-d7fb3ed8541d?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1682687982167-d7fb3ed8541d?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1682687982167-d7fb3ed8541d?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
];

const layer3 = [
  "https://images.unsplash.com/photo-1507667522877-ad03f0c7b0e0?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1507667522877-ad03f0c7b0e0?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1507667522877-ad03f0c7b0e0?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1507667522877-ad03f0c7b0e0?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1507667522877-ad03f0c7b0e0?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1507667522877-ad03f0c7b0e0?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
];

const layer4 = [
  "https://images.unsplash.com/photo-1682695794816-7b9da18ed470?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1682695794816-7b9da18ed470?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1682695794816-7b9da18ed470?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1682695794816-7b9da18ed470?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1682695794816-7b9da18ed470?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1682695794816-7b9da18ed470?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
];

const layer5 = [
  "https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
];

// Get all image URLs in a single array
const allImageURLs = [
  ...layer1,
  ...layer2,
  ...layer3,
  ...layer4,
  ...layer5
];

// ------------------------------------------------------------
// SHADERS
// ------------------------------------------------------------
const vertexShader = `
    varying vec2 vUv;
    uniform float uVelocity;

    void main() {
        vUv = uv;
        vec3 pos = position;
        // Apply curve along x-axis
        pos.z -= sin(uv.x * 3.141) * .1; // Curve like a cylinder using PI
        pos.x -= sin(uv.y * 3.141)*.03 * uVelocity;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
    }
`;

const fragmentShader = `
    uniform sampler2D texture1;
    varying vec2 vUv;
    uniform vec2 containerSize;
    uniform vec2 imageSize;
    uniform bool isHovered;
    uniform float hoverTransition; // Transition value from 0 to 1

    vec2 cover(vec2 uv, vec2 containerSize, vec2 imageSize) {
    float containerRatio = containerSize.x / containerSize.y;
    float imageRatio = imageSize.x / imageSize.y;
    vec2 scale;
    
    if(imageRatio > containerRatio) {
        // Image is wider than container, scale by height
        scale = vec2(imageRatio / containerRatio, 1.0);
    } else {
        // Image is taller than container, scale by width
        scale = vec2(1.0, containerRatio / imageRatio);
    }
    
    // Center the image
    vec2 adjustedUV = (uv - 0.5) / scale + 0.5;
    return adjustedUV;
    }
   
    void main() {
        vec2 coverUV = cover(vUv, containerSize, imageSize);
        
        // Only display pixels within the 0-1 range
        if(coverUV.x < 0.0 || coverUV.x > 1.0 || coverUV.y < 0.0 || coverUV.y > 1.0) {
            discard;
        }
        
        vec4 texColor = texture2D(texture1, coverUV);
        
        // Convert to grayscale
        float gray = dot(texColor.rgb, vec3(0.299, 0.587, 0.114));
        
        // Mix between grayscale and color based on hover transition
        vec3 finalColor = mix(vec3(gray), texColor.rgb, hoverTransition);
        
        // Smoothly transition opacity from 0.6 to 0.8 when hovered
        float finalOpacity = mix(0.6, 0.8, hoverTransition) * texColor.a;
        
        gl_FragColor = vec4(finalColor, finalOpacity);
    }
`;

// Function to preload all images and then initialize the website
function initWebsite() {
  // Create loading indicator
  const loadingElement = document.createElement('div');
  loadingElement.style.position = 'fixed';
  loadingElement.style.top = '50%';
  loadingElement.style.left = '50%';
  loadingElement.style.transform = 'translate(-50%, -50%)';
  loadingElement.style.fontSize = '24px';
  loadingElement.style.color = 'black';
  loadingElement.style.zIndex = '1000';
  loadingElement.style.pointerEvents = 'none';
  loadingElement.textContent = 'Loading images... 0%';
  document.body.appendChild(loadingElement);

  // Preload all images
  let loadedCount = 0;
  const totalImages = allImageURLs.length;
  const textureLoader = new THREE.TextureLoader();
  const preloadedTextures = {};

  // Create a promise for each image
  const loadPromises = allImageURLs.map(url => {
    return new Promise(resolve => {
      textureLoader.load(
        url,
        texture => {
          // Store the loaded texture
          preloadedTextures[url] = texture;
          
          // Update loading progress
          loadedCount++;
          const progress = Math.floor((loadedCount / totalImages) * 100);
          loadingElement.textContent = `Loading images... ${progress}%`;
          
          resolve(texture);
        },
        undefined, // onProgress isn't typically used with TextureLoader
        error => {
          console.error(`Error loading texture: ${url}`, error);
          loadedCount++;
          resolve(null); // Resolve anyway to not block other images
        }
      );
    });
  });

  // When all images are loaded, initialize the website
  Promise.all(loadPromises).then(() => {
    // Remove loading indicator
    document.body.removeChild(loadingElement);
    
    // Initialize the actual website
    initializeActualWebsite(preloadedTextures);
  });
}

// Function to initialize the actual website with preloaded textures
function initializeActualWebsite(preloadedTextures) {
  // ------------------------------------------------------------
  // SMOOTH SCROLLING SETUP
  // ------------------------------------------------------------
  const lenis = new Lenis({
    duration: 1.2,
  });

  // Store scroll data for animations
  let scrollProgress = 0;

  // Animation loop for smooth scrolling
  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }

  requestAnimationFrame(raf);

  // GSAP integration
  // if (gsap) {
  //   gsap.ticker.add((time) => {
  //     lenis.raf(time * 1000);
  //   });
  // }

  // Handle window resize
  window.addEventListener("resize", () => {
    lenis.resize();
  });

  // ------------------------------------------------------------
  // THREE.JS SETUP
  // ------------------------------------------------------------
  // Create scene, camera and renderer
  const scene = new THREE.Scene();

  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.z = 5;

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas: document.querySelector("#canvas"),
    // alpha: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Limit pixel ratio for performance
  document.body.appendChild(renderer.domElement);

  // Function to handle window resize
  function handleResize() {
    // Update camera
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    
    // Update renderer
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    
    // Adjust scene elements based on screen size
    updateSceneForScreenSize();
  }

  // Add resize event listener
  window.addEventListener('resize', handleResize, false);

  // Function to adjust scene elements based on screen size
  function updateSceneForScreenSize() {
    // Get current screen dimensions
    const width = window.innerWidth;
    
    // Adjust camera position based on device size
    if (width <= 768) { // Mobile
      camera.position.z = 7; // Move camera further back on small screens
    } else if (width <= 1024) { // Tablet
      camera.position.z = 6;
    } else { // Desktop
      camera.position.z = 5;
    }
    
    // Update ring configurations
    ringConfig.forEach((config, index) => {
      // Adjust radius based on screen size
      if (width <= 768) {
        config.radius = 2.0; // Smaller radius on mobile
      } else if (width <= 1024) {
        config.radius = 2.2; // Medium radius on tablet
      } else {
        config.radius = 2.5; // Original radius on desktop
      }
      
      // Update plane positions in this ring
      updateRingPositions(index, config);
    });
  }
  
  // Function to update positions of planes in a ring
  function updateRingPositions(ringIndex, config) {
    const startIdx = ringIndex * numPlanes;
    const endIdx = startIdx + numPlanes;
    
    for (let i = startIdx; i < endIdx && i < allPlanes.length; i++) {
      const planeIndex = i - startIdx;
      const angle = (planeIndex / numPlanes) * Math.PI * 2;
      
      // Update position
      allPlanes[i].position.x = config.radius * Math.cos(angle);
      allPlanes[i].position.z = config.radius * Math.sin(angle);
      allPlanes[i].position.y = config.y;
      
      // Ensure plane faces the center
      allPlanes[i].lookAt(new THREE.Vector3(0, config.y, 0));
    }
  }

  // Orbit controls (currently disabled)
  // const controls = new OrbitControls(camera, renderer.domElement);
  // controls.enableDamping = true; // Add smooth damping
  // controls.dampingFactor = 0.05;

  // ------------------------------------------------------------
  // TEXTURE LOADING
  // ------------------------------------------------------------
  // Function to set texture with size to material
  function setTextureWithSize(url, material) {
    const texture = preloadedTextures[url];
    const img = texture.image;
    // Update the imageSize uniform with actual image dimensions
    material.uniforms.imageSize.value.set(img.width, img.height);
    // Set container size to match plane dimensions (1.5 width, 1 height)
    material.uniforms.containerSize.value.set(1.5, 1);
    material.uniforms.texture1.value = texture;
    return texture;
  }

  // ------------------------------------------------------------
  // 3D OBJECT CREATION
  // ------------------------------------------------------------
  // Create geometry for curved planes - adapt based on device
  const getGeometrySegments = () => {
    if (window.innerWidth <= 768) {
      return { width: 16, height: 16 }; // Fewer segments on mobile for performance
    } else {
      return { width: 32, height: 32 }; // More segments on desktop
    }
  };
  
  const segments = getGeometrySegments();
  const geometry = new THREE.PlaneGeometry(1.5, 1, segments.width, segments.height);

  // Create base material with shaders
  const material = new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
      texture1: { value: null },
      containerSize: { value: new THREE.Vector2(1.5, 1) },
      imageSize: { value: new THREE.Vector2(1, 1) },
      uVelocity: { value: 0 },
      isHovered: { value: false },
      hoverTransition: { value: 0.0 } // New uniform for smooth transition
    },
    side: THREE.DoubleSide,
    transparent: true, // Enable transparency
  });

  // Create groups for rings
  const ringGroup = new THREE.Group();
  const ringGroup2 = new THREE.Group();
  scene.add(ringGroup);
  scene.add(ringGroup2);

  // Setup configuration
  const numPlanes = 6;
  const allPlanes = [];
  const ringConfig = [
    { radius: 2.5, y: 0, images: layer1 },
    { radius: 2.5, y: 2, images: layer2 },
    { radius: 2.5, y: 4, images: layer3 },
    { radius: 2.5, y: -2, images: layer4 },
    { radius: 2.5, y: -4, images: layer5 },
  ];

  // Create rings of planes
  ringConfig.forEach((config) => {
    const planes = [];

    // Create planes for this ring
    for (let i = 0; i < numPlanes; i++) {
      const plane = new THREE.Mesh(geometry, material.clone());

      // Calculate position using circle formula
      const angle = (i / numPlanes) * Math.PI * 2;
      plane.position.x = config.radius * Math.cos(angle);
      plane.position.z = config.radius * Math.sin(angle);
      plane.position.y = config.y;

      // Rotate planes to face center
      plane.lookAt(new THREE.Vector3(0, config.y, 0));

      ringGroup.add(plane);
      ringGroup2.add(ringGroup);
      planes.push(plane);
      allPlanes.push(plane);
    }

    // Set textures for all planes in this ring
    planes.forEach((plane, i) => {
      setTextureWithSize(config.images[i], plane.material);
    });
  });

  // Initialize responsiveness
  updateSceneForScreenSize();

  // ------------------------------------------------------------
  // RAYCASTER SETUP
  // ------------------------------------------------------------
  const raycaster = new THREE.Raycaster();
  const mouse = new THREE.Vector2();
  let hoveredPlane = null;
  const hoverTransitionSpeed = 0.01; // Speed of the transition effect
  
  // Update mouse position on move - works for both mouse and touch
  function updateMousePosition(clientX, clientY) {
    mouse.x = (clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(clientY / window.innerHeight) * 2 + 1;
  }

  // Mouse move handler
  function onMouseMove(event) {
    updateMousePosition(event.clientX, event.clientY);
  }
  
  // Touch move handler
  function onTouchMove(event) {
    if (event.touches.length > 0) {
      updateMousePosition(event.touches[0].clientX, event.touches[0].clientY);
      event.preventDefault(); // Prevent scrolling while touching elements
    }
  }

  // Add event listeners for both mouse and touch
  window.addEventListener('mousemove', onMouseMove, false);
  window.addEventListener('touchmove', onTouchMove, { passive: false });
  window.addEventListener('touchstart', onTouchMove, { passive: false });

  // Function to check for hover interactions
  function checkIntersections() {
    // Update the picking ray with the camera and mouse position
    raycaster.setFromCamera(mouse, camera);
    
    // Calculate objects intersecting the picking ray
    const intersects = raycaster.intersectObjects(allPlanes);
    
    // Handle hover states with smooth transitions
    allPlanes.forEach(plane => {
      // Get current hover transition value
      const currentTransition = plane.material.uniforms.hoverTransition.value;
      
      if (intersects.length > 0 && intersects[0].object === plane) {
        // If this plane is being hovered, increase transition value
        plane.material.uniforms.hoverTransition.value = Math.min(currentTransition + hoverTransitionSpeed, 1.0);
        hoveredPlane = plane;
      } else {
        // If not hovered, decrease transition value
        plane.material.uniforms.hoverTransition.value = Math.max(currentTransition - hoverTransitionSpeed, 0.0);
      }
    });
  }

  lenis.on("scroll", ({ progress, velocity }) => {
    scrollProgress = progress;
    allPlanes.forEach(plane => {
      plane.material.uniforms.uVelocity.value = velocity;
    });
  });

  // ------------------------------------------------------------
  // ANIMATION LOOP
  // ------------------------------------------------------------
  function animate() {
    requestAnimationFrame(animate);

    // Check for hover interactions
    checkIntersections();

    // Update rotations based on scroll
    ringGroup.rotation.y = scrollProgress * 2 * Math.PI;
    ringGroup2.rotation.y += 0.001;
    
    // Position based on scroll
    ringGroup2.position.y = scrollProgress * 12 - 6;

    // Render the scene
    renderer.render(scene, camera);
  }

  animate();
}

// Start loading process
initWebsite();

</script>

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js';

// Register ScrollTrigger plugin

// Initialize Lenis smooth scrolling
const smoothScroll = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  direction: 'vertical',
  gestureDirection: 'vertical',
  smooth: true,
  mouseMultiplier: 1,
  smoothTouch: false,
  touchMultiplier: 2,
  infinite: false
});

// Link lenis to requestAnimationFrame
function raf(time) {
  smoothScroll.raf(time);
  requestAnimationFrame(raf);
}

// Start the animation loop
requestAnimationFrame(raf);

// Update Lenis on window resize
window.addEventListener('resize', () => {
  smoothScroll.resize();
});

const images = [...document.querySelectorAll('.webgl img')];

// Initialize the scene
const scene = new THREE.Scene();

// Noise texture for smoke effect
const noiseTexture = new THREE.TextureLoader().load('https://assets.codepen.io/39255/perlinNoise.png');
noiseTexture.wrapS = noiseTexture.wrapT = THREE.RepeatWrapping;

const vertexShader = `
  varying vec2 vUv;
  varying float vDistortion;
  uniform float uTime;
  uniform float uProgress;
  
  // Simplex 3D noise function
  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);
    
    // First corner
    vec3 i  = floor(v + dot(v, C.yyy));
    vec3 x0 = v - i + dot(i, C.xxx);
    
    // Other corners
    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;
    
    // Permutations
    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));
            
    // Gradients: 7x7 points over a square, mapped onto an octahedron
    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);
    
    // Normalise gradients
    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;
    
    // Mix final noise value
    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() {
    vUv = uv;
    
    // Create smoky distortion effect
    float noiseScale = 2.0;
    float noiseIntensity = 0.2;
    float timeScale = uTime * 0.2;
    
    // Calculate noise based on position and time
    float noise = snoise(vec3(position.x * noiseScale, position.y * noiseScale, timeScale));
    
    // Apply distortion based on progress (more distortion when progress is low)
    float distortionFactor = (1.0 - uProgress) * 30.0;
    vec3 pos = position;
    
    // Apply smoky distortion
    pos.x += noise * distortionFactor * (1.0 - uProgress);
    pos.y += noise * distortionFactor * (1.0 - uProgress);
    pos.z += noise * distortionFactor * (1.0 - uProgress);
    
    // Store distortion for fragment shader
    vDistortion = noise * (1.0 - uProgress);
    
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
  }
`

const fragmentShader = `
  varying vec2 vUv;
  varying float vDistortion;
  uniform sampler2D uTexture;
  uniform sampler2D uNoiseTexture;
  uniform vec2 uImageSize;
  uniform vec2 uContainerSize;
  uniform float uProgress;
  uniform float uTime;

  vec2 cover(vec2 uv, vec2 containerSize, vec2 imageSize) {
    float containerRatio = containerSize.x / containerSize.y;
    float imageRatio = imageSize.x / imageSize.y;
    vec2 scale;
    vec2 offset;
    if(imageRatio > containerRatio) {
        scale = vec2(containerSize.y / imageSize.y);
        offset = vec2((containerSize.x - imageSize.x * scale.x) * 0.5, 0.0);
    } else {
        scale = vec2(containerSize.x / imageSize.x);
        offset = vec2(0.0, (containerSize.y - imageSize.y * scale.y) * 0.5);
    }
    vec2 adjustedUV = (uv * containerSize - offset) / (imageSize * scale);
    return adjustedUV;
  }

  void main() {
    // Create smoky effect with noise texture
    vec2 noiseUV = vUv + vec2(uTime * 0.05, uTime * 0.03);
    vec4 noiseColor = texture2D(uNoiseTexture, noiseUV);
    
    // Get texture color
    vec2 distortedUV = vUv;
    distortedUV.x += vDistortion * 0.1;
    distortedUV.y += vDistortion * 0.1;
    
    vec2 adjustedUV = cover(distortedUV, uContainerSize, uImageSize);
    vec4 texColor = texture2D(uTexture, adjustedUV);
    
    // Apply smoke effect
    float smokeIntensity = (1.0 - uProgress) * 1.5;
    float smokeFactor = smoothstep(0.4, 0.6, noiseColor.r) * smokeIntensity;
    
    // Mix smoke with image
    vec4 smokeColor = vec4(0.9, 0.9, 0.9, smokeFactor);
    vec4 finalColor = mix(texColor, smokeColor, smokeFactor * (1.0 - uProgress));
    
    // Apply fade-in effect based on progress
    float fadeEffect = smoothstep(0.0, 0.8, uProgress);
    finalColor.a *= fadeEffect;
    
    gl_FragColor = finalColor;
  }
`

// Create a camera
const fov = Math.atan((window.innerHeight/2) / 500) * (180/Math.PI) * 2;
const camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 500;

// Set up renderer
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#canvas'),
  antialias: true,
  alpha: true
});
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

// Create a textureLoader once outside the loop for better performance
const textureLoader = new THREE.TextureLoader();

const meshes = [];
let clock = new THREE.Clock();

images.forEach((img, i) => {
  const bound = img.getBoundingClientRect();
  // Use more segments for the smoke effect
  const segments = 32;
  const geo = new THREE.PlaneGeometry(bound.width, bound.height, segments, segments);
  const mat = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    uniforms: {
      uTexture: { value: textureLoader.load(img.src) },
      uNoiseTexture: { value: noiseTexture },
      uImageSize: { value: new THREE.Vector2(img.naturalWidth, img.naturalHeight) },
      uContainerSize: { value: new THREE.Vector2(bound.width, bound.height) },
      uProgress: { value: 0.0 }, // Start with progress at 0.0 (initial state)
      uTime: { value: 0.0 }
    },
    transparent: true
  });
  const mesh = new THREE.Mesh(geo, mat);
  mesh.position.x = bound.left - window.innerWidth/2 + bound.width/2;
  mesh.position.y = -bound.top + window.innerHeight/2 - bound.height/2;
  scene.add(mesh);
  meshes.push(mesh);
  
  // Create ScrollTrigger for each image
  const parentElement = img.parentElement;

  ScrollTrigger.create({
    trigger: parentElement,
    start: "top bottom-=100",
    end: "center center",
    scrub: true,
    onUpdate: (self) => {
      if (mesh.material.uniforms) {
        // Progress from 0.0 -> 1.0 as we scroll
        mesh.material.uniforms.uProgress.value = self.progress;
      }
    }
  });
});

function updatePosition() {
  images.forEach((img, i) => {
    const bound = img.getBoundingClientRect();
    const mesh = meshes[i];
    if (mesh) {
      mesh.position.x = bound.left - window.innerWidth/2 + bound.width/2;
      mesh.position.y = -bound.top + window.innerHeight/2 - bound.height/2;
      
      // Update uniforms if needed
      if (mesh.material.uniforms) {
        mesh.material.uniforms.uContainerSize.value.set(bound.width, bound.height);
      }
    }
  });
}

// Handle window resize
window.addEventListener('resize', () => {
  // Update camera
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  
  // Update renderer
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  
  // Update meshes
  updatePosition();
  
  // Refresh ScrollTrigger on resize
  ScrollTrigger.refresh();
});

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  
  // Update time uniform for all meshes
  const elapsedTime = clock.getElapsedTime();
  meshes.forEach(mesh => {
    if (mesh.material.uniforms) {
      mesh.material.uniforms.uTime.value = elapsedTime;
    }
  });
  
  // Update positions on scroll
  updatePosition();
  
  // Render
  renderer.render(scene, camera);
}

animate();

</script>

<script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js"
        }
      }
</script>

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>

<script type="module">
import * as THREE from 'https://esm.sh/three@0.164.1';
import { GPUComputationRenderer } from 'https://esm.sh/three@0.164.1/examples/jsm/misc/GPUComputationRenderer.js';



// Register ScrollTrigger plugin

// Initialize Lenis smooth scrolling
const smoothScroll = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  direction: 'vertical',
  gestureDirection: 'vertical',
  smooth: true,
  mouseMultiplier: 1,
  smoothTouch: false,
  touchMultiplier: 2,
  infinite: false
});

// Link lenis to requestAnimationFrame
function raf(time) {
  smoothScroll.raf(time);
  requestAnimationFrame(raf);
}

// Start the animation loop
requestAnimationFrame(raf);

// Update Lenis on window resize
window.addEventListener('resize', () => {
  smoothScroll.resize();
});

const images = [...document.querySelectorAll('.webgl img')];

// Initialize the scene
const scene = new THREE.Scene();

// Mouse tracking
const mouse = new THREE.Vector2();
const lastMouse = new THREE.Vector2();
const mouseVelocity = new THREE.Vector2();

// Track mouse position
window.addEventListener('mousemove', (event) => {
  // Store last position to calculate velocity
  lastMouse.x = mouse.x;
  lastMouse.y = mouse.y;
  
  // Update current position (normalized coordinates)
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  
  // Calculate velocity
  mouseVelocity.x = mouse.x - lastMouse.x;
  mouseVelocity.y = mouse.y - lastMouse.y;
});

const vertexShader = `
  attribute float size;
  attribute vec3 color;
  attribute float opacity;
  
  varying vec2 vUv;
  varying vec3 vColor;
  varying float vOpacity;
  varying vec3 vPosition;
  
  uniform float uProgress;
  uniform float uPointSize;
  uniform sampler2D positionTexture;
  
  void main() {
    vUv = uv;
    vColor = color;
    vOpacity = opacity;
    
    // Get position from texture
    vec4 positionInfo = texture2D(positionTexture, uv);
    vec3 pos = position;
    
    // Apply position from texture with different intensities based on progress
    // When progress is low (scattered): strong effect for initial positioning
    // When progress is high (formed): weaker effect for mouse interaction
    float scatterIntensity = (1.0 - uProgress) * 100.0; // Strong when scattered
    float interactionIntensity = uProgress * 20.0; // Weaker when formed, but still present
    pos.xy += positionInfo.xy * (scatterIntensity + interactionIntensity);
    
    // Project position
    vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
    gl_Position = projectionMatrix * mvPosition;
    
    // Pass world position to fragment shader for raycasting
    vPosition = (modelMatrix * vec4(pos, 1.0)).xyz;
    
    // Set point size (larger when scattered, smaller when collected)
    float sizeMultiplier = 1.0 + (1.0 - uProgress) * 2.0;
    gl_PointSize = uPointSize * size * sizeMultiplier;
  }
`

const fragmentShader = `
  varying vec2 vUv;
  varying vec3 vColor;
  varying float vOpacity;
  varying vec3 vPosition;
  
  uniform sampler2D uTexture;
  uniform vec2 uImageSize;
  uniform vec2 uContainerSize;
  uniform float uProgress;
  uniform vec3 uMousePos;
  uniform float uMouseRadius;
  uniform vec2 uMouseVelocity;

  vec2 cover(vec2 uv, vec2 containerSize, vec2 imageSize) {
    float containerRatio = containerSize.x / containerSize.y;
    float imageRatio = imageSize.x / imageSize.y;
    vec2 scale;
    vec2 offset;
    if(imageRatio > containerRatio) {
        scale = vec2(containerSize.y / imageSize.y);
        offset = vec2((containerSize.x - imageSize.x * scale.x) * 0.5, 0.0);
    } else {
        scale = vec2(containerSize.x / imageSize.x);
        offset = vec2(0.0, (containerSize.y - imageSize.y * scale.y) * 0.5);
    }
    vec2 adjustedUV = (uv * containerSize - offset) / (imageSize * scale);
    return adjustedUV;
  }

  void main() {
    // Create circular particles
    float distanceToCenter = length(gl_PointCoord - vec2(0.5));
    if (distanceToCenter > 0.5) discard;
    
    // Fix the upside-down issue by flipping the y coordinate
    vec2 correctedUV = vec2(vUv.x, 1.0 - vUv.y);
    
    // Get texture color
    vec2 adjustedUV = cover(correctedUV, uContainerSize, uImageSize);
    vec4 texColor = texture2D(uTexture, adjustedUV);
    
    // Apply fade-in effect based on progress
    float fadeEffect = smoothstep(0.0, 1.0, uProgress);
    
    // Calculate distance to mouse position
    float distToMouse = length(vPosition - uMousePos);
    
    // Apply mouse interaction effect
    float mouseEffect = smoothstep(uMouseRadius, uMouseRadius * 0.5, distToMouse);
    
    // Create final color with particle opacity
    vec4 finalColor = texColor;
    
    // Adjust alpha based on mouse interaction
    finalColor.a *= vOpacity * fadeEffect * (1.0 - distanceToCenter * 0.5);
    
    // Optional: Add subtle brightness effect for particles affected by mouse (no color shift)
    if (mouseEffect > 0.01) {
      float velocityFactor = length(uMouseVelocity) * 0.2;
      finalColor.rgb *= (1.0 + velocityFactor * mouseEffect * 0.1); // Subtle brightness increase only
    }
    
    gl_FragColor = finalColor;
  }
`

// Position computation shader
const positionShader = `
  uniform vec3 uMousePos;
  uniform float uMouseRadius;
  uniform vec2 uMouseVelocity;
  uniform float uMouseStrength;
  uniform float uRestoreSpeed;
  uniform float uProgress;
  
  void main() {
    vec2 uv = gl_FragCoord.xy / resolution.xy;
    
    // Get current position
    vec4 currentPos = texture2D(positionTexture, uv);
    
    // Create base random offset based on UV
    float randomX = fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453);
    float randomY = fract(sin(dot(uv, vec2(39.7456, 28.957))) * 43758.5453);
    
    // Base position (scattered state)
    vec2 scatteredPos = vec2(
      (randomX - 0.5) * 6.0,
      (randomY - 0.5) * 6.0
    );
    
    // Formed position (grid position)
    vec2 formedPos = vec2(0.0, 0.0);
    
    // Calculate world position for this particle
    vec2 particlePos = uv * 2.0 - 1.0;
    
    // Calculate distance to mouse
    float distToMouse = length(vec3(particlePos.x, particlePos.y, 0.0) - uMousePos);
    
    // Apply mouse repulsion effect (velocity-based only)
    vec2 mouseRepulsion = vec2(0.0);
    float mouseVelocityMagnitude = length(uMouseVelocity);
    
    // Only apply repulsion when mouse is moving and within radius
    if (distToMouse < uMouseRadius && mouseVelocityMagnitude > 0.01) {
      // Direction away from mouse
      vec2 direction = normalize(vec2(particlePos.x - uMousePos.x, particlePos.y - uMousePos.y));
      
      // Strength based on distance and velocity magnitude
      float strength = (1.0 - distToMouse / uMouseRadius) * uMouseStrength * mouseVelocityMagnitude;
      
      // Add velocity influence
      vec2 velocityEffect = uMouseVelocity * 2.0;
      
      // Combine effects
      mouseRepulsion = direction * strength + velocityEffect;
    }
    
    // Choose target position based on progress
    vec2 targetPos = mix(scatteredPos, formedPos, uProgress);
    
    // Gradually restore to target position
    vec2 newPos = currentPos.xy + (targetPos - currentPos.xy) * uRestoreSpeed;
    
    // Add mouse repulsion (always active)
    newPos += mouseRepulsion;
    
    // Output position
    gl_FragColor = vec4(newPos, 0.0, 1.0);
  }
`;

// Create a camera
const fov = Math.atan((window.innerHeight/2) / 500) * (180/Math.PI) * 2;
const camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 500;

// Set up renderer
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#canvas'),
  antialias: true,
  alpha: true
});
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

// Create a textureLoader once outside the loop for better performance
const textureLoader = new THREE.TextureLoader();

// Setup raycaster
const raycaster = new THREE.Raycaster();
raycaster.params.Points.threshold = 10; // Increased threshold for better hit detection

const meshes = [];
const gpuComputes = [];

images.forEach((img, i) => {
  const bound = img.getBoundingClientRect();
  
  // Create particles instead of a plane
  const particleCount = 30000; // Number of particles
  const particleSize = 8; // Base size of particles
  
  // Setup GPU computation
  const gpuCompute = new GPUComputationRenderer(128, 128, renderer);
  const positionTexture = gpuCompute.createTexture();
  
  // Initialize position texture with random values
  const positionArray = positionTexture.image.data;
  for (let i = 0; i < positionArray.length; i += 4) {
    const x = Math.random() * 2 - 1;
    const y = Math.random() * 2 - 1;
    positionArray[i] = x * 3; // r = x
    positionArray[i + 1] = y * 3; // g = y
    positionArray[i + 2] = 0; // b = unused
    positionArray[i + 3] = 1; // a = unused
  }
  
  // Create position variable
  const positionVariable = gpuCompute.addVariable('positionTexture', positionShader, positionTexture);
  
  // Add uniforms to position variable
  positionVariable.material.uniforms = {
    uMousePos: { value: new THREE.Vector3(0, 0, 0) },
    uMouseRadius: { value: 0.3 },
    uMouseVelocity: { value: new THREE.Vector2(0, 0) },
    uMouseStrength: { value: 0.2 },
    uRestoreSpeed: { value: 0.05 }, // Faster restore speed for quick return to initial position
    uProgress: { value: 0.0 }
  };
  
  // Set variable dependencies
  gpuCompute.setVariableDependencies(positionVariable, [positionVariable]);
  
  // Initialize GPU computation
  const error = gpuCompute.init();
  if (error !== null) {
    console.error(error);
  }
  
  // Store GPU compute for later use
  gpuComputes.push({ compute: gpuCompute, variable: positionVariable });
  
  // Create particle geometry
  const geometry = new THREE.BufferGeometry();
  const positions = new Float32Array(particleCount * 3);
  const uvs = new Float32Array(particleCount * 2);
  const sizes = new Float32Array(particleCount);
  const colors = new Float32Array(particleCount * 3);
  const opacities = new Float32Array(particleCount);
  
  // Create a grid of particles to represent the image
  const gridSize = Math.sqrt(particleCount);
  for (let i = 0; i < particleCount; i++) {
    const i3 = i * 3;
    const i2 = i * 2;
    
    // Calculate grid position
    const x = (i % gridSize) / gridSize;
    const y = Math.floor(i / gridSize) / gridSize;
    
    // Position particles in a plane
    positions[i3] = (x - 0.5) * bound.width;
    positions[i3 + 1] = (0.5 - y) * bound.height;
    positions[i3 + 2] = 0;
    
    // Store UV coordinates for texture sampling
    uvs[i2] = x;
    uvs[i2 + 1] = y;
    
    // Randomize particle sizes slightly
    sizes[i] = 0.5 + Math.random() * 0.5;
    
    // Set default colors (will be overridden by texture)
    colors[i3] = 1;
    colors[i3 + 1] = 1;
    colors[i3 + 2] = 1;
    
    // Set opacity with slight variation
    opacities[i] = 0.7 + Math.random() * 0.3;
  }
  
  // Add attributes to geometry
  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
  geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));
  geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
  geometry.setAttribute('opacity', new THREE.BufferAttribute(opacities, 1));
  
  // Create material for particles
  const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    uniforms: {
      uTexture: { value: textureLoader.load(img.src) },
      uImageSize: { value: new THREE.Vector2(img.naturalWidth, img.naturalHeight) },
      uContainerSize: { value: new THREE.Vector2(bound.width, bound.height) },
      uProgress: { value: 0.0 }, // Start with progress at 0.0 (initial state)
      uPointSize: { value: particleSize },
      positionTexture: { value: null },
      uMousePos: { value: new THREE.Vector3(0, 0, 0) },
      uMouseRadius: { value: 50.0 },
      uMouseVelocity: { value: new THREE.Vector2(0, 0) }
    },
    transparent: true,
    depthWrite: false,
    blending: THREE.AdditiveBlending
  });
  
  // Create particle system
  const particles = new THREE.Points(geometry, material);
  particles.position.x = bound.left - window.innerWidth/2 + bound.width/2;
  particles.position.y = -bound.top + window.innerHeight/2 - bound.height/2;
  scene.add(particles);
  meshes.push(particles);
  
  // Create ScrollTrigger for each image
  const parentElement = img.parentElement;

  ScrollTrigger.create({
    trigger: parentElement,
    start: "top bottom-=10",
    end: "bottom 110%",
    scrub: true,
    onUpdate: (self) => {
      if (particles.material.uniforms) {
        // Progress from 0.0 -> 1.0 as we scroll
        particles.material.uniforms.uProgress.value = self.progress;
        
        // Also update the progress in the GPU compute position shader
        const gpuComputeData = gpuComputes[i];
        if (gpuComputeData && gpuComputeData.variable.material.uniforms) {
          gpuComputeData.variable.material.uniforms.uProgress.value = self.progress;
        }
      }
    }
  });
});

function updatePosition() {
  images.forEach((img, i) => {
    const bound = img.getBoundingClientRect();
    const mesh = meshes[i];
    if (mesh) {
      mesh.position.x = bound.left - window.innerWidth/2 + bound.width/2;
      mesh.position.y = -bound.top + window.innerHeight/2 - bound.height/2;
      
      // Update uniforms if needed
      if (mesh.material.uniforms) {
        mesh.material.uniforms.uContainerSize.value.set(bound.width, bound.height);
      }
    }
  });
}

// Update mouse position in 3D space for interaction
function updateMouseRaycasting() {
  // Update raycaster with mouse position
  raycaster.setFromCamera(mouse, camera);
  
  // Check for intersections with all particle systems
  meshes.forEach((mesh, i) => {
    // Get the GPU compute for this mesh
    const gpuComputeData = gpuComputes[i];
    if (!gpuComputeData) return;
    
    // Compute new positions based on mouse interaction
    const positionVariable = gpuComputeData.variable;
    
    // Update mouse velocity uniforms
    positionVariable.material.uniforms.uMouseVelocity.value.copy(mouseVelocity);
    
    // Check if mouse is intersecting with this mesh
    const intersects = raycaster.intersectObject(mesh);
    
    // Allow interaction regardless of progress value
    if (intersects.length > 0) {
      // Mouse is over this particle system
      const intersection = intersects[0];
      
      // Convert intersection point to local space of the GPU compute
      const localPoint = new THREE.Vector3().copy(intersection.point)
        .sub(mesh.position)
        .divideScalar(Math.max(mesh.material.uniforms.uContainerSize.value.x, 
                              mesh.material.uniforms.uContainerSize.value.y) / 2);
      
      // Fix the Y-axis inversion issue by flipping the y coordinate
      localPoint.y *= -1;
      
      // Update mouse position uniform
      positionVariable.material.uniforms.uMousePos.value.copy(localPoint);
      
      // Adjust mouse strength based on progress - stronger when scattered, weaker when formed
      const progress = mesh.material.uniforms.uProgress.value;
      const strengthFactor = 20.1 ; // 0.5 to 1.0 based on progress
      const radiusFactor = 0.3;   // 0.5 to 1.0 based on progress
      
      positionVariable.material.uniforms.uMouseStrength.value = strengthFactor;
      positionVariable.material.uniforms.uMouseRadius.value = radiusFactor;
    } else {
      // Move mouse far away when not intersecting
      positionVariable.material.uniforms.uMousePos.value.set(1000, 1000, 1000);
    }
    
    // Compute new positions
    gpuComputeData.compute.compute();
    
    // Update the position texture in the mesh material
    mesh.material.uniforms.positionTexture.value = 
      gpuComputeData.compute.getCurrentRenderTarget(positionVariable).texture;
    
    // Update mouse uniforms in the fragment shader
    mesh.material.uniforms.uMouseVelocity.value.copy(mouseVelocity);
  });
  
  // Decay mouse velocity more slowly for smoother effect
  mouseVelocity.multiplyScalar(0.98);
}

// Handle window resize
window.addEventListener('resize', () => {
  // Update camera
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  
  // Update renderer
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  
  // Update meshes
  updatePosition();
  
  // Refresh ScrollTrigger on resize
  ScrollTrigger.refresh();
});

// FPS counter variables
let frameCount = 0;
let lastTime = performance.now();
let fps = 0;

// Create FPS display element
const fpsDisplay = document.createElement('div');
fpsDisplay.style.position = 'fixed';
fpsDisplay.style.top = '10px';
fpsDisplay.style.left = '10px';
fpsDisplay.style.color = 'white';
fpsDisplay.style.fontFamily = 'Arial, sans-serif';
fpsDisplay.style.fontSize = '14px';
fpsDisplay.style.fontWeight = 'bold';
fpsDisplay.style.zIndex = '1000';
fpsDisplay.style.textShadow = '1px 1px 2px rgba(0,0,0,0.8)';
fpsDisplay.style.padding = '5px 10px';
fpsDisplay.style.backgroundColor = 'rgba(0,0,0,0.5)';
fpsDisplay.style.borderRadius = '5px';
document.body.appendChild(fpsDisplay);

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  
  // Update FPS counter
  frameCount++;
  const currentTime = performance.now();
  if (currentTime - lastTime >= 1000) {
    fps = Math.round((frameCount * 1000) / (currentTime - lastTime));
    fpsDisplay.textContent = `FPS: ${fps}`;
    frameCount = 0;
    lastTime = currentTime;
  }
  
  // Update mouse raycasting
  updateMouseRaycasting();
  
  // Update positions on scroll
  updatePosition();
  
  // Render
  renderer.render(scene, camera);
}

animate();

</script>

<script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js"
        }
      }
</script>

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>

<script type="module">

import * as THREE from 'https://esm.sh/three@0.164.1';
import { GPUComputationRenderer } from 'https://esm.sh/three@0.164.1/examples/jsm/misc/GPUComputationRenderer.js';

// Register ScrollTrigger plugin

// Initialize Lenis smooth scrolling
const smoothScroll = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  direction: 'vertical',
  gestureDirection: 'vertical',
  smooth: true,
  mouseMultiplier: 1,
  smoothTouch: false,
  touchMultiplier: 2,
  infinite: false
});

// Link lenis to requestAnimationFrame
function raf(time) {
  smoothScroll.raf(time);
  requestAnimationFrame(raf);
}

// Start the animation loop
requestAnimationFrame(raf);

// Update Lenis on window resize
window.addEventListener('resize', () => {
  smoothScroll.resize();
});

const images = [...document.querySelectorAll('.webgl img')];

// Initialize the scene
const scene = new THREE.Scene();

const vertexShader = `
  attribute float size;
  attribute vec3 color;
  attribute float opacity;
  
  varying vec2 vUv;
  varying vec3 vColor;
  varying float vOpacity;
  
  uniform float uProgress;
  uniform float uPointSize;
  uniform sampler2D positionTexture;
  
  void main() {
    vUv = uv;
    vColor = color;
    vOpacity = opacity;
    
    // Get position from texture
    vec4 positionInfo = texture2D(positionTexture, uv);
    vec3 pos = position;
    
    // Apply position from texture when progress is low
    pos.xy += positionInfo.xy * (1.0 - uProgress) * 100.0;
    
    // Project position
    vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
    gl_Position = projectionMatrix * mvPosition;
    
    // Set point size (larger when scattered, smaller when collected)
    float sizeMultiplier = 1.0 + (1.0 - uProgress) * 2.0;
    gl_PointSize = uPointSize * size * sizeMultiplier;
  }
`

const fragmentShader = `
  varying vec2 vUv;
  varying vec3 vColor;
  varying float vOpacity;
  
  uniform sampler2D uTexture;
  uniform vec2 uImageSize;
  uniform vec2 uContainerSize;
  uniform float uProgress;

  vec2 cover(vec2 uv, vec2 containerSize, vec2 imageSize) {
    float containerRatio = containerSize.x / containerSize.y;
    float imageRatio = imageSize.x / imageSize.y;
    vec2 scale;
    vec2 offset;
    if(imageRatio > containerRatio) {
        scale = vec2(containerSize.y / imageSize.y);
        offset = vec2((containerSize.x - imageSize.x * scale.x) * 0.5, 0.0);
    } else {
        scale = vec2(containerSize.x / imageSize.x);
        offset = vec2(0.0, (containerSize.y - imageSize.y * scale.y) * 0.5);
    }
    vec2 adjustedUV = (uv * containerSize - offset) / (imageSize * scale);
    return adjustedUV;
  }

  void main() {
    // Create circular particles
    float distanceToCenter = length(gl_PointCoord - vec2(0.5));
    if (distanceToCenter > 0.5) discard;
    
    // Fix the upside-down issue by flipping the y coordinate
    vec2 correctedUV = vec2(vUv.x, 1.0 - vUv.y);
    
    // Get texture color
    vec2 adjustedUV = cover(correctedUV, uContainerSize, uImageSize);
    vec4 texColor = texture2D(uTexture, adjustedUV);
    
    // Apply fade-in effect based on progress
    float fadeEffect = smoothstep(0.0, 1.0, uProgress);
    
    // Create final color with particle opacity
    vec4 finalColor = texColor;
    finalColor.a *= vOpacity * fadeEffect * (1.0 - distanceToCenter * 0.5);
    
    gl_FragColor = finalColor;
  }
`

// Position computation shader
const positionShader = `
  void main() {
    vec2 uv = gl_FragCoord.xy / resolution.xy;
    
    // Create random offset based on UV
    float randomX = fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453);
    float randomY = fract(sin(dot(uv, vec2(39.7456, 28.957))) * 43758.5453);
    
    // Output position offset
    gl_FragColor = vec4(
      (randomX - 0.5) * 6.0,  // x offset
      (randomY - 0.5) * 6.0,  // y offset
      0.0,                    // unused
      1.0                     // unused
    );
  }
`;

// Create a camera
const fov = Math.atan((window.innerHeight/2) / 500) * (180/Math.PI) * 2;
const camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 500;

// Set up renderer
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#canvas'),
  antialias: true,
  alpha: true
});
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

// Create a textureLoader once outside the loop for better performance
const textureLoader = new THREE.TextureLoader();

const meshes = [];

images.forEach((img, i) => {
  const bound = img.getBoundingClientRect();
  
  // Create particles instead of a plane
  const particleCount = 30000; // Number of particles
  const particleSize = 6; // Base size of particles
  
  // Setup GPU computation
  const gpuCompute = new GPUComputationRenderer(128, 128, renderer);
  const positionVariable = gpuCompute.addVariable('positionTexture', positionShader, null);
  gpuCompute.init();
  gpuCompute.compute();
  
  // Create particle geometry
  const geometry = new THREE.BufferGeometry();
  const positions = new Float32Array(particleCount * 3);
  const uvs = new Float32Array(particleCount * 2);
  const sizes = new Float32Array(particleCount);
  const colors = new Float32Array(particleCount * 3);
  const opacities = new Float32Array(particleCount);
  
  // Create a grid of particles to represent the image
  const gridSize = Math.sqrt(particleCount);
  for (let i = 0; i < particleCount; i++) {
    const i3 = i * 3;
    const i2 = i * 2;
    
    // Calculate grid position
    const x = (i % gridSize) / gridSize;
    const y = Math.floor(i / gridSize) / gridSize;
    
    // Position particles in a plane
    positions[i3] = (x - 0.5) * bound.width;
    positions[i3 + 1] = (0.5 - y) * bound.height;
    positions[i3 + 2] = 0;
    
    // Store UV coordinates for texture sampling
    uvs[i2] = x;
    uvs[i2 + 1] = y;
    
    // Randomize particle sizes slightly
    sizes[i] = 0.5 + Math.random() * 0.5;
    
    // Set default colors (will be overridden by texture)
    colors[i3] = 1;
    colors[i3 + 1] = 1;
    colors[i3 + 2] = 1;
    
    // Set opacity with slight variation
    opacities[i] = 0.7 + Math.random() * 0.3;
  }
  
  // Add attributes to geometry
  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
  geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));
  geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
  geometry.setAttribute('opacity', new THREE.BufferAttribute(opacities, 1));
  
  // Create material for particles
  const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    uniforms: {
      uTexture: { value: textureLoader.load(img.src) },
      uImageSize: { value: new THREE.Vector2(img.naturalWidth, img.naturalHeight) },
      uContainerSize: { value: new THREE.Vector2(bound.width, bound.height) },
      uProgress: { value: 0.0 }, // Start with progress at 0.0 (initial state)
      uPointSize: { value: particleSize },
      positionTexture: { value: gpuCompute.getCurrentRenderTarget(positionVariable).texture }
    },
    transparent: true,
    depthWrite: false,
    blending: THREE.AdditiveBlending
  });
  
  // Create particle system
  const particles = new THREE.Points(geometry, material);
  particles.position.x = bound.left - window.innerWidth/2 + bound.width/2;
  particles.position.y = -bound.top + window.innerHeight/2 - bound.height/2;
  scene.add(particles);
  meshes.push(particles);
  
  // Create ScrollTrigger for each image
  const parentElement = img.parentElement;

  ScrollTrigger.create({
    trigger: parentElement,
    start: "top bottom-=100",
    end: "center center",
    scrub: true,
    onUpdate: (self) => {
      if (particles.material.uniforms) {
        // Progress from 0.0 -> 1.0 as we scroll
        particles.material.uniforms.uProgress.value = self.progress;
      }
    }
  });
});

function updatePosition() {
  images.forEach((img, i) => {
    const bound = img.getBoundingClientRect();
    const mesh = meshes[i];
    if (mesh) {
      mesh.position.x = bound.left - window.innerWidth/2 + bound.width/2;
      mesh.position.y = -bound.top + window.innerHeight/2 - bound.height/2;
      
      // Update uniforms if needed
      if (mesh.material.uniforms) {
        mesh.material.uniforms.uContainerSize.value.set(bound.width, bound.height);
      }
    }
  });
}

// Handle window resize
window.addEventListener('resize', () => {
  // Update camera
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  
  // Update renderer
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  
  // Update meshes
  updatePosition();
  
  // Refresh ScrollTrigger on resize
  ScrollTrigger.refresh();
});

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  
  // Update positions on scroll
  updatePosition();
  
  // Render
  renderer.render(scene, camera);
}

animate();

</script>

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js';


// Register ScrollTrigger plugin


// Initialize Lenis smooth scrolling
const smoothScroll = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  direction: 'vertical',
  gestureDirection: 'vertical',
  smooth: true,
  mouseMultiplier: 1,
  smoothTouch: false,
  touchMultiplier: 2,
  infinite: false
});

// Link lenis to requestAnimationFrame
function raf(time) {
  smoothScroll.raf(time);
  requestAnimationFrame(raf);
}

// Start the animation loop
requestAnimationFrame(raf);

// Update Lenis on window resize
window.addEventListener('resize', () => {
  smoothScroll.resize();
});

const images = [...document.querySelectorAll('.webgl img')];

// Initialize the scene
const scene = new THREE.Scene();

const vertexShader = `
  varying vec2 vUv;
  uniform float uProgress;
  uniform float uGridSize;
  
  void main() {
    vUv = uv;
    
    // Calculate grid position
    vec3 pos = position;
    
    // Apply displacement based on grid
    float xCell = floor(uv.x * uGridSize) / uGridSize;
    float yCell = floor(uv.y * uGridSize) / uGridSize;
    
    // Displace each cell with different timing
    float delay = (xCell + yCell) * 0.5;
    float displacement = sin(delay * 3.14159) * (1.0 - uProgress) * 20.0;
    
    // Move cells outward when uProgress is low (start of animation)
    vec2 direction = vec2(uv.x - 0.5, uv.y - 0.5);
    pos.x += direction.x * displacement * (1.0 - uProgress) * 100.0;
    pos.y += direction.y * displacement * (1.0 - uProgress) * 100.0;
    
    // Add some z-displacement for depth
    pos.z += displacement * (1.0 - uProgress) * 50.0;
    
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
  }
`
const fragmentShader = `
  varying vec2 vUv;
  uniform sampler2D uTexture;
  uniform vec2 uImageSize;
  uniform vec2 uContainerSize;
  uniform float uProgress;
  uniform float uGridSize;

  vec2 cover(vec2 uv, vec2 containerSize, vec2 imageSize) {
    float containerRatio = containerSize.x / containerSize.y;
    float imageRatio = imageSize.x / imageSize.y;
    vec2 scale;
    vec2 offset;
    if(imageRatio > containerRatio) {
        scale = vec2(containerSize.y / imageSize.y);
        offset = vec2((containerSize.x - imageSize.x * scale.x) * 0.5, 0.0);
    } else {
        scale = vec2(containerSize.x / imageSize.x);
        offset = vec2(0.0, (containerSize.y - imageSize.y * scale.y) * 0.5);
    }
    vec2 adjustedUV = (uv * containerSize - offset) / (imageSize * scale);
    return adjustedUV;
  }

  void main() {
    // Get texture color
    vec2 adjustedUV = cover(vUv, uContainerSize, uImageSize);
    vec4 texColor = texture2D(uTexture, adjustedUV);
    
    // Apply fade-in effect based on progress
    float fadeEffect = smoothstep(0.0, 1.0, uProgress);
    
    // Apply visibility based on progress
    vec4 finalColor = texColor;
    finalColor.a *= fadeEffect;
    
    gl_FragColor = finalColor;
  }
`

// Create a camera
const fov = Math.atan((window.innerHeight/2) / 500) * (180/Math.PI) * 2;
const camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 500;

// Set up renderer
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#canvas'),
  antialias: true,
  alpha: true
});
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

// Create a textureLoader once outside the loop for better performance
const textureLoader = new THREE.TextureLoader();

const meshes = [];

images.forEach((img, i) => {
  const bound = img.getBoundingClientRect();
  // Use more segments for the grid effect
  const gridSize = 10; // 10x10 grid
  const geo = new THREE.PlaneGeometry(bound.width, bound.height, gridSize, gridSize);
  const mat = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    uniforms: {
      uTexture: { value: textureLoader.load(img.src) },
      uImageSize: { value: new THREE.Vector2(img.naturalWidth, img.naturalHeight) },
      uContainerSize: { value: new THREE.Vector2(bound.width, bound.height) },
      uProgress: { value: 0.0 }, // Start with progress at 0.0 (initial state)
      uGridSize: { value: gridSize }
    },
    transparent: true
  });
  const mesh = new THREE.Mesh(geo, mat);
  mesh.position.x = bound.left - window.innerWidth/2 + bound.width/2;
  mesh.position.y = -bound.top + window.innerHeight/2 - bound.height/2;
  scene.add(mesh);
  meshes.push(mesh);
  
  // Create ScrollTrigger for each image
  const parentElement = img.parentElement;

  ScrollTrigger.create({
    trigger: parentElement,
    start: "top bottom-=100",
    end: "center center",
    scrub: true,
    onUpdate: (self) => {
      if (mesh.material.uniforms) {
        // Progress from 0.0 -> 1.0 as we scroll
        mesh.material.uniforms.uProgress.value = self.progress;
      }
    }
  });
});

function updatePosition() {
  images.forEach((img, i) => {
    const bound = img.getBoundingClientRect();
    const mesh = meshes[i];
    if (mesh) {
      mesh.position.x = bound.left - window.innerWidth/2 + bound.width/2;
      mesh.position.y = -bound.top + window.innerHeight/2 - bound.height/2;
      
      // Update uniforms if needed
      if (mesh.material.uniforms) {
        mesh.material.uniforms.uContainerSize.value.set(bound.width, bound.height);
      }
    }
  });
}

// Handle window resize
window.addEventListener('resize', () => {
  // Update camera
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  
  // Update renderer
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  
  // Update meshes
  updatePosition();
  
  // Refresh ScrollTrigger on resize
  ScrollTrigger.refresh();
});

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  
  // Update positions on scroll
  updatePosition();
  
  // Render
  renderer.render(scene, camera);
}

animate();

</script>

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js';


// Register ScrollTrigger plugin

// Initialize Lenis smooth scrolling
const smoothScroll = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  direction: 'vertical',
  gestureDirection: 'vertical',
  smooth: true,
  mouseMultiplier: 1,
  smoothTouch: false,
  touchMultiplier: 2,
  infinite: false
});

// Link lenis to requestAnimationFrame
function raf(time) {
  smoothScroll.raf(time);
  requestAnimationFrame(raf);
}

// Start the animation loop
requestAnimationFrame(raf);

// Update Lenis on window resize
window.addEventListener('resize', () => {
  smoothScroll.resize();
});

const images = [...document.querySelectorAll('.webgl img')];

// Initialize the scene
const scene = new THREE.Scene();

const vertexShader = `
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`

const fragmentShader = `
  varying vec2 vUv;
  uniform sampler2D uTexture;
  uniform vec2 uImageSize;
  uniform vec2 uContainerSize;
  uniform float uProgress;

  vec2 cover(vec2 uv, vec2 containerSize, vec2 imageSize) {
    float containerRatio = containerSize.x / containerSize.y;
    float imageRatio = imageSize.x / imageSize.y;
    vec2 scale;
    vec2 offset;
    if(imageRatio > containerRatio) {
        scale = vec2(containerSize.y / imageSize.y);
        offset = vec2((containerSize.x - imageSize.x * scale.x) * 0.5, 0.0);
    } else {
        scale = vec2(containerSize.x / imageSize.x);
        offset = vec2(0.0, (containerSize.y - imageSize.y * scale.y) * 0.5);
    }
    vec2 adjustedUV = (uv * containerSize - offset) / (imageSize * scale);
    return adjustedUV;
  }

  void main() {
    vec2 adjustedUV = cover(vUv, uContainerSize, uImageSize);
    vec4 texColor = texture2D(uTexture, adjustedUV);
    
    vec4 finalColor = texColor;
    
    // Create 4 copies with same dimensions but different positions
    for(int i = 1; i < 25; i++) {
      // Calculate offset based on progress and layer index
      float offsetX = float(i) * 0.01 * uProgress * (mod(float(i), 2.0) == 0.0 ? 1.0 : -1.0);
      float offsetY = float(i) * 0.01 * uProgress * (mod(float(i+1), 2.0) == 0.0 ? 1.0 : -1.0);
      
      // Apply offset to UV coordinates (no scaling)
      vec2 offsetUV = vec2(vUv.x + offsetX, vUv.y + offsetY);
      
      if(offsetUV.x >= 0.0 && offsetUV.x <= 1.0 && 
         offsetUV.y >= 0.0 && offsetUV.y <= 1.0) {
        vec2 adjustedOffsetUV = cover(offsetUV, uContainerSize, uImageSize);
        vec4 offsetTexture = texture2D(uTexture, adjustedOffsetUV);
        
        // Decrease opacity for each layer
        float opacity = 0.3 - float(i) * 0.011;
        finalColor = mix(finalColor, offsetTexture, opacity);
      }
    }
    
    gl_FragColor = finalColor;
  }
`

// Create a camera
const fov = Math.atan((window.innerHeight/2) / 500) * (180/Math.PI) * 2;
const camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 500;

// Set up renderer
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#canvas'),
  antialias: true,
  alpha: true
});
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

// Create a textureLoader once outside the loop for better performance
const textureLoader = new THREE.TextureLoader();

const meshes = [];

images.forEach((img, i) => {
  const bound = img.getBoundingClientRect();
  const geo = new THREE.PlaneGeometry(bound.width, bound.height, 1, 1);
  const mat = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    uniforms: {
      uTexture: { value: textureLoader.load(img.src) },
      uImageSize: { value: new THREE.Vector2(img.naturalWidth, img.naturalHeight) },
      uContainerSize: { value: new THREE.Vector2(bound.width, bound.height) },
      uProgress: { value: 1.0 } // Start with progress at 1.0 (final state)
    },
    transparent: true
  });
  const mesh = new THREE.Mesh(geo, mat);
  mesh.position.x = bound.left - window.innerWidth/2 + bound.width/2;
  mesh.position.y = -bound.top + window.innerHeight/2 - bound.height/2;
  scene.add(mesh);
  meshes.push(mesh);
  
  // Create ScrollTrigger for each image
  const parentElement = img.parentElement;
  console.log(parentElement);

  ScrollTrigger.create({
    trigger: parentElement,
    start: "top bottom",
    end: "bottom bottom",
    scrub: true,
    onUpdate: (self) => {
      if (mesh.material.uniforms) {
        // Reverse the progress: 1.0 -> 0.0 as we scroll
        mesh.material.uniforms.uProgress.value = 1.0 - self.progress;
      }
    }
  });
});

function updatePosition() {
  images.forEach((img, i) => {
    const bound = img.getBoundingClientRect();
    const mesh = meshes[i];
    if (mesh) {
      mesh.position.x = bound.left - window.innerWidth/2 + bound.width/2;
      mesh.position.y = -bound.top + window.innerHeight/2 - bound.height/2;
      
      // Update uniforms if needed
      if (mesh.material.uniforms) {
        mesh.material.uniforms.uContainerSize.value.set(bound.width, bound.height);
      }
    }
  });
}

// Handle window resize
window.addEventListener('resize', () => {
  // Update camera
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  
  // Update renderer
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  
  // Update meshes
  updatePosition();
  
  // Refresh ScrollTrigger on resize
  ScrollTrigger.refresh();
});

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  
  // Update positions on scroll
  updatePosition();
  
  // Render
  renderer.render(scene, camera);
}

animate();

</script>

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js';


// Register ScrollTrigger plugin

// Initialize Lenis smooth scrolling
const smoothScroll = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  direction: 'vertical',
  gestureDirection: 'vertical',
  smooth: true,
  mouseMultiplier: 1,
  smoothTouch: false,
  touchMultiplier: 2,
  infinite: false
});

// Link lenis to requestAnimationFrame
function raf(time) {
  smoothScroll.raf(time);
  requestAnimationFrame(raf);
}

// Start the animation loop
requestAnimationFrame(raf);

// Update Lenis on window resize
window.addEventListener('resize', () => {
  smoothScroll.resize();
});



const images = [...document.querySelectorAll('.webgl img')];

// Initialize the scene
const scene = new THREE.Scene();


const vertexShader = `
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`
const fragmentShader = `
  varying vec2 vUv;
  uniform sampler2D uTexture;
  uniform vec2 uImageSize;
  uniform vec2 uContainerSize;
  uniform float uProgress;
  uniform vec2 uSize;
  #define PI 3.1415926538

  vec2 cover(vec2 uv, vec2 containerSize, vec2 imageSize) {
    float containerRatio = containerSize.x / containerSize.y;
    float imageRatio = imageSize.x / imageSize.y;
    vec2 scale;
    vec2 offset;
    if(imageRatio > containerRatio) {
        scale = vec2(containerSize.y / imageSize.y);
        offset = vec2((containerSize.x - imageSize.x * scale.x) * 0.5, 0.0);
    } else {
        scale = vec2(containerSize.x / imageSize.x);
        offset = vec2(0.0, (containerSize.y - imageSize.y * scale.y) * 0.5);
    }
    vec2 adjustedUV = (uv * containerSize - offset) / (imageSize * scale);
    return adjustedUV;
  }

  // Simplex 2D noise
  vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }

  float snoise(vec2 v) {
    const vec4 C = vec4(0.211324865405187, 0.366025403784439,
             -0.577350269189626, 0.024390243902439);
    vec2 i  = floor(v + dot(v, C.yy));
    vec2 x0 = v -   i + dot(i, C.xx);
    vec2 i1;
    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
    vec4 x12 = x0.xyxy + C.xxzz;
    x12.xy -= i1;
    i = mod(i, 289.0);
    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
    + i.x + vec3(0.0, i1.x, 1.0 ));
    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
      dot(x12.zw,x12.zw)), 0.0);
    m = m*m;
    m = m*m;
    vec3 x = 2.0 * fract(p * C.www) - 1.0;
    vec3 h = abs(x) - 0.5;
    vec3 ox = floor(x + 0.5);
    vec3 a0 = x - ox;
    m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
    vec3 g;
    g.x  = a0.x  * x0.x  + h.x  * x0.y;
    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
    return 130.0 * dot(m, g);
  }

  // Simple gooey circle reveal effect
  float gooeyCircle(vec2 uv, float progress) {
    // Center point
    vec2 center = vec2(0.5, 0.5);
    
    // Distance from center
    vec2 toCenter = uv - center;
    float dist = length(toCenter);
    
    // Base circle radius that grows with progress
    float radius = progress * 0.8;
    
    // Add subtle noise to the edge for gooey effect
    float noiseScale = 4.0;
    float noiseTime = progress * 1.5;
    float noise = snoise(vec2(
      toCenter.x * noiseScale + noiseTime,
      toCenter.y * noiseScale + noiseTime * 0.7
    )) * 0.08;
    
    // Combine base radius with noise for gooey effect
    float gooeyRadius = radius + noise;
    
    // Smooth step for soft edge
    float smoothEdge = smoothstep(gooeyRadius, gooeyRadius + 0.05, dist);
    
    return smoothEdge;
  }

  void main() {
    vec2 uv = vUv;
    vec2 containerSize = uContainerSize;
    vec2 imageSize = uImageSize;
    
    // Get the adjusted UV for the image
    vec2 adjustedUV = cover(uv, containerSize, imageSize);
    vec4 texture = texture2D(uTexture, adjustedUV);
    
    // Calculate gooey circle mask
    float mask = gooeyCircle(uv, uProgress);
    
    // Simply reveal the image using the mask without any edge color
    vec4 result = mix(vec4(0.0, 0.0, 0.0, 0.0), texture, 1.0 - mask);
    
    gl_FragColor = result;
  }
`


// Create a camera
const fov = Math.atan((window.innerHeight/2) / 500) * (180/Math.PI) * 2;
const camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 500;






// Set up renderer
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#canvas'),
  antialias: true,
  alpha: true
});
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));




// Create a textureLoader once outside the loop for better performance
const textureLoader = new THREE.TextureLoader();

const meshes = [];

images.forEach((img, i) => {
  const bound = img.getBoundingClientRect();
  const geo = new THREE.PlaneGeometry(bound.width, bound.height, 20, 20); // More segments for better gooey effect
  const mat = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    uniforms: {
      uTexture: { value: textureLoader.load(img.src) },
      uImageSize: { value: new THREE.Vector2(img.naturalWidth, img.naturalHeight) },
      uContainerSize: { value: new THREE.Vector2(bound.width, bound.height) },
      uProgress: { value: 0.0 },
      uSize: { value: new THREE.Vector2(bound.width, bound.height) }
    },
    transparent: true
  });
  const mesh = new THREE.Mesh(geo, mat);
  mesh.position.x = bound.left - window.innerWidth/2 + bound.width/2;
  mesh.position.y = -bound.top + window.innerHeight/2 - bound.height/2;
  scene.add(mesh);
  meshes.push(mesh);
  
  // Create ScrollTrigger for each image
  const parentElement = img.parentElement;
  console.log(parentElement);

  ScrollTrigger.create({
    trigger: parentElement,
    start: "top 70%", // Start a bit earlier to see the full effect
    end: "bottom top",
    onEnter: () => {
      if (mesh.material.uniforms) {
        gsap.to(mesh.material.uniforms.uProgress, { value: 1.2, duration: 1.8, ease: "power2.out" });
      }
    },
     onLeave: () => {
       if (mesh.material.uniforms) {
         gsap.to(mesh.material.uniforms.uProgress, { value: 0, duration: 1, ease: "power2.in" });
       }
     },
     onEnterBack: () => {
       if (mesh.material.uniforms) {
         gsap.to(mesh.material.uniforms.uProgress, { value: 1, duration: 1, ease: "power2.out" });
       }
     },
     onLeaveBack: () => {
       if (mesh.material.uniforms) {
         gsap.to(mesh.material.uniforms.uProgress, { value: 0, duration: 1, ease: "power2.in" });
       }
     }
  });
});


function updatePosition() {
  images.forEach((img, i) => {
    const bound = img.getBoundingClientRect();
    const mesh = meshes[i];
    if (mesh) {
      mesh.position.x = bound.left - window.innerWidth/2 + bound.width/2;
      mesh.position.y = -bound.top + window.innerHeight/2 - bound.height/2;
      
      // Update uniforms if needed
      if (mesh.material.uniforms) {
        mesh.material.uniforms.uContainerSize.value.set(bound.width, bound.height);
        mesh.material.uniforms.uSize.value.set(bound.width, bound.height);
      }
    }
  });
}


// Handle window resize
window.addEventListener('resize', () => {
  // Update camera
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  
  // Update renderer
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  
  // Update meshes
  updatePosition();
  
  // Refresh ScrollTrigger on resize
  ScrollTrigger.refresh();
});

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  
  // Update positions on scroll
  updatePosition();
  
  // Render
  renderer.render(scene, camera);
}

animate();

</script>

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js';


// Register ScrollTrigger plugin

// Initialize Lenis smooth scrolling
const smoothScroll = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  direction: 'vertical',
  gestureDirection: 'vertical',
  smooth: true,
  mouseMultiplier: 1,
  smoothTouch: false,
  touchMultiplier: 2,
  infinite: false
});

// Link lenis to requestAnimationFrame
function raf(time) {
  smoothScroll.raf(time);
  requestAnimationFrame(raf);
}

// Start the animation loop
requestAnimationFrame(raf);

// Update Lenis on window resize
window.addEventListener('resize', () => {
  smoothScroll.resize();
});


const images = [...document.querySelectorAll('.webgl img')];

// Initialize the scene
const scene = new THREE.Scene();


const vertexShader = `
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`
const fragmentShader = `
  varying vec2 vUv;
  uniform sampler2D uTexture;
  uniform vec2 uImageSize;
  uniform vec2 uContainerSize;
  uniform float uProgress;
  uniform vec2 uSize;
  #define PI 3.1415926538

  vec2 cover(vec2 uv, vec2 containerSize, vec2 imageSize) {
    float containerRatio = containerSize.x / containerSize.y;
    float imageRatio = imageSize.x / imageSize.y;
    vec2 scale;
    vec2 offset;
    if(imageRatio > containerRatio) {
        scale = vec2(containerSize.y / imageSize.y);
        offset = vec2((containerSize.x - imageSize.x * scale.x) * 0.5, 0.0);
    } else {
        scale = vec2(containerSize.x / imageSize.x);
        offset = vec2(0.0, (containerSize.y - imageSize.y * scale.y) * 0.5);
    }
    vec2 adjustedUV = (uv * containerSize - offset) / (imageSize * scale);
    return adjustedUV;
  }

  // Simplex 2D noise
  vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }

  float snoise(vec2 v) {
    const vec4 C = vec4(0.211324865405187, 0.366025403784439,
             -0.577350269189626, 0.024390243902439);
    vec2 i  = floor(v + dot(v, C.yy));
    vec2 x0 = v -   i + dot(i, C.xx);
    vec2 i1;
    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
    vec4 x12 = x0.xyxy + C.xxzz;
    x12.xy -= i1;
    i = mod(i, 289.0);
    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
    + i.x + vec3(0.0, i1.x, 1.0 ));
    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
      dot(x12.zw,x12.zw)), 0.0);
    m = m*m;
    m = m*m;
    vec3 x = 2.0 * fract(p * C.www) - 1.0;
    vec3 h = abs(x) - 0.5;
    vec3 ox = floor(x + 0.5);
    vec3 a0 = x - ox;
    m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
    vec3 g;
    g.x  = a0.x  * x0.x  + h.x  * x0.y;
    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
    return 130.0 * dot(m, g);
  }

  // Water ripple effect
  float ripple(vec2 uv, float progress) {
    // Create a wave pattern that moves from top to bottom
    float frequency = 20.0;
    float amplitude = 0.03;
    float wavePosition = 1.0 - progress * 1.5; // Start above the image and move down
    
    // Distance from current y position to wave center
    float distFromWave = uv.y - wavePosition;
    
    // Create ripple effect with exponential falloff
    float rippleEffect = amplitude * exp(-40.0 * distFromWave * distFromWave) * sin(frequency * distFromWave);
    
    // Add some horizontal variation based on noise
    float noiseVariation = snoise(vec2(uv.x * 5.0, uv.y * 2.0 + progress)) * 0.02;
    
    return rippleEffect + noiseVariation;
  }

  vec3 waterColor(float depth) {
    // Water gradient from deep blue to light blue
    vec3 deepColor = vec3(0.0, 0.1, 0.3);
    vec3 midColor = vec3(0.0, 0.3, 0.7);
    vec3 shallowColor = vec3(0.4, 0.7, 1.0);
    
    if (depth < 0.3) {
      return mix(deepColor, midColor, depth * 3.33);
    } else {
      return mix(midColor, shallowColor, (depth - 0.3) * 1.43);
    }
  }

  void main() {
    vec2 uv = vUv;
    vec2 containerSize = uContainerSize;
    vec2 imageSize = uImageSize;
    
    // Apply ripple distortion to UV coordinates
    float rippleOffset = ripple(uv, uProgress);
    vec2 distortedUV = uv;
    distortedUV.x += rippleOffset * 0.2; // Horizontal displacement
    
    vec2 adjustedUV = cover(distortedUV, containerSize, imageSize);
    vec4 texture = texture2D(uTexture, adjustedUV);
    
    // Water reveal effect
    float t = uProgress;
    
    // Create a threshold that moves from top to bottom
    float waterThreshold = 1.3 - t * 1.5; // Start above the image and move down
    
    // Add some noise to the threshold for a more natural water edge
    float noise = snoise(vec2(uv.x * 5.0, uv.y * 2.0 + t * 0.5)) * 0.1;
    waterThreshold += noise;
    
    // Create water mask
    float waterMask = step(uv.y, waterThreshold);
    
    // Create water edge effect
    float edgeWidth = 0.05;
    float edgeGlow = smoothstep(waterThreshold - edgeWidth, waterThreshold, uv.y);
    vec3 waterEdgeColor = waterColor(edgeGlow);
    
    // Add some ripple highlights at the edge
    float highlight = smoothstep(0.4, 1.0, sin(uv.x * 20.0 + t * 10.0) * 0.5 + 0.5) * 0.15;
    highlight *= smoothstep(waterThreshold - edgeWidth * 2.0, waterThreshold, uv.y);
    waterEdgeColor += vec3(highlight);
    
    // Mix original texture with water effect
    vec4 waterEdge = vec4(waterEdgeColor, edgeGlow * 0.7);
    vec4 result = mix(texture, vec4(0.0), waterMask);
    result = mix(result, waterEdge, waterMask * edgeGlow);
    
    gl_FragColor = result;
  }
`

// Create a camera
const fov = Math.atan((window.innerHeight/2) / 500) * (180/Math.PI) * 2;
const camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 500;


// Set up renderer
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#canvas'),
  antialias: true,
  alpha: true
});
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));


// Create a textureLoader once outside the loop for better performance
const textureLoader = new THREE.TextureLoader();

const meshes = [];

images.forEach((img, i) => {
  const bound = img.getBoundingClientRect();
  const geo = new THREE.PlaneGeometry(bound.width, bound.height, 20, 20); // More segments for better ripple effect
  const mat = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    uniforms: {
      uTexture: { value: textureLoader.load(img.src) },
      uImageSize: { value: new THREE.Vector2(img.naturalWidth, img.naturalHeight) },
      uContainerSize: { value: new THREE.Vector2(bound.width, bound.height) },
      uProgress: { value: 0.0 },
      uSize: { value: new THREE.Vector2(bound.width, bound.height) }
    },
    transparent: true
  });
  const mesh = new THREE.Mesh(geo, mat);
  mesh.position.x = bound.left - window.innerWidth/2 + bound.width/2;
  mesh.position.y = -bound.top + window.innerHeight/2 - bound.height/2;
  scene.add(mesh);
  meshes.push(mesh);
  
  // Create ScrollTrigger for each image
  const parentElement = img.parentElement;
  console.log(parentElement);

  ScrollTrigger.create({
    trigger: parentElement,
    start: "top 70%", // Start a bit earlier to see the full effect
    end: "bottom top",
    onEnter: () => {
      if (mesh.material.uniforms) {
        gsap.to(mesh.material.uniforms.uProgress, { value: 1.0, duration: 1.8, ease: "power1.out" });
      }
    },
     onLeave: () => {
       if (mesh.material.uniforms) {
         gsap.to(mesh.material.uniforms.uProgress, { value: 0, duration: 1, ease: "power2.in" });
       }
     },
     onEnterBack: () => {
       if (mesh.material.uniforms) {
         gsap.to(mesh.material.uniforms.uProgress, { value: 1, duration: 1, ease: "power2.out" });
       }
     },
     onLeaveBack: () => {
       if (mesh.material.uniforms) {
         gsap.to(mesh.material.uniforms.uProgress, { value: 0, duration: 1, ease: "power2.in" });
       }
     }
  });

});

function updatePosition() {
  images.forEach((img, i) => {
    const bound = img.getBoundingClientRect();
    const mesh = meshes[i];
    if (mesh) {
      mesh.position.x = bound.left - window.innerWidth/2 + bound.width/2;
      mesh.position.y = -bound.top + window.innerHeight/2 - bound.height/2;
      
      // Update uniforms if needed
      if (mesh.material.uniforms) {
        mesh.material.uniforms.uContainerSize.value.set(bound.width, bound.height);
        mesh.material.uniforms.uSize.value.set(bound.width, bound.height);
      }
    }
  });
}

// Handle window resize
window.addEventListener('resize', () => {
  // Update camera
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  
  // Update renderer
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  
  // Update meshes
  updatePosition();
  
  // Refresh ScrollTrigger on resize
  ScrollTrigger.refresh();
});

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  
  // Update positions on scroll
  updatePosition();
  
  // Render
  renderer.render(scene, camera);
}

animate();

</script>