Building your world…
+
+
+
diff --git a/cinematics/scene.mjs b/cinematics/scene.mjs
new file mode 100644
index 0000000..c808c6a
--- /dev/null
+++ b/cinematics/scene.mjs
@@ -0,0 +1,633 @@
+import * as THREE from "three";
+
+const params = new URLSearchParams(location.search);
+const banner = params.get("mode") === "banner";
+const width = Number(params.get("width")) || (banner ? 1200 : 1280);
+const height = Number(params.get("height")) || (banner ? 480 : 720);
+const renderer = new THREE.WebGLRenderer({
+ antialias: true,
+ preserveDrawingBuffer: true,
+});
+renderer.setSize(width, height);
+renderer.setPixelRatio(1);
+renderer.outputColorSpace = THREE.SRGBColorSpace;
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingExposure = 1.35;
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+const scene = new THREE.Scene();
+scene.background = new THREE.Color("#0c211c");
+scene.fog = new THREE.FogExp2("#0c211c", 0.008);
+const camera = new THREE.PerspectiveCamera(38, width / height, 0.1, 350);
+scene.add(new THREE.HemisphereLight(0xc5e4d4, 0x263522, 2.1));
+const sun = new THREE.DirectionalLight(0xffd8a2, 4.2);
+sun.position.set(-24, 45, 22);
+sun.castShadow = true;
+sun.shadow.mapSize.set(2048, 2048);
+sun.shadow.camera.left = -42;
+sun.shadow.camera.right = 42;
+sun.shadow.camera.top = 42;
+sun.shadow.camera.bottom = -42;
+sun.shadow.normalBias = 0.08;
+scene.add(sun);
+const rim = new THREE.DirectionalLight(0x74d6d3, 2.5);
+rim.position.set(20, 8, -30);
+scene.add(rim);
+const world = new THREE.Group();
+scene.add(world);
+const palettes = {
+ rock: [0x4b655d, 0x546e62, 0x3c514c, 0x668177],
+ dirt: [0x66563c, 0x786548, 0x8a7150],
+ grass: [0x77a653, 0x90b962, 0x648f45, 0xa0bd6d],
+ sand: [0xceb98a, 0xe1cd9e, 0xb9ad80],
+ snow: [0xcddbd1, 0xe4eee1],
+ leaves: [0x3c7449, 0x4d925b, 0x79a456, 0x9fac61],
+ wood: [0x69513a, 0x84654a],
+ water: [0x3b9190, 0x56aeaa],
+};
+const instances = Object.fromEntries(
+ Object.keys(palettes).map((key) => [key, []]),
+);
+const hash = (x, z, salt = 0) => {
+ const n = Math.sin(x * 127.1 + z * 311.7 + salt * 74.7) * 43758.5453;
+ return n - Math.floor(n);
+};
+function block(kind, x, y, z, sx = 1, sy = 1, sz = 1, variation = 0) {
+ instances[kind].push({
+ x,
+ y,
+ z,
+ sx,
+ sy,
+ sz,
+ color:
+ palettes[kind][Math.floor(hash(x, z, variation) * palettes[kind].length)],
+ });
+}
+function groundHeight(x, z) {
+ const hill = Math.exp(-((x - 6) ** 2 + (z + 5) ** 2) / 49) * 10;
+ const hill2 = Math.exp(-((x + 8) ** 2 + (z - 5) ** 2) / 48) * 3;
+ return Math.floor(
+ 2 + hill + hill2 + Math.sin(x * 0.32) * 0.8 + Math.cos(z * 0.38) * 0.7,
+ );
+}
+for (let x = -23; x <= 23; x++) {
+ for (let z = -19; z <= 19; z++) {
+ const edge = (x / 23) ** 2 + (z / 19) ** 2;
+ if (edge > 0.92 + Math.sin(x * 0.7 + z * 0.3) * 0.07) continue;
+ const river = Math.abs(z - (Math.sin(x * 0.16) * 3 + 3)) < 1.7;
+ const h = river ? 1 : groundHeight(x, z);
+ const depth = Math.max(1, Math.floor((1 - edge) * 8 + hash(x, z) * 2));
+ block("rock", x, -depth / 2, z, 0.99, depth, 0.99);
+ block("dirt", x, h / 2, z, 1, h, 1);
+ const kind = river
+ ? "water"
+ : h > 9
+ ? "snow"
+ : edge > 0.73
+ ? "sand"
+ : "grass";
+ block(kind, x, h + 0.08, z, 1, 0.32, 1);
+ if (
+ !river &&
+ edge < 0.65 &&
+ h < 7 &&
+ hash(x, z, 7) > 0.958 &&
+ (x % 3 === 0 || z % 4 === 0)
+ ) {
+ const tall = 3 + Math.floor(hash(x, z, 9) * 2);
+ block("wood", x, h + tall / 2, z, 0.55, tall, 0.55);
+ block("leaves", x, h + tall, z, 2.8, 1.8, 2.8);
+ block("leaves", x, h + tall + 1.1, z, 1.65, 1.2, 1.65, 2);
+ }
+ if (edge > 0.7 && edge < 0.91 && hash(x, z, 12) > 0.94)
+ block("leaves", x, -depth + 0.2, z, 0.24, 2 + hash(x, z, 10) * 3, 0.24);
+ }
+}
+// A warm-lit expedition hut and an old stone arch make the terrain recognizable.
+const hutX = -8,
+ hutZ = -5,
+ hutY = groundHeight(hutX, hutZ) + 0.2;
+block("wood", hutX, hutY + 1.15, hutZ, 3.2, 2.4, 3);
+for (let i = 0; i < 3; i++)
+ block("rock", hutX, hutY + 2.5 + i * 0.4, hutZ, 4 - i, 0.5, 3.8);
+for (const x of [9, 13]) for (let y = 0; y < 5; y++) block("rock", x, 4 + y, 8);
+for (let x = 9; x <= 13; x++) block("rock", x, 9, 8);
+const box = new THREE.BoxGeometry(1, 1, 1);
+const dummy = new THREE.Object3D();
+for (const [kind, cells] of Object.entries(instances)) {
+ const material = new THREE.MeshStandardMaterial({
+ color: 0xffffff,
+ roughness: kind === "water" ? 0.24 : 0.92,
+ metalness: kind === "water" ? 0.25 : 0.02,
+ });
+ const mesh = new THREE.InstancedMesh(box, material, cells.length);
+ cells.forEach((b, i) => {
+ dummy.position.set(b.x, b.y, b.z);
+ dummy.scale.set(b.sx, b.sy, b.sz);
+ dummy.updateMatrix();
+ mesh.setMatrixAt(i, dummy.matrix);
+ mesh.setColorAt(i, new THREE.Color(b.color));
+ });
+ mesh.instanceMatrix.needsUpdate = true;
+ mesh.instanceColor.needsUpdate = true;
+ mesh.castShadow = kind !== "water";
+ mesh.receiveShadow = true;
+ world.add(mesh);
+}
+const windowLight = new THREE.Mesh(
+ new THREE.BoxGeometry(0.12, 0.7, 0.7),
+ new THREE.MeshBasicMaterial({ color: 0xffce77 }),
+);
+windowLight.position.set(hutX - 1.64, hutY + 1.25, hutZ);
+world.add(windowLight);
+
+// Thin cartographic rings float beneath the cutaway, like a world waiting to be found.
+const ringGroup = new THREE.Group();
+ringGroup.position.y = -8;
+for (const radius of [25, 29, 33]) {
+ const points = Array.from(
+ { length: 161 },
+ (_, i) =>
+ new THREE.Vector3(
+ Math.cos((i / 160) * Math.PI * 2) * radius,
+ 0,
+ Math.sin((i / 160) * Math.PI * 2) * radius,
+ ),
+ );
+ const line = new THREE.LineLoop(
+ new THREE.BufferGeometry().setFromPoints(points),
+ new THREE.LineBasicMaterial({
+ color: 0x759b7b,
+ transparent: true,
+ opacity: 0.25,
+ }),
+ );
+ ringGroup.add(line);
+}
+world.add(ringGroup);
+const sweepPoints = Array.from(
+ { length: 49 },
+ (_, i) =>
+ new THREE.Vector3(
+ Math.cos((i / 48) * 0.7) * 29,
+ 0.04,
+ Math.sin((i / 48) * 0.7) * 29,
+ ),
+);
+ringGroup.add(
+ new THREE.Line(
+ new THREE.BufferGeometry().setFromPoints(sweepPoints),
+ new THREE.LineBasicMaterial({
+ color: 0xd6bb76,
+ transparent: true,
+ opacity: 0.8,
+ }),
+ ),
+);
+
+function pin(color, x, z) {
+ const group = new THREE.Group();
+ const mat = new THREE.MeshStandardMaterial({
+ color,
+ emissive: color,
+ emissiveIntensity: 0.25,
+ metalness: 0.35,
+ roughness: 0.3,
+ });
+ const head = new THREE.Mesh(new THREE.OctahedronGeometry(1.4), mat);
+ head.position.y = 3;
+ const stem = new THREE.Mesh(new THREE.ConeGeometry(0.35, 2.2, 4), mat);
+ stem.rotation.z = Math.PI;
+ stem.position.y = 1.25;
+ group.add(head, stem);
+ const halo = new THREE.Mesh(
+ new THREE.TorusGeometry(2, 0.055, 6, 64),
+ new THREE.MeshBasicMaterial({ color, transparent: true, opacity: 0.75 }),
+ );
+ halo.rotation.x = -Math.PI / 2;
+ halo.position.y = 0.15;
+ group.add(halo);
+ group.position.set(x, groundHeight(x, z) + 0.5, z);
+ world.add(group);
+ return { group, halo, base: group.position.y };
+}
+const pins = [
+ pin(0xffcf70, 5, -5),
+ pin(0xa3e271, -12, 9),
+ pin(0xef7967, 12, 5),
+];
+const moteGeo = new THREE.BufferGeometry();
+const motePositions = [];
+for (let i = 0; i < 150; i++)
+ motePositions.push(
+ (hash(i, 4) - 0.5) * 130,
+ hash(i, 5) * 58 - 12,
+ (hash(i, 6) - 0.5) * 100,
+ );
+moteGeo.setAttribute(
+ "position",
+ new THREE.Float32BufferAttribute(motePositions, 3),
+);
+const motes = new THREE.Points(
+ moteGeo,
+ new THREE.PointsMaterial({
+ color: 0xdce8b9,
+ size: 0.13,
+ transparent: true,
+ opacity: 0.6,
+ }),
+);
+scene.add(motes);
+
+const canvas = document.createElement("canvas");
+canvas.width = width;
+canvas.height = height;
+document.body.prepend(canvas);
+const ctx = canvas.getContext("2d");
+await document.fonts.load("24px Pixel");
+await document.fonts.ready;
+const screenshots = banner
+ ? {}
+ : Object.fromEntries(
+ await Promise.all(
+ ["home", "catalog", "map", "game"].map(async (name) => {
+ const image = new Image();
+ image.src = `/shots/${name}.jpg`;
+ await image.decode();
+ return [name, image];
+ }),
+ ),
+ );
+const clamp = (n, a = 0, b = 1) => Math.max(a, Math.min(b, n));
+const smooth = (n) => {
+ const v = clamp(n);
+ return v * v * (3 - 2 * v);
+};
+function text(value, x, y, size, color = "#f0f2da", align = "left") {
+ ctx.font = `${size}px Pixel`;
+ ctx.textAlign = align;
+ ctx.fillStyle = color;
+ ctx.fillText(value, x, y);
+}
+function label(value, x, y, size = 12, color = "#9cb59e") {
+ ctx.font = `${size}px Arial`;
+ ctx.textAlign = "left";
+ ctx.fillStyle = color;
+ ctx.letterSpacing = "3px";
+ ctx.fillText(value, x, y);
+ ctx.letterSpacing = "0px";
+}
+function cross(x, y, size = 5) {
+ ctx.beginPath();
+ ctx.moveTo(x - size, y);
+ ctx.lineTo(x + size, y);
+ ctx.moveTo(x, y - size);
+ ctx.lineTo(x, y + size);
+ ctx.stroke();
+}
+function compass(x, y, radius, angle, opacity = 0.7) {
+ ctx.save();
+ ctx.translate(x, y);
+ ctx.globalAlpha *= opacity;
+ ctx.strokeStyle = "#b5c8a3";
+ ctx.lineWidth = 1;
+ ctx.beginPath();
+ ctx.arc(0, 0, radius, 0, Math.PI * 2);
+ ctx.stroke();
+ for (let i = 0; i < 48; i++) {
+ const a = (i / 48) * Math.PI * 2;
+ const inner = radius - (i % 12 === 0 ? 12 : i % 3 === 0 ? 7 : 3);
+ ctx.beginPath();
+ ctx.moveTo(Math.cos(a) * inner, Math.sin(a) * inner);
+ ctx.lineTo(Math.cos(a) * radius, Math.sin(a) * radius);
+ ctx.stroke();
+ }
+ ctx.rotate(angle);
+ ctx.fillStyle = "#dfb76e";
+ ctx.beginPath();
+ ctx.moveTo(0, -radius * 0.58);
+ ctx.lineTo(radius * 0.14, 0);
+ ctx.lineTo(0, radius * 0.12);
+ ctx.lineTo(-radius * 0.14, 0);
+ ctx.closePath();
+ ctx.fill();
+ ctx.fillStyle = "#526e60";
+ ctx.beginPath();
+ ctx.moveTo(0, radius * 0.58);
+ ctx.lineTo(radius * 0.14, 0);
+ ctx.lineTo(0, -radius * 0.12);
+ ctx.lineTo(-radius * 0.14, 0);
+ ctx.closePath();
+ ctx.fill();
+ ctx.restore();
+}
+function overlay(t) {
+ ctx.clearRect(0, 0, width, height);
+ ctx.drawImage(renderer.domElement, 0, 0);
+ const scale = width / (banner ? 1200 : 1280);
+ ctx.save();
+ ctx.scale(scale, scale);
+ const w = width / scale,
+ h = height / scale;
+ const gradient = ctx.createLinearGradient(0, 0, w, 0);
+ gradient.addColorStop(0, "rgba(5,16,12,.95)");
+ gradient.addColorStop(0.38, "rgba(5,16,12,.78)");
+ gradient.addColorStop(0.75, "rgba(5,16,12,0)");
+ ctx.fillStyle = gradient;
+ ctx.fillRect(0, 0, w, h);
+ const vignette = ctx.createRadialGradient(
+ w * 0.6,
+ h * 0.42,
+ h * 0.2,
+ w * 0.5,
+ h * 0.5,
+ w * 0.7,
+ );
+ vignette.addColorStop(0, "rgba(3,12,9,0)");
+ vignette.addColorStop(1, "rgba(3,12,9,.7)");
+ ctx.fillStyle = vignette;
+ ctx.fillRect(0, 0, w, h);
+ ctx.strokeStyle = "rgba(161,193,151,.25)";
+ ctx.lineWidth = 1;
+ cross(32, 32);
+ cross(w - 32, 32);
+ cross(32, h - 32);
+ cross(w - 32, h - 32);
+ if (banner) {
+ label("A MINECRAFT GUESSING GAME", 62, 118, 13);
+ text("MINE", 58, 231, 78);
+ text("GEO", 297, 231, 78, "#b3dd85");
+ text("GET LOST. FIND YOUR WORLD.", 62, 280, 16, "#c4d1b5");
+ ctx.fillStyle = "#b6d790";
+ ctx.fillRect(62, 326, 28, 2);
+ label("MINEGEO.SITE", 105, 333, 13, "#b6d790");
+ compass(w - 70, 72, 28, -0.5 + Math.sin((t * Math.PI * 2) / 3) * 0.1);
+ label("N", w - 75, 30, 10, "#dfb76e");
+ } else {
+ const scenes = [
+ {
+ start: 0,
+ end: 4,
+ kicker: "SOMEWHERE IN THE OVERWORLD",
+ lines: ["EVERY WORLD", "HAS A PLACE."],
+ sub: "But can you find yours?",
+ size: 62,
+ },
+ {
+ start: 4,
+ end: 9,
+ kicker: "01 / EXPLORE",
+ lines: ["YOUR EXPEDITION STARTS HERE."],
+ sub: "The real MineGeo website. A new way to see Minecraft.",
+ image: "home",
+ size: 62,
+ },
+ {
+ start: 9,
+ end: 14,
+ kicker: "02 / DISCOVER",
+ lines: ["PICK YOUR WORLD."],
+ sub: "Browse published maps from the community.",
+ image: "catalog",
+ size: 68,
+ },
+ {
+ start: 14,
+ end: 19,
+ kicker: "03 / MAKE YOUR GUESS",
+ lines: ["LOOK. GUESS. DISCOVER."],
+ sub: "Real in-game capture. Look around, then place your pin.",
+ image: "game",
+ size: 62,
+ },
+ {
+ start: 19,
+ end: 24,
+ kicker: "04 / GO FURTHER",
+ lines: ["MAKE IT YOUR EXPEDITION."],
+ sub: "Choose your map, difficulty, and game mode.",
+ image: "map",
+ size: 62,
+ },
+ {
+ start: 24,
+ end: 30,
+ kicker: "YOUR NEXT ADVENTURE STARTS HERE",
+ lines: ["MINEGEO"],
+ sub: "Get lost in a familiar world.",
+ size: 82,
+ },
+ ];
+ const shot = scenes.find((s) => t >= s.start && t < s.end) || scenes.at(-1);
+ const local = t - shot.start;
+ const alpha =
+ smooth(local / 0.55) *
+ (shot.end === 30 ? 1 : 1 - smooth((t - (shot.end - 0.5)) / 0.5));
+ ctx.save();
+ ctx.globalAlpha = alpha;
+ const rise = (1 - smooth(local / 0.8)) * 16;
+ if (shot.image) {
+ label(shot.kicker, 65, 58, 11, "#b0cb92");
+ text(shot.lines[0], 62, 104 + rise, 30, "#e4edcf");
+ ctx.font = "14px Arial";
+ ctx.fillStyle = "#b9cbb4";
+ ctx.fillText(shot.sub, 65, 128 + rise);
+ const image = screenshots[shot.image];
+ const panelWidth = 950,
+ cropHeight = image.naturalHeight * 0.93;
+ const imageHeight = (cropHeight / image.naturalWidth) * panelWidth;
+ const x = (w - panelWidth) / 2,
+ y = 164 + (1 - smooth(local / 0.8)) * 18;
+ const grow = 0.98 + smooth(local / 5) * 0.02;
+ ctx.translate(w / 2, y + imageHeight / 2);
+ ctx.scale(grow, grow);
+ ctx.translate(-w / 2, -y - imageHeight / 2);
+ ctx.shadowColor = "rgba(0,0,0,.8)";
+ ctx.shadowBlur = 36;
+ ctx.shadowOffsetY = 12;
+ ctx.fillStyle = "#14241e";
+ ctx.beginPath();
+ ctx.roundRect(x - 1, y - 25, panelWidth + 2, imageHeight + 26, 9);
+ ctx.fill();
+ ctx.shadowBlur = 0;
+ ctx.shadowOffsetY = 0;
+ ctx.strokeStyle = "#658366";
+ ctx.stroke();
+ for (let i = 0; i < 3; i++) {
+ ctx.fillStyle = ["#ad7966", "#bda169", "#83a374"][i];
+ ctx.beginPath();
+ ctx.arc(x + 15 + i * 12, y - 12, 3, 0, Math.PI * 2);
+ ctx.fill();
+ }
+ label(
+ `MINEGEO.SITE / ${shot.image === "game" ? "PLAY" : shot.image === "home" ? "HOME" : "WORLDS"}`,
+ x + 74,
+ y - 8,
+ 8,
+ "#b6c5af",
+ );
+ ctx.save();
+ ctx.beginPath();
+ ctx.rect(x, y, panelWidth, imageHeight);
+ ctx.clip();
+ const zoom = 1 + local * 0.004;
+ ctx.drawImage(
+ image,
+ 0,
+ 0,
+ image.naturalWidth,
+ cropHeight,
+ x - (panelWidth * (zoom - 1)) / 2,
+ y - (imageHeight * (zoom - 1)) / 2,
+ panelWidth * zoom,
+ imageHeight * zoom,
+ );
+ ctx.restore();
+ } else {
+ label(shot.kicker, 64, 225 + rise, 12, "#b0cb92");
+ shot.lines.forEach((line, i) =>
+ text(
+ line,
+ 60,
+ 320 + i * 76 + rise,
+ shot.size,
+ i === shot.lines.length - 1 ? "#b3dd85" : "#f0f2da",
+ ),
+ );
+ const subY = shot.lines.length === 1 ? 390 : 444;
+ ctx.font = "18px Arial";
+ ctx.textAlign = "left";
+ ctx.fillStyle = "#becdb9";
+ ctx.fillText(shot.sub, 65, subY + rise);
+ if (shot.start === 24) {
+ ctx.strokeStyle = "#87a768";
+ ctx.strokeRect(65, 432, 260, 54);
+ text("MINEGEO.SITE", 88, 467, 20, "#d7e7c1");
+ label("FREE TO EXPLORE", 65, 528, 10);
+ }
+ }
+ ctx.restore();
+ if (!shot.image) label("MINEGEO / FIELD NOTES", 65, 65, 11);
+ label(
+ `${String(Math.floor(t)).padStart(2, "0")} : ${String(Math.floor((t % 1) * 24)).padStart(2, "0")} / 30`,
+ w - 245,
+ shot.image ? h - 9 : h - 49,
+ 10,
+ );
+ text("N", w - 92, 62, 12, "#dbc18c");
+ compass(w - 88, 115, 34, -t * 0.08);
+ ctx.strokeStyle = "rgba(168,195,147,.22)";
+ ctx.beginPath();
+ ctx.moveTo(65, h - (shot.image ? 27 : 72));
+ ctx.lineTo(w - 65, h - (shot.image ? 27 : 72));
+ ctx.stroke();
+ ctx.strokeStyle = "#afce83";
+ ctx.beginPath();
+ ctx.moveTo(65, h - (shot.image ? 27 : 72));
+ ctx.lineTo(65 + ((w - 130) * t) / 30, h - (shot.image ? 27 : 72));
+ ctx.stroke();
+ if (!shot.image && t > 14 && t < 19) {
+ const a = smooth((t - 14) / 0.5) * (1 - smooth((t - 18.5) / 0.5));
+ ctx.globalAlpha = a;
+ label("PIN PLACED", w - 250, h - 120, 12, "#f0d19b");
+ ctx.globalAlpha = 1;
+ }
+ // Very short dark dissolves separate the six camera moves.
+ const cut = [4, 9, 14, 19, 24].reduce(
+ (a, c) => Math.max(a, 1 - Math.abs(t - c) / 0.2),
+ 0,
+ );
+ const fadeIn = 1 - smooth(t / 0.7),
+ fadeOut = smooth((t - 29.3) / 0.7);
+ ctx.fillStyle = `rgba(5,14,10,${Math.max(cut, fadeIn, fadeOut)})`;
+ ctx.fillRect(0, 0, w, h);
+ }
+ ctx.restore();
+}
+function renderAt(t) {
+ const loop = (t / 3) * Math.PI * 2;
+ let azimuth, distance, elevation, lookY;
+ if (banner) {
+ azimuth = 0.64 + Math.sin(loop) * 0.035;
+ distance = 89 + Math.cos(loop) * 1.1;
+ elevation = 40;
+ lookY = 0;
+ } else if (t < 4) {
+ const u = smooth(t / 4);
+ azimuth = 0.55 + u * 0.2;
+ distance = 99 - u * 13;
+ elevation = 48 - u * 5;
+ lookY = 0;
+ } else if (t < 9) {
+ const u = (t - 4) / 5;
+ azimuth = 0.45 + u * 0.6;
+ distance = 82 - u * 5;
+ elevation = 35;
+ lookY = 2;
+ } else if (t < 14) {
+ const u = (t - 9) / 5;
+ azimuth = 1.8 + u * 0.45;
+ distance = 64 + u * 4;
+ elevation = 26;
+ lookY = 3;
+ } else if (t < 19) {
+ const u = (t - 14) / 5;
+ azimuth = 0.6 + u * 0.35;
+ distance = 67;
+ elevation = 70 - u * 10;
+ lookY = 0;
+ } else if (t < 24) {
+ const u = (t - 19) / 5;
+ azimuth = 2.9 + u * 0.55;
+ distance = 83;
+ elevation = 35 + u * 7;
+ lookY = 0;
+ } else {
+ const u = (t - 24) / 6;
+ azimuth = 0.68 + u * 0.12;
+ distance = 93 - u * 4;
+ elevation = 44;
+ lookY = 0;
+ }
+ camera.position.set(
+ Math.sin(azimuth) * distance,
+ elevation,
+ Math.cos(azimuth) * distance,
+ );
+ camera.lookAt(0, lookY, 0);
+ // Move the landscape to the right to leave genuinely quiet space for titles.
+ camera.setViewOffset(
+ width,
+ height,
+ -width * (banner ? 0.21 : 0.16),
+ 0,
+ width,
+ height,
+ );
+ world.position.y = Math.sin(banner ? loop : t * 0.5) * 0.2;
+ pins.forEach((p, i) => {
+ p.group.position.y =
+ p.base + Math.sin((banner ? loop : t * 1.6) + i * 2) * 0.24;
+ p.group.rotation.y = (banner ? loop : t * 0.4) + i;
+ p.halo.scale.setScalar(1 + Math.sin((banner ? loop : t * 2) + i) * 0.08);
+ p.group.visible = banner ? i === 0 : t > 13.8 + i * 2;
+ });
+ motes.rotation.y = banner ? Math.sin(loop) * 0.005 : t * 0.005;
+ ringGroup.rotation.y = banner ? loop : t * 0.25;
+ renderer.render(scene, camera);
+ overlay(t);
+}
+window.renderCinematic = renderAt;
+window.cinematicCanvas = canvas;
+document.querySelector("#status").remove();
+renderAt(Number(params.get("time")) || 0);
+window.cinematicReady = true;
+if (!params.has("still")) {
+ const start = performance.now();
+ function loopFrame(now) {
+ renderAt(((now - start) / 1000) % (banner ? 3 : 30));
+ requestAnimationFrame(loopFrame);
+ }
+ requestAnimationFrame(loopFrame);
+}
diff --git a/cinematics/screenshots/catalog.jpg b/cinematics/screenshots/catalog.jpg
new file mode 100644
index 0000000..79636bc
Binary files /dev/null and b/cinematics/screenshots/catalog.jpg differ
diff --git a/cinematics/screenshots/game.jpg b/cinematics/screenshots/game.jpg
new file mode 100644
index 0000000..a988635
Binary files /dev/null and b/cinematics/screenshots/game.jpg differ
diff --git a/cinematics/screenshots/home.jpg b/cinematics/screenshots/home.jpg
new file mode 100644
index 0000000..abe305c
Binary files /dev/null and b/cinematics/screenshots/home.jpg differ
diff --git a/cinematics/screenshots/map.jpg b/cinematics/screenshots/map.jpg
new file mode 100644
index 0000000..3a9b0a3
Binary files /dev/null and b/cinematics/screenshots/map.jpg differ
diff --git a/components/FirstVisitIntro.tsx b/components/FirstVisitIntro.tsx
new file mode 100644
index 0000000..21e34f9
--- /dev/null
+++ b/components/FirstVisitIntro.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { useEffect, useId, useRef } from "react";
+import { Compass, MapPin } from "lucide-react";
+import { useI18n } from "./I18nProvider";
+
+const storageKey = "minegeo:intro:v1";
+let seenThisSession = false;
+
+/** Home-only, decorative welcome. The underlying page always renders normally. */
+export function FirstVisitIntro() {
+ const { t } = useI18n();
+ const titleId = useId();
+ const dialog = useRef
+
+
+
+
+ {t("THE EXPEDITION AWAITS")}
+
+
+
+ {t("30-second cinematic teaser")}
+
+ {t("A world worth getting lost in.")}
+
+
+ + {t( + "A tour of the real MineGeo homepage, community maps, map setup, and in-game panorama, blended with animated voxel landscapes. Ambient music; no spoken dialogue.", + )} +
+ + {t("Download the trailer")} + +