update the loading issue

src/components/optimization/OptimizationSection.tsx

@@ -154,11 +154,11 @@ export default function OptimizationSection() {
     if (!el) return;
     gsap.registerPlugin(ScrollTrigger);
 
-    // NOTE: /miletruth runs on native scroll (no Lenis). Smooth-scrolling this
-    // page fought the three stacked pinned WebGL sections and caused scroll lag;
-    // global Lenis (src/animations/SmoothScroll.tsx) is intentionally disabled on
-    // this route. ScrollTrigger's scrub + self-managed fixed pin work as-is on
-    // native scroll.
+    // NOTE: global Lenis (src/animations/SmoothScroll.tsx) is active on this
+    // route. Because the pin is a self-managed `position: fixed` driven by
+    // `self.progress` (not a GSAP pin-spacer) and Lenis scrolls the real
+    // document hooked to ScrollTrigger.update, the scrub + fixed pin work
+    // unchanged under smooth scroll.
     let lastPhase: PhaseKey = "chaos";
     let lastPin: "before" | "pinned" | "after" = "before";
     const st = ScrollTrigger.create({

src/components/optimization/VehicleFleet.tsx

@@ -134,7 +134,8 @@ function VehicleFleet({ progress, reduced = false }: Props) {
     if (!visible) return;
 
     let u = progressArray[index];
-    if (u === undefined || Number.isNaN(u)) u = progressArray[index] = def.offset ?? 0;
+    if (u === undefined || Number.isNaN(u))
+      u = progressArray[index] = def.offset ?? 0;
 
     // Get position to compute distance to nodes
     def.curve.getPointAt(u, TMP_POS);
@@ -149,7 +150,7 @@ function VehicleFleet({ progress, reduced = false }: Props) {
     }
 
     // Slow at nodes (speed reduction to 20%), accelerate on long corridors (up to 125%)
-    const speedFactor = 0.20 + smoothstep(0.4, 2.5, minDist) * 1.05;
+    const speedFactor = 0.2 + smoothstep(0.4, 2.5, minDist) * 1.05;
 
     // Increment progress continuously
     u = (u + dt * def.speed * speedFactor) % 1;
@@ -195,26 +196,46 @@ function VehicleFleet({ progress, reduced = false }: Props) {
     const t = state.clock.elapsedTime;
     const safeDt = Math.min(0.06, dt);
 
-    const chaosFadeIn = smoothstep(0.10, 0.22, p);
-    const chaosFadeOut = 1 - smoothstep(0.70, 0.82, p);
+    const chaosFadeIn = smoothstep(0.1, 0.22, p);
+    const chaosFadeOut = 1 - smoothstep(0.7, 0.82, p);
     const chaosOp = chaosFadeIn * chaosFadeOut * (0.85 + Math.sin(t * 6) * 0.1);
     const optOp = smoothstep(0.68, 0.82, p);
 
     const cam = state.camera;
     for (let i = 0; i < chaosFleet.length; i++) {
-      place(chaosRefs.current[i], chaosFleet[i], chaosProgress.current, i, safeDt, chaosOp);
+      place(
+        chaosRefs.current[i],
+        chaosFleet[i],
+        chaosProgress.current,
+        i,
+        safeDt,
+        chaosOp,
+      );
       const g = chaosRefs.current[i];
       if (g && g.visible) {
-        g.rotation.y = Math.atan2(cam.position.x - g.position.x, cam.position.z - g.position.z);
+        g.rotation.y = Math.atan2(
+          cam.position.x - g.position.x,
+          cam.position.z - g.position.z,
+        );
       }
     }
     for (let i = 0; i < optFleet.length; i++) {
-      place(optRefs.current[i], optFleet[i], optProgress.current, i, safeDt, optOp);
+      place(
+        optRefs.current[i],
+        optFleet[i],
+        optProgress.current,
+        i,
+        safeDt,
+        optOp,
+      );
       // The truck is 2D cutout art, so billboard it around Y to always face the
       // camera (overrides the tangent heading set inside place()).
       const g = optRefs.current[i];
       if (g && g.visible) {
-        g.rotation.y = Math.atan2(cam.position.x - g.position.x, cam.position.z - g.position.z);
+        g.rotation.y = Math.atan2(
+          cam.position.x - g.position.x,
+          cam.position.z - g.position.z,
+        );
       }
       // Energy comet-tail behind each optimized vehicle.
       const u = optProgress.current[i];
@@ -223,7 +244,10 @@ function VehicleFleet({ progress, reduced = false }: Props) {
       for (let k = 0; k < TRAIL_N; k++) {
         const mesh = optTrailRefs.current[i * TRAIL_N + k];
         if (!mesh) continue;
-        if (optOp < 0.02) { mesh.visible = false; continue; }
+        if (optOp < 0.02) {
+          mesh.visible = false;
+          continue;
+        }
         let uk = u - (k + 1) * TRAIL_GAP;
         if (uk < 0) uk = 0;
         mesh.visible = true;
@@ -233,7 +257,8 @@ function VehicleFleet({ progress, reduced = false }: Props) {
         const size = 0.05 + taper * 0.13;
         mesh.scale.setScalar(size / 0.1);
         const mat = mesh.material as THREE.MeshBasicMaterial;
-        mat.opacity = optOp * taper * taper * (0.65 + Math.sin(t * 9 - k * 0.7) * 0.35);
+        mat.opacity =
+          optOp * taper * taper * (0.65 + Math.sin(t * 9 - k * 0.7) * 0.35);
       }
     }
   });
@@ -248,7 +273,12 @@ function VehicleFleet({ progress, reduced = false }: Props) {
             chaosRefs.current[i] = el;
           }}
         >
-          <TruckBillboardMemo texture={truckTex} tint="#ff5a5a" width={TRUCK_W * 0.92} aspect={TRUCK_ASPECT} />
+          <TruckBillboardMemo
+            texture={truckTex}
+            tint="#ff5a5a"
+            width={TRUCK_W * 0.92}
+            aspect={TRUCK_ASPECT}
+          />
         </group>
       ))}
       {/* Optimized fleet — the truck art in clean white */}
@@ -260,7 +290,12 @@ function VehicleFleet({ progress, reduced = false }: Props) {
             optRefs.current[i] = el;
           }}
         >
-          <TruckBillboardMemo texture={truckTex} tint="#d7dce4" width={TRUCK_W} aspect={TRUCK_ASPECT} />
+          <TruckBillboardMemo
+            texture={truckTex}
+            tint="#d7dce4"
+            width={TRUCK_W}
+            aspect={TRUCK_ASPECT}
+          />
         </group>
       ))}
 
@@ -290,5 +325,3 @@ function VehicleFleet({ progress, reduced = false }: Props) {
 }
 
 export default React.memo(VehicleFleet);
-
-