pointer-pointer-improved

  // Kill their React app
  document.getElementById('root').innerHTML = '';

  // Create our own simple container
  const container = document.createElement('div');
  container.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: black;
    overflow: hidden;
  `;
  document.body.appendChild(container);

  // Image element
  const img = new Image();
  img.style.cssText = `
    position: absolute;
    transform-origin: 0 0;
    transition: opacity 0.15s;
  `;
  container.appendChild(img);

  let positions = [];
  let lastIndex = -1;
  let currentMouse = { x: 0, y: 0 };

  // Load positions
  fetch('/new-positions.json')
    .then(r => r.json())
    .then(data => {
      positions = data;
      console.log('✅ Loaded', positions.length, 'positions');
    });

  // Find nearest position
  function findNearest(x, y) {
    const nx = x / window.innerWidth;
    const ny = y / window.innerHeight;

    let minDist = Infinity;
    let bestIndex = 0;

    for (let i = 0; i < positions.length; i++) {
      const [px, py] = positions[i];
      const dist = (nx - px) ** 2 + (ny - py) ** 2;
      if (dist < minDist) {
        minDist = dist;
        bestIndex = i;
      }
    }

    return bestIndex;
  }

  // Position image so pointing location aligns with cursor
  function positionImage() {
    if (!img.complete || lastIndex === -1) return;

    const [px, py] = positions[lastIndex];
    const vw = window.innerWidth;
    const vh = window.innerHeight;
    const iw = img.naturalWidth;
    const ih = img.naturalHeight;

    // Scale to cover viewport
    const scale = Math.max(vw / iw, vh / ih) * 1.2;

    // Where the pointing location ends up after scaling
    const pointX = px * iw * scale;
    const pointY = py * ih * scale;

    // Translate so pointing location moves to cursor
    const tx = currentMouse.x - pointX;
    const ty = currentMouse.y - pointY;

    img.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
  }

  // Update image
  function updateImage(index) {
    if (index === lastIndex || !positions.length) return;
    lastIndex = index;

    img.style.opacity = '0';
    img.onload = () => {
      positionImage();
      img.style.opacity = '1';
    };
    img.src = `/images/${index}.jpg`;
  }

  // Track mouse
  document.addEventListener('mousemove', (e) => {
    currentMouse = { x: e.clientX, y: e.clientY };
    const index = findNearest(e.clientX, e.clientY);
    updateImage(index);
    positionImage(); // Re-position current image as mouse moves
  });

  // Initial image at center
  setTimeout(() => {
    currentMouse = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
    const index = findNearest(currentMouse.x, currentMouse.y);
    updateImage(index);
  }, 100);

  console.log('🚀 Perfect pointer alignment! Move your mouse.');