Convert intro into a scroll-driven 3D cinematic

Restructure the page so the first 4 viewports of scroll drive a
Three.js scene composited on top of the Antananarivo parachute video.

What's there:

- Three.js (ESM, r158 via importmap) renders a low-poly cargo airliner
  built from primitives: cylinder fuselage, cone nose, sphere cockpit
  (dark glass + emissive), box wings/tail/fin, cylinder engines with
  torus intakes, gold trim band, navy fin with gold logo box. No
  external model file.
- Hemisphere + directional + ambient lights tuned for golden-hour fill.
- 14 cloud spheres scattered around the plane, slowly rotating.
- GSAP + ScrollTrigger drive a single progress value scrubbed against
  scroll position. Inside the rAF loop, the camera arcs from rear-left
  (-0.6 rad) to front-right (+1.1 rad), radius dipping mid-flight, and
  the plane rolls slightly with scroll.
- Three act labels (Paris CDG / Vol cargo / Antananarivo) cross-fade at
  20%/40%-60%/72% scroll positions via a chained gsap timeline.
- Gold CTA button stays opacity:0 + pointer-events:none until the last
  ~10% of scroll, then fades and scales in. Hover transform rebuilt
  without the old mouse-parallax tilt (fights the scroll animation).
- Scroll hint pill (chevron + "Faites défiler") at the bottom of the
  first viewport, fades out on first scroll event.
- prefers-reduced-motion shortcut: scroll stage hidden, CTA visible,
  no animation. Page reverts to a static screen with the video bg.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

css/parallax.css

@@ -1,7 +1,7 @@
 /* =========================================================================
    PARALLAX INTRO — MVA Global Fret
-   Page unique, fixe (pas de scroll). Vidéo Terre rotative + ligne rouge 3D
+   Page scrollable (4 viewports) avec scène Three.js fixée. La timeline
-   Paris ↔ Antananarivo (suit la rotation du globe) + bouton centré.
+   pilote la caméra et l'avion 3D. À 100% du scroll, le bouton CTA apparaît.
    ========================================================================= */
 
 :root {
@@ -19,13 +19,15 @@
 
 html, body {
   height: 100%;
-  overflow: hidden;
+  background: var(--navy-deep);
 }
 
-.parallax-body {
+html { scroll-behavior: smooth; }
+
+body.parallax-body {
   font-family: 'Inter', sans-serif;
   color: var(--white);
-  background: var(--navy-deep);
+  overflow-x: hidden;
 }
 
 /* ── HEADER ─────────────────────────────────────────────────────────────── */
@@ -36,7 +38,7 @@ html, body {
   align-items: center;
   justify-content: space-between;
   padding: 22px 36px;
-  z-index: 50;
+  z-index: 100;
 }
 
 .parallax-logo {
@@ -84,12 +86,16 @@ html, body {
 }
 .lang-switcher button:hover:not(.active) { color: var(--white); }
 
-/* ── STAGE ──────────────────────────────────────────────────────────────── */
+/* ── SCÈNE FIXE (vidéo + voile + canvas Three.js) ────────────────────────
-.stage {
+   .stage-fixed reste plein-écran pendant que la page se déroule derrière.
-  position: relative;
+*/
+.stage-fixed {
+  position: fixed;
+  inset: 0;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
+  z-index: 1;
 }
 
 .layer {
@@ -101,8 +107,6 @@ html, body {
   will-change: transform;
 }
 
-/* Parallaxe vidéo : suit la souris avec easing. Sur-dimensionnée pour
-   masquer les bords quand elle bouge. */
 .layer-video {
   object-fit: cover;
   object-position: center;
@@ -115,17 +119,86 @@ html, body {
     linear-gradient(180deg, rgba(5, 5, 24, 0.25) 0%, rgba(5, 5, 24, 0.5) 100%);
 }
 
+.layer-three {
+  display: block;
+  z-index: 2;
+}
+
+/* ── SCROLL STAGE — sentinelles invisibles qui donnent la hauteur ──────── */
+.scroll-stage {
+  position: relative;
+  z-index: 5;
+  pointer-events: none;
+}
+.scroll-stage .act {
+  height: 100vh;
+}
+
+/* ── ÉTIQUETTES D'ACTE ──────────────────────────────────────────────────── */
+.act-label {
+  position: absolute;
+  left: 50%;
+  bottom: 18%;
+  transform: translateX(-50%);
+  z-index: 30;
+  pointer-events: none;
+  text-align: center;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 700;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  font-size: 1.05rem;
+  color: var(--white);
+  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.7);
+  opacity: 0;
+}
+.act-label span {
+  display: inline-block;
+  padding: 14px 28px;
+  background: rgba(5, 5, 24, 0.45);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 8px;
+  line-height: 1.35;
+}
+
+/* ── INDICATEUR SCROLL ─────────────────────────────────────────────────── */
+.scroll-hint {
+  position: absolute;
+  left: 50%;
+  bottom: 36px;
+  transform: translateX(-50%);
+  z-index: 40;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+  font-size: 0.78rem;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.85);
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
+  animation: scrollBob 1.8s ease-in-out infinite;
+  transition: opacity 0.5s ease;
+}
+.scroll-hint.hidden { opacity: 0; pointer-events: none; }
+.scroll-hint i { font-size: 1rem; }
+
+@keyframes scrollBob {
+  0%, 100% { transform: translate(-50%, 0); }
+  50%      { transform: translate(-50%, 8px); }
+}
+
 /* ── BOUTON CTA centré ──────────────────────────────────────────────────── */
 .cta-btn {
   position: absolute;
   top: 50%;
   left: 50%;
-  /* Bouge légèrement en sens INVERSE des couches → effet de tilt 3D */
+  transform: translate(-50%, -50%);
-  transform: translate(
+  z-index: 50;
-    calc(-50% + var(--mx) * 8px),
-    calc(-50% + var(--my) * 8px)
-  );
-  z-index: 10;
   display: inline-flex;
   align-items: center;
   gap: 16px;
@@ -146,13 +219,14 @@ html, body {
     inset 0 1px 0 rgba(255, 255, 255, 0.45);
   transition: box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
               transform   0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
+  /* Caché au départ ; révélé via GSAP en fin de scroll */
+  opacity: 0;
+  pointer-events: none;
 }
+.cta-btn.revealed { pointer-events: auto; }
 
 .cta-btn:hover {
-  transform: translate(
+  transform: translate(-50%, -50%) scale(1.04);
-    calc(-50% + var(--mx) * 8px),
-    calc(-50% + var(--my) * 8px)
-  ) scale(1.04);
   box-shadow:
     0 28px 75px rgba(197, 165, 90, 0.7),
     0 0 0 12px rgba(197, 165, 90, 0.12),
@@ -201,8 +275,13 @@ html, body {
     padding: 16px 36px;
     font-size: 0.98rem;
   }
+  .act-label { font-size: 0.85rem; bottom: 22%; }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .cta-btn::after  { animation: none; }
+  .scroll-hint     { animation: none; display: none; }
+  .scroll-stage    { display: none; }
+  .cta-btn         { opacity: 1; pointer-events: auto; }
+  html             { scroll-behavior: auto; }
 }

index.html

@@ -11,6 +11,18 @@
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
   <link rel="stylesheet" href="css/parallax.css">
+
+  <!-- Three.js (ESM via importmap) -->
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js"
+      }
+    }
+  </script>
+  <!-- GSAP + ScrollTrigger (UMD) -->
+  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
 </head>
 <body class="parallax-body">
 
@@ -26,8 +38,8 @@
     </div>
   </header>
 
-  <main class="stage">
+  <!-- Couches fixes : vidéo + voile + canvas Three.js (le plan 3D vole dessus) -->
-
+  <div class="stage-fixed">
     <video class="layer layer-video" id="introVideo"
            autoplay loop muted playsinline preload="auto"
            poster="videos/parachute-poster.jpg">
@@ -36,12 +48,33 @@
 
     <div class="layer layer-tint"></div>
 
-    <a href="accueil.html" class="cta-btn">
+    <canvas id="three-canvas" class="layer layer-three"></canvas>
+
+    <!-- Étiquettes des actes — apparaissent / disparaissent selon le scroll -->
+    <div class="act-label" id="label-paris"><span>Paris · CDG</span></div>
+    <div class="act-label" id="label-cruise"><span>Vol cargo<br>10 000 km</span></div>
+    <div class="act-label" id="label-tana"><span>Antananarivo</span></div>
+
+    <!-- Indicateur scroll (visible jusqu'à ce qu'on scrolle) -->
+    <div class="scroll-hint" id="scrollHint">
+      <span data-i18n="intro.scrollHint">Faites défiler</span>
+      <i class="fa-solid fa-chevron-down"></i>
+    </div>
+
+    <!-- CTA — caché jusqu'à la fin du scroll -->
+    <a href="accueil.html" class="cta-btn" id="ctaBtn">
       <span class="cta-btn-shine"></span>
       <span data-i18n="intro.ctaBtn">Accéder au site</span>
       <i class="fa-solid fa-arrow-right"></i>
     </a>
+  </div>
 
+  <!-- Sentinelles invisibles : leur scroll-position pilote la timeline -->
+  <main class="scroll-stage" aria-hidden="true">
+    <section class="act"></section>
+    <section class="act"></section>
+    <section class="act"></section>
+    <section class="act"></section>
   </main>
 
   <script src="js/translations.js"></script>
@@ -70,34 +103,12 @@
       }
     })();
 
-    /* Parallaxe souris : la vidéo et le bouton se décalent légèrement.
+    /* Scroll-hint : disparaît dès qu'on commence à scroller */
-       --mx, --my sont des floats dans [-1, +1] mappés sur la position
+    window.addEventListener('scroll', () => {
-       souris, avec easing. Sur mobile, on utilise l'orientation du device. */
+      document.getElementById('scrollHint')?.classList.add('hidden');
-    (function () {
+    }, { once: true, passive: true });
-      const root = document.documentElement;
-      let targetX = 0, targetY = 0, currentX = 0, currentY = 0;
-      const ease = 0.08;
-
-      function loop() {
-        currentX += (targetX - currentX) * ease;
-        currentY += (targetY - currentY) * ease;
-        root.style.setProperty('--mx', currentX.toFixed(4));
-        root.style.setProperty('--my', currentY.toFixed(4));
-        requestAnimationFrame(loop);
-      }
-      loop();
-
-      window.addEventListener('mousemove', (e) => {
-        targetX = (e.clientX / window.innerWidth  - 0.5) * 2;
-        targetY = (e.clientY / window.innerHeight - 0.5) * 2;
-      }, { passive: true });
-
-      window.addEventListener('deviceorientation', (e) => {
-        if (e.gamma == null || e.beta == null) return;
-        targetX = Math.max(-1, Math.min(1, e.gamma / 30));
-        targetY = Math.max(-1, Math.min(1, (e.beta - 45) / 30));
-      }, { passive: true });
-    })();
   </script>
+
+  <script type="module" src="js/intro-scene.js"></script>
 </body>
 </html>

js/intro-scene.js

@@ -0,0 +1,222 @@
+/* =========================================================================
+   INTRO SCENE — MVA Global Fret
+   Scène Three.js minimaliste : un avion-cargo low-poly construit à partir
+   de primitives (cylindre + boîtes + cônes), peint aux couleurs de la marque.
+   La timeline est pilotée par GSAP + ScrollTrigger : la position du scroll
+   anime caméra, avion et étiquettes. À 100% du scroll, le bouton CTA est
+   révélé.
+   ========================================================================= */
+
+import * as THREE from 'three';
+
+const { gsap, ScrollTrigger } = window;
+gsap.registerPlugin(ScrollTrigger);
+
+/* ── Setup ──────────────────────────────────────────────────────────────── */
+const canvas = document.getElementById('three-canvas');
+const renderer = new THREE.WebGLRenderer({
+  canvas, alpha: true, antialias: true, powerPreference: 'high-performance'
+});
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+renderer.outputColorSpace = THREE.SRGBColorSpace;
+
+const scene = new THREE.Scene();
+
+const camera = new THREE.PerspectiveCamera(38, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.set(0, 1.4, 18);
+camera.lookAt(0, 0, 0);
+
+/* ── Lighting ───────────────────────────────────────────────────────────── */
+const sun = new THREE.DirectionalLight(0xfff1d6, 1.4);  // chaude, golden hour
+sun.position.set(-6, 8, 4);
+scene.add(sun);
+
+const skyFill = new THREE.HemisphereLight(0xa8c5ff, 0x3a2a1a, 0.55);
+scene.add(skyFill);
+
+const ambient = new THREE.AmbientLight(0xffffff, 0.18);
+scene.add(ambient);
+
+/* ── Avion (low-poly à partir de primitives) ─────────────────────────────
+   Couleurs MVA : corps blanc cassé, accents navy + or sur les ailerons. */
+const NAVY = new THREE.Color(0x1a1a3e);
+const GOLD = new THREE.Color(0xc5a55a);
+const BODY = new THREE.Color(0xf2f2f7);
+
+const matBody = new THREE.MeshStandardMaterial({ color: BODY, roughness: 0.45, metalness: 0.08 });
+const matNavy = new THREE.MeshStandardMaterial({ color: NAVY, roughness: 0.55, metalness: 0.10 });
+const matGold = new THREE.MeshStandardMaterial({ color: GOLD, roughness: 0.35, metalness: 0.55 });
+const matWindow = new THREE.MeshStandardMaterial({ color: 0x0e1a30, roughness: 0.2, metalness: 0.4, emissive: 0x0a1428, emissiveIntensity: 0.4 });
+
+const plane = new THREE.Group();
+
+// Fuselage — cylindre couché le long de l'axe Z
+const fuselageGeo = new THREE.CylinderGeometry(0.55, 0.5, 7.2, 24);
+const fuselage = new THREE.Mesh(fuselageGeo, matBody);
+fuselage.rotation.x = Math.PI / 2;
+plane.add(fuselage);
+
+// Nez (cône avant)
+const nose = new THREE.Mesh(new THREE.ConeGeometry(0.5, 1.4, 24), matBody);
+nose.rotation.x = -Math.PI / 2;
+nose.position.z = 4.3;
+plane.add(nose);
+
+// Cockpit (sphère bleu nuit pour les vitres)
+const cockpit = new THREE.Mesh(new THREE.SphereGeometry(0.42, 18, 16, 0, Math.PI * 2, 0, Math.PI / 2), matWindow);
+cockpit.rotation.x = -Math.PI / 2;
+cockpit.position.set(0, 0.18, 3.4);
+plane.add(cockpit);
+
+// Bande dorée le long du fuselage (un cylindre fin)
+const goldBand = new THREE.Mesh(new THREE.CylinderGeometry(0.555, 0.555, 7.2, 24, 1, true), matGold);
+goldBand.rotation.x = Math.PI / 2;
+goldBand.scale.set(1.001, 0.08, 1.001);  // bande fine
+plane.add(goldBand);
+
+// Ailes principales (boîte aplatie, légèrement en flèche via rotation Y)
+const wingGeo = new THREE.BoxGeometry(11, 0.18, 1.6);
+const wings = new THREE.Mesh(wingGeo, matBody);
+wings.position.set(0, -0.05, -0.4);
+plane.add(wings);
+
+// Bord doré sur les ailes
+const wingTrim = new THREE.Mesh(new THREE.BoxGeometry(11.05, 0.06, 0.18), matGold);
+wingTrim.position.set(0, -0.04, 0.32);
+plane.add(wingTrim);
+
+// Empennage horizontal (petites ailes arrière)
+const tail = new THREE.Mesh(new THREE.BoxGeometry(3.4, 0.14, 0.85), matBody);
+tail.position.set(0, 0.25, -3.0);
+plane.add(tail);
+
+// Empennage vertical (queue)
+const fin = new THREE.Mesh(new THREE.BoxGeometry(0.16, 1.45, 1.6), matNavy);
+fin.position.set(0, 0.85, -2.9);
+fin.geometry.translate(0, 0, -0.4);  // base alignée arrière
+plane.add(fin);
+
+// Logo navy sur la queue (un petit cube doré)
+const logoBadge = new THREE.Mesh(new THREE.BoxGeometry(0.165, 0.45, 0.35), matGold);
+logoBadge.position.set(0, 1.1, -3.1);
+plane.add(logoBadge);
+
+// Réacteurs sous les ailes (cylindres)
+const engineGeo = new THREE.CylinderGeometry(0.35, 0.32, 1.5, 18);
+const engineL = new THREE.Mesh(engineGeo, matNavy);
+engineL.rotation.x = Math.PI / 2;
+engineL.position.set(-2.6, -0.45, 0.2);
+plane.add(engineL);
+
+const engineR = engineL.clone();
+engineR.position.x = 2.6;
+plane.add(engineR);
+
+// Petites bouches d'admission dorées sur les réacteurs
+const intakeGeo = new THREE.TorusGeometry(0.35, 0.05, 10, 24);
+const intakeL = new THREE.Mesh(intakeGeo, matGold);
+intakeL.position.set(-2.6, -0.45, 0.95);
+plane.add(intakeL);
+const intakeR = intakeL.clone();
+intakeR.position.x = 2.6;
+plane.add(intakeR);
+
+scene.add(plane);
+
+/* ── Nuages volants (sprites simples) ───────────────────────────────────── */
+const clouds = new THREE.Group();
+const cloudMat = new THREE.MeshStandardMaterial({
+  color: 0xffffff, roughness: 1.0, metalness: 0, transparent: true, opacity: 0.85
+});
+for (let i = 0; i < 14; i++) {
+  const cl = new THREE.Mesh(new THREE.SphereGeometry(1, 12, 10), cloudMat);
+  const r = 18 + Math.random() * 14;
+  const a = Math.random() * Math.PI * 2;
+  cl.position.set(Math.cos(a) * r, (Math.random() - 0.4) * 9, Math.sin(a) * r - 8);
+  cl.scale.set(1.6 + Math.random() * 1.4, 0.9 + Math.random() * 0.6, 1.6 + Math.random() * 1.4);
+  clouds.add(cl);
+}
+scene.add(clouds);
+
+/* ── État animé piloté par le scroll ───────────────────────────────────── */
+const state = { progress: 0 };
+
+ScrollTrigger.create({
+  trigger: '.scroll-stage',
+  start: 'top top',
+  end: 'bottom bottom',
+  scrub: 0.6,
+  onUpdate: self => { state.progress = self.progress; }
+});
+
+/* Étiquettes : fade-in/out aux bonnes plages de scroll */
+const tl = gsap.timeline({
+  scrollTrigger: { trigger: '.scroll-stage', start: 'top top', end: 'bottom bottom', scrub: 0.4 }
+});
+tl.fromTo('#label-paris',  { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.05 }, 0.02)
+  .to(   '#label-paris',  { opacity: 0, y: -20 }, 0.20)
+  .fromTo('#label-cruise', { opacity: 0, y: 20 }, { opacity: 1, y: 0 }, 0.40)
+  .to(   '#label-cruise', { opacity: 0, y: -20 }, 0.60)
+  .fromTo('#label-tana',   { opacity: 0, y: 20 }, { opacity: 1, y: 0 }, 0.72)
+  .to(   '#label-tana',   { opacity: 0, y: -20 }, 0.92);
+
+/* CTA : caché jusqu'à ~92% du scroll, puis fade in */
+gsap.fromTo('#ctaBtn',
+  { opacity: 0, scale: 0.85 },
+  {
+    opacity: 1, scale: 1, duration: 0.5,
+    ease: 'cubic-bezier(0.2, 0.8, 0.2, 1)',
+    scrollTrigger: {
+      trigger: '.scroll-stage',
+      start: 'bottom-=400 bottom',
+      end:   'bottom bottom',
+      scrub: 0.4,
+      onLeave:     () => document.getElementById('ctaBtn').classList.add('revealed'),
+      onEnterBack: () => document.getElementById('ctaBtn').classList.remove('revealed'),
+    }
+  }
+);
+
+/* ── Render loop ────────────────────────────────────────────────────────── */
+const clock = new THREE.Clock();
+function tick() {
+  const t = clock.getElapsedTime();
+  const p = state.progress;
+
+  /* Caméra : large arrière → côté → arrière en s'éloignant à la fin */
+  // Arc autour de l'avion
+  const camAngle = -0.6 + p * 1.7;        // -0.6 rad → +1.1 rad
+  const camRadius = 18 - p * 6 + Math.sin(p * Math.PI) * -3;  // 18 → 12, dip au milieu
+  const camHeight = 1.4 + Math.sin(p * Math.PI) * 1.8 - p * 0.6;
+
+  camera.position.set(
+    Math.sin(camAngle) * camRadius,
+    camHeight,
+    Math.cos(camAngle) * camRadius
+  );
+  camera.lookAt(0, 0, 0);
+
+  /* Avion : léger bob + roulis selon scroll */
+  plane.position.y = Math.sin(t * 0.9) * 0.15;
+  plane.rotation.z = Math.sin(t * 0.5) * 0.04 + (p - 0.5) * 0.18;
+  plane.rotation.y = Math.sin(t * 0.4) * 0.025;
+
+  /* Nuages : rotation lente autour de l'avion */
+  clouds.rotation.y = t * 0.04 - p * 0.6;
+  clouds.position.y = Math.sin(t * 0.3) * 0.4;
+
+  renderer.render(scene, camera);
+  requestAnimationFrame(tick);
+}
+
+/* ── Resize ─────────────────────────────────────────────────────────────── */
+function resize() {
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+  renderer.setSize(w, h, false);
+  camera.aspect = w / h;
+  camera.updateProjectionMatrix();
+}
+window.addEventListener('resize', resize);
+resize();
+tick();