So many stuphs

public/assets/js/main.js

@@ -0,0 +1,88 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Video fixed BG
+  const reelEl = document.getElementById('reel');
+  if (!reelEl) return;
+
+  const video = reelEl.tagName.toLowerCase() === 'video' ? reelEl : reelEl.querySelector('video');
+  if (!video) return;
+
+  function tryPlay() {
+    const playPromise = video.play();
+    if (playPromise !== undefined) {
+      playPromise.catch(() => {
+        // Autoplay bloqué : passer en muet et retenter
+        video.muted = true;
+        video.play().catch(() => {});
+      });
+    }
+  }
+
+  function handleVisibility(visible) {
+      console.log('Visibility changed, playing:', visible);
+    if (visible) {
+        // make visible the video element
+        video.style.visibility = 'visible';
+        tryPlay();
+    }
+    else {
+        video.style.visibility = 'hidden';
+        video.pause();
+    }
+  }
+
+  if ('IntersectionObserver' in window) {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        handleVisibility(entry.intersectionRatio >= 0.01);
+      });
+    }, { threshold: [0, 0.01, 1] });
+    observer.observe(reelEl);
+  } else {
+    // Fallback simple : vérification sur scroll/resize
+    let ticking = false;
+    const check = () => {
+      ticking = false;
+      const rect = reelEl.getBoundingClientRect();
+      const vh = window.innerHeight || document.documentElement.clientHeight;
+        // Visible si une partie quelconque est dans la fenêtre
+        const visible = rect.bottom > 0 && rect.top < vh;
+        handleVisibility(visible);
+    };
+    const onScroll = () => {
+      if (!ticking) {
+        ticking = true;
+        requestAnimationFrame(check);
+      }
+    };
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onScroll);
+  }
+
+  document.addEventListener('visibilitychange', () => {
+    if (document.hidden) video.pause();
+  });
+
+  // Cursor tracking
+    //track the cursor position and set CSS variables --cursor-x and --cursor-y on the body element
+    let x = 0;
+    let y = 0;
+    document.addEventListener('mousemove', (e) => {
+        x = Math.round(((e.clientX / window.innerWidth) * 2 - 1) * 10000) / 10000;
+        y = Math.round(((e.clientY / window.innerHeight) * 2 - 1) * 10000) / 10000;
+    });
+
+    let lastUpdate = 0;
+    const FRAME_INTERVAL = 1000 / 60;
+    const updateTwist = (timestamp) => {
+        if (!timestamp) timestamp = performance.now();
+        if (timestamp - lastUpdate >= FRAME_INTERVAL) {
+            document.body.style.setProperty('--cursor-x', x);
+            document.body.style.setProperty('--cursor-y', y);
+            lastUpdate = timestamp;
+        }
+        requestAnimationFrame(updateTwist);
+    }
+    updateTwist();
+
+});