Improve MineGeo UI and application flows

cinematics/motion.mjs

@@ -0,0 +1,72 @@
+// Animate skill's canonical curves, shared by the deterministic media timeline.
+export const clamp01 = (value) => Math.max(0, Math.min(1, value));
+export function cubicBezier(x1, y1, x2, y2) {
+  const sample = (t, a, b) =>
+    3 * (1 - t) ** 2 * t * a + 3 * (1 - t) * t * t * b + t ** 3;
+  return (value) => {
+    const x = clamp01(value);
+    if (x === 0 || x === 1) return x;
+    let lo = 0,
+      hi = 1;
+    for (let step = 0; step < 24; step++) {
+      const t = (lo + hi) / 2;
+      if (sample(t, x1, x2) < x) lo = t;
+      else hi = t;
+    }
+    return sample((lo + hi) / 2, y1, y2);
+  };
+}
+export const easeOut = cubicBezier(0.23, 1, 0.32, 1);
+export const easeInOut = cubicBezier(0.77, 0, 0.175, 1);
+export const enter = (time, start, duration = 0.25) =>
+  easeOut((time - start) / duration);
+export const visibility = (time, start, end, duration = 0.25) =>
+  enter(time, start, duration) * (1 - enter(time, end - duration, duration));
+export const shots = [
+  {
+    start: 0,
+    end: 3,
+    title: "GET LOST.",
+    subtitle: "Find a familiar world from a different perspective.",
+    chapter: "THE OVERWORLD IS CALLING",
+  },
+  {
+    start: 3,
+    end: 8,
+    title: "YOUR NEXT EXPEDITION.",
+    subtitle: "A Minecraft guessing game. A new way to explore.",
+    chapter: "01 / DISCOVER MINEGEO",
+    image: "home",
+  },
+  {
+    start: 8,
+    end: 13,
+    title: "PICK YOUR WORLD.",
+    subtitle: "Explore maps made by the community.",
+    chapter: "02 / CHOOSE A MAP",
+    image: "catalog",
+  },
+  {
+    start: 13,
+    end: 18,
+    title: "LOOK. GUESS. DISCOVER.",
+    subtitle: "Read the landscape. Place your pin.",
+    chapter: "03 / REAL GAMEPLAY",
+    image: "game",
+  },
+  {
+    start: 18,
+    end: 23,
+    title: "PLAY YOUR WAY.",
+    subtitle: "Your map. Your difficulty. Solo or together.",
+    chapter: "04 / MAKE IT YOURS",
+    image: "map",
+  },
+  {
+    start: 23,
+    end: 30,
+    title: "MINEGEO",
+    subtitle: "Get lost. Find your world.",
+    chapter: "YOUR NEXT ADVENTURE STARTS HERE",
+  },
+];