Shop integration

product-scroll-poc/script.js

@@ -27,7 +27,7 @@ video.addEventListener("loadedmetadata", () => {
 
 async function startBuffering() {
     video.currentTime = 0;
-    video.playbackRate = 1; // Standard speed for better capture quality
+    video.playbackRate = 4.0; // Increased speed for faster loading
     await video.play();
 
     function capture() {
@@ -135,3 +135,151 @@ function initScrollAnimation() {
         }
     });
 }
+
+
+// --- 3D Parallax Implementation ---
+
+async function initParallax() {
+    // Wait for generic window load to ensure Three.js is ready
+    if (typeof THREE === 'undefined') {
+        console.warn("Three.js not loaded yet. Retrying...");
+        requestAnimationFrame(initParallax);
+        return;
+    }
+
+    const parallaxCanvas = document.querySelector("#parallax-canvas");
+    if (!parallaxCanvas) return;
+
+    // SCENE SETUP
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer({ canvas: parallaxCanvas, alpha: true, antialias: true });
+    
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+
+    // TEXTURE LOADER
+    const textureLoader = new THREE.TextureLoader();
+    
+    // Load textures
+    // Note: Assuming these files exist in the same directory/public folder
+    const [originalTexture, depthTexture] = await Promise.all([
+        new Promise(resolve => textureLoader.load('workshop.jpg', resolve)),
+        new Promise(resolve => textureLoader.load('workshop_depth.png', resolve))
+    ]);
+
+    // GEOMETRY & MATERIAL
+    const geometry = new THREE.PlaneGeometry(16, 9, 128, 128); // Increased segments for smoother displacement
+
+    const material = new THREE.ShaderMaterial({
+        uniforms: {
+            tImage: { value: originalTexture },
+            tDepth: { value: depthTexture },
+            uDepthScale: { value: 3.0 }, // Exaggerated depth
+            uMouse: { value: new THREE.Vector2(0, 0) },
+            uScroll: { value: 0 }
+        },
+        vertexShader: `
+            varying vec2 vUv;
+            varying float vDisplacement;
+            
+            uniform sampler2D tDepth;
+            uniform float uDepthScale;
+            uniform vec2 uMouse;
+
+            void main() {
+                vUv = uv;
+                
+                float depth = texture2D(tDepth, uv).r;
+                vDisplacement = depth;
+
+                vec3 newPosition = position;
+                
+                // Displace along Z
+                newPosition.z += depth * uDepthScale; 
+                
+                // Mouse Parallax (Simulate perspective shift)
+                // Closer objects (light depth) move more than far objects
+                newPosition.x += (uMouse.x * depth * 0.5); 
+                newPosition.y += (uMouse.y * depth * 0.5);
+
+                gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
+            }
+        `,
+        fragmentShader: `
+            varying vec2 vUv;
+            uniform sampler2D tImage;
+            
+            void main() {
+                gl_FragColor = texture2D(tImage, vUv);
+            }
+        `,
+        side: THREE.DoubleSide
+    });
+
+    const mesh = new THREE.Mesh(geometry, material);
+    scene.add(mesh);
+
+    camera.position.z = 5;
+
+    // MOUSE INTERACTION
+    window.addEventListener("mousemove", (e) => {
+        const x = (e.clientX / window.innerWidth) * 2 - 1;
+        const y = -(e.clientY / window.innerHeight) * 2 + 1;
+        
+        // Smooth lerp could be better, but direct set for responsiveness
+        gsap.to(material.uniforms.uMouse.value, {
+            x: x * 0.5, // Sensitivity
+            y: y * 0.5,
+            duration: 1,
+            ease: "power2.out"
+        });
+    });
+
+    // RESIZE HANDLER
+    function handleResize() {
+        const videoAspect = 16 / 9;
+        const windowAspect = window.innerWidth / window.innerHeight;
+        
+        camera.aspect = windowAspect;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        
+        // Cover logic
+        if (windowAspect < videoAspect) {
+            mesh.scale.set(videoAspect / windowAspect, 1, 1);
+        } else {
+            mesh.scale.set(1, windowAspect / videoAspect, 1);
+        }
+    }
+    window.addEventListener('resize', handleResize);
+    handleResize(); // Initial call
+
+    // SCROLL ANIMATION (GSAP)
+    const tl = gsap.timeline({
+        scrollTrigger: {
+            trigger: ".parallax-section",
+            start: "top top",
+            end: "bottom bottom",
+            scrub: true
+        }
+    });
+
+    tl.to(camera.position, {
+        z: 3.5, 
+        ease: "none"
+    }, 0);
+
+    // Fade out to reveal product
+    tl.to(".product-reveal", { opacity: 1, duration: 0.2 }, 0.9);
+    tl.to(parallaxCanvas, { opacity: 0, duration: 0.2 }, 0.95);
+
+    function animate() {
+        requestAnimationFrame(animate);
+        renderer.render(scene, camera);
+    }
+    animate();
+}
+
+// Start
+initParallax();