Improve MineGeo UI and application flows

scripts/render-cinematics.mjs

@@ -18,6 +18,8 @@ await mkdir(work, { recursive: true });
 const routes = new Map([
   ["/", "cinematics/index.html"],
   ["/cinematics/scene.mjs", "cinematics/scene.mjs"],
+  ["/cinematics/composition.mjs", "cinematics/composition.mjs"],
+  ["/cinematics/motion.mjs", "cinematics/motion.mjs"],
   ["/three/three.module.js", "node_modules/three/build/three.module.js"],
   ["/three/three.core.js", "node_modules/three/build/three.core.js"],
   ["/fonts/Monocraft.ttf", "public/fonts/Monocraft.ttf"],
@@ -134,7 +136,7 @@ if (previewOnly) {
           "-vcodec",
           "png",
           "-framerate",
-          "24",
+          "30",
           "-i",
           "pipe:0",
           "-i",
@@ -168,14 +170,17 @@ if (previewOnly) {
         encoderError = e;
       });
       const done = once(ffmpeg, "close");
-      for (let frame = 0; frame < 720; frame++) {
+      for (let frame = 0; frame < 900; frame++) {
         if (encoderError) throw encoderError;
-        await page.evaluate((t) => window.renderCinematic(t), frame / 24);
-        const png = await page.screenshot({ type: "png" });
+        const encoded = await page.evaluate((t) => {
+          window.renderCinematic(t);
+          return window.cinematicCanvas.toDataURL("image/png").split(",")[1];
+        }, frame / 30);
+        const png = Buffer.from(encoded, "base64");
         if (!ffmpeg.stdin.write(png)) await once(ffmpeg.stdin, "drain");
-        if (frame % 48 === 0)
+        if (frame % 60 === 0)
           console.log(
-            `Trailer: ${frame}/720 frames (${Math.round((frame / 720) * 100)}%)`,
+            `Trailer: ${frame}/900 frames (${Math.round((frame / 900) * 100)}%)`,
           );
       }
       ffmpeg.stdin.end();
@@ -251,7 +256,7 @@ function createSoundtrack() {
       Math.sin(2 * Math.PI * 55 * beat - 7 * Math.exp(-beat * 25)) *
       Math.exp(-beat * 12) *
       0.045;
-    const swell = [4, 9, 14, 19, 24].reduce(
+    const swell = [3, 8, 13, 18, 23].reduce(
       (n, c) => n + Math.exp(-(((t - c) / 0.45) ** 2)),
       0,
     );
@@ -276,28 +281,28 @@ function createSoundtrack() {
 function createCaptions() {
   return `WEBVTT
 
-00:00.000 --> 00:04.000
+00:00.000 --> 00:03.000
 [Ambient electronic music. A floating voxel island emerges.]
-Every world has a place. But can you find yours?
+Get lost. Find your world.
 
-00:04.000 --> 00:09.000
+00:03.000 --> 00:08.000
 [Screenshot of the real MineGeo homepage.]
-Your expedition starts here. A new way to see Minecraft.
+Your expedition starts here. A Minecraft guessing game. A new way to explore.
 
-00:09.000 --> 00:14.000
+00:08.000 --> 00:13.000
 [Screenshot of the community map catalog.]
 Pick your world. Browse published maps from the community.
 
-00:14.000 --> 00:19.000
+00:13.000 --> 00:18.000
 [Real in-game panorama with a pin selected on the map.]
 Look. Guess. Discover. Look around, then place your pin.
 
-00:19.000 --> 00:24.000
+00:18.000 --> 00:23.000
 [Screenshot of map details and difficulty options.]
 Make it your expedition. Choose your map, difficulty, and game mode.
 
-00:24.000 --> 00:30.000
-MineGeo. Get lost in a familiar world.
+00:23.000 --> 00:30.000
+MineGeo. Get lost. Find your world.
 Your next adventure starts at minegeo.site.
 `;
 }