motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-ERVE5RSN.js

@@ -0,0 +1,793 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/spatial-gallery/spatial-gallery.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion,
+  useInView,
+  useReducedMotion
+} from "motion/react";
+import gsap from "gsap";
+import { jsx, jsxs } from "react/jsx-runtime";
+var u = (id) => `https://images.unsplash.com/${id}?w=720&q=70&auto=format&fit=crop`;
+var DEFAULT_ITEMS = [
+  {
+    src: u("photo-1501785888041-af3ef285b470"),
+    alt: "A lake under mountains at dawn"
+  },
+  { src: u("photo-1487014679447-9f8336841d58"), alt: "A white curved facade" },
+  {
+    src: u("photo-1506905925346-21bda4d32df4"),
+    alt: "Peaks above a sea of cloud"
+  },
+  {
+    src: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
+    type: "video",
+    poster: u("photo-1490750967868-88aa4486c946"),
+    alt: "A flower opening, video"
+  },
+  {
+    src: u("photo-1517694712202-14dd9538aa97"),
+    alt: "A laptop on a wooden desk"
+  },
+  {
+    src: u("photo-1518837695005-2083093ee35b"),
+    alt: "A wave breaking from below"
+  },
+  {
+    src: u("photo-1486406146926-c627a92ad1ab"),
+    alt: "Glass towers from the street"
+  },
+  { src: u("photo-1441974231531-c6227db76b6e"), alt: "Sun through a forest" },
+  {
+    src: u("photo-1460925895917-afdab827c52f"),
+    alt: "Charts on a laptop screen"
+  },
+  {
+    src: u("photo-1519681393784-d120267933ba"),
+    alt: "Stars over snowy mountains"
+  },
+  { src: u("photo-1507525428034-b723cf961d3e"), alt: "A quiet beach at noon" },
+  {
+    src: u("photo-1534528741775-53994a69daeb"),
+    alt: "A portrait in soft light"
+  },
+  {
+    src: u("photo-1469474968028-56623f02e42e"),
+    alt: "A valley in morning sun"
+  },
+  { src: u("photo-1505761671935-60b3a7427bad"), alt: "A bridge in the fog" }
+];
+var GLIDE = [0.22, 1, 0.36, 1];
+var FOV = 55 * Math.PI / 180;
+var NEAR = 0.4;
+var THRESHOLD = 6;
+var VERTEX = `attribute vec2 a;
+uniform mat4 uPV;uniform vec3 uPos;uniform vec3 uRight;uniform vec3 uUp;uniform vec2 uSize;
+varying vec2 vUv;
+void main(){vUv=a+.5;vec3 w=uPos+uRight*(a.x*uSize.x)+uUp*(a.y*uSize.y);gl_Position=uPV*vec4(w,1.);}`;
+var FRAGMENT = `precision highp float;
+varying vec2 vUv;
+uniform sampler2D uTex;uniform float uReady;uniform vec2 uCrop;uniform float uAspect;uniform float uRadius;
+uniform float uAA;uniform float uAlpha;uniform float uFog;uniform vec3 uBlank;
+void main(){
+vec2 p=(vUv-.5)*vec2(uAspect,1.);vec2 b=vec2(uAspect,1.)*.5;float r=min(uRadius,.5*min(uAspect,1.));
+vec2 q=abs(p)-b+r;float sd=length(max(q,0.))+min(max(q.x,q.y),0.)-r;
+float m=1.-smoothstep(-uAA,uAA,sd);
+vec2 uv=(vUv-.5)*uCrop+.5;uv.y=1.-uv.y;
+vec3 c=mix(uBlank,texture2D(uTex,uv).rgb,uReady);
+float al=m*uAlpha*(1.-uFog);gl_FragColor=vec4(c*al,al);}`;
+var mul = (a, b) => {
+  const o = new Float32Array(16);
+  for (let c = 0; c < 4; c++)
+    for (let r = 0; r < 4; r++) {
+      let s = 0;
+      for (let k = 0; k < 4; k++) s += a[k * 4 + r] * b[c * 4 + k];
+      o[c * 4 + r] = s;
+    }
+  return o;
+};
+var perspective = (aspect, near, far) => {
+  const f = 1 / Math.tan(FOV / 2);
+  return new Float32Array([
+    f / aspect,
+    0,
+    0,
+    0,
+    0,
+    f,
+    0,
+    0,
+    0,
+    0,
+    (far + near) / (near - far),
+    -1,
+    0,
+    0,
+    2 * far * near / (near - far),
+    0
+  ]);
+};
+var rotX = (a) => {
+  const c = Math.cos(a);
+  const s = Math.sin(a);
+  return new Float32Array([1, 0, 0, 0, 0, c, s, 0, 0, -s, c, 0, 0, 0, 0, 1]);
+};
+var rotY = (a) => {
+  const c = Math.cos(a);
+  const s = Math.sin(a);
+  return new Float32Array([c, 0, -s, 0, 0, 1, 0, 0, s, 0, c, 0, 0, 0, 0, 1]);
+};
+var translate = (x, y, z) => new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1]);
+var hash = (i) => {
+  const x = Math.sin(i * 127.1 + 311.7) * 43758.5453;
+  return x - Math.floor(x);
+};
+var norm = (v) => {
+  const l = Math.hypot(v[0], v[1], v[2]) || 1;
+  return [v[0] / l, v[1] / l, v[2] / l];
+};
+var cross = (a, b) => [
+  a[1] * b[2] - a[2] * b[1],
+  a[2] * b[0] - a[0] * b[2],
+  a[0] * b[1] - a[1] * b[0]
+];
+var smooth = (e0, e1, x) => {
+  const t = Math.max(0, Math.min(1, (x - e0) / (e1 - e0)));
+  return t * t * (3 - 2 * t);
+};
+var SpatialGallery = React.forwardRef(function SpatialGallery2({
+  items = DEFAULT_ITEMS,
+  count = 124,
+  radius = 4.1,
+  core = 0.8,
+  spacing = 0.2,
+  size = 0.95,
+  facing = "funnel",
+  funnel = 0.78,
+  spiral = true,
+  twist = 0.3,
+  autoMove = true,
+  speed = 0.8,
+  scrollSpeed = 2.1,
+  captureScroll = true,
+  followPageScroll = true,
+  drag = true,
+  parallax = 0.5,
+  corner = 0.22,
+  fog = 0.8,
+  roll = 0,
+  caption = true,
+  linkTarget = "_self",
+  children,
+  className
+}, ref) {
+  const still = !!useReducedMotion();
+  const root = React.useRef(null);
+  React.useImperativeHandle(ref, () => root.current);
+  const canvas = React.useRef(null);
+  const visible = useInView(root, { amount: 0.05 });
+  const [epoch, setEpoch] = React.useState(0);
+  const [hovered, setHovered] = React.useState(null);
+  const [moved, setMoved] = React.useState(false);
+  const params = React.useRef({
+    count,
+    radius,
+    core,
+    spacing,
+    size,
+    facing,
+    funnel,
+    spiral,
+    twist,
+    autoMove,
+    speed,
+    scrollSpeed,
+    captureScroll,
+    followPageScroll,
+    drag,
+    parallax,
+    corner,
+    fog,
+    roll,
+    linkTarget,
+    still
+  });
+  params.current = {
+    count,
+    radius,
+    core,
+    spacing,
+    size,
+    facing,
+    funnel,
+    spiral,
+    twist,
+    autoMove,
+    speed,
+    scrollSpeed,
+    captureScroll,
+    followPageScroll,
+    drag,
+    parallax,
+    corner,
+    fog,
+    roll,
+    linkTarget,
+    still
+  };
+  const motionState = React.useRef({ T: 0, V: 0 });
+  const pointer = React.useRef({
+    x: 0,
+    y: 0,
+    px: 0,
+    py: 0,
+    inside: false,
+    down: false,
+    sx: 0,
+    sy: 0,
+    dragging: false,
+    lastY: 0,
+    lastAt: 0,
+    dragV: 0
+  });
+  const pick = React.useRef(null);
+  const itemsRef = React.useRef(items);
+  itemsRef.current = items;
+  const frameRef = React.useRef(null);
+  const itemsKey = items.map((i) => `${i.type ?? "image"}:${i.src}:${i.poster ?? ""}`).join("|");
+  const push = React.useCallback((units) => {
+    const m = motionState.current;
+    if (params.current.still) m.T += units * 0.25;
+    else m.V += units;
+    setMoved(true);
+  }, []);
+  React.useEffect(() => {
+    const el = root.current;
+    if (!el) return;
+    let pending = 0;
+    let wheelAt = 0;
+    let scrolledAt = 0;
+    let timer = 0;
+    const onWheel = (e) => {
+      const k = 6e-3 * params.current.scrollSpeed;
+      const d = (Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX) * (e.deltaMode === 1 ? 16 : 1);
+      if (params.current.captureScroll) {
+        e.preventDefault();
+        push(d * k);
+        return;
+      }
+      pending += d * k;
+      wheelAt = performance.now();
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        if (scrolledAt < wheelAt) push(pending);
+        pending = 0;
+      }, 60);
+    };
+    const last = /* @__PURE__ */ new WeakMap();
+    const onScroll = (e) => {
+      const t = e.target;
+      const top = t === document || t === document.documentElement ? window.scrollY : t.scrollTop ?? 0;
+      const key = t === document.documentElement ? document : t;
+      const prev = last.get(key);
+      last.set(key, top);
+      scrolledAt = performance.now();
+      if (prev === void 0 || !params.current.followPageScroll) return;
+      if (key !== document && !t.contains?.(el)) return;
+      push((top - prev) * 6e-3 * params.current.scrollSpeed);
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    window.addEventListener("scroll", onScroll, {
+      passive: true,
+      capture: true
+    });
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+      window.removeEventListener("scroll", onScroll, { capture: true });
+      window.clearTimeout(timer);
+    };
+  }, [push]);
+  React.useEffect(() => {
+    const el = canvas.current;
+    const host = root.current;
+    if (!el || !host) return;
+    const gl = el.getContext("webgl", {
+      antialias: true,
+      premultipliedAlpha: true,
+      alpha: true
+    });
+    if (!gl) return;
+    let lost = false;
+    const onLost = (e) => {
+      e.preventDefault();
+      lost = true;
+    };
+    const onRestored = () => setEpoch((n) => n + 1);
+    el.addEventListener("webglcontextlost", onLost);
+    el.addEventListener("webglcontextrestored", onRestored);
+    const compile = (type, src) => {
+      const s = gl.createShader(type);
+      gl.shaderSource(s, src);
+      gl.compileShader(s);
+      return s;
+    };
+    const prog = gl.createProgram();
+    gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERTEX));
+    gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAGMENT));
+    gl.linkProgram(prog);
+    gl.useProgram(prog);
+    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5]),
+      gl.STATIC_DRAW
+    );
+    const loc = gl.getAttribLocation(prog, "a");
+    gl.enableVertexAttribArray(loc);
+    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+    const U = Object.fromEntries(
+      [
+        "uPV",
+        "uPos",
+        "uRight",
+        "uUp",
+        "uSize",
+        "uTex",
+        "uReady",
+        "uCrop",
+        "uAspect",
+        "uRadius",
+        "uAA",
+        "uAlpha",
+        "uFog",
+        "uBlank"
+      ].map((n) => [n, gl.getUniformLocation(prog, n)])
+    );
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.uniform1i(U.uTex, 0);
+    const makeTex = () => {
+      const tex = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, tex);
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.RGBA,
+        1,
+        1,
+        0,
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        new Uint8Array([236, 236, 234, 255])
+      );
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      return tex;
+    };
+    const upload = (t, src, w, h) => {
+      gl.bindTexture(gl.TEXTURE_2D, t.tex);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, src);
+      t.ready = true;
+      t.aspect = w / h;
+    };
+    const list = itemsRef.current;
+    const texes = list.map((it) => {
+      const t = { tex: makeTex(), ready: false, aspect: 1.4, shown: 0 };
+      const first = it.type === "video" ? it.poster : it.src;
+      if (first) {
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        img.decoding = "async";
+        img.onload = () => !lost && upload(t, img, img.naturalWidth, img.naturalHeight);
+        img.src = first;
+      }
+      return t;
+    });
+    const video = document.createElement("video");
+    video.muted = true;
+    video.loop = true;
+    video.playsInline = true;
+    video.crossOrigin = "anonymous";
+    video.preload = "none";
+    const live = { tex: makeTex(), ready: false, aspect: 1.4, shown: 0 };
+    let fresh = false;
+    let lastTime = -1;
+    const hasRvfc = typeof video.requestVideoFrameCallback === "function";
+    const onVideoFrame = () => {
+      fresh = true;
+      video.requestVideoFrameCallback(onVideoFrame);
+    };
+    if (hasRvfc) video.requestVideoFrameCallback(onVideoFrame);
+    let playing = null;
+    let release = 0;
+    const playVideo = (i) => {
+      const it = i === null ? null : list[i];
+      if (it?.type === "video") {
+        window.clearTimeout(release);
+        if (playing !== i) {
+          playing = i;
+          live.ready = false;
+          fresh = false;
+          lastTime = -1;
+          video.src = it.src;
+          void video.play().catch(() => {
+          });
+        }
+      } else if (playing !== null) {
+        window.clearTimeout(release);
+        release = window.setTimeout(() => {
+          video.pause();
+          video.removeAttribute("src");
+          video.load();
+          playing = null;
+          live.ready = false;
+        }, 400);
+      }
+    };
+    const hover = new Float32Array(160);
+    let picked = null;
+    let videoMix = 0;
+    let videoPlane = null;
+    const frame = (time, deltaMs) => {
+      if (lost) return;
+      const p = params.current;
+      const dt = Math.min(0.05, deltaMs / 1e3);
+      const m = motionState.current;
+      const ptr = pointer.current;
+      if (!p.still) {
+        m.T += ((p.autoMove ? p.speed * 1.6 : 0) + m.V) * dt;
+        m.V *= Math.exp(-dt * 2.4);
+      }
+      const lean = p.still ? 0 : p.parallax;
+      const k = 1 - Math.exp(-dt * 4);
+      ptr.px += ((ptr.inside ? ptr.x : 0) * lean - ptr.px) * k;
+      ptr.py += ((ptr.inside ? ptr.y : 0) * lean - ptr.py) * k;
+      const dpr = Math.min(2, window.devicePixelRatio || 1);
+      const w = Math.max(1, Math.round(el.clientWidth * dpr));
+      const h = Math.max(1, Math.round(el.clientHeight * dpr));
+      if (el.width !== w || el.height !== h) {
+        el.width = w;
+        el.height = h;
+      }
+      const aspect = w / h;
+      const n = Math.max(8, Math.min(160, Math.round(p.count)));
+      const span = n * p.spacing;
+      const proj = perspective(aspect, 0.05, span + 10);
+      const view = mul(
+        mul(rotX(ptr.py * 0.07), rotY(ptr.px * 0.1)),
+        translate(-ptr.px * 0.8, ptr.py * 0.55, 0)
+      );
+      const pv = mul(proj, view);
+      gl.viewport(0, 0, w, h);
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      gl.uniformMatrix4fv(U.uPV, false, pv);
+      gl.uniform3f(U.uBlank, 0.925, 0.925, 0.918);
+      const rx = p.radius * Math.max(1, Math.min(1.6, aspect * 0.75));
+      const ry = rx;
+      const planes = [];
+      for (let i = 0; i < n; i++) {
+        let d = (i * p.spacing - m.T) % span;
+        if (d < 0) d += span;
+        const item2 = i % list.length;
+        const theta = i * 2.39996 + (p.spiral ? p.twist * (d * 0.75 + m.T * 0.18) : 0);
+        const r = p.core + (1 - p.core) * hash(i);
+        const c = Math.cos(theta);
+        const s = Math.sin(theta);
+        const pos = [c * rx * r, s * ry * r, -(NEAR + d)];
+        let right = [1, 0, 0];
+        let up = [0, 1, 0];
+        if (p.facing === "funnel" && p.funnel > 0) {
+          const b = p.funnel * 0.85;
+          const inward = norm([-c * ry, -s * rx, 0]);
+          const tangent = norm([-s * rx, c * ry, 0]);
+          const nrm = norm([inward[0] * b, inward[1] * b, 1 - b]);
+          const rt = norm([1 - b + tangent[0] * b, tangent[1] * b, 0]);
+          up = norm(cross(nrm, rt));
+          right = norm(cross(up, nrm));
+        }
+        if (p.roll > 0) {
+          const phi = (hash(i + 17) - 0.5) * 1.8 * p.roll;
+          const cr = Math.cos(phi);
+          const sr = Math.sin(phi);
+          const r2 = [
+            right[0] * cr + up[0] * sr,
+            right[1] * cr + up[1] * sr,
+            right[2] * cr + up[2] * sr
+          ];
+          up = [
+            up[0] * cr - right[0] * sr,
+            up[1] * cr - right[1] * sr,
+            up[2] * cr - right[2] * sr
+          ];
+          right = r2;
+        }
+        const tex = texes[item2];
+        const a = Math.max(0.7, Math.min(1.6, tex.aspect));
+        const grow = 1 + 0.07 * hover[i];
+        const sw = p.size * Math.sqrt(a) * grow;
+        const sh = p.size / Math.sqrt(a) * grow;
+        const alpha = smooth(span, span * 0.82, d) * smooth(0, 1, d);
+        if (alpha < 5e-3) continue;
+        planes.push({
+          i,
+          d,
+          pos,
+          right,
+          up,
+          sw,
+          sh,
+          tex,
+          item: item2,
+          alpha,
+          fogv: p.fog * smooth(span * 0.2, span, d)
+        });
+      }
+      planes.sort((a, b) => b.d - a.d);
+      const project = (v) => {
+        const x = pv[0] * v[0] + pv[4] * v[1] + pv[8] * v[2] + pv[12];
+        const y = pv[1] * v[0] + pv[5] * v[1] + pv[9] * v[2] + pv[13];
+        const wv = pv[3] * v[0] + pv[7] * v[1] + pv[11] * v[2] + pv[15];
+        return [
+          (x / wv * 0.5 + 0.5) * el.clientWidth,
+          (1 - (y / wv * 0.5 + 0.5)) * el.clientHeight,
+          wv
+        ];
+      };
+      const corner2 = (pl, sx, sy) => project([
+        pl.pos[0] + pl.right[0] * sx * pl.sw + pl.up[0] * sy * pl.sh,
+        pl.pos[1] + pl.right[1] * sx * pl.sw + pl.up[1] * sy * pl.sh,
+        pl.pos[2] + pl.right[2] * sx * pl.sw + pl.up[2] * sy * pl.sh
+      ]);
+      let hit = null;
+      const mx = (ptr.x + 1) / 2 * el.clientWidth;
+      const my = (1 - ptr.y) / 2 * el.clientHeight;
+      for (const pl of planes) {
+        const q = [
+          corner2(pl, -0.5, -0.5),
+          corner2(pl, 0.5, -0.5),
+          corner2(pl, 0.5, 0.5),
+          corner2(pl, -0.5, 0.5)
+        ];
+        pl.px = Math.abs(q[3][1] - q[0][1]);
+        if (!ptr.inside || ptr.dragging || q.some((c) => c[2] <= 0) || pl.alpha < 0.5)
+          continue;
+        let sign = 0;
+        let inside = true;
+        for (let e = 0; e < 4; e++) {
+          const a = q[e];
+          const b = q[(e + 1) % 4];
+          const cr = (b[0] - a[0]) * (my - a[1]) - (b[1] - a[1]) * (mx - a[0]);
+          const sgn = Math.sign(cr);
+          if (sgn === 0) continue;
+          if (sign === 0) sign = sgn;
+          else if (sgn !== sign) {
+            inside = false;
+            break;
+          }
+        }
+        if (inside) hit = pl.i;
+      }
+      for (let i = 0; i < n; i++)
+        hover[i] += ((i === hit ? 1 : 0) - hover[i]) * (p.still ? 1 : 1 - Math.exp(-dt * 10));
+      if (hit !== picked) {
+        picked = hit;
+        const item2 = hit === null ? null : hit % list.length;
+        pick.current = item2;
+        setHovered(item2);
+        playVideo(item2);
+        host.style.cursor = item2 !== null && list[item2]?.href ? "pointer" : p.drag ? "grab" : "";
+      }
+      if (playing !== null && video.readyState >= 2 && video.videoWidth) {
+        const changed = hasRvfc ? fresh : video.currentTime !== lastTime;
+        if (changed || !live.ready) {
+          upload(live, video, video.videoWidth, video.videoHeight);
+          fresh = false;
+          lastTime = video.currentTime;
+        }
+      }
+      const wantVideo = picked !== null && playing === picked % list.length && live.ready;
+      if (wantVideo) videoPlane = picked;
+      videoMix += ((wantVideo ? 1 : 0) - videoMix) * (p.still ? 1 : 1 - Math.exp(-dt * 9));
+      if (videoMix < 0.01 && !wantVideo) videoPlane = null;
+      for (const t of texes)
+        if (t.ready && t.shown < 1)
+          t.shown = p.still ? 1 : Math.min(1, t.shown + dt * 4);
+      for (const pl of planes) {
+        const a = pl.sw / pl.sh;
+        const ta = pl.tex.aspect;
+        gl.bindTexture(gl.TEXTURE_2D, pl.tex.tex);
+        gl.uniform3fv(U.uPos, pl.pos);
+        gl.uniform3fv(U.uRight, pl.right);
+        gl.uniform3fv(U.uUp, pl.up);
+        gl.uniform2f(U.uSize, pl.sw, pl.sh);
+        gl.uniform1f(
+          U.uReady,
+          pl.tex.shown * pl.tex.shown * (3 - 2 * pl.tex.shown)
+        );
+        gl.uniform2f(U.uCrop, ta > a ? a / ta : 1, ta > a ? 1 : ta / a);
+        gl.uniform1f(U.uAspect, a);
+        gl.uniform1f(U.uRadius, p.corner);
+        gl.uniform1f(
+          U.uAA,
+          1.5 / Math.max(4, (pl.px ?? 100) * dpr)
+        );
+        gl.uniform1f(U.uAlpha, pl.alpha);
+        gl.uniform1f(U.uFog, pl.fogv);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        if (pl.i === videoPlane && videoMix > 0.01 && live.ready) {
+          const va = live.aspect;
+          gl.bindTexture(gl.TEXTURE_2D, live.tex);
+          gl.uniform1f(U.uReady, 1);
+          gl.uniform2f(U.uCrop, va > a ? a / va : 1, va > a ? 1 : va / a);
+          gl.uniform1f(U.uAlpha, pl.alpha * videoMix);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+      }
+      void time;
+    };
+    frame(0, 16);
+    frameRef.current = frame;
+    return () => {
+      frameRef.current = null;
+      el.removeEventListener("webglcontextlost", onLost);
+      el.removeEventListener("webglcontextrestored", onRestored);
+      window.clearTimeout(release);
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+      if (!lost) {
+        texes.forEach((t) => gl.deleteTexture(t.tex));
+        gl.deleteTexture(live.tex);
+        gl.deleteProgram(prog);
+      }
+    };
+  }, [itemsKey, epoch]);
+  React.useEffect(() => {
+    if (!visible) return;
+    const tick = (t, d) => {
+      if (!document.hidden) frameRef.current?.(t, d);
+    };
+    gsap.ticker.add(tick);
+    return () => gsap.ticker.remove(tick);
+  }, [visible]);
+  const toLocal = (e) => {
+    const r = e.currentTarget.getBoundingClientRect();
+    return {
+      x: (e.clientX - r.left) / r.width * 2 - 1,
+      y: -((e.clientY - r.top) / r.height * 2 - 1)
+    };
+  };
+  const item = hovered === null ? null : items[hovered];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      role: "region",
+      "aria-roledescription": "gallery",
+      "aria-label": "Media gallery. Scroll, drag or use the arrow keys to travel.",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "ArrowDown" || e.key === "ArrowRight") push(1.2);
+        else if (e.key === "ArrowUp" || e.key === "ArrowLeft") push(-1.2);
+        else return;
+        e.preventDefault();
+      },
+      onPointerMove: (e) => {
+        const p = toLocal(e);
+        const ptr = pointer.current;
+        ptr.x = p.x;
+        ptr.y = p.y;
+        ptr.inside = true;
+        if (!ptr.down || !params.current.drag) return;
+        if (!ptr.dragging && Math.hypot(e.clientX - ptr.sx, e.clientY - ptr.sy) > THRESHOLD) {
+          ptr.dragging = true;
+          e.currentTarget.setPointerCapture(e.pointerId);
+          e.currentTarget.style.cursor = "grabbing";
+        }
+        if (ptr.dragging) {
+          const now = performance.now();
+          const dy = ptr.lastY - e.clientY;
+          const units = dy * 0.02;
+          motionState.current.T += units;
+          ptr.dragV = units / Math.max(8e-3, (now - ptr.lastAt) / 1e3) * 0.6;
+          ptr.lastY = e.clientY;
+          ptr.lastAt = now;
+          setMoved(true);
+        }
+      },
+      onPointerEnter: () => {
+        pointer.current.inside = true;
+      },
+      onPointerLeave: () => {
+        const ptr = pointer.current;
+        ptr.inside = false;
+        if (!ptr.dragging) ptr.down = false;
+      },
+      onPointerDown: (e) => {
+        const ptr = pointer.current;
+        ptr.down = true;
+        ptr.dragging = false;
+        ptr.sx = e.clientX;
+        ptr.sy = e.clientY;
+        ptr.lastY = e.clientY;
+        ptr.lastAt = performance.now();
+        ptr.dragV = 0;
+      },
+      onPointerUp: (e) => {
+        const ptr = pointer.current;
+        const wasDrag = ptr.dragging;
+        ptr.down = false;
+        ptr.dragging = false;
+        e.currentTarget.style.cursor = "";
+        if (wasDrag) {
+          if (!params.current.still)
+            motionState.current.V += Math.max(-12, Math.min(12, ptr.dragV));
+          return;
+        }
+        const i = pick.current;
+        const href = i === null ? void 0 : items[i]?.href;
+        if (href)
+          window.open(
+            href,
+            params.current.linkTarget,
+            params.current.linkTarget === "_blank" ? "noopener" : void 0
+          );
+      },
+      className: cn(
+        "relative isolate h-[560px] w-full touch-none select-none overflow-hidden outline-none focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvas,
+            "aria-hidden": true,
+            className: "absolute inset-0 -z-10 size-full"
+          }
+        ),
+        children,
+        caption && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-6 flex justify-center", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: item ? /* @__PURE__ */ jsxs(
+          motion.span,
+          {
+            initial: { opacity: 0, y: 8, filter: "blur(4px)" },
+            animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+            exit: { opacity: 0, y: -6, filter: "blur(4px)" },
+            transition: { duration: 0.3, ease: GLIDE },
+            className: "inline-flex h-9 items-center gap-2 rounded-full bg-white/85 px-4 text-[14px] font-medium text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.06),0_10px_24px_-14px_rgba(0,0,0,0.3)] ring-1 ring-black/5 backdrop-blur-md",
+            children: [
+              item.type === "video" && /* @__PURE__ */ jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-[#d64545]" }),
+              item.alt,
+              item.href && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[#242423]/45", children: "\u2197" })
+            ]
+          },
+          `item-${hovered}`
+        ) : !moved ? /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            initial: { opacity: 0, y: 8, filter: "blur(4px)" },
+            animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+            exit: { opacity: 0, y: -6, filter: "blur(4px)" },
+            transition: { duration: 0.3, ease: GLIDE },
+            className: "inline-flex h-9 items-center rounded-full bg-white/85 px-4 text-[14px] font-medium text-[#242423]/70 shadow-[0_1px_2px_rgba(0,0,0,0.06)] ring-1 ring-black/5 backdrop-blur-md",
+            children: "Scroll or drag to travel"
+          },
+          "hint"
+        ) : null }) }),
+        /* @__PURE__ */ jsx("ul", { className: "sr-only", children: items.map((it, i) => /* @__PURE__ */ jsx("li", { children: it.href ? /* @__PURE__ */ jsx("a", { href: it.href, children: it.alt }) : /* @__PURE__ */ jsx("span", { children: it.alt }) }, `${it.src}-${i}`)) })
+      ]
+    }
+  );
+});
+
+export {
+  SpatialGallery
+};