utm-scroll-scene 0.1.0

package/dist/index.cjs

@@ -0,0 +1,981 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  ScrollScene: () => ScrollScene
+});
+module.exports = __toCommonJS(index_exports);
+
+// components/ScrollScene.tsx
+var import_react6 = require("react");
+var import_gsap2 = __toESM(require("gsap"), 1);
+
+// components/DroneScene.tsx
+var import_react = require("react");
+
+// lib/three/setup.ts
+var THREE2 = __toESM(require("three"), 1);
+var import_GLTFLoader = require("three/addons/loaders/GLTFLoader.js");
+var import_RoundedBoxGeometry = require("three/addons/geometries/RoundedBoxGeometry.js");
+
+// lib/three/path.ts
+var THREE = __toESM(require("three"), 1);
+var launch0 = new THREE.Vector3(1.92, 0.35, 1.48);
+var launch1 = new THREE.Vector3(1.75, 0.42, 1.22);
+var launch2 = new THREE.Vector3(1.42, 0.5, 1);
+var launch3 = new THREE.Vector3(1, 0.58, 0.7);
+var flight0 = new THREE.Vector3(1, 0.58, 0.7);
+var flight1 = new THREE.Vector3(0.4, 1.5, -0.4);
+var flight2 = new THREE.Vector3(0, 1.75, -1.8);
+var flight3 = new THREE.Vector3(0.65, 0.5, 0.1);
+var flight2_0 = new THREE.Vector3(0.65, 0.5, 0.1);
+var flight2_1 = new THREE.Vector3(0.4, 1.5, -1.5);
+var flight2_2 = new THREE.Vector3(0.1, 2.2, -4.5);
+var flight2_3 = new THREE.Vector3(-0.05, 1.5, -3.5);
+var flight2_4 = new THREE.Vector3(-0.08, 1, -3.12);
+var exit0 = new THREE.Vector3(-0.08, 0.35, -3.12);
+var exit1 = new THREE.Vector3(-0.08, 1.3, -4.5);
+var exit2 = new THREE.Vector3(-0.08, 2.4, -6.5);
+var launchPath = new THREE.CatmullRomCurve3(
+  [launch0, launch1, launch2, launch3],
+  false,
+  "catmullrom",
+  0.5
+);
+var flightPath = new THREE.CatmullRomCurve3(
+  [flight0, flight1, flight2, flight3],
+  false,
+  "catmullrom",
+  0.42
+);
+var flightPath2 = new THREE.CatmullRomCurve3(
+  [flight2_0, flight2_1, flight2_2, flight2_3, flight2_4],
+  false,
+  "catmullrom",
+  0.42
+);
+var INTRO_DRONE_POS = new THREE.Vector3(1.4, 0.5, 0.5);
+var INTRO_DRONE_SCALE = 1.8;
+var PICKUP_KIOSK_POS = new THREE.Vector3(0.65, -0.15, 0.1);
+var exitPath = new THREE.CatmullRomCurve3(
+  [exit0, exit1, exit2],
+  false,
+  "catmullrom",
+  0.5
+);
+var KIOSK_CENTER = new THREE.Vector3(-0.08, -0.175, -3.12);
+var KIOSK_TOP_Y = 0;
+function clamp01(value) {
+  return Math.max(0, Math.min(1, value));
+}
+
+// lib/three/setup.ts
+function createFallbackDrone() {
+  const group = new THREE2.Group();
+  const bodyGeo = new THREE2.BoxGeometry(0.12, 0.06, 0.16);
+  const bodyMat = new THREE2.MeshStandardMaterial({
+    color: "#d7d1c4",
+    metalness: 0.3,
+    roughness: 0.6
+  });
+  const body = new THREE2.Mesh(bodyGeo, bodyMat);
+  body.castShadow = true;
+  group.add(body);
+  const propGeo = new THREE2.CylinderGeometry(0.02, 0.02, 5e-3, 8);
+  const propMat = new THREE2.MeshStandardMaterial({ color: "#333" });
+  for (let i = 0; i < 4; i++) {
+    const prop = new THREE2.Mesh(propGeo, propMat);
+    const angle = i / 4 * Math.PI * 2;
+    prop.position.set(
+      Math.cos(angle) * 0.1,
+      0.04,
+      Math.sin(angle) * 0.1
+    );
+    group.add(prop);
+  }
+  group.rotation.x = Math.PI / 2;
+  return group;
+}
+function createPackageMesh() {
+  const geo = new import_RoundedBoxGeometry.RoundedBoxGeometry(0.08, 0.05, 0.12, 2, 8e-3);
+  const mat = new THREE2.MeshStandardMaterial({
+    color: "#8B6F47",
+    metalness: 0,
+    roughness: 0.92,
+    envMapIntensity: 0.3
+  });
+  const mesh = new THREE2.Mesh(geo, mat);
+  mesh.castShadow = true;
+  return mesh;
+}
+function createKioskMesh() {
+  const geo = new THREE2.BoxGeometry(0.5, 0.35, 0.4);
+  const mat = new THREE2.MeshStandardMaterial({
+    color: "#e8e4dc",
+    metalness: 0.1,
+    roughness: 0.8
+  });
+  const mesh = new THREE2.Mesh(geo, mat);
+  mesh.castShadow = true;
+  mesh.receiveShadow = true;
+  return mesh;
+}
+function createDroneRig(canvas) {
+  const renderer = new THREE2.WebGLRenderer({
+    canvas,
+    antialias: true,
+    alpha: true
+  });
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+  renderer.toneMapping = THREE2.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1;
+  renderer.outputColorSpace = THREE2.SRGBColorSpace;
+  renderer.shadowMap.enabled = true;
+  renderer.shadowMap.type = THREE2.PCFSoftShadowMap;
+  const scene = new THREE2.Scene();
+  scene.background = null;
+  const camera = new THREE2.PerspectiveCamera(
+    45,
+    canvas.clientWidth / canvas.clientHeight,
+    0.1,
+    100
+  );
+  camera.position.set(0, 0.5, 4);
+  camera.lookAt(0, 0.3, 0);
+  const ambient = new THREE2.AmbientLight(16777215, 0.7);
+  scene.add(ambient);
+  const dirLight = new THREE2.DirectionalLight(16777215, 0.9);
+  dirLight.position.set(2, 4, 3);
+  dirLight.castShadow = true;
+  dirLight.shadow.mapSize.set(1024, 1024);
+  dirLight.shadow.camera.near = 0.5;
+  dirLight.shadow.camera.far = 20;
+  dirLight.shadow.camera.left = -4;
+  dirLight.shadow.camera.right = 4;
+  dirLight.shadow.camera.top = 4;
+  dirLight.shadow.camera.bottom = -4;
+  scene.add(dirLight);
+  const dronePayload = new THREE2.Group();
+  const drone = createFallbackDrone();
+  dronePayload.add(drone);
+  const loader = new import_GLTFLoader.GLTFLoader();
+  loader.load(
+    "/3d-models/assets/drone/scene.gltf",
+    (gltf) => {
+      const root = gltf.scene;
+      root.traverse((child) => {
+        if (child instanceof THREE2.Mesh) {
+          child.castShadow = true;
+        }
+      });
+      root.scale.setScalar(0.15);
+      while (drone.children.length) drone.remove(drone.children[0]);
+      drone.add(root);
+    },
+    void 0,
+    () => {
+    }
+  );
+  const pkg = createPackageMesh();
+  pkg.position.set(PICKUP_KIOSK_POS.x, PICKUP_KIOSK_POS.y + 0.175 + PACKAGE_HEIGHT / 2, PICKUP_KIOSK_POS.z);
+  pkg.visible = false;
+  scene.add(pkg);
+  scene.add(dronePayload);
+  const pickupKiosk = new THREE2.Group();
+  pickupKiosk.position.copy(PICKUP_KIOSK_POS);
+  pickupKiosk.visible = false;
+  const pickupKioskFallback = createKioskMesh();
+  pickupKiosk.add(pickupKioskFallback);
+  scene.add(pickupKiosk);
+  const pickupKioskLoader = new import_GLTFLoader.GLTFLoader();
+  pickupKioskLoader.load(
+    "/3d-models/assets/smart_box/scene.gltf",
+    (gltf) => {
+      const root = gltf.scene;
+      root.traverse((child) => {
+        if (child instanceof THREE2.Mesh) {
+          child.castShadow = true;
+          child.receiveShadow = true;
+        }
+      });
+      root.scale.setScalar(0.2);
+      root.position.set(0, 0, 0);
+      pickupKiosk.remove(pickupKioskFallback);
+      pickupKioskFallback.geometry.dispose();
+      pickupKioskFallback.material.dispose();
+      pickupKiosk.add(root);
+    },
+    void 0,
+    () => {
+    }
+  );
+  const kiosk = new THREE2.Group();
+  kiosk.position.copy(KIOSK_CENTER);
+  kiosk.visible = false;
+  const kioskFallback = createKioskMesh();
+  kiosk.add(kioskFallback);
+  scene.add(kiosk);
+  const kioskLoader = new import_GLTFLoader.GLTFLoader();
+  kioskLoader.load(
+    "/3d-models/assets/smart_box/scene.gltf",
+    (gltf) => {
+      const root = gltf.scene;
+      root.traverse((child) => {
+        if (child instanceof THREE2.Mesh) {
+          child.castShadow = true;
+          child.receiveShadow = true;
+        }
+      });
+      root.scale.setScalar(0.2);
+      root.position.set(0, 0, 0);
+      kiosk.remove(kioskFallback);
+      kioskFallback.geometry.dispose();
+      kioskFallback.material.dispose();
+      kiosk.add(root);
+    },
+    void 0,
+    () => {
+    }
+  );
+  return {
+    renderer,
+    scene,
+    camera,
+    dronePayload,
+    drone,
+    package: pkg,
+    pickupKiosk,
+    kiosk
+  };
+}
+function resizeDroneRig(rig, width, height, dpr) {
+  rig.renderer.setPixelRatio(Math.min(dpr, 2));
+  rig.renderer.setSize(width, height);
+  rig.camera.aspect = width / height;
+  rig.camera.updateProjectionMatrix();
+}
+function lerp(a, b, t) {
+  return a + (b - a) * clamp01(t);
+}
+var HOVER_ALTITUDE = 1;
+var PACKAGE_HEIGHT = 0.05;
+var PACKAGE_LAND_Y = KIOSK_TOP_Y + PACKAGE_HEIGHT / 2;
+var PACKAGE_OFFSET_BELOW_DRONE = 0.4;
+var RELEASE_ALTITUDE = PACKAGE_LAND_Y + PACKAGE_OFFSET_BELOW_DRONE + 0.06;
+function renderDroneState(rig, state) {
+  const { dronePayload, drone, package: pkg, pickupKiosk, kiosk, camera } = rig;
+  const introDroneT = clamp01(state.introDroneT);
+  const emergeT = clamp01(state.emergeT);
+  const flightT = clamp01(state.flightT);
+  const flight2T = clamp01(state.flight2T);
+  const pickupT = clamp01(state.pickupT);
+  const dropT = clamp01(state.drop);
+  const releaseT = clamp01(state.release);
+  const departT = clamp01(state.depart);
+  const hoverT = clamp01(state.hover);
+  const bank = state.bank;
+  const pickupKioskReveal = clamp01(state.pickupKioskReveal);
+  const kioskReveal = clamp01(state.kioskReveal);
+  let scale;
+  let pos;
+  if (introDroneT > 0) {
+    const launchStart = launchPath.getPoint(0);
+    pos = introDroneT >= 1 ? INTRO_DRONE_POS.clone() : INTRO_DRONE_POS.clone().lerp(launchStart, 1 - introDroneT);
+    scale = lerp(1, INTRO_DRONE_SCALE, introDroneT);
+  } else if (departT > 0) {
+    scale = lerp(1, 0, departT);
+    pos = exitPath.getPoint(departT);
+  } else if (emergeT < 1) {
+    scale = 1;
+    pos = launchPath.getPoint(emergeT);
+  } else {
+    scale = 1;
+    if (flightT < 1) {
+      pos = flightPath.getPoint(flightT);
+    } else if (pickupT < 1) {
+      const flightEnd = flightPath.getPoint(1);
+      const pickupHover = new THREE2.Vector3(0.65, 0.5, 0.1);
+      pos = flightEnd.clone().lerp(pickupHover, pickupT);
+    } else if (flight2T < 1) {
+      pos = flightPath2.getPoint(flight2T);
+      const flyOutEnd = 0.35;
+      const flyInStart = 0.65;
+      if (flight2T <= flyOutEnd) {
+        scale = lerp(1, 0.12, flight2T / flyOutEnd);
+      } else if (flight2T >= flyInStart) {
+        scale = lerp(0.12, 1, (flight2T - flyInStart) / (1 - flyInStart));
+      } else {
+        scale = 0.12;
+      }
+    } else if (dropT > 0) {
+      const descendY = lerp(HOVER_ALTITUDE, RELEASE_ALTITUDE, dropT);
+      pos = new THREE2.Vector3(-0.08, descendY, -3.12);
+    } else {
+      const flight2End = flightPath2.getPoint(1);
+      const hoverPos = new THREE2.Vector3(-0.08, HOVER_ALTITUDE, -3.12);
+      pos = flight2End.clone().lerp(hoverPos, hoverT);
+    }
+  }
+  dronePayload.position.copy(pos);
+  dronePayload.scale.setScalar(scale);
+  dronePayload.updateMatrixWorld(true);
+  const bankRad = bank * 0.45;
+  dronePayload.rotation.order = "YXZ";
+  dronePayload.rotation.x = Math.PI / 2;
+  dronePayload.rotation.y = 0;
+  dronePayload.rotation.z = departT > 0 ? -0.2 : -bankRad;
+  const depthT = state.flightDepth;
+  const camOffsetX = -1;
+  const camOffsetZ = 2;
+  const camX = pos.x + camOffsetX;
+  const camZ = pos.z + camOffsetZ;
+  const camY = lerp(0.5, pos.y * 0.3 + 0.4, depthT);
+  camera.position.set(camX, camY, camZ);
+  const lookZ = pos.z - 0.4;
+  const lookY = pos.y * 0.6 + 0.15;
+  camera.lookAt(pos.x + 0.3, lookY, lookZ);
+  const pickupKioskRiseY = lerp(PICKUP_KIOSK_POS.y - 0.5, PICKUP_KIOSK_POS.y, pickupKioskReveal);
+  const pickupKioskTopY = pickupKioskRiseY + 0.175;
+  const pickupPackageY = pickupKioskTopY + PACKAGE_HEIGHT / 2;
+  const deliveryKioskPos = new THREE2.Vector3(-0.08, PACKAGE_LAND_Y, -3.12);
+  pkg.visible = introDroneT <= 0 && pickupKioskReveal > 0;
+  if (pkg.visible) {
+    if (pickupT < 1) {
+      if (pkg.parent) {
+        pkg.parent.remove(pkg);
+        rig.scene.add(pkg);
+      }
+      const pickupPos = new THREE2.Vector3(0.65, pickupPackageY, 0.1);
+      const attachWorld = new THREE2.Vector3(0, 0.4, 0).applyMatrix4(drone.matrixWorld);
+      pkg.position.lerpVectors(pickupPos, attachWorld, pickupT);
+      pkg.rotation.set(0, 0, 0);
+      pkg.scale.setScalar(1);
+    } else if (releaseT >= 1) {
+      if (pkg.parent) {
+        pkg.parent.remove(pkg);
+        rig.scene.add(pkg);
+      }
+      pkg.position.copy(deliveryKioskPos);
+      pkg.rotation.set(0, 0, 0);
+      pkg.scale.setScalar(1);
+    } else if (releaseT > 0) {
+      if (pkg.parent) {
+        pkg.parent.remove(pkg);
+        rig.scene.add(pkg);
+      }
+      const attachedWorld = new THREE2.Vector3(0, 0.4, 0).applyMatrix4(drone.matrixWorld);
+      pkg.position.lerpVectors(attachedWorld, deliveryKioskPos, releaseT);
+      pkg.rotation.set(0, 0, 0);
+      pkg.scale.setScalar(lerp(scale, 1, releaseT));
+    } else {
+      if (pkg.parent !== rig.drone) {
+        rig.scene.remove(pkg);
+        rig.drone.add(pkg);
+      }
+      pkg.position.set(0, 0.4, 0);
+      pkg.rotation.set(0, 0, 0);
+      pkg.scale.setScalar(1);
+    }
+  }
+  pickupKiosk.visible = pickupKioskReveal > 0;
+  pickupKiosk.position.set(PICKUP_KIOSK_POS.x, pickupKioskRiseY, PICKUP_KIOSK_POS.z);
+  kiosk.visible = kioskReveal > 0;
+  kiosk.traverse((obj) => {
+    if (obj instanceof THREE2.Mesh && obj.material) {
+      const mat = Array.isArray(obj.material) ? obj.material[0] : obj.material;
+      if (mat instanceof THREE2.MeshStandardMaterial) {
+        mat.opacity = kioskReveal;
+        mat.transparent = kioskReveal < 1;
+      }
+    }
+  });
+  rig.renderer.render(rig.scene, rig.camera);
+}
+function disposeDroneRig(rig) {
+  rig.renderer.dispose();
+  rig.dronePayload.traverse((obj) => {
+    var _a, _b;
+    if (obj instanceof THREE2.Mesh) {
+      (_a = obj.geometry) == null ? void 0 : _a.dispose();
+      if (Array.isArray(obj.material)) {
+        obj.material.forEach((m) => m.dispose());
+      } else {
+        (_b = obj.material) == null ? void 0 : _b.dispose();
+      }
+    }
+  });
+  rig.package.geometry.dispose();
+  rig.package.material.dispose();
+  rig.pickupKiosk.traverse((obj) => {
+    var _a, _b;
+    if (obj instanceof THREE2.Mesh) {
+      (_a = obj.geometry) == null ? void 0 : _a.dispose();
+      if (Array.isArray(obj.material)) {
+        obj.material.forEach((m) => m.dispose());
+      } else {
+        (_b = obj.material) == null ? void 0 : _b.dispose();
+      }
+    }
+  });
+  rig.kiosk.traverse((obj) => {
+    var _a, _b;
+    if (obj instanceof THREE2.Mesh) {
+      (_a = obj.geometry) == null ? void 0 : _a.dispose();
+      if (Array.isArray(obj.material)) {
+        obj.material.forEach((m) => m.dispose());
+      } else {
+        (_b = obj.material) == null ? void 0 : _b.dispose();
+      }
+    }
+  });
+}
+
+// components/DroneScene.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DroneScene = (0, import_react.forwardRef)(function DroneScene2({ className }, ref) {
+  const canvasRef = (0, import_react.useRef)(null);
+  const rigRef = (0, import_react.useRef)(null);
+  const stateRef = (0, import_react.useRef)(null);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    setState(nextState) {
+      stateRef.current = nextState;
+    },
+    resize(width, height, dpr) {
+      if (!rigRef.current) {
+        return;
+      }
+      resizeDroneRig(rigRef.current, width, height, dpr);
+    },
+    renderFrame() {
+      if (!rigRef.current || !stateRef.current) {
+        return;
+      }
+      renderDroneState(rigRef.current, stateRef.current);
+    }
+  }));
+  (0, import_react.useEffect)(() => {
+    if (!canvasRef.current) {
+      return;
+    }
+    const rig = createDroneRig(canvasRef.current);
+    rigRef.current = rig;
+    return () => {
+      if (!rigRef.current) {
+        return;
+      }
+      disposeDroneRig(rigRef.current);
+      rigRef.current = null;
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("canvas", { ref: canvasRef, className });
+});
+
+// components/NarrationRevolver.tsx
+var import_react2 = require("react");
+var import_react3 = require("motion/react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var NARRATIONS = [
+  {
+    text: "K\u1EF7 nguy\xEAn m\u1EDBi c\u1EE7a v\u1EADn t\u1EA3i th\xF4ng minh l\u1EA5y UAV l\xE0m c\u1ED1t l\xF5i",
+    tag: "h1",
+    className: "zipline-narration-intro"
+  },
+  {
+    text: "\u0110\u1EB7t h\xE0ng ti\u1EC7n l\u1EE3i tr\xEAn \u1EE9ng d\u1EE5ng",
+    tag: "h2",
+    className: "zipline-narration-order"
+  },
+  {
+    text: "Giao h\xE0ng si\xEAu t\u1ED1c trong v\xE0i ph\xFAt",
+    tag: "h2",
+    className: "zipline-narration-order"
+  },
+  {
+    text: "Nh\u1EADn h\xE0ng trong v\xE0i gi\xE2y",
+    tag: "h2",
+    className: "zipline-narration-delivers"
+  },
+  {
+    text: "Kh\xF4ng c\u1EA7n ch\u1EDD. UAV giao ngay. K\u1EBFt n\u1ED1i tr\u0103m tri\u1EC7u kh\xE1ch h\xE0ng. Tham gia LAE Sandbox ngay",
+    tag: "h3",
+    className: "zipline-narration-cta"
+  }
+];
+var NarrationRevolver = (0, import_react2.forwardRef)(function NarrationRevolver2(_, ref) {
+  const activeHeading = (0, import_react3.useMotionValue)(0);
+  const springHeading = (0, import_react3.useSpring)(activeHeading, {
+    stiffness: 100,
+    damping: 25,
+    restDelta: 1e-3
+  });
+  (0, import_react2.useImperativeHandle)(ref, () => ({
+    setActiveHeading(value) {
+      activeHeading.set(value);
+    }
+  }));
+  const stripY = (0, import_react3.useTransform)(springHeading, (v) => `${-v * 100}%`);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "zipline-narration-viewport", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.motion.div, { className: "zipline-narration-strip", style: { y: stripY }, children: NARRATIONS.map((item, index) => {
+    const Tag = item.tag;
+    const slotRotateX = (0, import_react3.useTransform)(
+      springHeading,
+      (v) => (v - index) * 18
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react3.motion.div,
+      {
+        className: `zipline-narration-slot ${item.className}`,
+        style: {
+          rotateX: slotRotateX,
+          transformOrigin: "left top -300px",
+          backfaceVisibility: "hidden"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Tag, { children: item.text })
+      },
+      index
+    );
+  }) }) });
+});
+
+// components/PhoneUI.tsx
+var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PhoneUI = (0, import_react4.forwardRef)(
+  function PhoneUI2({ screenRef }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        ref,
+        className: "phone-container",
+        style: {
+          width: "280px",
+          perspective: "1000px",
+          position: "relative"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "svg",
+            {
+              viewBox: "0 0 280 560",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              style: { width: "100%", height: "auto", display: "block" },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("defs", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("clipPath", { id: "screenClip", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "12", y: "12", width: "256", height: "536", rx: "28" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: "phoneBg", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0%", stopColor: "#f7f9fc" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "100%", stopColor: "#edf1f7" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("filter", { id: "phoneShadow", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("feDropShadow", { dx: "0", dy: "8", stdDeviation: "16", floodOpacity: "0.15" }) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "rect",
+                  {
+                    x: "2",
+                    y: "2",
+                    width: "276",
+                    height: "556",
+                    rx: "36",
+                    fill: "#1a1a1a",
+                    filter: "url(#phoneShadow)"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "rect",
+                  {
+                    x: "6",
+                    y: "6",
+                    width: "268",
+                    height: "548",
+                    rx: "33",
+                    fill: "#2a2a2a"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { clipPath: "url(#screenClip)", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "12", y: "12", width: "256", height: "536", fill: "url(#phoneBg)" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "92", y: "22", width: "96", height: "24", rx: "12", fill: "#1a1a1a" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "140", cy: "34", r: "5", fill: "#333" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "text",
+                    {
+                      x: "140",
+                      y: "72",
+                      textAnchor: "middle",
+                      fill: "#1a6bff",
+                      fontSize: "11",
+                      fontWeight: "700",
+                      fontFamily: "system-ui, sans-serif",
+                      children: "LAE Sandbox"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "32", y: "90", width: "216", height: "100", rx: "16", fill: "#ffffff" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "rect",
+                    {
+                      x: "32",
+                      y: "90",
+                      width: "216",
+                      height: "100",
+                      rx: "16",
+                      fill: "none",
+                      stroke: "#e5e7eb",
+                      strokeWidth: "1"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "60", cy: "120", r: "16", fill: "#eef4ff" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "text",
+                    {
+                      x: "60",
+                      y: "124",
+                      textAnchor: "middle",
+                      fill: "#1a6bff",
+                      fontSize: "14",
+                      children: "\u{1F4E6}"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "text",
+                    {
+                      x: "88",
+                      y: "118",
+                      fill: "#111",
+                      fontSize: "12",
+                      fontWeight: "600",
+                      fontFamily: "system-ui, sans-serif",
+                      children: "\u0110\u01A1n h\xE0ng h\u1ECFa t\u1ED1c"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "text",
+                    {
+                      x: "88",
+                      y: "136",
+                      fill: "#6b7280",
+                      fontSize: "10",
+                      fontFamily: "system-ui, sans-serif",
+                      children: "\u0110\u1EBFn trong ~4 ph\xFAt"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "88", y: "152", width: "140", height: "6", rx: "3", fill: "#e5e7eb" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "88", y: "152", width: "95", height: "6", rx: "3", fill: "#1a6bff" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "32", y: "210", width: "216", height: "180", rx: "16", fill: "#e8f0fe" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "140", cy: "280", r: "28", fill: "#ffffff", stroke: "#1a6bff", strokeWidth: "2" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "text",
+                    {
+                      x: "140",
+                      y: "276",
+                      textAnchor: "middle",
+                      fill: "#1a6bff",
+                      fontSize: "16",
+                      fontWeight: "700",
+                      fontFamily: "system-ui, sans-serif",
+                      children: "4"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "text",
+                    {
+                      x: "140",
+                      y: "292",
+                      textAnchor: "middle",
+                      fill: "#1a6bff",
+                      fontSize: "8",
+                      fontFamily: "system-ui, sans-serif",
+                      children: "MIN"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "100", cy: "340", r: "4", fill: "#1a6bff" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "140", cy: "340", r: "4", fill: "#1a6bff", opacity: "0.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "180", cy: "340", r: "4", fill: "#d1d5db" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "text",
+                    {
+                      x: "140",
+                      y: "370",
+                      textAnchor: "middle",
+                      fill: "#9ca3af",
+                      fontSize: "9",
+                      fontFamily: "system-ui, sans-serif",
+                      children: "Theo d\xF5i tr\u1EF1c ti\u1EBFp"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "32", y: "420", width: "216", height: "44", rx: "22", fill: "#1a6bff" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "text",
+                    {
+                      x: "140",
+                      y: "447",
+                      textAnchor: "middle",
+                      fill: "#ffffff",
+                      fontSize: "13",
+                      fontWeight: "600",
+                      fontFamily: "system-ui, sans-serif",
+                      children: "Theo d\xF5i \u0111\u01A1n h\xE0ng"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              ref: screenRef,
+              style: {
+                position: "absolute",
+                top: "12px",
+                left: "12px",
+                right: "12px",
+                bottom: "12px",
+                pointerEvents: "none"
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var PhoneUI_default = PhoneUI;
+
+// lib/animation/timeline.ts
+var import_gsap = __toESM(require("gsap"), 1);
+var import_ScrollTrigger = require("gsap/ScrollTrigger");
+import_gsap.default.registerPlugin(import_ScrollTrigger.ScrollTrigger);
+function createMasterTimeline(root, state, onUpdate) {
+  const timeline = import_gsap.default.timeline({
+    defaults: { ease: "none" },
+    onUpdate,
+    scrollTrigger: {
+      trigger: root,
+      start: "top top",
+      end: "+=8000",
+      pin: true,
+      scrub: true,
+      anticipatePin: 1,
+      invalidateOnRefresh: true
+    }
+  });
+  timeline.addLabel("intro", 0).set(state, {
+    introDroneT: 1,
+    phoneOpacity: 0,
+    phoneMaskOpen: 0,
+    phoneTilt: 0,
+    phoneScale: 1,
+    portalBloom: 0,
+    uiPulse: 0,
+    emergeT: 0,
+    flightT: 0,
+    flight2T: 0,
+    pickupT: 0,
+    flightDepth: 0,
+    bank: 0,
+    hover: 0,
+    drop: 0,
+    release: 0,
+    reel: 0,
+    depart: 0,
+    settle: 0,
+    cloudFarShift: 0,
+    cloudNearShift: 0,
+    groundRise: 0,
+    pickupKioskReveal: 0,
+    kioskReveal: 0,
+    activeHeading: 0
+  }).addLabel("order_intro", 0.5).to(state, { introDroneT: 0, duration: 0.55 }, "order_intro").to(state, { phoneOpacity: 1, duration: 0.5 }, "order_intro").to(state, { activeHeading: 1, duration: 0.55, ease: "power2.inOut" }, "order_intro").addLabel("order_confirmed", 1.15).to(state, { uiPulse: 1, duration: 0.28 }, "order_confirmed").to(state, { phoneMaskOpen: 0.3, duration: 0.45 }, "order_confirmed+=0.05").to(state, { phoneTilt: -6, phoneScale: 0.95, duration: 0.48 }, "order_confirmed+=0.08").addLabel("drone_launch", 1.7).to(state, { portalBloom: 1, duration: 0.32 }, "drone_launch").to(state, { emergeT: 1, duration: 0.75 }, "drone_launch+=0.04").to(state, { phoneMaskOpen: 1, duration: 0.7 }, "drone_launch+=0.08").to(state, { phoneOpacity: 0.35, duration: 0.55 }, "drone_launch+=0.1").to(state, { activeHeading: 2, duration: 0.5 }, "drone_launch+=0.22").addLabel("flight", 2.65).to(state, { flightT: 1, duration: 2 }, "flight").to(state, { flightDepth: 1, duration: 1.8 }, "flight+=0.08").to(state, { bank: 1.15, duration: 0.5 }, "flight").to(state, { bank: -0.88, duration: 0.5 }, "flight+=0.5").to(state, { bank: 0.25, duration: 0.6 }, "flight+=1.1").to(state, { cloudFarShift: 1, duration: 2 }, "flight").to(state, { cloudNearShift: 1, duration: 2 }, "flight+=0.08").addLabel("pickup", 4.7).to(state, { pickupKioskReveal: 1, duration: 0.4 }, "pickup").to(state, { pickupT: 1, duration: 0.22 }, "pickup+=0.45").addLabel("flight_to_delivery", 5.42).to(state, { flight2T: 1, duration: 2.2 }, "flight_to_delivery").addLabel("package_drop", 6.8).to(state, { kioskReveal: 1, duration: 0.52 }, "package_drop").to(state, { hover: 1, duration: 0.45 }, "package_drop").to(state, { activeHeading: 3, duration: 0.45, ease: "power2.inOut" }, "package_drop+=0.06").to(state, { drop: 1, duration: 1.25 }, "package_drop+=0.12").to(state, { groundRise: 1, duration: 1.25 }, "package_drop+=0.12").to(state, { settle: 1, duration: 0.3 }, "package_drop+=1.28").to(state, { release: 1, duration: 0.08 }, "package_drop+=1.3").to(state, { reel: 1, duration: 0.01 }, "package_drop+=1.3").to(state, { depart: 1, duration: 2 }, "package_drop+=1.58").addLabel("exit", 8.5).to(state, { activeHeading: 4, duration: 0.5, ease: "power2.inOut" }, "exit").to(state, { phoneOpacity: 0, portalBloom: 0, duration: 0.5 }, "exit").to(state, { exit: 1, duration: 0.65 }, "exit+=0.08");
+  return timeline;
+}
+
+// lib/animation/types.ts
+function createInitialNarrativeState() {
+  return {
+    introDroneT: 1,
+    phoneOpacity: 0,
+    phoneMaskOpen: 0,
+    phoneTilt: 0,
+    phoneScale: 1,
+    portalBloom: 0,
+    uiPulse: 0,
+    emergeT: 0,
+    flightT: 0,
+    flight2T: 0,
+    pickupT: 0,
+    flightDepth: 0,
+    bank: 0,
+    hover: 0,
+    drop: 0,
+    release: 0,
+    reel: 0,
+    depart: 0,
+    settle: 0,
+    cloudFarShift: 0,
+    cloudNearShift: 0,
+    groundRise: 0,
+    pickupKioskReveal: 0,
+    kioskReveal: 0,
+    activeHeading: 0,
+    exit: 0
+  };
+}
+
+// lib/hooks/useReducedMotion.ts
+var import_react5 = require("react");
+function useReducedMotion() {
+  const [prefersReduced, setPrefersReduced] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReduced(media.matches);
+    const handler = (e) => setPrefersReduced(e.matches);
+    media.addEventListener("change", handler);
+    return () => media.removeEventListener("change", handler);
+  }, []);
+  return prefersReduced;
+}
+
+// components/ScrollScene.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ScrollScene() {
+  const rootRef = (0, import_react6.useRef)(null);
+  const droneRef = (0, import_react6.useRef)(null);
+  const narrationRef = (0, import_react6.useRef)(null);
+  const reducedMotion = useReducedMotion();
+  const [mobileViewport, setMobileViewport] = (0, import_react6.useState)(false);
+  const stateRef = (0, import_react6.useRef)(createInitialNarrativeState());
+  (0, import_react6.useEffect)(() => {
+    const media = window.matchMedia("(max-width: 900px)");
+    const update = () => setMobileViewport(media.matches);
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
+  (0, import_react6.useLayoutEffect)(() => {
+    if (!rootRef.current) {
+      return;
+    }
+    const root = rootRef.current;
+    const webglDisabled = reducedMotion || mobileViewport;
+    const state = stateRef.current;
+    const updateLayers = () => {
+      var _a, _b, _c;
+      root.style.setProperty("--phone-opacity", state.phoneOpacity.toFixed(4));
+      root.style.setProperty("--phone-mask-open", state.phoneMaskOpen.toFixed(4));
+      root.style.setProperty("--phone-tilt", `${state.phoneTilt.toFixed(3)}deg`);
+      root.style.setProperty("--phone-scale", state.phoneScale.toFixed(4));
+      root.style.setProperty("--portal-bloom", state.portalBloom.toFixed(4));
+      root.style.setProperty("--ui-pulse", state.uiPulse.toFixed(4));
+      root.style.setProperty("--emerge", state.emergeT.toFixed(4));
+      root.style.setProperty("--flight-progress", state.flightT.toFixed(4));
+      root.style.setProperty("--flight-depth", state.flightDepth.toFixed(4));
+      root.style.setProperty("--hover", state.hover.toFixed(4));
+      root.style.setProperty("--drop", state.drop.toFixed(4));
+      root.style.setProperty("--cloud-far", state.cloudFarShift.toFixed(4));
+      root.style.setProperty("--cloud-near", state.cloudNearShift.toFixed(4));
+      root.style.setProperty("--ground-rise", state.groundRise.toFixed(4));
+      root.style.setProperty("--kiosk-reveal", state.kioskReveal.toFixed(4));
+      root.style.setProperty("--active-heading", state.activeHeading.toFixed(4));
+      (_a = narrationRef.current) == null ? void 0 : _a.setActiveHeading(state.activeHeading);
+      root.style.setProperty("--exit", state.exit.toFixed(4));
+      if (!webglDisabled) {
+        const width = root.clientWidth;
+        const height = root.clientHeight;
+        (_b = droneRef.current) == null ? void 0 : _b.resize(width, height, window.devicePixelRatio || 1);
+        (_c = droneRef.current) == null ? void 0 : _c.setState(state);
+      }
+    };
+    const timeline = createMasterTimeline(root, state, updateLayers);
+    const renderFromTicker = () => {
+      var _a;
+      if (!webglDisabled) {
+        (_a = droneRef.current) == null ? void 0 : _a.renderFrame();
+      }
+    };
+    import_gsap2.default.ticker.add(renderFromTicker);
+    updateLayers();
+    const onResize = () => {
+      var _a;
+      updateLayers();
+      (_a = timeline.scrollTrigger) == null ? void 0 : _a.refresh();
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      var _a;
+      window.removeEventListener("resize", onResize);
+      import_gsap2.default.ticker.remove(renderFromTicker);
+      (_a = timeline.scrollTrigger) == null ? void 0 : _a.kill();
+      timeline.kill();
+    };
+  }, [mobileViewport, reducedMotion]);
+  const showWebgl = !reducedMotion && !mobileViewport;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { ref: rootRef, className: "zipline-scroll-scene", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "zipline-dom-layer", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NarrationRevolver, { ref: narrationRef }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "svg",
+      {
+        className: "zipline-svg-layer",
+        viewBox: "0 0 1440 900",
+        preserveAspectRatio: "xMidYMid slice",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "zip-sky", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "0%", stopColor: "#a9d4ff" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "52%", stopColor: "#d5ebff" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "100%", stopColor: "#f5f9ff" })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { className: "zipline-sky", x: "0", y: "0", width: "1440", height: "900", fill: "url(#zip-sky)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { className: "zipline-cloud-far", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ellipse", { cx: "1100", cy: "225", rx: "360", ry: "128", fill: "rgba(255,255,255,0.35)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ellipse", { cx: "540", cy: "272", rx: "300", ry: "106", fill: "rgba(255,255,255,0.3)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ellipse", { cx: "880", cy: "412", rx: "460", ry: "132", fill: "rgba(255,255,255,0.28)" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { className: "zipline-cloud-near", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ellipse", { cx: "360", cy: "610", rx: "350", ry: "110", fill: "rgba(255,255,255,0.45)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ellipse", { cx: "920", cy: "620", rx: "320", ry: "92", fill: "rgba(255,255,255,0.4)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ellipse", { cx: "1220", cy: "540", rx: "230", ry: "74", fill: "rgba(255,255,255,0.34)" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { className: "zipline-ground", x: "0", y: "705", width: "1440", height: "240" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "zipline-phone-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PhoneUI_default, {}) }),
+    showWebgl ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DroneScene, { ref: droneRef, className: "zipline-webgl-layer" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "zipline-mobile-fallback", "aria-hidden": showWebgl, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "zipline-fallback-drone" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "zipline-fallback-package" })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ScrollScene
+});
+//# sourceMappingURL=index.cjs.map