<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

<script>

// use a script tag or an external JS file
document.addEventListener("DOMContentLoaded", (event) => {
  gsap.registerPlugin(ScrollTrigger, SplitText);
  // gsap code here!
});

const position = document.querySelector(".heading-reveal").dataset.start;

let split = new SplitText(".heading-reveal", {
  type: "chars, words, lines",
  autoSplit: true,
  mask: "words"
});

gsap.from(split.chars, {
  yPercent: "100",
  duration: 1,
  ease: "power2.inOut",
  stagger: {
    each: 0.05,
    from: position
  },
  scrollTrigger: {
    trigger: ".heading-reveal",
    start: "top 60%",
  },
});

</script>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

<script>

// use a script tag or an external JS file
document.addEventListener("DOMContentLoaded", (event) => {
  gsap.registerPlugin(ScrollTrigger, SplitText);
  // gsap code here!
});

let split = new SplitText(".char-reveal", {
  type: "chars, words, lines",
  autoSplit: true,
  mask: "chars"
});

gsap.from(split.chars, {
  xPercent: "random([-100, 100])",
  duration: 1,
  scrollTrigger: {
    trigger: ".char-reveal",
    start: "top 60%",
  },
});

</script>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

<script>

// use a script tag or an external JS file
document.addEventListener("DOMContentLoaded", (event) => {
  gsap.registerPlugin(ScrollTrigger, SplitText);
  // gsap code here!
});

let split = new SplitText(".line-reveal", {
  type: "chars, words, lines",
  autoSplit: true,
  mask: "lines"
});


gsap.from(split.lines, {
  yPercent: "100",
  duration: 1,
  stagger: {
    amount: 0.6,
  },
  scrollTrigger: {
    trigger: ".line-reveal",
    start: "top 60%",
  },
});

</script>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

<script>

// use a script tag or an external JS file
document.addEventListener("DOMContentLoaded", (event) => {
  gsap.registerPlugin(ScrollTrigger, SplitText);
  // gsap code here!
});

let split = new SplitText(".text-anim1", {
  type: "chars, words",
  autoSplit: true,
  mask: "words"
});

gsap.from(split.words, {
  yPercent: " random([-100,100])",
//   rotation: " random([-30,30])",
//   ease: "back.out(1.5)",
  duration: 1,
  autoAlpha: 0,
  stagger: {
    amount: 0.5,
    from: "random",
  },
  scrollTrigger: {
    trigger: ".text-anim1",
    start: "top 60%",
  },
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script type="module" src="script.js"></script>

<script>
const cards = gsap.utils.toArray(".anim-card");

cards.forEach(card => {
    gsap.to(card, {
        scale: 0,
        scrollTrigger: {
            trigger: card,
            start: "top 20%",
            scrub: true,
        }
    })
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.27/bundled/lenis.min.js"></script>

<script>

const drawElements = document.querySelectorAll(".draw");
let canvases = [];

function initializeDrawElements() {
  // Clear previous canvases
  canvases.forEach(canvas => canvas.parentNode?.removeChild(canvas));
  canvases = [];

  drawElements.forEach((item) => {
    const color = item.getAttribute("data-color") || "#000";
    const text = item.getAttribute("data-text") || "";
    const fontSize = item.getAttribute("data-fontSize") || "50";
    const textColor = item.getAttribute("data-textColor") || "#999";

    item.style.position = "relative";
    const canvas = document.createElement("canvas"); 
    canvas.className = "draw-canvas";
    
    // Use relative positioning
    canvas.style.position = "absolute";
    canvas.style.left = "0";
    canvas.style.top = "0";
    canvas.style.width = "100%";
    canvas.style.height = "100%";
    item.appendChild(canvas);

    // Store reference with original proportions
    canvases.push({
      element: canvas,
      parent: item,
      color,
      text,
      fontSize,
      textColor,
      aspectRatio: item.clientWidth / item.clientHeight
    });

    setupCanvas(canvas, item, color, text, fontSize, textColor);
  });
}

function setupCanvas(canvas, parent, color, text, fontSize, textColor) {
  const resizeCanvas = () => {
    const parentWidth = parent.clientWidth;
    const parentHeight = parent.clientHeight;
    
    // Maintain aspect ratio
    const aspectRatio = parentWidth / parentHeight;
    canvas.width = parentWidth * devicePixelRatio;
    canvas.height = parentHeight * devicePixelRatio;
    
    // Scale canvas for crisp rendering
    canvas.style.width = `${parentWidth}px`;
    canvas.style.height = `${parentHeight}px`;
    
    const ctx = canvas.getContext("2d");
    ctx.scale(devicePixelRatio, devicePixelRatio);

    // Redraw content
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, parentWidth, parentHeight);
    
    ctx.font = `${fontSize}px sans-serif`;
    ctx.fillStyle = textColor;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(text, parentWidth / 2, parentHeight / 2);
    
    ctx.globalCompositeOperation = "destination-out";
  };

  // Initial setup
  resizeCanvas();

  // Smooth drawing variables
  let lastPos = null;
  const eraseSize = 50;
  const minDistance = 2;

  const getCanvasCoordinates = (clientX, clientY) => {
    const rect = canvas.getBoundingClientRect();
    const scaleX = canvas.width / (rect.width * devicePixelRatio);
    const scaleY = canvas.height / (rect.height * devicePixelRatio);
    
    return {
      x: (clientX - rect.left) * scaleX,
      y: (clientY - rect.top) * scaleY
    };
  };

  const lerp = (a, b, t) => a + (b - a) * t;

  const handleMove = (e) => {
    const clientX = e.clientX ?? e.touches[0].clientX;
    const clientY = e.clientY ?? e.touches[0].clientY;
    
    const pos = getCanvasCoordinates(clientX, clientY);
    const ctx = canvas.getContext("2d");
    
    if (lastPos) {
      const dist = Math.hypot(pos.x - lastPos.x, pos.y - lastPos.y);
      if (dist > minDistance) {
        const steps = Math.max(3, Math.floor(dist / 3));
        for (let i = 0; i <= steps; i++) {
          const t = i / steps;
          const x = lerp(lastPos.x, pos.x, t);
          const y = lerp(lastPos.y, pos.y, t);
          ctx.beginPath();
          ctx.arc(x, y, eraseSize, 0, Math.PI * 2);
          ctx.fill();
        }
      }
    } else {
      ctx.beginPath();
      ctx.arc(pos.x, pos.y, eraseSize, 0, Math.PI * 2);
      ctx.fill();
    }
    
    lastPos = pos;
  };

  // Event listeners
  canvas.addEventListener("mousemove", handleMove);
  canvas.addEventListener("mouseleave", () => lastPos = null);
  canvas.addEventListener("touchmove", (e) => {
    e.preventDefault();
    handleMove(e.touches[0]);
  }, { passive: false });
}

// Initialize and handle resizing
window.addEventListener("load", initializeDrawElements);
window.addEventListener("resize", () => {
  canvases.forEach(canvasData => {
    const parent = canvasData.parent;
    const canvas = canvasData.element;
    const ctx = canvas.getContext("2d");
    
    const newWidth = parent.clientWidth;
    const newHeight = parent.clientHeight;
    
    // Update canvas dimensions
    canvas.width = newWidth * devicePixelRatio;
    canvas.height = newHeight * devicePixelRatio;
    canvas.style.width = `${newWidth}px`;
    canvas.style.height = `${newHeight}px`;
    
    // Redraw content
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.scale(devicePixelRatio, devicePixelRatio);
    
    ctx.fillStyle = canvasData.color;
    ctx.fillRect(0, 0, newWidth, newHeight);
    
    ctx.font = `${canvasData.fontSize}px sans-serif`;
    ctx.fillStyle = canvasData.textColor;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(canvasData.text, newWidth / 2, newHeight / 2);
    
    ctx.globalCompositeOperation = "destination-out";
  });
});

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>

<script>
class Wheel {
    constructor() {
        this.images = gsap.utils.toArray(".wheelimg");
        this.wheel = document.getElementById("wheel");
        this.defaultRadius = 0.4; // Default to 40% of container width
        this.setup();
    }

    setup() {
        if (!this.wheel) {
            console.error("Wheel container not found");
            return;
        }

        if (this.images.length === 0) {
            console.warn("No wheel images found");
            return;
        }

        // Get or calculate radius
        let radiusValue = this.wheel.getAttribute("data-radius");
        let radius = radiusValue ? 
                   this.parseRadius(radiusValue) : 
                   this.calculateDefaultRadius();

        // Get container dimensions
        let { centerX, centerY } = this.getContainerCenter();

        // Position images
        this.positionImages(radius, centerX, centerY);
    }

    parseRadius(value) {
        // Handle percentage values (e.g., "50%")
        if (value.includes("%")) {
            return this.wheel.offsetWidth * (parseFloat(value) / 100);
        }
        // Handle pixel values (e.g., "200px")
        if (value.includes("px")) {
            return parseFloat(value);
        }
        // Handle unitless numbers (treated as multiplier)
        return this.wheel.offsetWidth * parseFloat(value);
    }

    calculateDefaultRadius() {
        let minDimension = Math.min(
            this.wheel.offsetWidth, 
            this.wheel.offsetHeight
        );
        return minDimension * this.defaultRadius;
    }

    getContainerCenter() {
        return {
            centerX: this.wheel.offsetWidth / 2,
            centerY: this.wheel.offsetHeight / 2
        };
    }

    positionImages(radius, centerX, centerY) {
        let total = this.images.length;
        let slice = (2 * Math.PI) / total;

        this.images.forEach((item, i) => {
            let angle = i * slice;
            let x = centerX + radius * Math.cos(angle);
            let y = centerY + radius * Math.sin(angle);

            gsap.set(item, {
                position: "absolute",
                x: x,
                y: y,
                xPercent: -50,
                yPercent: -50,
                rotation: (angle * 180/Math.PI) + 90 + "deg"
            });
        });
    }

    createTimeline() {
        if (!this.wheel) return null;

        return gsap.timeline({
            scrollTrigger: {
                trigger: "#page1",
                start: "top top",
                end: "+=2000vh",
                scrub: 2,
                pin: true,
            }
        }).to(this.wheel, {
            rotate: "+=360",
        }, "<");
    }
}

// Initialize
document.addEventListener("DOMContentLoaded", () => {
    const wheel = new Wheel();
    wheel.createTimeline();
});
</script>

<script type="module">
import three from 'https://cdn.jsdelivr.net/npm/three@0.175.0/+esm'
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.34/dist/lenis.min.js"></script>

<script type="module">
// Set up scene, camera, and renderer

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.162.0/build/three.module.js';

const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  direction: "vertical",
  gestureDirection: "vertical",
  smooth: true,
  smoothTouch: false,
  touchMultiplier: 2,
});

const vertex = `
  varying vec2 vUv;
  varying float strength;
  uniform vec2 uMouse;
  uniform float uRadius;
  uniform float uStrength;
  
  void main() {
    vUv = uv;
    vec3 pos = position;
    float dist = distance(uv, uMouse);
    strength = 1.0 - smoothstep(0.0, uRadius, dist);
    pos.z += strength * uStrength;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
  }
`;

const fragment = `
  varying vec2 vUv;
  varying float vStrength;
  uniform sampler2D uTexture;
  uniform vec2 uContainerSize;
  uniform vec2 uImageSize;
  
  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 uv = cover(vUv, uContainerSize, uImageSize);
    vec4 color = texture2D(uTexture, uv);
    gl_FragColor = color;
  }
`;

const canvas = document.querySelector("#canvas");
const scene = new THREE.Scene();

const distance = 500;
const fov = 2 * Math.atan(window.innerHeight / 2 / distance) * (180 / Math.PI);
const camera = new THREE.PerspectiveCamera(
  fov,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = distance;
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
  alpha: true,
  powerPreference: "high-performance"
});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);

// Create a plane geometry

const images = document.querySelectorAll(".wobble img");
const planes = new Array(images.length);
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
let hoveredPlane = null;

// Mouse move handler
window.addEventListener("mousemove", (event) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(planes.filter(Boolean));
  
  if (intersects.length > 0) {
    const plane = intersects[0].object;
    const uv = intersects[0].uv;
    
    // Smoothly update the mouse position
    gsap.to(plane.material.uniforms.uMouse.value, {
      x: uv.x,
      y: uv.y,
      duration: 0.5,
      ease: "power2.out"
    });
    
    if (hoveredPlane !== plane) {
      if (hoveredPlane && hoveredPlane.material) {
        gsap.to(hoveredPlane.material.uniforms.uStrength, {
          value: 0.0,
          duration: 0.5,
          ease: "power2.out"
        });
      }
      hoveredPlane = plane;
      gsap.to(plane.material.uniforms.uStrength, {
        value: 50.0,
        duration: 0.5,
        ease: "power2.out"
      });
    }
  } else if (hoveredPlane && hoveredPlane.material) {
    const currentPlane = hoveredPlane;
    gsap.to(hoveredPlane.material.uniforms.uStrength, {
      value: 0.0,
      duration: 0.5,
      ease: "power2.out",
      onComplete: () => {
        // if (currentPlane && currentPlane.material) {
        //   currentPlane.material.uniforms.uMouse.value.set(0.5, 0.5);
        // }
        hoveredPlane = null;
      }
    });
  }
});



images.forEach((image, index) => {
  const imageBounds = image.getBoundingClientRect();
  const geometry = new THREE.PlaneGeometry(imageBounds.width, imageBounds.height, 100, 100);
  
  const textureLoader = new THREE.TextureLoader();
  textureLoader.crossOrigin = '';
  
  textureLoader.load(image.src, (loadedTexture) => {
    loadedTexture.minFilter = THREE.LinearFilter;
    loadedTexture.magFilter = THREE.LinearFilter;
    loadedTexture.generateMipmaps = true;
    loadedTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
    
    const material = new THREE.ShaderMaterial({
      uniforms: {
        uTime: { value: 0 },
        uMouse: { value: new THREE.Vector2(0.5, 0.5) },
        uRadius: { value: 0.6 },
        uStrength: { value: 0.0 },
        uTexture: { value: loadedTexture },
        uContainerSize: { value: new THREE.Vector2(imageBounds.width, imageBounds.height) },
        uImageSize: { value: new THREE.Vector2(loadedTexture.image.naturalWidth, loadedTexture.image.naturalHeight) }
      },
      vertexShader: vertex,
      fragmentShader: fragment,
      transparent: true,
      depthWrite: true,
      depthTest: true
    });
    
    const plane = new THREE.Mesh(geometry, material);
    plane.position.set(
      imageBounds.left - window.innerWidth / 2 + imageBounds.width / 2,
      -imageBounds.top + window.innerHeight / 2 - imageBounds.height / 2,
      0
    );
    planes[index] = plane;
    scene.add(plane);

    // Add mouseenter effect
    image.addEventListener("mouseenter", () => {
      gsap.to(material.uniforms.uStrength, {
        value: 40.0,
        duration: 0.3,
        ease: "power2.out"
      });
    });

    // Add mousemove effect
    image.addEventListener("mousemove", (e) => {
      const rect = image.getBoundingClientRect();
      const x = (e.clientX - rect.left) / rect.width;
      const y = (e.clientY - rect.top) / rect.height;
      material.uniforms.uMouse.value.set(x, y);
    });

    // Add mouseleave effect
    image.addEventListener("mouseleave", () => {
      gsap.to(material.uniforms.uStrength, {
        value: 0.0,
        duration: 0.3,
        ease: "power2.out",
        onComplete: () => {
          material.uniforms.uMouse.value.set(0.5, 0.5);
        }
      });
    });
  });
});

function updatePlanePositions() {
  planes.forEach((plane, index) => {
    if (!plane) return;
    const image = images[index];
    const imageBounds = image.getBoundingClientRect();
    plane.position.set(
      imageBounds.left - window.innerWidth / 2 + imageBounds.width / 2,
      -imageBounds.top + window.innerHeight / 2 - imageBounds.height / 2,
      0
    );
  });
}

// Animation loop
function animate(time) {
  requestAnimationFrame(animate);
  lenis.raf(time);
  
  // Update time uniform for all planes
  planes.forEach(plane => {
    if (plane) {
      plane.material.uniforms.uTime.value = performance.now() / 1000;
    }
  });
  
  updatePlanePositions();
  renderer.render(scene, camera);
}
animate();

// Handle window resize
window.addEventListener("resize", () => {
  const width = window.innerWidth;
  const height = window.innerHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
});
</script>

<script type="module">
import three from 'https://cdn.jsdelivr.net/npm/three@0.175.0/+esm'
</script>

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.162.0/build/three.module.js';
// Shader code
const vertexShader = `
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

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


  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;
  }

  float random(vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
  }

  vec2 random2(vec2 st){
    st = vec2( dot(st,vec2(127.1,311.7)),
              dot(st,vec2(269.5,183.3)) );
    return -1.0 + 2.0*fract(sin(st)*43758.5453123);
  }

  float fbm(vec2 st) {
    float value = 0.0;
    float amplitude = 0.5;
    float frequency = 1.0;
    for (int i = 0; i < 6; i++) {
      vec2 q = st * frequency;
      vec2 r = random2(q);
      value += amplitude * (0.5 + 0.5 * dot(r, r));
      frequency *= 2.0;
      amplitude *= 0.5;
    }
    return value;
  }

  void main() {
    vec2 uv = vUv;
    vec2 coverUV = cover(uv, uImageSize, uContainerSize);
    vec4 color = texture2D(uTexture, coverUV);
    
    float blockSize = 20.0;
    vec2 pixelatedUV = floor(uv * blockSize)/blockSize;
    vec4 pixelatedColor = texture2D(uTexture, pixelatedUV);
    
    float r = fbm(pixelatedUV);
    float blockPattern = step(0.5, r);
    
    vec2 blockPos = floor(uv * blockSize);
    float noise = fbm(blockPos);
    float isBlackBlock = step(0.7, noise);
    
    float yCoord = 1.0 - pixelatedUV.y;
    float baseProgress = step(yCoord, uProgress);
    
    float lineNoise = random(vec2(floor(uv.x * blockSize), 0.0)) * 0.1;
    float adjustedProgress = uProgress + lineNoise;
    
    float mask = baseProgress;
    if (isBlackBlock > 0.5 || random(blockPos * 2.0) > 0.7) {
      mask = step(yCoord - 0.15, adjustedProgress);
    }
    
    if (uProgress <= 0.0) mask = 0.0;
    
    gl_FragColor = vec4(color.rgb, mask);
  }
`;

class PixelReveal {
  constructor(element) {
    this.element = element;
    this.img = element.querySelector('img');
    this.rect = element.getBoundingClientRect();
    this.progress = 0;
    this.isAnimating = false;
    this.hasPlayed = false; // Track if animation has played
    this.startTime = 0;
    this.duration = 1;

    // Start with progress at 0 and image hidden
    this.setup();
  }

  setup() {
    // Create scene
    this.scene = new THREE.Scene();
    
    // Create camera
    this.camera = new THREE.OrthographicCamera(
      this.rect.width / -2,
      this.rect.width / 2,
      this.rect.height / 2,
      this.rect.height / -2,
      0.1,
      1000
    );
    this.camera.position.z = 100;

    // Create renderer
    this.renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: true
    });
    this.renderer.setSize(this.rect.width, this.rect.height);
    this.renderer.setClearColor(0x000000, 0);
    this.element.appendChild(this.renderer.domElement);

    // Load texture
    const textureLoader = new THREE.TextureLoader();
    this.texture = textureLoader.load(this.img.src, () => {
      // Hide the original img
      this.img.style.display = 'none';
      // Force initial render with progress at 0
      this.material.uniforms.uProgress.value = 0;
      this.render();
    });

    // Create material and mesh
    const geometry = new THREE.PlaneGeometry(this.rect.width, this.rect.height);
    this.material = new THREE.ShaderMaterial({
      vertexShader,
      fragmentShader,
      uniforms: {
        uTexture: { value: this.texture },
        uProgress: { value: 0.0 },
        uPixelSize: { value: 20.0 },
        uContainerSize: { value: new THREE.Vector2(this.rect.height,this.rect.width) },
        uImageSize: { value: new THREE.Vector2(this.img.naturalHeight,this.img.naturalWidth) }
      },
      side: THREE.DoubleSide,
      transparent: true
    });

    this.plane = new THREE.Mesh(geometry, this.material);
    this.scene.add(this.plane);

    // Handle resize
    this.resizeObserver = new ResizeObserver(() => this.handleResize());
    this.resizeObserver.observe(this.element);

    // Initial render with progress at 0
    this.render();
  }

  handleResize() {
    this.rect = this.element.getBoundingClientRect();

    // Update camera
    this.camera.left = this.rect.width / -2;
    this.camera.right = this.rect.width / 2;
    this.camera.top = this.rect.height / 2;
    this.camera.bottom = this.rect.height / -2;
    this.camera.updateProjectionMatrix();

    // Update renderer
    this.renderer.setSize(this.rect.width, this.rect.height);

    // Update plane size
    this.plane.geometry.dispose();
    this.plane.geometry = new THREE.PlaneGeometry(this.rect.width, this.rect.height);
  }

  startAnimation() {
    // Only start if hasn't played before
    if (!this.isAnimating && !this.hasPlayed) {
      this.isAnimating = true;
      this.hasPlayed = true; // Mark as played
      this.startTime = Date.now();
      this.animate();
      
      // Remove from intersection observer after starting
      observer.unobserve(this.element);
    }
  }

  animate() {
    if (!this.isAnimating) return;

    const elapsed = (Date.now() - this.startTime) / 1000;
    this.progress = Math.min(elapsed / this.duration, 1);
    
    this.material.uniforms.uProgress.value = this.progress;
    this.render();

    if (this.progress < 1) {
      requestAnimationFrame(() => this.animate());
    } else {
      this.isAnimating = false;
    }
  }

  render() {
    this.renderer.render(this.scene, this.camera);
  }

  cleanup() {
    this.resizeObserver.disconnect();
    this.renderer.dispose();
    this.material.dispose();
    this.plane.geometry.dispose();
  }
}

// Initialize Intersection Observer with delay for initial load
const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.1
};

// Store references to prevent duplicate instances
const instances = new WeakMap();

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const element = entry.target;
    
    if (entry.isIntersecting) {
      // Check if we already have an instance
      let pixelReveal = instances.get(element);
      
      if (!pixelReveal) {
        // Create new instance if it doesn't exist
        pixelReveal = new PixelReveal(element);
        instances.set(element, pixelReveal);
        // Add small delay for initial animation
        setTimeout(() => {
          pixelReveal.startAnimation();
        }, 100);
      }
    }
  });
}, options);

// Wait for DOM content to be loaded before initializing
document.addEventListener('DOMContentLoaded', () => {
  // Observe all elements with piximg class
  document.querySelectorAll('.piximg').forEach(element => {
    if (!instances.has(element)) {
      observer.observe(element);
    }
  });
});

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<script>

const canvas = document.querySelector("canvas");

const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let points = [];
const maxPoints = 205; // Adjust this value to control trail length
let fadeOutOpacity = 1;
let isRemoving = false;

window.addEventListener("mousemove", (e) => {
    if (!isRemoving) {
        points.push({
            x: e.clientX,
            y: e.clientY,
            opacity: 1
        });
        
        // Remove old points if we exceed maxPoints
        if (points.length > maxPoints-195) {
            points.shift();
        }
    }
});

function animate() {
    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Handle removal animation
    if (isRemoving) {
        fadeOutOpacity = Math.max(0, fadeOutOpacity - 0.02);
        if (fadeOutOpacity <= 0) {
            points = [];
            fadeOutOpacity = 1;
            isRemoving = false;
        }
    }

    // Draw the line
    if (points.length > 1) {
        ctx.beginPath();
        ctx.strokeStyle = `rgba(255, 255, 255, ${fadeOutOpacity})`;
        ctx.lineWidth = 6;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        
        // Draw points with individual opacity
        for (let i = 0; i < points.length; i++) {
            const point = points[i];
            if (i === 0) {
                ctx.moveTo(point.x, point.y);
            } else {
                ctx.lineTo(point.x, point.y);
            }
        }
        
        ctx.stroke();
    }
    
    requestAnimationFrame(animate);
}

animate();

// Handle window resize
window.addEventListener("resize", () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

// Double click to trigger smooth removal
window.addEventListener("dblclick", () => {
    if (!isRemoving) {
        isRemoving = true;
        fadeOutOpacity = 1;
    }
});

</script>

<script type="module">
import three from 'https://cdn.jsdelivr.net/npm/three@0.175.0/+esm'
</script>

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

// 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: document.querySelector('canvas'),
    antialias: true,
    alpha: true
});

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 0); // Makes background transparent

// Create plane with dissolve shader
const planeGeometry = new THREE.PlaneGeometry(20, 20, 128, 128);
const planeMaterial = new THREE.ShaderMaterial({
    uniforms: {
        time: { value: 0 },
        dissolveThreshold: { value: -1 }, // Add dissolve threshold uniform
        resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
    },
    vertexShader: `
        varying vec2 vUv;
        void main() {
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
    fragmentShader: `
        uniform float time;
        uniform float dissolveThreshold;
        uniform vec2 resolution;
        varying vec2 vUv;

        float random(vec2 st) {
            return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
        }

        // 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);
        }

        float pattern(vec2 p) {
            float scale = 10.0;
            
            // Layer multiple noise functions
            float n = 0.0;
            
            // Base layer
            n += snoise(p * scale + time * 0.1) * 0.5;
            
            // Add detail layers with different frequencies
            n += snoise(p * scale * 2.0 - time * 0.05) * 0.25;
            n += snoise(p * scale * 4.0 + time * 0.15) * 0.125;
            n += snoise(p * scale * 8.0 - time * 0.1) * 0.0625;
            
            // Add some rotation to the pattern
            float angle = time * 0.1;
            mat2 rot = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
            n += snoise(rot * p * scale * 1.5) * 0.35;
            
            // Normalize and sharpen
            n = n * 0.5+ 0.5;
            
            // Create sharp edges with smooth transitions
            float edge = smoothstep(0.0, 0.1, n);
            
            // Create more organic edges
            float distortion = snoise(p * 15.0 + time * 0.2) * 0.1;
            edge = smoothstep(0.0 + distortion, 1.0 + distortion, n);
            
            return edge;
        }

        void main() {
            vec2 st = vUv * vec2(0.50, 0.50);
            float n = pattern(st);
            
            // Sharper transition with custom smoothstep
            float width = 0.01;
            float alpha = smoothstep(dissolveThreshold - width, dissolveThreshold + width, n);
            gl_FragColor = vec4(vec3(0.0), 1.0 - alpha);
        }
    `,
    transparent: true,
    side: THREE.DoubleSide
});

const plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);

// Position camera
camera.position.z = 5;

// Animation loop
let dissolveAmount = 1.5; // Start fully dissolved
function animate() {
    requestAnimationFrame(animate);
    planeMaterial.uniforms.time.value += 0.001;
    
    // Gradually decrease dissolve threshold to make plane appear
    dissolveAmount = Math.max(dissolveAmount - 0.01, -0.5);
    planeMaterial.uniforms.dissolveThreshold.value = dissolveAmount;
    
    renderer.render(scene, camera);
}
animate();

// Handle window resize
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    planeMaterial.uniforms.resolution.value.set(window.innerWidth, window.innerHeight);
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

<script>

class TextEffectAnimation {
    constructor(selector, containerId) {
        this.h1 = document.querySelector(selector);
        this.h1.style.opacity = 0;
        this.container = document.querySelector(containerId);
        this.originalText = this.h1.innerText;
        this.miniDivs = [];
        this.interval = null;
        this.tl = gsap.timeline();
        this.observer = null;
        
        this.init();
        
        // Add resize event listener to handle page reloads and scrolling
        window.addEventListener('resize', this.updatePosition.bind(this));
        window.addEventListener('scroll', this.updatePosition.bind(this));
        document.addEventListener('DOMContentLoaded', this.updatePosition.bind(this));
    }
    
    updatePosition() {
        // Update overlay position based on current h1 position
        const h1Rect = this.h1.getBoundingClientRect();
        Object.assign(this.overlay.style, {
            width: `${h1Rect.width}px`,
            height: `${h1Rect.height}px`,
            top: `${h1Rect.top}px`,
            left: `${h1Rect.left}px`,
        });
    }
    
    init() {
        // Get text dimensions and content
        const h1Rect = this.h1.getBoundingClientRect();
        
        // Create overlay container
        this.overlay = document.createElement("div");
        Object.assign(this.overlay.style, {
            position: "fixed", // Changed from absolute to fixed for better scroll handling
            width: `${h1Rect.width}px`,
            height: `${h1Rect.height}px`,
            top: `${h1Rect.top}px`,
            left: `${h1Rect.left}px`,
            backgroundColor: "transparent",
            overflow: "hidden",
            pointerEvents: "none" // Ensure overlay doesn't interfere with interactions
        });
        
        this.createPixelGrid(h1Rect);
        this.container.appendChild(this.overlay);
        this.setupAnimation();
    }
    
    createPixelGrid(h1Rect) {
        // Create pixel grid
        const miniDivSize = 10;
        const numRows = Math.ceil(h1Rect.height / miniDivSize);
        const numCols = Math.ceil(h1Rect.width / miniDivSize);
        
        for (let i = 0; i < numRows; i++) {
            for (let j = 0; j < numCols; j++) {
                const miniDiv = document.createElement("div");
                Object.assign(miniDiv.style, {
                    position: "absolute",
                    width: `${miniDivSize}px`,
                    height: `${miniDivSize}px`,
                    top: `${i * miniDivSize}px`,
                    left: `${j * miniDivSize}px`,
                    backgroundColor: "black",
                    opacity: Math.random() < 0.6 ? 0 : 1
                });
                this.overlay.style.opacity = 0;
                this.overlay.appendChild(miniDiv);
                
                this.miniDivs.push(miniDiv);
            }
        }
    }
    
    scrambleText() {
        let iteration = 0;
        const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        
        this.interval = setInterval(() => {
            this.h1.innerText = this.originalText.split("").map((letter, index) => {
                return index < iteration ? letter : chars[Math.floor(Math.random() * chars.length)];
            }).join("");
            
            if (iteration >= this.originalText.length) {
                clearInterval(this.interval);
            }
            iteration += 1/3;
        }, 20);
    }
    
    playAnimation() {
        this.updatePosition();
        this.tl.play(0);
    }
    
    reverseAnimation() {
        this.updatePosition();
        this.tl.reverse();
        if (this.interval) {
            clearInterval(this.interval);
        }
        this.h1.innerText = this.originalText;
    }
    
    setupAnimation() {
        // Create a timeline
        this.tl = gsap.timeline({ paused: true });

        this.tl.to(this.h1, {
            opacity: 1,
            duration: 0.8,
            ease: "power2.inOut"
        },'a');

        this.tl.to(this.overlay, {
            opacity: 1,
            duration: 0.8,
            ease: "power2.inOut"
        },'a');
        
        this.tl.to(this.miniDivs, {
            display: "none",
            duration: 1,
            stagger: {
                each: 0.01,
                from: "random"
            },
            ease: "power2.inOut"
        },'a')
        .call(() => {
            this.scrambleText();
        }, null, 1); // Add 1 second delay before starting text scramble
        
        // Setup Intersection Observer
        const options = {
            root: null, // viewport
            rootMargin: '0px',
            threshold: 0.2 // 20% of the element is visible
        };
        
        this.observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    this.playAnimation();
                } else {
                    this.reverseAnimation();
                }
            });
        }, options);
        
        this.observer.observe(this.container);
    }
}

// Initialize the animation for all h1 elements with class "godpixel"
document.addEventListener('DOMContentLoaded', () => {
    const godpixelElements = document.querySelectorAll("h1.godpixel");
    godpixelElements.forEach(element => {
        // Find the parent container of the h1 element
        const parentContainer = element.closest("div");
        if (parentContainer) {
            new TextEffectAnimation(`#${parentContainer.id} h1.godpixel`, `#${parentContainer.id}`);
        }
    });
});

</script>